/* Landingpage einer Mini-App (/tool/{id}).
   Haelt sich bewusst an die Bausteine der uebrigen Seiten (page-head, block,
   sec-kick), damit die Seite nicht wie ein Fremdkoerper wirkt. */

.tool-detail{padding-bottom:80px;}

/* Buehne des laufenden Werkzeugs. Rahmen statt Karte: das Werkzeug bringt
   seine eigene Gestaltung mit und soll nicht doppelt eingefasst wirken. */
.td-stage{border:1px solid var(--line);border-radius:14px;padding:22px;
  background:var(--paper);min-height:220px;}
.td-stage > .hint{color:var(--ink-3);font-size:14px;margin:0;}

/* Premium-Hinweis, wenn das Werkzeug hier nicht laufen darf. */
.td-lockbox{border:1px solid var(--line);border-radius:14px;padding:28px;
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;}
.td-lockbox p{margin:0;color:var(--ink-2);max-width:60ch;}
.td-locknote{font-size:14px;color:var(--ink-3);}

/* Anwendungsfaelle: nummeriert, weil sie eine Reihenfolge vom haeufigsten
   zum spezielleren Fall haben. */
.td-caselist{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.td-caselist li{background:var(--paper);padding:20px 24px;display:flex;gap:16px;
  align-items:baseline;color:var(--ink-2);line-height:1.55;}
.td-n{font-family:var(--mono);font-size:12px;color:var(--accent);flex:none;}

/* Fragen und Antworten. Dieselben Paare stehen als FAQPage im Schema. */
.td-faqlist{margin:0;}
.td-faqlist dt{font-weight:600;font-size:17px;letter-spacing:-.01em;margin-top:26px;
  padding-left:1.4rem;position:relative;}
.td-faqlist dt:first-child{margin-top:0;}
.td-faqlist dt::before{content:"?";position:absolute;left:0;top:0;
  font-family:var(--mono);font-size:.85em;color:var(--accent);font-weight:700;}
.td-faqlist dd{margin:.5rem 0 0 1.4rem;color:var(--ink-2);line-height:1.6;max-width:66ch;}

.td-morelink{font-family:var(--mono);font-size:12px;letter-spacing:.02em;margin:0;}
.td-morelink a{color:var(--ink-3);text-decoration:none;}
.td-morelink a:hover{color:var(--ink);}

@media (max-width:640px){
  .td-stage{padding:14px;}
  .td-caselist li{padding:16px 18px;gap:12px;}
}