/* ===========================================================================
   FitG — App-Oberfläche
   ---------------------------------------------------------------------------
   Nachbau der echten App. Alle Farben sind unter `.fitg` gekapselt: warmes
   Anthrazit mit Orange als Akzent, Grün für Erledigtes, Rot für Verfehltes.

   Rahmen und Schaufenster liegen in apps.css.
   =========================================================================== */

/* Der Verlauf über der Tab-Leiste (apps.css) braucht die Hintergrundfarbe
   der App — deshalb steht sie am Bildschirm, nicht erst an `.fitg`. */
.phone__screen[data-screen='fitg'] {
  --screen-fade: #232220;
}

.fitg {
  /* Die Farben der App (index.css): warmes Dunkelgrau statt Schwarz, Terracotta als Akzent */
  --f-bg: #232220;
  --f-surface: #302f2c;
  --f-surface-2: #38362f;
  --f-line: #4a463f;
  --f-line-soft: rgba(74, 70, 63, 0.6);
  --f-orange: #e08a5f;
  --f-orange-soft: rgba(224, 138, 95, 0.16);
  --f-green: #7fae7f;
  --f-green-soft: rgba(127, 174, 127, 0.14);
  --f-red: #b5595a;
  --f-red-soft: rgba(181, 89, 90, 0.16);
  --f-amber: #c9a24b;
  --f-text: #faf8f3;
  --f-text-2: #d6d1c6;
  --f-text-3: #9a948a;
  --f-on-orange: #241611;

  --f-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;

  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  background: radial-gradient(120% 60% at 50% -10%, #2c2a26 0%, var(--f-bg) 55%);
  color: var(--f-text);
  font-family: var(--f-sans);
  font-size: 13px;
  line-height: 1.45;
  /* Auf schmalen Geräten ist der Bildschirm nur noch gut 250 px breit. Dann
     darf ein langes Wort umbrechen statt aus seiner Kachel und damit aus dem
     Telefonrahmen zu laufen. */
  overflow-wrap: break-word;
}

/* :where() trägt keine Spezifität bei — sonst schlüge dieser Reset jede
   Komponentenregel und nähme den Kacheln ihren Hintergrund. */
:where(.fitg button) {
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

.fitg :focus-visible {
  outline: 2px solid var(--f-orange);
  outline-offset: 2px;
}

/* --- Scrollbereich -------------------------------------------------------- */
.f-body {
  flex: 1;
  min-height: 0;
  padding: 14px 16px 82px;
  overflow-y: auto;
  /* Waagerecht wird nur beschnitten, nicht gescrollt: sonst schiebt eine
     Wischbewegung die App seitlich unter das Gehäuse. */
  overflow-x: clip;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
}

.f-body::-webkit-scrollbar {
  width: 4px;
}

.f-body::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.14);
}

.f-view {
  display: grid;
  /* `minmax(0, 1fr)` statt der Vorgabe `auto`: eine auto-Spalte wird nie
     schmaler als der breiteste unteilbare Inhalt. Auf schmalen Geräten wuchs
     die Spalte dadurch über den Bildschirm hinaus und die Kacheln schoben
     sich unter das Gehäuse. */
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  animation: fIn 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes fIn {
  from { opacity: 0; transform: translateY(8px); }
}

/* --- Kopfzeile Übersicht --------------------------------------------------
   Name links, Chips rechts. Die Zeile war 15 px zu breit für den Bildschirm,
   auch im vollen Rahmen — der Zahnrad-Knopf klebte deshalb an der Innenkante.
   Die Chips sitzen jetzt etwas enger; passt es trotzdem nicht (langer Name,
   schmales Gerät), rutschen sie in eine zweite Zeile statt aus dem Rahmen. */
.f-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.f-hello {
  font-size: 12.5px;
  color: var(--f-text-2);
}

.f-name {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.f-top__chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.f-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border: 1px solid var(--f-line);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--f-text-2);
}

.f-chip--joker {
  border-color: rgba(224, 138, 90, 0.4);
  color: var(--f-orange);
}

.f-chip--joker b {
  color: var(--f-text);
}

.f-chip--streak {
  border-color: transparent;
  background: var(--f-orange);
  color: var(--f-on-orange);
  font-weight: 700;
}

.f-icon-btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--f-line);
  border-radius: 50%;
  color: var(--f-text-2);
}

/* --- Aktionszeile --------------------------------------------------------- */
.f-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.f-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border: 1px solid var(--f-line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--f-text-2);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.f-pill:hover {
  border-color: var(--f-line);
  color: var(--f-text);
}

.f-pill--donate {
  color: var(--f-red);
}

.f-pill__plus {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(224, 138, 90, 0.45);
  border-radius: 50%;
  color: var(--f-orange);
}

/* --- Info-Streifen -------------------------------------------------------- */
.f-strip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 15px;
  border: 1px solid var(--f-line-soft);
  border-radius: 15px;
  font-size: 13px;
  color: var(--f-text-2);
}

.f-strip b {
  color: var(--f-text);
  font-weight: 600;
}

.f-quote {
  padding: 16px;
  border: 1px solid var(--f-line-soft);
  border-radius: 15px;
  font-size: 13.5px;
  font-style: italic;
  font-weight: 600;
  text-align: center;
  color: var(--f-text);
}

.f-warn {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 15px;
  border: 1px solid rgba(224, 138, 90, 0.35);
  border-radius: 15px;
  font-size: 13px;
  color: var(--f-text-2);
}

.f-warn b {
  color: var(--f-orange);
}

/* --- Tagesfortschritt ----------------------------------------------------- */
.f-progress {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--f-line-soft);
  border-radius: 18px;
  background: var(--f-surface);
}

.f-ring {
  position: relative;
  flex-shrink: 0;
  width: 78px;
  height: 78px;
}

.f-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.f-ring__track {
  fill: none;
  stroke: #1a1917;
  stroke-width: 8;
}

.f-ring__fill {
  fill: none;
  stroke: var(--f-green);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.f-ring__label {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
}

.f-ring__num {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.f-ring__of {
  margin-top: 2px;
  font-size: 11px;
  color: var(--f-text-2);
}

.f-progress__body {
  min-width: 0;
}

.f-progress__label {
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--f-text-2);
}

.f-progress__head {
  margin-top: 3px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.f-progress__note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--f-red);
}

.f-progress__note.is-safe {
  color: var(--f-green);
}

/* --- Habit-Zeilen --------------------------------------------------------- */
.f-section-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 4px;
  font-size: 14.5px;
  font-weight: 600;
}

.f-badge {
  display: grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--f-orange-soft);
  font-size: 11.5px;
  color: var(--f-orange);
}

.f-habit {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--f-line-soft);
  border-radius: 16px;
  background: var(--f-surface);
  text-align: left;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.f-habit.is-done {
  border-color: rgba(127, 185, 138, 0.4);
  background: var(--f-green-soft);
}

.f-habit__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 13px;
}

.f-habit__body {
  display: grid;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.f-habit__name {
  font-size: 15px;
  font-weight: 600;
  transition: color 0.25s ease;
}

.f-habit.is-done .f-habit__name {
  color: var(--f-text-2);
  text-decoration: line-through;
}

.f-habit__meta {
  font-size: 12px;
  color: var(--f-text-2);
}

.f-habit__tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  color: var(--f-text-3);
}

.f-check {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1.5px solid var(--f-text-3);
  border-radius: 50%;
  color: transparent;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.f-habit.is-done .f-check {
  border-color: transparent;
  background: var(--f-green);
  color: #10240f;
}

.f-streak-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--f-red-soft);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--f-orange);
}

.f-tag {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 10.5px;
  color: var(--f-text-2);
}

/* --- Kalenderstreifen (Übersicht) ---------------------------------------- */
.f-card {
  padding: 15px;
  border: 1px solid var(--f-line-soft);
  border-radius: 18px;
  background: var(--f-surface);
}

.f-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
}

.f-card__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 400;
  color: var(--f-text-2);
}

.f-timeline {
  display: grid;
  gap: 11px;
  margin-top: 13px;
  padding-left: 4px;
}

.f-tl-row {
  display: grid;
  grid-template-columns: 10px 74px 1fr;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}

.f-tl-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.f-tl-time {
  color: var(--f-text-2);
  font-variant-numeric: tabular-nums;
}

.f-tl-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Habits-Seite --------------------------------------------------------- */
.f-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.f-page-title {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.f-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border: 1px solid var(--f-line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--f-text-2);
}

.f-btn--solid {
  border-color: transparent;
  background: var(--f-orange);
  color: var(--f-on-orange);
  font-weight: 700;
}

.f-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  border: 1px solid var(--f-line);
  border-radius: 15px;
  color: var(--f-text-3);
}

.f-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  color: var(--f-text);
  font-family: inherit;
  font-size: 13px;
  outline: none;
}

.f-search input::placeholder {
  color: var(--f-text-3);
}

.f-seg {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  padding: 4px;
  border: 1px solid var(--f-line);
  border-radius: 14px;
}

.f-seg button {
  padding: 8px 4px;
  border-radius: 11px;
  font-size: 12.5px;
  color: var(--f-text-2);
  transition: background 0.22s ease, color 0.22s ease;
}

.f-seg button.is-on {
  background: #1a1917;
  color: var(--f-text);
  font-weight: 600;
}

.f-group {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 6px;
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--f-text-2);
}

.f-group__count {
  color: var(--f-text-3);
}

.f-group__add {
  margin-left: auto;
  color: var(--f-text-3);
}

/* --- Kalenderseite -------------------------------------------------------- */
.f-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.f-wday {
  display: grid;
  place-items: center;
  gap: 3px;
  padding: 9px 2px;
  border: 1px solid var(--f-line-soft);
  border-radius: 13px;
  font-size: 11.5px;
  color: var(--f-text-2);
  transition: border-color 0.22s ease, color 0.22s ease;
}

.f-wday b {
  font-size: 16px;
  font-weight: 700;
  color: var(--f-text);
}

.f-wday.is-today {
  border-color: var(--f-orange);
  color: var(--f-orange);
}

.f-wday.is-today b {
  color: var(--f-orange);
}

.f-wday.is-future {
  color: var(--f-text-3);
}

.f-wday.is-future b {
  color: var(--f-text-3);
}

.f-wday i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--f-green);
}

.f-wday.is-future i {
  background: var(--f-text-3);
  opacity: 0.5;
}

.f-track {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 12px;
  margin: 4px 6px 0;
}

.f-track::before {
  content: '';
  position: absolute;
  left: 3px;
  right: 3px;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
}

.f-track__done {
  position: absolute;
  left: 3px;
  height: 2px;
  background: var(--f-green);
}

.f-track i {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}

.f-track i.is-on {
  background: var(--f-green);
}

.f-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.f-stat {
  padding: 13px;
  border: 1px solid var(--f-line-soft);
  border-radius: 15px;
  background: var(--f-surface);
}

.f-stat__value {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 20px;
  font-weight: 700;
}

.f-stat__label {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--f-text-2);
}

/* Aktivitätsraster der letzten Wochen */
.f-heat {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 1fr);
  gap: 3px;
  margin-top: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.f-heat i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.045);
}

.f-heat i.lv1 { background: var(--f-red); }
.f-heat i.lv2 { background: var(--f-amber); }
.f-heat i.lv3 { background: var(--f-green); }

.f-heat-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--f-text-3);
}

.f-heat-legend i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

/* --- Saldo ---------------------------------------------------------------- */
.f-sub {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--f-text-2);
}

.f-money {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 9px;
}

.f-money__card {
  padding: 14px;
  border: 1px solid;
  border-radius: 16px;
}

.f-money__card--save {
  border-color: rgba(127, 185, 138, 0.4);
  background: var(--f-green-soft);
}

.f-money__card--give {
  border-color: rgba(212, 117, 110, 0.4);
  background: var(--f-red-soft);
}

.f-money__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.f-money__card--save .f-money__label { color: var(--f-green); }
.f-money__card--give .f-money__label { color: var(--f-red); }

.f-money__value {
  margin-top: 5px;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.f-money__card--save .f-money__value { color: var(--f-green); }
.f-money__card--give .f-money__value { color: var(--f-red); }

.f-money__note {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--f-text-2);
}

.f-summary {
  display: flex;
  gap: 14px;
  font-size: 12.5px;
  color: var(--f-text-2);
}

.f-summary b {
  color: var(--f-red);
  font-weight: 400;
}

.f-row-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.f-row-btns .f-btn {
  flex: 1;
  justify-content: center;
  white-space: nowrap;
}

.f-tool {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid var(--f-line-soft);
  border-radius: 14px;
}

.f-tool__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--f-orange-soft);
  color: var(--f-orange);
}

.f-tool__body {
  flex: 1;
  min-width: 0;
}

.f-tool__title {
  display: flex;
  align-items: center;
  /* Titel und Zähler nebeneinander brauchen mehr als die Kachel breit ist —
     der Zähler rutscht deshalb notfalls unter den Titel. */
  flex-wrap: wrap;
  gap: 3px 8px;
  font-size: 14px;
  font-weight: 600;
}

.f-tool__count {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--f-orange-soft);
  font-size: 11px;
  font-weight: 600;
  color: var(--f-orange);
}

.f-tool__desc {
  font-size: 12px;
  color: var(--f-text-2);
}

.f-tool__link {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--f-orange);
}

.f-buy {
  margin-top: 9px;
  padding: 13px;
  border: 1px solid var(--f-line-soft);
  border-radius: 14px;
}

.f-buy__title {
  font-size: 14px;
  font-weight: 600;
}

.f-buy__text {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--f-text-2);
}

.f-buy__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 8px;
  margin-top: 11px;
}

.f-buy__row input {
  padding: 9px 14px;
  border: 1px solid var(--f-line);
  border-radius: 999px;
  background: none;
  color: var(--f-text);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  text-align: center;
}

.f-buy__row input::placeholder {
  color: var(--f-text-3);
}

.f-buy__row input:focus {
  border-color: var(--f-orange);
}

.f-buy__row button {
  padding: 9px;
  border-radius: 999px;
  background: var(--f-orange);
  color: var(--f-on-orange);
  font-size: 13px;
  font-weight: 700;
}

.f-buy__row button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.f-log {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--f-line-soft);
  border-radius: 14px;
  background: var(--f-surface);
}

.f-log__title {
  font-size: 13.5px;
}

.f-log__date {
  margin-top: 1px;
  font-size: 11.5px;
  color: var(--f-text-3);
}

.f-log__amount {
  flex-shrink: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--f-red);
  font-variant-numeric: tabular-nums;
}

.f-log__amount.is-plus {
  color: var(--f-green);
}

.f-empty {
  padding: 22px 12px;
  text-align: center;
  font-size: 12.5px;
  color: var(--f-text-3);
}

/* --- Untere Navigation ---------------------------------------------------- */
.f-tabs {
  position: absolute;
  left: 12px;
  right: 12px;
  /* Platz für die Bedienleiste des Gehäuses */
  bottom: 20px;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  padding: 5px;
  border: 1px solid rgba(74, 70, 63, 0.7);
  border-radius: 999px;
  background: rgba(48, 47, 44, 0.7);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.f-tab {
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 7px 2px 6px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--f-text-3);
  transition: background 0.22s ease, color 0.22s ease;
}

.f-tab:hover {
  color: var(--f-text-2);
}

.f-tab[aria-selected='true'] {
  background: rgba(224, 138, 95, 0.15);
  color: var(--f-orange);
}

@media (prefers-reduced-motion: reduce) {
  .f-view {
    animation: none;
  }

  .f-ring__fill,
  .f-habit,
  .f-check {
    transition: none;
  }
}

/* --- Schmale Geräte -------------------------------------------------------
   Maßstab ist die Breite des Bildschirms (@container), nicht die des
   Fensters: sonst richtet sich die App nach dem Gerät des Besuchers statt
   nach ihrem eigenen Rahmen — und ein Überlauf im 366-px-Rahmen fällt am
   großen Bildschirm gar nicht auf. */

/* Ab hier reicht der Platz neben dem Namen nicht mehr für die Chips. */
@container phone-screen (max-width: 310px) {
  .f-top__chips {
    flex: 1 1 100%;
    min-width: 0;
  }

  .f-chip {
    padding-inline: 8px;
    font-size: 11px;
  }

  .f-icon-btn {
    width: 28px;
    height: 28px;
  }

  /* Überschrift und „Habit hinzufügen" nebeneinander sprengen die Zeile. */
  .f-page-head {
    flex-wrap: wrap;
  }
}

/* Bei 320 px Fensterbreite bleiben dem Bildschirm noch rund 260 px. Was dort
   nebeneinander stand, stapelt sich. */
@container phone-screen (max-width: 285px) {
  .f-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .f-pill {
    padding-inline: 10px;
    font-size: 12px;
  }

  /* Der Verweis auf den Shop rutscht unter Titel und Beschreibung, sonst
     bleiben davon nur wenige Pixel übrig. */
  .f-tool {
    flex-wrap: wrap;
  }

  .f-tool__link {
    flex-basis: 100%;
    padding-left: 45px;
  }
}