/* =====================================================================
   hilfe.css - Aussehen der Hilfeseiten hilfe_de.html, hilfe_en.html und
   hilfe_es.html.

   FAMILIENWEIT GLEICH: Diese Datei ist in jeder App und in jedem Rohling
   byte-gleich, bis auf den Block zwischen den Markern APP-EIGEN:ANFANG und
   APP-EIGEN:ENDE. Der Block traegt nur die Farb-Tokens der App, in allen
   vier Farbmodus-Bloecken (Geraet hell, Geraet dunkel, data-theme dunkel,
   data-theme hell). Jede andere Aenderung ist ein Rollout in alle Kopien.
   Pruefen: python3 .claude-workshop/_root/werkzeuge/hilfe/hilfe-pruefen.py
   (Handbuch .claude-workshop/_root/regeln/app-familie.md, Abschnitt 1).

   Eigenes Stylesheet und nicht css/app.css, weil die Hilfe in einem
   iframe laeuft: ein iframe erbt nichts vom Stylesheet der umgebenden
   Seite. Die Hilfe muss ihr Aussehen also selbst mitbringen. Die Farben
   sind dieselben Werte wie in der App, aber bewusst nicht dieselben Regeln.

   Pflicht-Tokens: --bg --surface --ink --ink-soft --accent --accent-soft
   --border --done --done-soft --crit-bg --crit-ink --tier-bg --tier-ink
   --plat-bg --plat-ink --gold --shadow.
   Wahl-Tokens (fehlen sie, gilt der Wert in Klammern):
     --brand-dot  Punkt der Wortmarke                (--accent)
     --accent-fill  Flaeche unter weisser Schrift      (--accent)
                  (.btn-label), Weiss darauf >= 4,5:1
     --crit-fill    Flaeche roter Knoepfe              (--crit-ink)
                  (.btn-label.danger), Weiss darauf >= 4,5:1
     --plus-bg/--plus-ink  Kennzeichen Premium Plus  (--plat-bg/--plat-ink)

   Folgt dem Farbmodus der App (data-theme), sonst dem Geraet. In der Hilfe
   gibt es keinen eigenen Knopf fuer den Farbmodus.
   ===================================================================== */

/* APP-EIGEN:ANFANG - nur Farb-Tokens dieser App, in allen vier Bloecken */
  :root{
    --bg:#f2f2f7; --surface:#fff; --ink:#000; --ink-soft:#8e8e93;
    --accent:#007aff; --accent-soft:#e5f0ff; --border:#d1d1d6;
    --accent-fill:#0062cc;
    --crit-fill:#c4281c;
    --done:#248a3d; --done-soft:#e5f6e9;
    --crit-bg:#fdeceb; --crit-ink:#ff3b30;
    --tier-bg:#fff4e5; --tier-ink:#a06400;
    --plat-bg:#e7f0ff; --plat-ink:#0a4bb3;
    --gold:#ffae00;
    --shadow:0 1px 2px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.05);
  }
  @media (prefers-color-scheme:dark){
    :root{
      --bg:#000; --surface:#1c1c1e; --ink:#fff; --ink-soft:#98989d;
      --accent:#0a84ff; --accent-soft:#0e2740; --border:#38383a;
      --accent-fill:#0062cc;
      --crit-fill:#c4281c;
      --done:#30d158; --done-soft:#102b18;
      --crit-bg:#3a1a18; --crit-ink:#ff8f88;
      --tier-bg:#3a2a10; --tier-ink:#ffcf5c;
      --plat-bg:#16273f; --plat-ink:#8fb8ff;
      --gold:#ffae00;
      --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
    }
  }
  :root[data-theme="dark"]{
    --bg:#000; --surface:#1c1c1e; --ink:#fff; --ink-soft:#98989d;
    --accent:#0a84ff; --accent-soft:#0e2740; --border:#38383a;
    --accent-fill:#0062cc;
    --crit-fill:#c4281c;
    --done:#30d158; --done-soft:#102b18;
    --crit-bg:#3a1a18; --crit-ink:#ff8f88;
    --tier-bg:#3a2a10; --tier-ink:#ffcf5c;
    --plat-bg:#16273f; --plat-ink:#8fb8ff;
    --gold:#ffae00;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  }
  :root[data-theme="light"]{
    --bg:#f2f2f7; --surface:#fff; --ink:#000; --ink-soft:#8e8e93;
    --accent:#007aff; --accent-soft:#e5f0ff; --border:#d1d1d6;
    --accent-fill:#0062cc;
    --crit-fill:#c4281c;
    --done:#248a3d; --done-soft:#e5f6e9;
    --crit-bg:#fdeceb; --crit-ink:#ff3b30;
    --tier-bg:#fff4e5; --tier-ink:#a06400;
    --plat-bg:#e7f0ff; --plat-ink:#0a4bb3;
    --gold:#ffae00;
    --shadow:0 1px 2px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.05);
  }
/* APP-EIGEN:ENDE */

  *{box-sizing:border-box;-webkit-font-smoothing:antialiased}
  html,body{margin:0;background:var(--bg);color:var(--ink);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;line-height:1.55}

  /* Kopfzeile. Sie klebt oben, damit der Knopf fuer das Inhaltsverzeichnis
     auf jeder Hoehe der Seite erreichbar bleibt. */
  header.top{position:sticky;top:0;z-index:20;
    background:color-mix(in srgb,var(--bg) 88%,transparent);
    backdrop-filter:saturate(160%) blur(9px);-webkit-backdrop-filter:saturate(160%) blur(9px);
    border-bottom:1px solid var(--border);padding:13px 56px;text-align:center}
  /* Wortmarke: Name + Punkt (<span class="dot">), wahlweise ein Bildzeichen davor.
     gap:0 - der Punkt gehoert ANS Wort, nicht daneben. Das Bildzeichen bekommt ein
     eigenes margin-right, statt den Abstand ueber gap auf alle Teile zu verteilen:
     der Punkt ist ebenfalls ein Flex-Element und wandert sonst mit weg.
     Seitlich 56px Luft: links sitzt der Knopf fuer das Inhaltsverzeichnis, ein
     langer Titel bricht um, statt darunter zu laufen. */
  header.top h1{margin:0;font-size:17px;font-weight:750;letter-spacing:-.01em;
    display:inline-flex;align-items:center;gap:0}
  header.top h1 img{height:22px;width:auto;display:block;margin-right:8px}
  header.top .dot{color:var(--brand-dot,var(--accent))}
  header.top p{margin:2px 0 0;font-size:12.5px;color:var(--ink-soft)}

  .toc-toggle{position:absolute;left:14px;top:50%;transform:translateY(-50%) scale(1);
    width:34px;height:34px;border:1px solid var(--border);border-radius:9px;
    background:var(--surface);color:var(--accent);display:flex;align-items:center;
    justify-content:center;cursor:pointer;padding:0;opacity:1;
    transition:opacity .25s ease,transform .25s ease}
  .toc-toggle svg{width:18px;height:18px}
  .toc-toggle.is-hidden{opacity:0;transform:translateY(-50%) scale(.6);pointer-events:none}
  .toc-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;
    pointer-events:none;transition:opacity .4s ease;z-index:25}
  .toc-backdrop.visible{opacity:1;pointer-events:auto}

  .wrap{max-width:820px;margin:0 auto;padding:20px 18px 60px}

  /* Inhaltsverzeichnis. Es steht offen da, wenn die Hilfe aufgeht - wer sie
     oeffnet, sucht meist eine bestimmte Stelle und nicht den Anfang. Nach dem
     ersten Zuklappen schwebt es beim erneuten Oeffnen ueber dem Text, statt
     die Seite zu verschieben. max-height reicht fuer lange Verzeichnisse auch
     einspaltig auf dem Telefon; schwebend scrollt es in sich, wenn es hoeher
     ist als der Schirm. */
  nav.toc{background:var(--surface);border:1px solid var(--border);border-radius:14px;
    box-shadow:var(--shadow);padding:16px 20px;margin-bottom:22px;max-height:1400px;
    opacity:1;overflow:hidden;transform-origin:30px top;transform:scaleY(1) translateY(0);
    filter:blur(0);
    transition:max-height .7s cubic-bezier(.76,0,.24,1),transform .7s cubic-bezier(.76,0,.24,1),
      opacity .45s ease,filter .45s ease,padding .6s cubic-bezier(.76,0,.24,1),
      margin-bottom .6s cubic-bezier(.76,0,.24,1)}
  nav.toc.collapsed{max-height:0;opacity:0;transform:scaleY(.1) translateY(-90px);
    filter:blur(2px);padding-top:0;padding-bottom:0;margin-bottom:0;border-width:0}
  nav.toc.toc-overlay{position:fixed;top:var(--toc-top,64px);left:0;right:0;
    width:calc(100% - 32px);max-width:788px;margin:0 auto;z-index:30;
    box-shadow:0 16px 40px rgba(0,0,0,.35)}
  nav.toc.toc-overlay:not(.collapsed){max-height:calc(100vh - var(--toc-top,64px) - 16px);
    overflow-y:auto;-webkit-overflow-scrolling:touch}
  nav.toc h2{font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;
    color:var(--ink-soft);margin:0 0 10px;font-weight:700}
  nav.toc ol{margin:0;padding-left:20px;columns:2;column-gap:26px}
  nav.toc li{margin-bottom:6px;font-size:14px;break-inside:avoid}
  nav.toc a{color:var(--accent);text-decoration:none}
  @media (hover:hover){
    nav.toc a:hover{text-decoration:underline}
  }

  section{background:var(--surface);border:1px solid var(--border);border-radius:14px;
    box-shadow:var(--shadow);padding:20px 22px;margin-bottom:16px;scroll-margin-top:74px}
  section h2{font-size:20px;font-weight:750;letter-spacing:-.01em;margin:0 0 12px;
    display:flex;align-items:center;gap:8px}
  section h3{font-size:15px;font-weight:700;margin:20px 0 6px;color:var(--accent)}
  section h3:first-of-type{margin-top:8px}
  p{margin:6px 0;font-size:14.5px}
  ul,ol{padding-left:22px;margin:8px 0}
  li{margin-bottom:4px;font-size:14.5px}
  a{color:var(--accent)}

  /* Beschriftungen aus der Oberflaeche: Knoepfe in der Akzentfarbe wie in der App
     (.danger fuer zerstoerende Knoepfe), Reiter hell, Felder grau. */
  .btn-label{display:inline-block;background:var(--accent-fill,var(--accent));color:#fff;border-radius:6px;
    padding:1px 8px;font-size:13px;font-weight:600;white-space:nowrap}
  .btn-label.danger{background:var(--crit-fill,var(--crit-ink))}
  .tab-label{display:inline-block;background:var(--accent-soft);color:var(--accent);
    border-radius:6px;padding:1px 9px;font-size:13px;font-weight:700;white-space:nowrap}
  .field-label{display:inline-block;background:var(--accent-soft);color:var(--ink);
    border:1px solid var(--border);border-radius:6px;padding:1px 8px;font-size:13px;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
  code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
    background:var(--accent-soft);padding:1px 5px;border-radius:4px}
  pre{background:var(--accent-soft);border:1px solid var(--border);border-radius:10px;
    padding:12px 14px;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:12.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}

  /* Kennzeichnungen: Stufen (Basis, Premium, Premium Plus, Enterprise), Warnung. */
  .badge{display:inline-block;font-size:12.5px;font-weight:700;padding:3px 9px;
    border-radius:5px;white-space:nowrap;vertical-align:1px}
  .b-free{background:var(--accent-soft);color:var(--accent)}
  .b-prem{background:var(--tier-bg);color:var(--tier-ink)}
  .b-plus{background:var(--plus-bg,var(--plat-bg));color:var(--plus-ink,var(--plat-ink))}
  .b-ent{background:var(--plat-bg);color:var(--plat-ink)}
  .b-crit{background:var(--crit-bg);color:var(--crit-ink)}
  .star{color:var(--gold)}

  /* Zustandsmarken zum Nachzeichnen von Kaestchen der App: offen, ok, fail, na. */
  .mark-demo{width:15px;height:15px;border-radius:3px;border:1.5px solid var(--ink-soft);
    background:var(--surface);display:inline-block;flex:0 0 auto;vertical-align:-2px}
  .mark-demo.ok{background:var(--done);border-color:var(--done)}
  .mark-demo.fail{background:var(--crit-ink);border-color:var(--crit-ink);border-radius:50%}
  .mark-demo.na{background:var(--ink-soft);border-color:var(--ink-soft)}

  /* Farbmuster vor einem Wort (z. B. Abschlagfarben). Feste Farben, weil sie
     eine Sache der echten Welt zeigen, nicht die Oberflaeche. */
  .swatch{display:inline-block;width:11px;height:11px;border-radius:50%;
    margin-right:5px;vertical-align:-1px;border:1px solid transparent}
  .swatch.sw-white{background:#e5e5ea;border-color:#999}
  .swatch.sw-yellow{background:#ffd54a}
  .swatch.sw-blue{background:#3d8bfd}
  .swatch.sw-red{background:#ff5a5f}

  table{width:100%;border-collapse:collapse;font-size:13.5px;margin:10px 0}
  th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:top}
  th{color:var(--ink-soft);font-weight:700}

  .box{border-radius:10px;padding:12px 14px;margin:12px 0;font-size:14px;
    border-left:4px solid var(--accent);background:var(--accent-soft)}
  .box.warn{border-color:var(--tier-ink);background:var(--tier-bg)}
  .box.danger{border-color:var(--crit-ink);background:var(--crit-bg)}
  .box.ok{border-color:var(--done);background:var(--done-soft)}
  .box>strong:first-child{display:block;margin-bottom:4px}

  .feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:14px 0}
  .feature-grid>.feature-item:last-child:nth-child(odd){grid-column:1/-1}
  .feature-item{display:flex;gap:10px;align-items:flex-start}
  .feature-icon{font-size:22px;line-height:1.3;flex:0 0 auto}
  .feature-item strong{display:block;font-size:14.5px;margin-bottom:2px}
  .feature-item p{margin:0;font-size:13.5px;color:var(--ink-soft)}

  .top-link{display:block;text-align:right;font-size:12px;color:var(--ink-soft);
    text-decoration:none;margin-top:12px}
  footer{text-align:center;font-size:12px;color:var(--ink-soft);padding:16px 0 40px}

  @media (max-width:520px){
    nav.toc ol{columns:1}
    .feature-grid{grid-template-columns:1fr}
  }

  /* Telefon: nichts darf breiter werden als der Schirm. Tabellen werden
     schmaler (kleinere Schrift, engere Zellen, Silbentrennung); reicht das
     nicht (viele Spalten), scrollt nur die Tabelle in sich, nie die Seite.
     tbody als Tabelle haelt die volle Breite, wenn der Platz reicht. */
  body{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
  @media (max-width:420px){
    table{font-size:12.5px;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
    table>tbody{display:table;width:100%}
    th,td{padding:7px 5px}
    th .badge,td .badge{padding:2px 6px;font-size:11.5px}
  }