/*
 * site-shell.css — Login-Bereich im Look der Website (SiteShell.php, seit 08.10.2026).
 *
 * Lade-Reihenfolge: site.css (Website-Build) → tokens.css → app.css → DIESE Datei.
 * Hier stehen nur die Dinge, die den Website-Kopf mit der App verheiraten:
 * Scroll-Modell, Konto-Menü im Kopf, Konto-Seitenleiste, Karten-Raster. Alles andere
 * kommt unverändert aus app.css (Panels, Tabellen, Overlays) und site.css (Kopf,
 * Fuß, Tool-Karten). Kein neuer Hex-Wert: nur Tokens.
 */

/* Die App scrollt sonst nur in .main-col (feste Topbar). Mit dem Website-Kopf scrollt die
   ganze Seite wie auf fastlancer.org. */
html, body.site-body { height: auto; }
body.site-body { display: block; overflow: visible; background: var(--c-surface-canvas); }

/* Lesezeichen-Schublade der Website: im Konto gibt es dafür die Seite „Gemerkt". */
body.site-body .ph__drawer, body.site-body .ph__backdrop { display: none !important; }

/* ── Konto-Menü im Website-Kopf (ersetzt den Profil-Hinweis „kommt bald") ── */
.app-acct { position: relative; }
.app-acct > summary { list-style: none; cursor: pointer; }
.app-acct > summary::-webkit-details-marker { display: none; }
.app-saved { position: relative; }

/* ── Konto-Raster: Seitenleiste links, Inhalt rechts (seit 28.10.2026) ──
   Ersetzt die Register-Reiter vom 14.10. (Justus: „zu mittig — wie bei Flaconi links, so wie auf
   den Kategorieseiten"). Raster und Maße 1:1 von KategorieSeite.astro: Container 1400 px mit
   20 px Rand (= .container-site, Linie mit dem Logo), Leiste 240 px, Abstand 3 rem. Umbruch bei
   1100 px statt 1024 — die DESIGN.md-Schwelle; darunter bliebe der Tool-Tabelle zu wenig Breite. */
.acc { max-width: 1400px; width: 100%; margin: 0 auto; padding: var(--sp-5) var(--sp-5) var(--sp-7); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
.acc__main { min-width: 0; }
@media (min-width: 1100px) {
  .acc { grid-template-columns: 240px minmax(0, 1fr); gap: var(--sp-7); align-items: start; padding-top: var(--sp-6); }
  .acc__side { position: sticky; top: 24px; }
}
@media (max-width: 639px) { .acc { padding: var(--sp-4) var(--sp-4) var(--sp-7); gap: var(--sp-4); } }

/* Seitenleiste (MVP-Zuschnitt 02.11.2026): vier Bereiche, KEINE Trennlinien mehr (Justus),
   aktiver Punkt = blaue Fläche (--c-surface-subtle) + fett + gefülltes Icon. Gleichmäßiger
   Abstand 2 px zwischen allen Zeilen — vorher sprang er bei Gemerkt/Einstellungen wegen der
   Gruppentrenner. Kein Akzentbalken (Regel 2b), keine Versalien (2c), kein Lime. */
.acc-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.acc-nav__link {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 48px; padding: var(--sp-2) var(--sp-3);
  font: inherit; font-family: 'PT Sans', sans-serif; font-size: var(--text-base); line-height: 1.3; text-align: left;
  color: var(--c-brand-dark); text-decoration: none; background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer;
}
.acc-nav__link .ico { width: 20px; height: 20px; flex: 0 0 20px; color: var(--c-gray-700); }
.acc-nav__link.is-active { font-weight: var(--fw-bold); background: var(--c-surface-subtle); }
.acc-nav__link.is-active .ico { color: var(--c-brand-blue); }
.acc-nav__foot { margin-top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.acc-nav__out { color: var(--c-gray-700); }
/* Beta-Hinweis: klein, grau, kein Lime. */
.acc-beta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); padding: 0 var(--sp-3); }

.acc-beta { position: relative; }
.acc-beta__tip {
  position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 20; width: 15rem; padding: var(--sp-2) var(--sp-3);
  background: var(--c-brand-dark); color: var(--c-surface-canvas); border-radius: var(--radius-sm);
  font-size: var(--text-sm); line-height: 1.45; box-shadow: var(--shadow-md);
}
.acc-beta__tip[hidden] { display: none; }
/* Keine Unterstreichung, in keinem Zustand (Justus 02.11.: „sieht kacke aus") — Hervorhebung nur
   über Fläche und gefülltes Icon; die Website setzt auf a:hover sonst eine Unterstreichung. */
.acc-nav__link, .acc-nav__link:hover, .acc-nav__link:focus, .acc-nav__link span { text-decoration: none !important; }
@media (hover: hover) { .acc-nav__link:not(.is-active):hover { background: var(--c-surface-subtle); } }
.acc-nav__link:focus-visible { outline: 2px solid var(--c-brand-dark); outline-offset: 2px; }
.acc-out { display: none; }

/* Schmal (< 1100 px): Reiterleiste mit vier gleich breiten Zielen über dem Inhalt — Icon über Label,
   56 px hoch, aktiver Reiter als blaue Fläche. Ein Tipp zu jedem Bereich, nichts versteckt (vorher
   eine Klappliste, die man erst öffnen musste). Abmelden steht schmal unter dem Inhalt. */
@media (max-width: 1099px) {
  .acc-nav { border: 1px solid var(--c-gray-200); border-radius: var(--radius-md); padding: var(--sp-1); background: var(--c-surface-canvas); }
  .acc-nav__list { flex-direction: row; gap: var(--sp-1); }
  .acc-nav__list li { flex: 1 1 auto; min-width: 0; }
  .acc-nav__link {
    flex-direction: column; justify-content: center; gap: var(--sp-1); min-height: 56px; padding: var(--sp-2) var(--sp-1);
    font-size: var(--text-sm); text-align: center; line-height: 1.15;
  }
  .acc-nav__link span { white-space: nowrap; }
  .acc-nav__out, .acc-nav__foot { display: none; }
  .acc-out { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-7); padding-top: var(--sp-4); border-top: 1px solid var(--c-gray-200); }
  .acc-out .acc-beta { padding: 0; }
  .acc-out .acc-beta__tip { left: auto; right: 0; }
  .acc-out .acc-nav__link { width: auto; display: inline-flex; color: var(--c-gray-700); }
}

/* ── Tool-Karten der Website im Konto (Gemerkt, Vorschläge) ── */
/* Drei Karten je Reihe bei 1100 px — dieselbe Kartenbreite wie das Raster der Website (~340 px);
   schmaler greift die 84-px-Reserve unter dem Text der Website-Karte und lässt sie hohl wirken. */
.app-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-5); margin: 0 0 var(--sp-6); align-items: start; }
.app-cards--list { grid-template-columns: 1fr; }
.app-cards .tool-card-wrap { position: static; display: flex; flex-direction: column; height: auto; }
.app-cards .app-card__inner { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; }
.app-cards .app-card__inner > .tool-card { flex: 1 1 auto; }
.app-cards .fl-bm--card form { display: contents; }
.app-card__actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
.app-card__actions form { margin: 0; }
.app-cards .tool-card-wrap[hidden] { display: none; }

/* Importhinweis für Browser-Lesezeichen (fl_bm_v1 → Konto) */
.app-import { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); align-items: center; justify-content: space-between;
  background: var(--c-surface-subtle); border: 1px solid var(--c-gray-200); border-radius: var(--radius-md); padding: var(--sp-4) var(--sp-4); margin: 0 0 var(--sp-5); }
.app-import p { margin: 0; }
.app-import strong { display: block; color: var(--c-brand-dark); }
.app-import__actions { display: flex; gap: var(--sp-2); }

/* Auth-Seiten (Anmelden, Registrieren …) im Website-Rahmen: Karte mittig, kein eigenes Vollbild. */
body.site-body .auth { min-height: 0; padding: var(--sp-7) var(--sp-5) 3.5rem; background: transparent; }

/* Der Original-Herz-Knopf der Website bleibt (versteckt) im DOM, weil das Kopf-Skript ihn beim Start
   sucht; `.ph__icon` setzt display:flex und würde `hidden` sonst überstimmen. */
body.site-body .ph__icon--bm[data-bm-open][hidden] { display: none !important; }

/* ── Filterleiste im Website-Rahmen (14.10.2026): ohne eigenen Rahmen — die Felder tragen
   die Linie, die Fläche drumherum braucht keine zweite. */
body.site-body .filterbar { border: 0; border-radius: 0; padding: 0; background: none; }

/* ── „In den Stack" unter der Karte: volle Kartenbreite, mit Plus (14.10.2026) ── */
.app-card__actions form { flex: 1 1 auto; }
.app-card__stack { width: 100%; justify-content: center; min-height: 44px; }

/* ── Vorgeschlagene Tools auf „Gemerkt" (14.10.2026): schmale Liste statt Karten, damit sie
   sich auf den ersten Blick von den gemerkten Tools unterscheidet; ausblendbar. ── */
.app-sugg { margin: var(--sp-6) 0 var(--sp-5); padding: var(--sp-4) var(--sp-5) var(--sp-5); background: var(--c-surface-subtle); border: 1px solid var(--c-gray-200); border-radius: var(--radius-md); }
.app-sugg__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.app-sugg__head form { margin: 0; }
.app-sugg__title { margin: 0; font-family: 'Roboto Condensed', sans-serif; font-weight: var(--fw-bold); font-size: var(--text-xl); color: var(--c-brand-dark); }
.app-sugg__lead { margin: var(--sp-1) 0 var(--sp-3); font-size: var(--text-15); color: var(--c-gray-700); max-width: 70ch; }
.app-sugg__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.app-sugg__head .btn { min-height: 36px; }
.app-sugg-show { margin: var(--sp-5) 0; }

/* ── Tabelle „Meine Tools" ohne seitliches Scrollen (28.10.2026, MVP-Zuschnitt 02.11.2026) ──
   Unter 640 px wird jede Zeile zur Karte; die role-Attribute im Markup halten die Semantik.
   Nur im Website-Rahmen — die klassische Hülle (Tests) bleibt unverändert. */
@media (max-width: 639px) {
  body.site-body .tt__wrap { overflow: visible; }
  body.site-body .tt, body.site-body .tt tbody { display: block; width: 100%; overflow: visible; }
  body.site-body .tt thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  body.site-body .tt tbody tr {
    display: grid; gap: var(--sp-1) var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-gray-200);
    grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    grid-template-areas: "tool cost" "cat act";
  }
  body.site-body .tt tbody tr:last-child { border-bottom: 0; }
  body.site-body .tt tbody td { display: block; padding: 0; border: 0; min-width: 0; }
  body.site-body .tt__c-tool { grid-area: tool; }
  body.site-body .tt__c-tool .tt__tool { min-width: 0; }
  body.site-body .tt__c-cost { grid-area: cost; text-align: right; }
  body.site-body .tt__c-cat { grid-area: cat; color: var(--c-gray-700); }
  body.site-body .tt .tt__act { grid-area: act; justify-self: end; }
}

.acc-biz { margin: calc(var(--sp-1) * -1) 0 var(--sp-4); font-size: var(--text-base); color: var(--c-gray-700); }

.dot--info { background: var(--c-brand-blue, #0061b2); }

/* ── Abmelden-Dialog (02.11.2026) — natives <dialog>: Fokusfalle, Esc, inertes Umfeld vom Browser. ── */
.so-dlg { border: 0; padding: 0; border-radius: var(--radius-md); box-shadow: var(--shadow-md); max-width: min(26rem, calc(100vw - 32px)); width: 100%; color: var(--c-brand-dark); }
.so-dlg::backdrop { background: rgba(0, 26, 47, 0.45); }
.so-dlg__card { margin: 0; padding: var(--sp-5) var(--sp-5) var(--sp-5); }
.so-dlg__text { margin: 0 0 var(--sp-3); font-size: var(--text-base); line-height: 1.5; color: var(--c-gray-700); }
.so-dlg__mail { font-weight: var(--fw-bold); color: var(--c-brand-dark); margin-bottom: var(--sp-4); user-select: all; }
.so-dlg__title { margin: 0 0 var(--sp-3); font-family: 'Roboto Condensed', sans-serif; font-weight: var(--fw-bold); font-size: var(--text-xl); line-height: 1.25; }
.so-dlg__actions { display: flex; gap: var(--sp-2); justify-content: flex-end; flex-wrap: wrap; }
.so-dlg__actions .btn { min-height: 44px; }

/* Handy: Werkzeugleiste über der Tool-Tabelle kompakt — Monat/Jahr und Sortierung in einer Zeile,
   Import und Export nebeneinander (vorher fünf Zeilen untereinander). */
@media (max-width: 639px) {
  body.site-body .tt__bar { flex-wrap: wrap; gap: var(--sp-2); }
  body.site-body .tt__tools { margin-left: 0; width: 100%; gap: var(--sp-2) var(--sp-3); }
  body.site-body .tt__tools .seg__label, body.site-body .tt__sort > span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  body.site-body .tt__tools > .btn { flex: 1 1 0; justify-content: center; white-space: nowrap; padding-inline: var(--sp-2); }
  body.site-body .tt__sort { flex: 1 1 auto; }
  body.site-body .tt__sort .ctl-select { flex: 1 1 auto; min-width: 0; }
  body.site-body .tt__sort select { width: 100%; }
  body.site-body .acc-out .acc-nav__link { flex-direction: row; font-size: var(--text-base); min-height: 48px; padding: var(--sp-2) var(--sp-2); }
}
@media (min-width: 640px) and (max-width: 1099px) {
  body.site-body .acc-out .acc-nav__link { flex-direction: row; font-size: var(--text-base); min-height: 48px; }
}

/* ── Listenzeile (ToolCard::row, 02.11.2026): EIN Bauteil für Gemerkt-Liste und Vorschläge ──
   Gleiche Typo wie die Karte (Name 22 px Roboto Condensed wie .tool-card__title der Website,
   Kurztext 16 px), 48-px-Logo, dieselbe Preis-Pille, Aktionen rechts. */
.trow { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-4); min-width: 0;
  background: var(--c-surface-canvas); border: 1px solid var(--c-gray-200); border-radius: var(--radius-md); }
.trow__logo { width: 48px; height: 48px; flex: 0 0 48px; border-radius: var(--radius-md); object-fit: contain; border: 1px solid var(--c-gray-200); background: var(--c-surface-canvas); padding: var(--sp-1); box-sizing: border-box; }
.trow__logo--ph { border: 0; padding: 0; background: none; }
.trow__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.trow__name { font-family: 'Roboto Condensed', sans-serif; font-weight: var(--fw-bold); font-size: var(--text-xl); line-height: 1.25; color: var(--c-brand-dark); text-decoration: none; overflow-wrap: anywhere; }
@media (hover: hover) { a.trow__name:hover { text-decoration: underline; text-underline-offset: 3px; } }
.trow__desc { margin: 0; font-size: var(--text-base); line-height: 1.5; color: var(--c-gray-700); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.trow__meta { flex: 0 0 auto; }
.trow__meta:empty { display: none; }
.trow__actions { flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-2); }
.trow__actions form { margin: 0; }
.trow__remove { width: 44px; height: 44px; color: var(--c-brand-dark); }
.trow__remove svg { width: 22px; height: 22px; }
@media (max-width: 639px) {
  .trow { flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
  .trow__text { flex-basis: calc(100% - 60px); }
  .trow__desc { -webkit-line-clamp: 2; }
  .trow__meta { margin-left: 60px; }
  .trow__actions { margin-left: auto; }
}

/* Gemerkt: Karte im Raster, Zeile in der Liste — derselbe Eintrag, eine Ansicht sichtbar. */
.saved-item { min-width: 0; display: flex; flex-direction: column; }
.saved-item[hidden] { display: none; }
.saved-item > .trow { display: none; }
.app-cards--list { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
.app-cards--list .saved-item > .tool-card-wrap { display: none; }
.app-cards--list .saved-item > .trow { display: flex; }

/* ── Kontomenü am Profil-Icon (02.11.2026): Fläche wie die übrigen Karten/Dropdowns. Das dunkle
   „Viereck" war die Sprechblasen-Spitze des Website-Hinweises (.ph__hint::before) — aus. ── */
body.site-body .app-acct__menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; width: 260px; display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-2); background: var(--c-surface-canvas); color: var(--c-brand-dark);
  border: 1px solid var(--c-gray-200); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
}
body.site-body .app-acct__menu[hidden] { display: none; }
body.site-body .app-acct__menu::before { display: none; content: none; }
.app-acct__who { display: flex; flex-direction: column; padding: var(--sp-2) var(--sp-3) var(--sp-2); margin-bottom: var(--sp-1); }
.app-acct__name { font-family: 'Roboto Condensed', sans-serif; font-weight: var(--fw-bold); font-size: var(--text-base); color: var(--c-brand-dark); }
.app-acct__mail { font-size: var(--text-sm); color: var(--c-gray-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-acct__item {
  display: flex; align-items: center; gap: var(--sp-3); min-height: 44px; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm);
  font-family: 'PT Sans', sans-serif; font-size: var(--text-base); color: var(--c-brand-dark); text-decoration: none !important;
}
.app-acct__item .ico { width: 20px; height: 20px; flex: 0 0 20px; color: var(--c-gray-700); }
.app-acct__item.is-active { background: var(--c-surface-subtle); font-weight: var(--fw-bold); }
.app-acct__item.is-active .ico { color: var(--c-brand-blue); }
@media (hover: hover) { .app-acct__item:not(.is-active):hover { background: var(--c-surface-subtle); } }
.app-acct__item:focus-visible { outline: 2px solid var(--c-brand-dark); outline-offset: -2px; }
.app-acct__out { margin-top: var(--sp-2); color: var(--c-gray-700); }
body.site-body [data-ph-profile]:focus-visible { outline: 2px solid var(--c-brand-dark); outline-offset: 2px; border-radius: var(--radius-full); }
body.site-body [data-ph-profile]:focus:not(:focus-visible) { outline: none; }
@media (max-width: 479px) { body.site-body .app-acct__menu { width: min(260px, calc(100vw - 32px)); } }

/* ── Beta-Pille mit Info-Symbol in einem Knopf (02.11.2026) ── */
.acc-beta__tag {
  position: relative; display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 28px; padding: var(--sp-1) var(--sp-2);
  font: inherit; font-size: var(--text-sm); color: var(--c-gray-700); background: var(--c-surface-canvas);
  border: 1px solid var(--c-gray-300); border-radius: var(--radius-full); cursor: pointer;
}
.acc-beta__tag svg { width: 14px; height: 14px; color: var(--c-gray-700); }
.acc-beta__tag::after { content: ''; position: absolute; inset: -8px; } /* Trefferfläche ≥ 44 px */
.acc-beta__tag:focus-visible { outline: 2px solid var(--c-brand-dark); outline-offset: 2px; }

/* Rasterkarten-Titel auf die App-Skala (20 px statt der 22 px der Website) — Raster und Liste gleich. */
body.site-body .app-cards .tool-card__title { font-size: var(--text-xl) !important; }


/* ── Ordnungsrunde 02.11.2026 ── */
/* Gemerkt flach: Karten ohne Schatten, Rahmen gray-200 — wie die übrigen Karten der App. */
body.site-body .app-cards .tool-card { box-shadow: none !important; border: 1px solid var(--c-gray-200); }
body.site-body .app-cards .tool-card:hover { box-shadow: none !important; transform: none; }
/* Ein Raster-Abstand für alle Karten-Grids (Übersicht, Meine Tools, Gemerkt). */
.app-cards { gap: var(--sp-4); margin-bottom: var(--sp-6); }
.app-cards--list { gap: var(--sp-3); }
.app-sugg { margin: var(--sp-6) 0 var(--sp-5); padding: var(--sp-5); }
.app-sugg__head { min-height: 40px; }
.app-sugg__lead { margin: var(--sp-1) 0 var(--sp-4); }
.app-sugg__list { gap: var(--sp-3); }
/* Vorschläge ein-/ausklappen: Knopf mit Chevron wie die <details> der Website. */
.app-sugg__toggle { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 40px; padding: 0 var(--sp-3); font: inherit; font-family: 'Roboto Condensed', sans-serif; font-weight: var(--fw-bold); font-size: var(--text-15); color: var(--c-brand-dark); background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer; }
.app-sugg__toggle .ico { width: 18px; height: 18px; transition: transform 0.2s ease; }
.app-sugg__toggle[aria-expanded="true"] .ico { transform: rotate(180deg); }
@media (hover: hover) { .app-sugg__toggle:hover { background: var(--c-surface-canvas); } }
.app-sugg__toggle:focus-visible { outline: 2px solid var(--c-brand-dark); outline-offset: 2px; }
.app-sugg--zu { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
.app-sugg--zu .app-sugg__head { margin: 0; }
@media (prefers-reduced-motion: reduce) { .app-sugg__toggle .ico { transition: none; } }

/* ── Mobil-Nacharbeit 03.11.2026: Meine Tools unter 640 px als Liste aus flachen Karten ──
   Zeile 1: Logo + Name | Kosten (oder „Kosten eintragen" an derselben Stelle);
   Zeile 2: Kategorie | Bearbeiten (Stift, 44 px). Die ganze Karte ist tippbar (Name-Link über
   die Fläche gespannt); Kosten-Link und Stift liegen darüber. Desktop bleibt die echte Tabelle,
   mobil halten die role-Attribute die Semantik („Figma · 12,00 € pro Monat · Design"). */
@media (max-width: 639px) {
  body.site-body .panel--table { border: 0; background: none; box-shadow: none; overflow: visible; }
  body.site-body .panel--table .tt__bar { padding: 0 0 var(--sp-3); border: 0; }
  body.site-body .tt tbody { display: flex; flex-direction: column; gap: var(--sp-3); }
  body.site-body .tt tbody tr {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "tool cost" "cat act"; gap: var(--sp-1) var(--sp-3); align-items: center;
    padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
    background: var(--c-surface-canvas); border: 1px solid var(--c-gray-200); border-radius: var(--radius-md);
  }
  body.site-body .tt tbody tr:last-child { border-bottom: 1px solid var(--c-gray-200); }
  body.site-body .tt tbody tr:hover { background: var(--c-surface-canvas); }
  body.site-body .tt__c-tool { grid-area: tool; }
  body.site-body .tt__c-cost { grid-area: cost; text-align: right; font-weight: var(--fw-bold); }
  body.site-body .tt__c-cat { grid-area: cat; padding-left: calc(34px + var(--sp-3)) !important; font-size: var(--text-sm); color: var(--c-gray-700); }
  body.site-body .tt .tt__act { grid-area: act; justify-self: end; }
  body.site-body .tt__name::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-md); }
  body.site-body .tt__add-cost, body.site-body .tt__edit { position: relative; z-index: 1; }
  body.site-body .tt__add-cost { display: inline-flex; align-items: center; min-height: 44px; font-weight: var(--fw-regular); }
  body.site-body .tt__edit { width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; border-radius: var(--radius-full); }
  body.site-body .tt__edit .ico { width: 18px; height: 18px; }
  body.site-body .tt__edit-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.site-body .tt__name:focus-visible { outline: none; }
  body.site-body .tt__name:focus-visible::after { outline: 2px solid var(--c-brand-dark); outline-offset: 2px; }
}
@media (min-width: 640px) { .tt__edit .ico { display: none; } }

/* ── Feinschliff 03.11.2026: Meine-Tools-Karte mobil in EINER Zeile ──
   Logo 44 · Name (20) mit Kategorie (15) darunter · Kosten rechtsbündig auf der Namenszeile ·
   Stift 44. Ohne Kosten bleibt die Stelle leer (Bearbeiten übernimmt das). Import/Export unter
   der Liste. */
.tt__io-mobile { display: none; }
@media (max-width: 639px) {
  body.site-body .tt__tools > .tt__io { display: none; }
  .tt__io-mobile { display: flex; gap: var(--sp-2); margin: var(--sp-4) 0 0; }
  .tt__io-mobile .btn { flex: 1 1 0; justify-content: center; white-space: nowrap; min-height: 44px; padding-inline: var(--sp-2); }

  body.site-body .tt tbody tr {
    grid-template-columns: minmax(0, 1fr) auto 44px;
    grid-template-areas: "tool cost act" "cat cat act";
    gap: 0 var(--sp-3); align-items: center;
    padding: var(--sp-3) var(--sp-3) var(--sp-3) calc(var(--sp-4) + 44px + var(--sp-3));
    min-height: 72px;
  }
  body.site-body .tt__c-tool { grid-area: tool; align-self: end; min-width: 0; }
  body.site-body .tt__c-tool .tt__tool { display: block; min-width: 0; }
  body.site-body .tt__img {
    position: absolute; left: var(--sp-4); top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: var(--radius-md);
  }
  body.site-body .tt__name {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: var(--text-xl); line-height: 1.25;
  }
  body.site-body .tt__c-cost { grid-area: cost; align-self: end; white-space: nowrap; font-size: var(--text-base); line-height: 1.25; padding-bottom: 1px; }
  body.site-body .tt__c-cost .tt__add-cost { display: none; }
  body.site-body .tt__c-cat { grid-area: cat; align-self: start; padding-left: 0 !important; font-size: var(--text-15); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.site-body .tt .tt__act { grid-area: act; align-self: center; }
}