/* ════════════════════════════════════════════════════════════════════════
   components.css — Startseite (Phase 1): Hero-Stats, Steps, Card-Innenteile,
   Tabellen-Helfer, Phasen-Marker, Legende, Hinweis-Box
   ════════════════════════════════════════════════════════════════════════ */
@layer components {

  /* ══ home-Intro: Version · Stats · CTA unter dem Template-Hero ═════════════
     home nutzt den gemeinsamen Content-Hero (nur H1 + Tagline); Version/Kennzahlen/
     CTA leben darunter als titelloser Einstiegs-Block (kein ToC-Anker). Der Hero
     trägt für home keinen Trennstrich (der Intro-Block schließt die Einheit ab),
     damit Titel + Tagline + Stats + CTA als EIN Block wirken. */
  .page-home .hero {
    margin-bottom: var(--sp-6);
    padding-bottom: 0;
    border-bottom: none;
  }

  .home-intro {
    margin-bottom: var(--sp-8);
    padding-bottom: var(--sp-8);
    border-bottom: 1px solid var(--border);
    text-align: center;
  }

  /* ══ Hero: Version · Stats · CTA-Reihe ════════════════════════════════════ */
  .hero-version {
    margin-bottom: var(--sp-3);
    color: var(--text-3);
    font-size: var(--fs-sm);
  }

  .hero-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-6);
    margin-top: var(--sp-6);
  }

  .hero-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .hero-stat-num {
    font-family: var(--font-head);
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: 1.1;
    color: var(--accent-bright);
  }

  .hero-stat-label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-3);
  }

  .hero-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-3);
    margin-top: var(--sp-6);
  }

  /* „Volle Breite" pro Button (H-S2-Option): der Button füllt die ganze Reihe und bricht sie um. */
  .hero-cta .cta-full {
    flex: 1 0 100%;
    text-align: center;
  }

  /* ══ Section-Intro · CTA-Link · Subsection-Titel ══════════════════════════ */
  /* Reiner Fließtext (prose-Block + Hand-/Home-Intros) läuft vollbreit wie alle anderen Blöcke
     (Tabellen/Karten/Spalten/Callouts) bis an die Content-Kante (--content-max). KEIN Lesemaß-Deckel:
     der frühere --measure-Cap war inkonsistent — Hinweise/Callouts sind vollbreit, nur der Fließtext war es
     nicht (User 2026-07-22). Linksbündig an derselben Kante wie alle Blöcke, kein margin-inline:auto. */
  .section-intro {
    margin-bottom: var(--sp-4);
    color: var(--text-2);
    font-size: var(--fs-base);
    line-height: 1.7;
    text-align: justify;
    hyphens: auto;
  }

  .section-cta {
    display: block;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    color: var(--text-2);
    font-size: var(--fs-sm);
    font-weight: 500;
    text-align: center;
    transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
  }

  .section-cta:hover {
    border-color: var(--border-accent);
    background: var(--bg-hover);
    color: var(--text-1);
  }

  .subsection-title {
    margin: var(--sp-8) 0 var(--sp-4);
    font-family: var(--font-head);
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--accent-bright);
  }

  /* ══ Inline-Textlinks (fett + gestrichelte goldene Unterlinie) ════════════ */
  .text-link {
    font-weight: 600;
    color: var(--accent-bright);
    border-bottom: 1px dashed var(--border-accent);
  }

  .text-link:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
  }

  /* ══ Einsteiger-Leitfaden: nummerierte Steps ══════════════════════════════ */
  /* Einsteiger-Leitfaden als Timeline (Port-Treue zu main): durchgehende Linie
     mittig durch die Nummernkreise statt einzelner umrandeter Karten.
     Geometrie zentral in Variablen → ::before-Linie bleibt automatisch auf den
     Kreisen ausgerichtet. v1-Skin: Akzent-Gold statt main-Gold, keine Icons. */
  .steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;

    --step-pad-x: var(--sp-4);
    --step-num-size: 44px;
  }

  .steps::before {
    content: "";
    position: absolute;
    top: var(--step-num-size);
    bottom: var(--step-num-size);
    left: calc(var(--step-pad-x) + var(--step-num-size) / 2);
    width: 1px;
    background: linear-gradient(180deg, var(--accent), var(--accent-glow));
  }

  .step {
    display: flex;
    gap: var(--sp-4);
    padding: var(--sp-5) var(--step-pad-x);
    position: relative;
  }

  /* Deckender Hintergrund + z-index → Kreis liegt über der Linie, sie ist nur
     in den Lücken zwischen den Kreisen sichtbar. */
  .step-num {
    display: flex;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--step-num-size);
    height: var(--step-num-size);
    border: 2px solid var(--border-accent);
    border-radius: 50%;
    background: var(--bg-card-2);
    color: var(--accent-bright);
    font-family: var(--font-head);
    font-size: var(--fs-base);
    font-weight: 700;
  }

  /* flex:1 → der Inhaltsbereich nimmt IMMER die volle Breite (Block minus Nummer), nicht nur die
     Breite des umbrechenden Titel-Textes. Sonst bestimmt der Titel die Breite und ein nicht
     umbrechender Kind-Block (z. B. Tabelle) sprengt den Schritt → seitliches Scrollen. min-width:0
     lässt breite Kinder in ihrem eigenen Wrapper scrollen statt zu überlaufen (N.5 Container). */
  .step-content {
    flex: 1;
    min-width: 0;
    padding-top: var(--sp-2);
  }

  .step-title {
    margin-bottom: var(--sp-2);
    font-family: var(--font-head);
    font-size: var(--fs-base);
    font-weight: 600;
  }

  /* Schritt-Body = echte Kind-Blöcke (N.5 Container, Spiegel .acc-item). Query-Container
     (rekursive-verschachtelung-container.md N.4): ein .cols IM Body misst die Body-Breite (nicht den
     Viewport) → es klappt zusammen, wenn der Schritt selbst zu schmal wird. Kinder bringen ihr eigenes
     Styling mit; vertikaler Rhythmus über die generische [data-block-id]-Margin (components-gear.css). */
  .step-body {
    container-type: inline-size;
  }

  /* ── Schritt-Editor (js/editor/blocks/steps.js + chrome-sections): in-place editierbar ──────────
     Nur der TITEL je Schritt wird contenteditable (der Body sind Kind-Blöcke, die sich selbst editieren).
     Je Schritt ein ×; darunter „+ Schritt". Nummern bleiben Auto (Position; Server-Re-Render nummeriert neu). */
  .steps.is-editing .step {
    cursor: default;
  }

  /* Platzhalter im leeren Titel-Feld. */
  .steps.is-editing [data-ph]:empty::before {
    content: attr(data-ph);
    color: var(--text-3);
    pointer-events: none;
  }

  .steps.is-editing .step-title {
    min-width: 2rem;
  }

  .steps.is-editing .step-title:focus {
    outline: 2px solid var(--accent-bright);
    outline-offset: 2px;
  }

  /* Schritt-Lösch-Knopf (×) — oben rechts im Schritt (chrome-sections → decorateStepsItems → slot-Endpoints). */
  .steps-del {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-2);
    z-index: 1;
    padding: 0 var(--sp-1);
    color: var(--text-3);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color var(--t-fast);

    &:hover {
      color: var(--danger);
    }
  }

  /* „+ Schritt" unter dem letzten Schritt (Spiegel .acc-add). */
  .steps-add {
    margin-top: var(--sp-3);
    padding: var(--sp-1) var(--sp-3);
    color: var(--accent);
    font-size: var(--fs-sm);
    line-height: 1;
    background: var(--accent-glow);
    border: 1px dashed var(--border-accent);
    border-radius: var(--radius-sm);
    cursor: pointer;

    &:hover {
      color: var(--bg-base);
      background: var(--accent);
    }
  }

  /* ── CTA-Editor (js/editor/blocks/buttons.js): in-place editierbar ─────────────
     Je Button: Text (contenteditable, im echten Button-Stil) + Stil-Wahl + Ziel-Slug + ×;
     darunter „+ Button". Im Edit gestapelt, damit Wrapper + Werkzeuge Platz haben. */
  .hero-cta.is-editing {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-cta.is-editing [data-ph]:empty::before {
    content: attr(data-ph);
    color: var(--text-3);
    pointer-events: none;
  }

  .hero-cta.is-editing [contenteditable]:focus {
    outline: 2px solid var(--accent-bright);
    outline-offset: 2px;
  }

  /* Edit-Wrapper je Button: Button + Stil-Wahl + Ziel-Slug + × in einer Reihe. */
  .cta-edit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
  }

  .cta-edit .cta-link {
    min-width: 4rem;
  }

  /* Stil-Wahl (Primär / Standard / CTA). */
  .cta-variants {
    display: inline-flex;
    gap: var(--sp-1);
  }

  .cta-variant {
    padding: var(--sp-1) var(--sp-2);
    color: var(--text-3);
    font-size: var(--fs-xs);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color var(--t-fast), border-color var(--t-fast);

    &.is-active {
      color: var(--text-1);
      border-color: var(--border-accent);
    }
  }

  /* „Volle Breite"-Umschalter (Checkbox + Label) im Button-Editor. */
  .cta-full-toggle {
    display: inline-flex;
    gap: var(--sp-1);
    align-items: center;
    color: var(--text-3);
    font-size: var(--fs-xs);
    cursor: pointer;
    user-select: none;
  }

  /* Neutrales Slug-Feld (Button-Ziel). */
  .cta-slug-input {
    min-width: 8rem;
    padding: var(--sp-1) var(--sp-2);
    color: var(--text-1);
    font-size: var(--fs-sm);
    background: var(--bg-base);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-sm);
  }

  /* Button-Lösch-Knopf (×). */
  .cta-del {
    padding: 0 var(--sp-1);
    color: var(--text-3);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color var(--t-fast);

    &:hover {
      color: var(--danger);
    }
  }

  /* ══ Legende-Editor (U6/H-S4) — Lese-Zustand nutzt .legend + .tag (s. unten) ═════════
     Edit-Wrapper je Tag: Tag + Farb-Wahl + ×, analog zum cta-Editor. */
  .legend.is-editing {
    align-items: flex-start;
  }

  .legend.is-editing [contenteditable]:focus {
    outline: 2px solid var(--accent-bright);
    outline-offset: 2px;
  }

  .lg-edit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
  }

  .lg-edit .legend-tag {
    min-width: 3rem;
  }

  /* Farb-Wahl (Gold / Jade / Violett / Grau). */
  .lg-colors {
    display: inline-flex;
    gap: var(--sp-1);
  }

  .lg-color {
    padding: var(--sp-1) var(--sp-2);
    color: var(--text-3);
    font-size: var(--fs-xs);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color var(--t-fast), border-color var(--t-fast);

    &.is-active {
      color: var(--text-1);
      border-color: var(--border-accent);
    }
  }

  /* Tag-Lösch-Knopf (×). */
  .lg-del {
    padding: 0 var(--sp-1);
    color: var(--text-3);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color var(--t-fast);

    &:hover {
      color: var(--danger);
    }
  }

  /* ══ Card-Innenteile (Titel · Text · Tag am Fuß) ══════════════════════════ */
  /* Titelzeile: Titel links, optionales Badge (z. B. „Nur für Mitglieder") ganz rechts. */
  .card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
  }

  .card-title {
    font-family: var(--font-head);
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--text-1);
  }

  /* Members-only-Marker in der Titelzeile: lila wie der Titel-Tracker-Callout,
     nicht umbrechen, damit „Nur für Mitglieder" einzeilig rechts steht. */
  .card-badge {
    flex-shrink: 0;
    padding: 2px 8px;
    border: 1px solid rgb(155 125 248 / 25%);
    border-radius: var(--radius);
    background: var(--violet-dim);
    color: var(--violet);
    font-size: var(--fs-xs);
    font-weight: 600;
    white-space: nowrap;
  }

  /* „Ziel fehlt"-Variante: dezente Warnfarbe (Signalfarbe = bedeutungstragend, FARBKONZEPT) — markiert ein
     unauflösbares Karten-Ziel, das der Editor beheben sollte. Nur für Editoren sichtbar. */
  .card-badge--missing {
    border-color: var(--danger);
    background: var(--danger-dim);
    color: var(--danger);
  }

  /* „Entwurf"-Chip: markiert die noch nicht veröffentlichte Zielseite (nur für Editoren sichtbar); dezent
     neutral wie der „Geplant"-Chip — der Text trägt die Bedeutung. */
  .card-badge--draft {
    border-color: var(--border);
    background: var(--bg-card);
    color: var(--text-3);
  }

  .card-body {
    min-height: 3.2em;
    color: var(--text-2);
    font-size: var(--fs-sm);
    line-height: 1.6;
    text-align: justify;
    /* Schmale Card-Spalten (bis 3 nebeneinander): Silbentrennung verhindert
       gezerrte Wortlücken durch justify. Greift, weil lang gesetzt ist. */
    hyphens: auto;
  }

  .card-tag {
    align-self: flex-start;
    margin-top: auto;
  }

  /* ══ Tag-Varianten ════════════════════════════════════════════════════════ */
  .tag-jade {
    border: 1px solid rgb(77 217 192 / 25%);
    background: var(--jade-dim);
    color: var(--jade);
  }

  .tag-violet {
    border: 1px solid rgb(155 125 248 / 25%);
    background: var(--violet-dim);
    color: var(--violet);
  }

  /* ══ Tabellen-Wrapper (mobiles Scrollen) + Zell-Helfer ════════════════════ */
  .table-wrap { overflow-x: auto; }

  .cell-tier {
    font-family: var(--font-head);
    font-weight: 600;
    white-space: nowrap;
    color: var(--accent-bright);
  }

  .cell-note {
    color: var(--text-3);
    font-size: var(--fs-xs);
    font-style: italic;
  }

  /* ══ CTA-Band quer durch eine Tabelle (wie mains .idx-gear-cta) ═══════════ */
  .cell-cta { padding: 0; }

  .table-cta {
    display: block;
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-card-2);
    color: var(--accent-bright);
    font-weight: 600;
    text-align: center;
  }

  /* ══ Phasen-Marker (Shards-Tabelle) ═══════════════════════════════════════ */
  .phase-early {
    font-weight: 600;
    color: var(--jade);
  }

  .phase-mid {
    font-weight: 600;
    color: var(--accent-bright);
  }

  .phase-endgame {
    font-weight: 600;
    color: var(--danger);
  }

  /* ══ Legende (Tag-Reihe) ══════════════════════════════════════════════════ */
  .legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
  }

  /* „CoM / WoA → Armageddon Set" bleibt in EINER Zeile (Abkürzungen + Pfeil + Link
     gehören zusammen, sollen nicht umbrechen). Tabelle scrollt im .table-wrap. */
  .gear-arma-line { white-space: nowrap; }

  /* ══ Hinweis-Box (amber) ══════════════════════════════════════════════════ */
  .note-amber {
    margin-top: var(--sp-5);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius);
    background: var(--accent-glow);
    font-size: var(--fs-sm);
    line-height: 1.7;
  }
  .note-amber strong { color: var(--accent-bright); }

  /* ══ Highlight-Box (abgesetzter Intro-Kasten, linker Akzent-Rand) ══════════
     v1-Pendant zu mains .highlight-box — gleiche Struktur/Placing, v1-Skin. */
  .highlight-box {
    margin: var(--sp-4) 0;
    padding: var(--sp-4) var(--sp-5);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    color: var(--text-2);
    font-size: var(--fs-base);
    line-height: 1.7;
  }

  /* Patch-Notes-Link unten rechts im Kasten (wie main) */
  .highlight-link {
    display: block;
    width: max-content;
    margin: var(--sp-3) 0 0 auto;
    font-size: var(--fs-sm);
  }
}

/* ════════════════════════════════════════════════════════════════════════
   components.css — Auth (Phase 3a/b): User-Button-Status + Konto-Popup
   ════════════════════════════════════════════════════════════════════════ */
@layer components {

  /* User-Button: rot = ausgeloggt, grün = eingeloggt (Ring + Glyph) */
  .user-btn:not(.is-auth) {
    border-color: var(--danger);
    color: var(--danger);
  }

  .user-btn.is-auth {
    border-color: var(--success);
    color: var(--success);
  }

  /* Popup als Dropdown unter dem User-Button */
  .auth-popup {
    position: fixed;
    top: calc(var(--header-h) + var(--sp-2));
    right: var(--sp-4);
    z-index: 150;
    width: min(320px, calc(100vw - 2 * var(--sp-4)));
    padding: var(--sp-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    box-shadow: 0 12px 32px rgb(0 0 0 / 45%);
  }

  .auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }

  .auth-account {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }

  /* Registrierungs-Seite (?site=register): schmale, zentrierte Spalte */
  .reg {
    max-width: 26rem;
    margin-inline: auto;
  }

  .reg-note {
    margin-bottom: var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--text-2);
    text-align: center;
  }

  .reg-timer {
    margin-bottom: var(--sp-3);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--success);
    text-align: center;
  }

  .reg-timer.is-warn {
    color: var(--danger);
  }

  .reg-pw-hint {
    font-size: var(--fs-xs);
    color: var(--text-2);
  }

  .reg-ok {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    text-align: center;
  }

  .reg-ok-title {
    font-family: var(--font-head);
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--success);
  }

  .auth-title {
    font-family: var(--font-head);
    font-size: var(--fs-md);
    font-weight: 600;
  }

  .auth-note {
    font-size: var(--fs-sm);
    color: var(--text-2);
  }

  .auth-divider {
    height: 1px;
    margin: var(--sp-1) 0;
    background: var(--border);
  }

  .auth-greet {
    font-size: var(--fs-sm);
    color: var(--text-2);
  }

  .auth-greet strong {
    color: var(--text-1);
  }

  .auth-field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
  }

  .auth-field span {
    font-size: var(--fs-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
  }

  /* Auth-Felder nutzen das Primitiv evpw-input (Look/Höhe/Fokus/disabled aus @layer evpw);
     hier nur die volle Breite in der Formular-Spalte. */
  .auth-field .evpw-input {
    inline-size: 100%;
  }

  .auth-error {
    margin: 0;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid rgb(248 113 113 / 25%);
    border-radius: var(--radius);
    background: var(--danger-dim);
    color: var(--danger);
    font-size: var(--fs-sm);
  }

  .auth-block {
    justify-content: center;
    width: 100%;
  }

  /* ══ HowTo (.howto — evpw_block_howto + js/editor/blocks/howto.js) ══════════════════════
     Gegenstück zu .steps (vorbild-gegenstuecke.md #1): gerahmtes, betiteltes Verfahren (GitBook-
     Stepper-Stil) mit semantischer <ol>-Nummerierung via CSS-Counter — bewusst optisch anders als
     die offene .steps-Kreisliste, damit man beide nebeneinander vergleichen kann. */
  .howto {
    padding: var(--sp-5) var(--sp-6);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
  }

  .howto-title {
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-3);
    font-family: var(--font-head);
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--accent-bright);
    border-bottom: 1px solid var(--border);
  }

  .howto-steps {
    counter-reset: howto;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .howto-step {
    counter-increment: howto;
    position: relative;
    padding: 0 0 var(--sp-5) var(--sp-8);
  }

  .howto-step:last-child {
    padding-bottom: 0;
  }

  /* Verbindungslinie zwischen den Nummern-Badges (links). */
  .howto-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: var(--sp-6);
    bottom: 0;
    left: calc(var(--sp-3) + 1px);
    width: 1px;
    background: var(--border-accent);
  }

  /* Nummern-Badge (quadratisch-gerundet → unterscheidet sich vom runden .step-num). */
  .howto-step::before {
    content: counter(howto);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    z-index: 1;
    align-items: center;
    justify-content: center;
    width: calc(var(--sp-3) * 2 + 4px);
    height: calc(var(--sp-3) * 2 + 4px);
    background: var(--bg-card-2);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-sm);
    color: var(--accent-bright);
    font-family: var(--font-head);
    font-size: var(--fs-sm);
    font-weight: 700;
  }

  .howto-step-name {
    margin-bottom: var(--sp-1);
    font-weight: 600;
  }

  /* Schritt-Text = echte Kind-Blöcke (N.5 Container, Slot-Hülle). Query-Container (N.4): ein .cols im
     Schritt misst die Schritt-Breite (nicht den Viewport). Kinder bringen ihr eigenes Styling mit. */
  .howto-step-text {
    container-type: inline-size;
  }

  /* ── HowTo-Editor (js/editor/blocks/howto.js + chrome-sections): in-place ──────────
     Nur Verfahrens-/Schritt-TITEL sind contenteditable (der Schritt-Text sind Kind-Blöcke, die sich
     selbst editieren). Platzhalter + Fokus-Ring NUR an den Titeln (nicht generisch [contenteditable],
     das träfe sonst auch die Kind-Blöcke). Je Schritt ein ×; darunter „+ Schritt". */
  .howto.is-editing .howto-title:empty::before,
  .howto.is-editing .howto-step-name:empty::before {
    content: attr(data-ph);
    color: var(--text-3);
    pointer-events: none;
  }

  .howto.is-editing .howto-title:focus,
  .howto.is-editing .howto-step-name:focus {
    outline: 2px solid var(--accent-bright);
    outline-offset: 2px;
  }

  .howto-del {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    padding: 0 var(--sp-1);
    color: var(--text-3);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color var(--t-fast);

    &:hover {
      color: var(--danger);
    }
  }

  /* „+ Schritt" unter der Liste (Spiegel .steps-add/.acc-add). */
  .howto-add {
    margin-top: var(--sp-3);
    padding: var(--sp-1) var(--sp-3);
    color: var(--accent);
    font-size: var(--fs-sm);
    line-height: 1;
    background: var(--accent-glow);
    border: 1px dashed var(--border-accent);
    border-radius: var(--radius-sm);
    cursor: pointer;

    &:hover {
      color: var(--bg-base);
      background: var(--accent);
    }
  }
}