/* Klargesagt · Stil der neun Musterseiten. Farben, Schriften, Werkzeug, Inhalt. */

  :root {
    --ink:#16171a; --ink-2:#4a4d54; --ink-3:#7c8089;
    --paper:#fbfaf8; --paper-2:#f1efeb; --line:#ddd9d2; --line-soft:#eae7e1;
    --marker:#ffd84d; --marker-soft:#fff3c4;
    --deep:#1f3d8f; --deep-ink:#16306f; --deep-wash:#e8ecf9;
    --sans:"Bricolage Grotesque", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
    --serif:"Source Serif 4", Georgia, "Times New Roman", serif;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ink:#f0eee9; --ink-2:#b6b3ac; --ink-3:#85837d;
      --paper:#121316; --paper-2:#1c1d21; --line:#2f3137; --line-soft:#26282d;
      --marker:#e8b400; --marker-soft:#3b3009;
      --deep:#8fa8ee; --deep-ink:#adc0f5; --deep-wash:#1a2140;
    }
  }
  :root[data-theme="dark"] {
    --ink:#f0eee9; --ink-2:#b6b3ac; --ink-3:#85837d;
    --paper:#121316; --paper-2:#1c1d21; --line:#2f3137; --line-soft:#26282d;
    --marker:#e8b400; --marker-soft:#3b3009;
    --deep:#8fa8ee; --deep-ink:#adc0f5; --deep-wash:#1a2140;
  }

  * { box-sizing: border-box; }

  body {
    background: var(--paper); color: var(--ink);
    font-family: var(--serif); font-size: 17.5px; line-height: 1.66;
    -webkit-font-smoothing: antialiased;
    caret-color: var(--deep);
  }
  ::selection { background: var(--marker); color: #16171a; }
  .page { max-width: 44rem; margin: 0 auto; padding: 0 22px 80px; }

  /* header */
  .top {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; padding: 24px 0 0;
  }
  .mark {
    font-family: var(--sans); font-weight: 700; font-size: 19px;
    letter-spacing: -.02em; color: var(--ink); text-decoration: none;
  }
  .mark .dot { color: var(--brand, var(--marker)); }
  .crumb { font-family: var(--sans); font-size: 13px; color: var(--ink-3); text-align: right; }

  /* hero */
  header.hero { padding: 44px 0 0; }
  h1 {
    font-family: var(--sans); font-weight: 600;
    font-size: clamp(30px, 5.4vw, 46px); line-height: 1.08;
    letter-spacing: -.03em; margin: 0 0 20px; text-wrap: balance;
  }
  /* Der Textmarker wird einmal gezogen: über die Überschrift beim Laden,
     über den eigenen Satz, wenn er erscheint. Die eine Bewegung der Seite. */
  .hl {
    background-image: linear-gradient(transparent 58%, var(--marker) 58%, var(--marker) 94%, transparent 94%);
    background-repeat: no-repeat; background-size: 100% 100%;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
    padding: 0 .08em;
    animation: strich .75s cubic-bezier(.2,.7,.2,1) .3s both;
  }
  @keyframes strich { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
  .intro { font-size: 19px; color: var(--ink-2); margin: 0; max-width: 34em; }

  /* generic */
  section { padding: 50px 0 0; }
  h2 {
    font-family: var(--sans); font-weight: 600;
    font-size: clamp(23px, 3.4vw, 29px); line-height: 1.16;
    letter-spacing: -.02em; margin: 0 0 12px; text-wrap: balance;
  }
  h3 {
    font-family: var(--sans); font-weight: 600; font-size: 18.5px;
    letter-spacing: -.01em; margin: 26px 0 6px;
  }
  p { margin: 0 0 16px; }
  p:last-child { margin-bottom: 0; }
  .prose p { color: var(--ink-2); max-width: 36em; }
  .prose p strong, .prose li strong { color: var(--ink); font-weight: 600; }

  /* ordered structure */
  ol.build { counter-reset: s; list-style: none; padding: 0; margin: 18px 0 0; }
  ol.build li {
    counter-increment: s; position: relative;
    padding: 0 0 20px 46px; color: var(--ink-2); max-width: 36em;
  }
  ol.build li::before {
    content: counter(s);
    position: absolute; left: 0; top: 1px;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--ink); color: var(--paper);
    font-family: var(--sans); font-size: 14px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
  }
  ol.build .said {
    display: block; font-family: var(--serif); font-size: 18px;
    color: var(--ink); background: var(--marker-soft);
    padding: 7px 11px; border-radius: 5px; margin: 6px 0 7px;
  }

  /* tool */
  .tool {
    margin-top: 30px;
    border: 1px solid var(--line); border-radius: 14px;
    background: var(--paper-2); overflow: hidden;
  }
  .tool-bar {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 11px 18px; border-bottom: 1px solid var(--line);
    font-family: var(--sans); font-size: 12px; letter-spacing: .07em;
    text-transform: uppercase; color: var(--ink-3);
  }
  .restart {
    appearance: none; background: none; border: 0; padding: 0; font: inherit;
    color: var(--deep); cursor: pointer; text-transform: none; letter-spacing: 0;
    font-size: 13px; text-decoration: underline; text-underline-offset: 2px;
    white-space: nowrap;
  }
  .restart:focus-visible { outline: 3px solid var(--marker); outline-offset: 2px; border-radius: 2px; }
  .screen { padding: 24px 22px 26px; }
  .screen[hidden] { display: none !important; }
  .progress { display: flex; gap: 5px; margin-bottom: 20px; }
  .progress i { height: 3px; flex: 1; border-radius: 2px; background: var(--line); }
  .progress i.on { background: var(--ink); }
  .q { font-family: var(--sans); font-weight: 600; font-size: 19px; letter-spacing: -.01em; margin: 0 0 5px; }
  .hint { font-family: var(--sans); font-size: 14px; color: var(--ink-3); margin: 0 0 14px; }

  .chips { display: flex; flex-wrap: wrap; gap: 7px; }
  .chip, .opt {
    appearance: none; font-family: var(--sans); font-size: 14.5px;
    border: 1px solid var(--line); background: var(--paper); color: var(--ink-2);
    cursor: pointer; transition: border-color .12s, color .12s, background .12s;
  }
  .chip { padding: 8px 13px; border-radius: 999px; }
  .opt { padding: 11px 14px; border-radius: 7px; text-align: left; }
  .chip:hover, .opt:hover { border-color: var(--deep); color: var(--ink); }
  .chip[aria-pressed="true"], .opt[aria-pressed="true"] {
    background: var(--deep-wash); border-color: var(--deep); color: var(--deep-ink); font-weight: 600;
  }
  .chip:focus-visible, .opt:focus-visible { outline: 3px solid var(--marker); outline-offset: 2px; }
  .opts { display: flex; flex-direction: column; gap: 6px; }
  .field + .field { margin-top: 22px; }
  .frei {
    display: block; width: 100%; margin-top: 8px;
    font-family: var(--serif); font-size: 16.5px; line-height: 1.4;
    color: var(--ink); background: var(--paper);
    border: 1px solid var(--line); border-radius: 7px; padding: 11px 14px;
  }
  .frei:focus { outline: 3px solid var(--marker); border-color: var(--ink); }
  .frei::placeholder { color: var(--ink-3); opacity: .9; }

  textarea {
    width: 100%; min-height: 120px; resize: vertical;
    font-family: var(--serif); font-size: 17px; line-height: 1.55;
    color: var(--ink); background: var(--paper);
    border: 1px solid var(--line); border-radius: 8px; padding: 13px 14px;
  }
  textarea:focus { outline: 3px solid var(--marker); border-color: var(--ink); }
  textarea::placeholder { color: var(--ink-3); opacity: .9; }
  .gate { font-family: var(--sans); font-size: 13.5px; color: var(--ink-3); margin: 9px 0 0; min-height: 1.4em; }
  .gate.ok { color: var(--deep); }
  .gate.geduld { color: var(--ink-2); }
  /* Deckelung erreicht: kein Fehler, sondern der Moment, in dem das Angebot kommt */
  .gate.limit {
    font-size: 15px; line-height: 1.5; color: var(--ink); margin-top: 12px;
    padding: 12px 15px; border-radius: 8px;
    background: var(--marker-soft); border: 1px solid var(--line);
  }
  .gate.limit a { display: inline-block; margin-top: 4px; color: var(--deep-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
  .gate.limit a:hover { color: var(--deep); }

  /* Rückfrage oder Hinweis vom Modell: muss auffallen, sonst wirkt der
     Sprung zurück zum Textfeld wie ein Fehler. */
  #server-notiz {
    font-family: var(--serif); font-size: 16.5px; line-height: 1.5; min-height: 0;
    margin: 12px 0 0; padding: 12px 15px; border-radius: 8px;
    background: var(--marker-soft); color: var(--ink); border: 1px solid var(--line);
  }
  #server-notiz.ok { background: var(--deep-wash); color: var(--deep-ink); border-color: var(--deep); }
  #server-notiz::before {
    content: "Noch eine Frage, dann kommt dein Satz:"; display: block;
    font-family: var(--sans); font-size: 12px; letter-spacing: .07em; text-transform: uppercase;
    color: var(--deep); margin-bottom: 4px;
  }
  #server-notiz:not(.ok)::before { content: "Damit kann ich noch nichts anfangen:"; color: var(--ink-3); }

  .go {
    appearance: none; width: 100%; margin-top: 22px; padding: 14px 18px;
    border: 1px solid var(--ink); border-radius: 7px;
    background: var(--ink); color: var(--paper);
    font-family: var(--sans); font-size: 16px; font-weight: 600; cursor: pointer;
  }
  .go:hover:not(:disabled) { background: var(--deep); border-color: var(--deep); color: #fff; }
  .go:disabled { background: transparent; color: var(--ink-3); border-color: var(--line); cursor: not-allowed; }
  .go[aria-busy="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); opacity: .72; cursor: progress; }
  .go:focus-visible { outline: 3px solid var(--marker); outline-offset: 2px; }

  /* result */
  .tagline {
    display: inline-block; font-family: var(--sans); font-size: 12px;
    letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
    color: var(--deep-ink); background: var(--deep-wash);
    border-radius: 999px; padding: 5px 11px; margin-bottom: 14px;
  }
  :root[data-theme="dark"] .tagline { color: var(--deep); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tagline { color: var(--deep); } }
  .diag { color: var(--ink-2); font-size: 16.5px; margin: 0 0 22px; }
  .cap { font-family: var(--sans); font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 9px; }
  .sentence {
    background-image: linear-gradient(var(--marker-soft), var(--marker-soft));
    background-repeat: no-repeat; background-size: 100% 100%;
    border: 1px solid var(--line); border-radius: 9px;
    padding: 17px 18px; font-size: 18.5px; line-height: 1.5;
  }
  .sentence.neu { animation: strich .9s cubic-bezier(.2,.7,.2,1) .15s both; }
  .copy-row { display: flex; align-items: center; gap: 10px; margin-top: 11px; }
  .copy-btn {
    appearance: none; font-family: var(--sans); font-size: 13.5px; font-weight: 600;
    padding: 7px 13px; border-radius: 6px; border: 1px solid var(--line);
    background: var(--paper); color: var(--ink-2); cursor: pointer;
  }
  .copy-btn:hover { border-color: var(--deep); color: var(--ink); }
  .copied { font-family: var(--sans); font-size: 13px; color: var(--deep); }

  .why { margin: 22px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
  .why li { font-family: var(--sans); font-size: 14.5px; color: var(--ink-2); padding-left: 17px; position: relative; }
  .why li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; background: var(--marker); }
  .why b { color: var(--ink); font-weight: 600; }

  .divider { height: 1px; background: var(--line); margin: 26px 0; }
  .react-lead { font-family: var(--sans); font-weight: 600; font-size: 16px; margin: 0 0 12px; }

  .react-btn {
    display: block; width: 100%; text-align: left; appearance: none;
    font-family: var(--serif); font-size: 17px; line-height: 1.45;
    padding: 12px 15px; border-radius: 14px 14px 14px 4px;
    border: 1px solid var(--line); background: var(--paper); color: var(--ink-2);
    cursor: pointer; margin-bottom: 8px;
  }
  .react-btn:hover { border-color: var(--deep); color: var(--ink); }
  .react-btn:focus-visible { outline: 3px solid var(--marker); outline-offset: 2px; }
  .react-btn:disabled { opacity: .5; cursor: default; border-color: var(--line); color: var(--ink-2); }
  .react-btn[aria-busy="true"] { opacity: 1; cursor: progress; border-color: var(--deep); color: var(--ink); }
  .react-btn[aria-busy="true"] small { color: var(--deep); }
  .react-btn small {
    display: block; font-family: var(--sans); font-size: 11.5px;
    letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-top: 6px;
  }
  .bubble-them, .bubble-you {
    font-size: 17px; line-height: 1.5; padding: 12px 15px; max-width: 93%;
  }
  .bubble-them { background: var(--paper); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; }
  .bubble-you { background: var(--deep-wash); border: 1px solid var(--deep); border-radius: 14px 14px 4px 14px; margin-left: auto; }
  .turn { font-family: var(--sans); font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin: 18px 0 8px; }

  .cut {
    margin-top: 26px; background: var(--marker-soft);
    border: 1px solid var(--marker); border-radius: 12px; padding: 20px 19px;
  }
  .cut h4 { font-family: var(--sans); font-weight: 600; font-size: 20px; letter-spacing: -.015em; margin: 0 0 8px; }
  .cut p { font-size: 16px; color: var(--ink-2); margin: 0 0 16px; }
  .cta {
    appearance: none; display: block; width: 100%; padding: 14px 18px;
    border: 1px solid var(--ink); border-radius: 7px; background: var(--ink); color: var(--paper);
    font-family: var(--sans); font-size: 16px; font-weight: 600; cursor: pointer;
  }
  .cta:hover { background: var(--deep); border-color: var(--deep); color: #fff; }
  .cta-sub { font-family: var(--sans); text-align: center; font-size: 13px; color: var(--ink-3); margin: 9px 0 0; }
  .alt { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--marker); font-family: var(--sans); font-size: 14px; color: var(--ink-2); }
  .mailrow { display: flex; gap: 7px; margin-top: 10px; flex-wrap: wrap; }
  .mailrow input {
    flex: 1 1 190px; min-width: 0; font-family: var(--serif); font-size: 15px;
    padding: 10px 12px; border-radius: 6px; border: 1px solid var(--line);
    background: var(--paper); color: var(--ink);
  }
  .mailrow input:focus { outline: 3px solid var(--ink); border-color: var(--ink); }
  .mailrow button {
    appearance: none; font-family: var(--sans); font-size: 15px; font-weight: 600;
    padding: 10px 16px; border-radius: 6px; border: 1px solid var(--ink);
    background: transparent; color: var(--ink); cursor: pointer; white-space: nowrap;
  }

  /* faq */
  details {
    border-bottom: 1px solid var(--line-soft); padding: 4px 0;
  }
  details summary {
    font-family: var(--sans); font-weight: 600; font-size: 17px;
    padding: 14px 30px 14px 0; cursor: pointer; position: relative; list-style: none;
  }
  details summary::-webkit-details-marker { display: none; }
  details summary::after {
    content: "+"; position: absolute; right: 4px; top: 12px;
    font-size: 22px; font-weight: 400; color: var(--ink-3);
  }
  details[open] summary::after { content: "\2013"; }
  details summary:focus-visible { outline: 3px solid var(--marker); outline-offset: 2px; }
  details .a { color: var(--ink-2); padding: 0 0 16px; max-width: 36em; }
  details .a p { margin-bottom: 12px; }
  .faq { border-top: 1px solid var(--line); margin-top: 18px; }

  /* Hintergrundtext: zugeklappt, damit er nicht wie die Erklärung des
     eigenen Satzes wirkt. Bleibt für Suchmaschinen vollständig lesbar. */
  .hintergrund .lead { font-family: var(--sans); font-size: 14.5px; color: var(--ink-3); margin: 0 0 4px; max-width: 36em; }
  .erkl summary { font-size: 18.5px; padding: 16px 32px 16px 0; }
  .erkl summary::after { top: 14px; }
  .erkl .a { padding-bottom: 24px; }
  .erkl .a > p:first-child, .erkl .a > h3:first-child { margin-top: 4px; }
  .erkl .a ol.build { margin-top: 14px; }

  /* other patterns */
  .others { display: flex; flex-direction: column; border-top: 1px solid var(--line); margin-top: 18px; }
  a.other {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding: 14px 2px; border-bottom: 1px solid var(--line-soft);
    text-decoration: none; color: var(--ink); transition: background .12s;
  }
  a.other:hover { background: var(--paper-2); }
  a.other > span:first-child { transition: transform .14s cubic-bezier(.2,.7,.2,1); }
  a.other:hover > span:first-child { transform: translateX(8px); }
  a.other:focus-visible { outline: 2px solid var(--deep); outline-offset: -2px; }
  a.other .tag { font-family: var(--sans); font-size: 12px; color: var(--ink-3); white-space: nowrap; }
  a.other:hover .tag { color: var(--deep); }

  footer {
    margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line);
    font-family: var(--sans); font-size: 13.5px; color: var(--ink-3);
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  }
  footer a { color: var(--ink-3); text-decoration: none; border-bottom: 1px solid var(--line); }
  footer a:hover { color: var(--ink); }

  [hidden] { display: none !important; }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }