/* ===========================================================================
   portal.css — die Anmeldung und die Template-Wahl.

   ── Why it imports the editor's stylesheet ──────────────────────────────
   Every colour, radius, shadow and font in this product is defined once, in
   `editor.css`'s `:root` block, copied character for character out of the
   design file. These are the screens a merchant sees BEFORE the editor and
   they have to look like the same product — so they take the tokens from the
   same place rather than repeating them. A second copy of a palette is a
   palette that drifts, and the drift shows up exactly where it hurts most:
   the first screen.

   ── What the 2026-09 design changed here ────────────────────────────────
   Both screens used to be PAGES: a sticky bar at the top, a body that scrolled
   the window. The design makes them the same object the editor already is — a
   card floating on the wall, with its own header strip and its own scrolling
   body. That is why `.centre` locks the viewport and every scrollbar in this
   file belongs to a card rather than to the document.
   ========================================================================= */

@import url("editor.css");

/* The wall, and one card on it. `overflow:hidden` is the point: the page does
   not scroll, the card's body does — otherwise the header strip would slide
   away and the merchant would lose the account they are signed in as. */
.centre { height:100vh; width:100%; background:var(--wall); display:flex;
  align-items:center; justify-content:center; padding:20px; box-sizing:border-box;
  overflow:hidden; color:var(--text); }

/* ── Anmelden ─────────────────────────────────────────────────────────────
   Two columns that become two rows under ~760px, which is what `flex-wrap`
   plus the 380/300 bases buy: no media query, and the fold happens when the
   text would otherwise be squeezed rather than at a width somebody guessed. */
.lcard { width:100%; max-width:960px; display:flex; flex-wrap:wrap; border-radius:18px;
  overflow:hidden; background:var(--card-2); backdrop-filter:blur(50px) saturate(190%);
  -webkit-backdrop-filter:blur(50px) saturate(190%); box-shadow:var(--shadow-lg);
  border:.5px solid var(--stroke); animation:fadeUp .4s cubic-bezier(.22,.9,.3,1); }
.lmain { flex:1 1 380px; min-width:0; padding:38px 36px; }
.lbrand { display:flex; align-items:center; gap:10px; margin-bottom:30px; }
.lmark { width:26px; height:26px; border-radius:8px; display:flex; align-items:center;
  justify-content:center; font-size:12px; font-weight:800; color:#fff;
  background:linear-gradient(145deg,var(--accent-hi),var(--accent)); }
.lbrand-t { font-size:13.5px; font-weight:650; letter-spacing:-.01em; }
.ltitle { font-size:24px; font-weight:700; letter-spacing:-.03em; line-height:1.1; margin:0; }
.lsub { font-size:12.5px; color:var(--text-2); margin:7px 0 0; line-height:1.5; max-width:38ch; }

.lform { display:flex; flex-direction:column; gap:12px; margin-top:24px; max-width:340px; }
.lfield { display:flex; flex-direction:column; gap:6px; }
.lfield > span { font-size:11.5px; font-weight:570; color:var(--text-2); }
.lfield input { height:36px; padding:0 12px; border-radius:10px; font-size:13px;
  color:var(--text); background:var(--field); border:.5px solid var(--hair); outline:none;
  font-family:inherit; transition:box-shadow .2s, border-color .2s; }
.lfield input:focus { border-color:var(--accent); box-shadow:0 0 0 3.5px var(--accent-soft); }

.lerr { display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:10px;
  background:rgba(255,59,48,.13); color:#d32b21; font-size:11.5px; line-height:1.4; }
.lok { display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:10px;
  background:rgba(48,209,88,.15); color:#1a7a3c; font-size:11.5px; line-height:1.4; }

.lrow { display:flex; align-items:center; justify-content:space-between; margin-top:2px; }
.lremember { display:flex; align-items:center; gap:9px; }
/* border-box, because the design's 36×21 is the OUTSIDE of the track and the
   2px is the inset the knob rides in. Content-box would make it 40×25 and the
   knob would no longer travel the width it was drawn for. */
.ltoggle { width:36px; height:21px; box-sizing:border-box; border-radius:21px; padding:2px;
  cursor:pointer; border:0; background:var(--hair); transition:background .25s; flex:0 0 36px; }
.ltoggle[aria-checked="true"] { background:var(--accent); }
.ltoggle i { display:block; width:17px; height:17px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .25s cubic-bezier(.4,1.4,.5,1); }
.ltoggle[aria-checked="true"] i { transform:translateX(15px); }
.ltoggle-lb { font-size:11.5px; color:var(--text-2); }
.llink { font-size:11.5px; color:var(--accent); cursor:pointer; font-weight:560;
  border:0; background:none; font-family:inherit; padding:0; text-decoration:none; }

.lgo { height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  gap:8px; font-size:13px; font-weight:620; color:#fff; cursor:pointer; border:0;
  font-family:inherit; background:linear-gradient(180deg,var(--accent-hi),var(--accent));
  box-shadow:0 2px 8px rgba(60,55,200,.3); margin-top:6px;
  transition:transform .16s, filter .16s; }
.lgo:hover { transform:translateY(-1px); filter:brightness(1.06); }
.lgo:active { transform:scale(.98); }
.lgo[disabled] { opacity:.6; cursor:default; transform:none; filter:none; }
.lgo i.spin { width:11px; height:11px; border-radius:50%; border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff; animation:spin .7s linear infinite; display:block; }
.lfoot { font-size:11.5px; color:var(--text-3); text-align:center; margin-top:4px;
  line-height:1.5; }
.lfoot code { font-family:'DM Mono', ui-monospace, monospace; font-size:11px; }

.laside { flex:1 1 300px; min-width:0; padding:38px 34px; background:var(--card);
  border-left:.5px solid var(--hair-2); display:flex; flex-direction:column; gap:16px; }
.laside-t { font-size:10px; font-weight:650; letter-spacing:.06em; color:var(--text-3); }
.lbens { display:flex; flex-direction:column; gap:11px; }
.lben { display:flex; gap:10px; }
.lben > span { color:var(--accent); }
.lben-t { font-size:12.5px; font-weight:600; }
.lben-d { font-size:11px; color:var(--text-2); margin-top:2px; line-height:1.45; }

/* ── Meine Templates ──────────────────────────────────────────────────── */
.tcard { width:100%; max-width:1160px; height:100%; max-height:860px; display:flex;
  flex-direction:column; border-radius:18px; overflow:hidden; background:var(--card-2);
  backdrop-filter:blur(50px) saturate(190%); -webkit-backdrop-filter:blur(50px) saturate(190%);
  box-shadow:var(--shadow-lg); border:.5px solid var(--stroke);
  animation:fadeUp .4s cubic-bezier(.22,.9,.3,1); position:relative; }
.tbar { display:flex; align-items:center; gap:12px; padding:14px 18px;
  border-bottom:.5px solid var(--hair-2); flex-wrap:wrap; }
.tbar-t { min-width:0; }
.tbar-name { font-size:13px; font-weight:650; letter-spacing:-.01em; }
.tbar-sub { font-size:11px; color:var(--text-3); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
.tsegs { display:flex; gap:2px; padding:3px; border-radius:9px; background:var(--field);
  border:.5px solid var(--hair); }
.tseg { height:25px; padding:0 12px; border-radius:6px; display:flex; align-items:center;
  font-size:11.5px; font-weight:560; cursor:pointer; white-space:nowrap; border:0;
  background:none; color:var(--text-2); font-family:inherit; transition:background .2s; }
.tseg:hover { background:var(--hover); }
.tseg[aria-selected="true"] { background:var(--card); color:var(--text);
  box-shadow:0 0 0 .5px var(--hair); }
.ticon { width:28px; height:28px; border-radius:9px; display:flex; align-items:center;
  justify-content:center; font-size:12px; cursor:pointer; background:var(--field);
  border:.5px solid var(--hair); color:var(--text); font-family:inherit; }
.ticon:hover { background:var(--hover); }
.tuser { display:flex; align-items:center; gap:8px; padding:4px 10px 4px 5px;
  border-radius:999px; background:var(--field); border:.5px solid var(--hair); }
.tavatar { width:22px; height:22px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:9.5px; font-weight:700; color:#fff;
  background:linear-gradient(145deg,var(--accent-hi),var(--accent)); }
.tuser-nm { font-size:11.5px; font-weight:560; }
.tlogout { font-size:11px; font-weight:560; color:var(--text-2); cursor:pointer;
  padding-left:8px; border-left:.5px solid var(--hair); border-radius:0; background:none;
  border-top:0; border-right:0; border-bottom:0; font-family:inherit;
  transition:color .16s; }
.tlogout:hover { color:var(--accent); }

.tbody { flex:1; min-height:0; overflow:auto; padding:20px; }
.tgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.tnote { margin:0 0 16px; padding:11px 13px; border-radius:12px; font-size:12.5px;
  line-height:1.55; background:var(--field); border:.5px solid var(--hair); color:var(--text-2); }
.tnote.bad { border-color:rgba(255,69,58,.4); background:rgba(255,69,58,.10); color:#d32b21; }
.tnote b { color:var(--text); font-weight:640; }
.tempty { padding:40px 0; text-align:center; font-size:12.5px; color:var(--text-3); }

.tc { border-radius:16px; overflow:hidden; background:var(--card); border:.5px solid var(--stroke);
  display:flex; flex-direction:column;
  transition:transform .22s cubic-bezier(.22,.9,.3,1), box-shadow .22s; }
.tc:hover { transform:translateY(-3px); }
/* The activated one is ringed rather than badged-only: it is the template the
   editor opens into, and that should be visible from across the room. */
.tc.on { box-shadow:0 0 0 1.5px var(--accent), var(--shadow); }
/* Same reason: 132px is the height of the cover, not of its contents. */
.tc-cover { position:relative; height:132px; box-sizing:border-box; padding:14px; display:flex;
  flex-direction:column; justify-content:flex-end; gap:7px; overflow:hidden; }
.tc-cover img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:top center; display:block; }
.tc.locked .tc-cover img { filter:saturate(.55) contrast(.96); }
.tc-abbr { position:absolute; top:12px; left:14px; z-index:2; width:26px; height:26px;
  border-radius:9px; color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; }
.tc-lock { position:absolute; top:12px; right:12px; z-index:2; height:20px; padding:0 9px;
  border-radius:999px; display:flex; align-items:center; font-size:9.5px; font-weight:700;
  color:#fff; background:rgba(20,18,15,.62); white-space:nowrap; }
/* The abstract cover the design draws where there is no capture to show. */
.tc-bar1 { height:7px; width:62%; border-radius:3px; opacity:.85; }
.tc-cards { display:flex; gap:6px; }
.tc-cards i { flex:1; height:34px; border-radius:7px; background:#fff; display:block; }
.tc-cards i:nth-child(1) { opacity:.85; } .tc-cards i:nth-child(2) { opacity:.7; }
.tc-cards i:nth-child(3) { opacity:.55; }
.tc-bar2 { height:8px; width:40%; border-radius:4px; opacity:.5; }

.tc-body { padding:13px; display:flex; flex-direction:column; gap:8px; flex:1; }
.tc-top { display:flex; align-items:center; gap:8px; }
.tc-name { font-size:14px; font-weight:680; letter-spacing:-.02em; }
.tc-ver { font-family:'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:10px; color:var(--text-3); }
.tc-state { font-size:9.5px; font-weight:650; padding:3px 8px; border-radius:999px;
  white-space:nowrap; margin-left:auto; }
.tc-state.on { background:rgba(48,209,88,.18); color:#1a7a3c; }
.tc-state.free { background:var(--accent-soft); color:var(--accent); }
.tc-state.lock { background:var(--hover); color:var(--text-2); }
.tc-tag { font-size:12px; color:var(--text-2); line-height:1.45; }
.tc-tags { display:flex; flex-wrap:wrap; gap:5px; }
.tc-chip { font-size:10px; font-weight:550; padding:3px 8px; border-radius:999px;
  background:var(--field); border:.5px solid var(--hair); color:var(--text-2); }
.tc-meta { font-size:10.5px; color:var(--text-3); line-height:1.45; margin-top:2px; }
/* A template with no shop capture: the chip warns, and the command under it is
   the way out, so it is set as something a person can copy. */
.tc-chip.warn { border-color:rgba(255,159,10,.55); color:var(--text-2); }
/* A newer template waiting for this account. Accent rather than warn, because
   an update is good news and nothing is broken — the warn chip beside it means
   something is MISSING.

   What actually carries that difference, measured on screen rather than
   assumed: the FILL. In the light theme --accent is #AD4708 and the warn chip's
   border is rgba(255,159,10,.55) — two adjacent oranges, so the hue separates
   them barely at all; only in dark, where --accent is #7D7AFF, does colour do
   the work. This chip is filled and the warn chip is an outline, and that plus
   the wording is the real distinction. Said plainly here because the first
   version of this comment credited the hue, which the screen does not bear
   out. */
.tc-chip.upd { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.tc-how { margin-top:4px; padding:4px 6px; border-radius:6px; background:var(--field);
  border:.5px solid var(--hair); font-family:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:9.5px; color:var(--text-2); overflow-wrap:anywhere; user-select:all; }
.tc-acts { display:flex; gap:7px; margin-top:auto; padding-top:10px; }
.tc-btn { flex:1; height:30px; border-radius:9px; display:flex; align-items:center;
  justify-content:center; font-size:11.5px; font-weight:600; cursor:pointer;
  white-space:nowrap; background:var(--field); border:.5px solid var(--hair);
  color:var(--text); font-family:inherit; text-decoration:none;
  transition:background .16s, filter .16s; }
.tc-btn:hover { background:var(--hover); }
.tc-btn.go { background:var(--accent); color:#fff; border-color:transparent; }
.tc-btn.go:hover { filter:brightness(1.06); background:var(--accent); }
.tc-btn[disabled] { opacity:.45; cursor:not-allowed; }

/* The dialog host is a sibling of the wall rather than a child of the card —
   a modal inside a scrolling body scrolls with it. `fixed` because there is no
   positioned ancestor out here, and the veil has to cover the viewport. */
#modal .confirm-scrim { position:fixed; }

/* ── Der Zwischenschritt: welche Shop-Inhalte zeigt dieser Shop? ───────────
   Between choosing a template and opening it. Same card language as the login
   and the template board — one panel on the wall, a scrolling list in the
   middle, the decision at the bottom. */
.sc-card { width:min(560px,100%); max-height:min(760px,92vh); display:flex; flex-direction:column;
  border-radius:16px; background:var(--card); border:.5px solid var(--stroke);
  box-shadow:var(--shadow-lg); backdrop-filter:blur(40px) saturate(180%);
  -webkit-backdrop-filter:blur(40px) saturate(180%); overflow:hidden; }
.sc-head { display:flex; align-items:flex-start; gap:12px; padding:18px 20px 14px;
  border-bottom:.5px solid var(--hair-2); }
.sc-h { font-size:16px; font-weight:660; letter-spacing:-.01em; }
.sc-sub { font-size:11.5px; color:var(--text-2); line-height:1.5; margin-top:4px; max-width:44ch; }
.sc-tpl { flex:0 0 auto; font-size:10px; font-weight:650; padding:4px 9px; border-radius:999px;
  background:var(--accent-soft); color:var(--accent); }

.sc-list { padding:10px 12px; display:flex; flex-direction:column; gap:4px; overflow:auto; }
.sc-list.muted { border-top:.5px solid var(--hair-2); padding-top:10px; }

.sc-row { display:flex; align-items:flex-start; gap:10px; padding:9px 10px; border-radius:11px;
  cursor:pointer; border:.5px solid transparent; transition:background .16s, border-color .16s; }
.sc-row:hover { background:var(--hover); }
.sc-row.on { border-color:var(--accent); background:var(--accent-soft); }
.sc-row.off { cursor:default; opacity:.5; }
.sc-row.off:hover { background:transparent; }

.sc-box { flex:0 0 18px; width:18px; height:18px; margin-top:1px; border-radius:6px;
  border:1.5px solid var(--hair); display:flex; align-items:center; justify-content:center;
  font-size:11px; color:#fff; }
.sc-box.on { background:var(--accent); border-color:var(--accent); }

.sc-txt { display:flex; flex-direction:column; gap:2px; min-width:0; }
.sc-name { font-size:12.5px; font-weight:600; }
.sc-what { font-size:11px; color:var(--text-2); line-height:1.45; }

.sc-err { margin:0 20px 10px; padding:9px 11px; border-radius:9px; font-size:11.5px;
  background:rgba(255,59,48,.10); border:.5px solid rgba(255,59,48,.4); color:var(--text); }

.sc-acts { display:flex; align-items:center; gap:8px; padding:13px 16px;
  border-top:.5px solid var(--hair-2); }
.sc-grow { flex:1; }
.sc-btn { height:32px; padding:0 14px; border-radius:9px; display:flex; align-items:center;
  justify-content:center; font-size:12px; font-weight:600; font-family:inherit; cursor:pointer;
  border:.5px solid var(--hair); background:var(--field); color:var(--text); text-decoration:none;
  transition:background .16s, filter .16s; }
.sc-btn:hover { background:var(--hover); }
.sc-btn.go { background:var(--accent); color:#fff; border-color:transparent; }
.sc-btn.go:hover { filter:brightness(1.06); }
.sc-btn[disabled] { opacity:.5; cursor:not-allowed; }

/* The list, the list of what cannot be switched, and the Shop-Daten section
   scroll as one: two scrolling boxes stacked in one card is a card with two
   scroll wheels. */
.sc-scroll { flex:1 1 auto; min-height:0; overflow:auto; }
.sc-scroll .sc-list { overflow:visible; }

/* ── Mit echten Artikeln aus deinem Shop ─────────────────────────────────
   Optional, and a different kind of answer from the switches above — those
   say which boxes the shop runs, this one fills them with the shop's own
   articles. So it is drawn apart: its own dashed box, never a row in the list. */
.sc-sd { margin:6px 12px 12px; padding:12px 13px 13px; border-radius:12px;
  border:.5px dashed var(--hair); background:var(--field); }
.sc-sd-head { display:flex; align-items:center; gap:8px; }
.sc-sd-h { font-size:13px; font-weight:640; letter-spacing:-.01em; }
.sc-sd-tag { font-size:9.5px; font-weight:650; letter-spacing:.05em; text-transform:uppercase;
  padding:2px 7px; border-radius:999px; color:var(--text-3); border:.5px solid var(--hair); }
.sc-sd-sub { font-size:11px; color:var(--text-2); line-height:1.5; margin-top:4px; }
.sc-sd-wait, .sc-sd-note { font-size:11px; color:var(--text-3); line-height:1.5; margin-top:9px; }
.sc-sd-acts { display:flex; align-items:center; gap:8px; margin-top:10px; }
.sc-sd-step { margin-top:10px; padding:10px 11px 11px; border-radius:10px; background:var(--card);
  border:.5px solid var(--hair); }
.sc-sd-step-h { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:620;
  margin-bottom:8px; }
.sc-sd-num { width:18px; height:18px; flex:0 0 18px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#fff;
  background:var(--accent); }
.sc-sd-step > .sc-btn { display:inline-flex; }
.sc-sd-howto { margin:9px 0 0; padding-left:18px; font-size:11px; line-height:1.6; color:var(--text-2); }
.sc-sd-step .fieldlabel { display:block; margin:9px 0 4px; }
.sc-sd .sc-err { margin:10px 0 0; }
.sc-sd-ok { display:flex; align-items:flex-start; gap:10px; margin-top:10px; }
.sc-sd .sc-row { margin-top:8px; }

/* ── „Wird geöffnet" ──────────────────────────────────────────────────────
   The 2.2 s a cold open spends starting a Studio process. Same card language
   as the login and the shop-content step; the only new thing is a spinner
   that is tied to real work rather than to a timer. */
.st-card { width:min(420px,100%); display:flex; flex-direction:column; align-items:center;
  gap:10px; padding:34px 30px 28px; border-radius:16px; background:var(--card);
  border:.5px solid var(--stroke); box-shadow:var(--shadow-lg); text-align:center;
  backdrop-filter:blur(40px) saturate(180%); -webkit-backdrop-filter:blur(40px) saturate(180%);
  animation:fadeUp .3s cubic-bezier(.22,.9,.3,1); }
.st-mark { width:42px; height:42px; border-radius:13px; display:flex; align-items:center;
  justify-content:center; background:linear-gradient(145deg,var(--accent-hi),var(--accent));
  box-shadow:0 6px 18px rgba(60,55,200,.32); }
.st-spin { width:16px; height:16px; border-radius:50%; display:block;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:spin .7s linear infinite; }
.st-h { font-size:16px; font-weight:660; letter-spacing:-.01em; }
.st-sub { font-size:11.5px; color:var(--text-2); line-height:1.5; max-width:34ch; }

.st-steps { width:100%; display:flex; flex-direction:column; gap:7px; margin-top:8px;
  text-align:left; }
.st-step { display:flex; align-items:center; gap:9px; font-size:11.5px; color:var(--text-3);
  transition:color .25s; }
.st-step.now { color:var(--text); font-weight:560; }
.st-step.done { color:var(--text-2); }
.st-dot { width:15px; height:15px; flex:0 0 15px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-size:9px; color:#fff;
  border:1.5px solid var(--hair); background:transparent; transition:all .25s; }
.st-step.now .st-dot { border-color:var(--accent);
  animation:pulseRing 1.4s ease-out infinite; }
.st-step.done .st-dot { background:var(--accent); border-color:var(--accent); }

.st-acts { display:flex; gap:8px; margin-top:6px; }

/* ── Plugins (plugins.html) ───────────────────────────────────────────────
   The same card on the wall as „Meine Templates"; a plugin card has no shop
   capture to show, so its cover is the plugin's mark on its own colour. */
a.tseg { text-decoration:none; }
/* the way there, in the header of „Meine Templates" */
.tplug { height:28px; padding:0 12px; border-radius:9px; display:flex; align-items:center;
  font-size:11.5px; font-weight:600; text-decoration:none; color:var(--text);
  background:var(--field); border:.5px solid var(--hair); }
.tplug:hover { background:var(--hover); color:var(--accent); }
.pl-head { margin:0 0 16px; }
.pl-h { font-size:17px; font-weight:680; letter-spacing:-.02em; }
.pl-sub { font-size:12px; color:var(--text-2); line-height:1.55; margin-top:4px; max-width:70ch; }
.pl-cover { position:relative; height:88px; box-sizing:border-box; padding:14px; display:flex;
  align-items:flex-end; gap:10px; color:#fff; }
.pl-tracking { background:linear-gradient(135deg,#1d3a8f,#4f6fd8); }
.pl-analytics { background:linear-gradient(135deg,#0e6377,#25a7bf); }
.pl-growth { background:linear-gradient(135deg,#1d6b42,#3fae6f); }
.pl-aivisibility { background:linear-gradient(135deg,#5a2a8f,#9b5de5); }
.pl-mark { width:34px; height:34px; border-radius:10px; display:flex; align-items:center;
  justify-content:center; font-size:15px; font-weight:800; background:rgba(255,255,255,.18);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.35); }
.pl-cover-t { font-size:12px; font-weight:650; opacity:.92; }
.pl-price { font-size:12px; color:var(--text-2); line-height:1.5; }
.pl-price b { color:var(--text); font-weight:680; font-size:13px; }
.pl-deal { color:#1a7a3c; }
.pl-key { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.pl-key-l { font-size:10.5px; color:var(--text-3); }
.pl-key .tc-how { margin-top:0; font-size:10.5px; }
.pl-copy { font-size:10.5px; font-weight:600; padding:3px 8px; border-radius:7px; cursor:pointer;
  background:var(--field); border:.5px solid var(--hair); color:var(--text); font-family:inherit; }
.pl-copy:hover { background:var(--hover); }
.pl-steps { margin:2px 0 0; padding-left:17px; font-size:11px; line-height:1.55; color:var(--text-2); }

/* ── In Entwicklung + Monatszahlung (owner, 2026-10-08) ─────────────────── */
.tc-state.soon { background:rgba(255,159,10,.16); color:#a35a00; }
[data-theme="dark"] .tc-state.soon { color:#ffb340; }
.tc.soon .tc-cover img { filter:grayscale(.7) contrast(.92); opacity:.8; }
.tc-lock.soon { background:rgba(20,13,8,.72); color:#fff; }
.tnote.bill { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.tnote.bill .bill-t { flex:1 1 320px; }
.tnote.bill.overdue { border-color:rgba(255,159,10,.5); background:rgba(255,159,10,.12); color:var(--text); }
.tnote.bill.blocked { border-color:rgba(255,69,58,.45); background:rgba(255,69,58,.10); color:var(--text); }
.tnote.bill .bill-pay { flex:0 0 auto; text-decoration:none; }