/* ── tool.css — Charakter „Lorem Ipsum“ ──────────────────────────────────────────────────────────────────
   WAS:   Akzente (Gold = Hauptton · Rot = Menge, römischer Stempel · Azur = Format), Raster Menge | Ergebnis und das Ergebnis selbst:
          #seite = schlichtes Papier mit genau dem Text, der kopiert wird (Absätze, bei HTML/Markdown der Quelltext in Mono).
   WARUM: Lauf 2 (27.10.): Ein Ergebnis statt Vorschau + Ausgabe-Tafel + Kennzahlen; keine feste Höhe, kein zweiter Scrollbereich.
   WIE ÄNDERN: Farben nur über --a1…--a3 hier; das Papier (--papier/--tinte) bleibt in beiden Themen hell. Grundbausteine in ../_werk/werk.css
              (nicht hier ändern; Kästen/(?): .fb-* dort). Raster: links .lp-links (Menge + .lp-optionen), rechts .lp-vor. Unter 980 px wird
              .lp-links zu display: contents, die Areas ordnen menge → vor → optionen (Eingabe zuerst). Desktop- und Handy-Feinschliff stehen
              in getrennten Medienblöcken am Ende. */
:root { --a1: #e0b15a; --a2: #e5645a; --a3: #5eb6e0; --a1-tinte: #2a1d00; --papier: #f7f4ec; --papier-2: #ece7da; --tinte: #1d1f24; --tinte-leise: #5b5f68; }
@media (prefers-color-scheme: light) { :root:not([data-thema="dunkel"]) { --a1: #96660a; --a2: #b73a31; --a3: #1b6f9c; --a1-tinte: #ffffff; --papier: #ffffff; --papier-2: #f1ede3; } }
:root[data-thema="hell"] { --a1: #96660a; --a2: #b73a31; --a3: #1b6f9c; --a1-tinte: #ffffff; --papier: #ffffff; --papier-2: #f1ede3; }

/* Kopf: Original-Icon (quadratisch, dunkel, transparente Ecken) auf neutralem Grund */
.kopf-glyphe { background: var(--flaeche-3); box-shadow: inset 0 0 0 1px var(--linie-stark), 0 10px 30px -14px rgba(0, 0, 0, .55); overflow: hidden; }
.kopf-glyphe img { display: block; width: 46px; height: 46px; object-fit: contain; }

/* Raster (Desktop): zwei Spalten, jede wächst mit ihrem Inhalt */
.lp-raster { display: grid; gap: 14px; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; grid-template-areas: "links vor"; }
.lp-links { grid-area: links; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.lp-optionen { display: flex; flex-direction: column; gap: 14px; }
.lp-vor { grid-area: vor; min-width: 0; }
.lp-menge { grid-area: menge; }
.lp-optionen { grid-area: optionen; }

/* Knopfzeile im Ergebniskopf: Kopieren · Neuer Text · Laden, rechts; bricht bei Platzmangel um */
.lp-vor .tafel-kopf { flex-wrap: wrap; gap: 8px 6px; }
.lp-aus-knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-left: auto; }
.lp-aus-knoepfe .ikon-knopf, .lp-aus-knoepfe .kopier.breit { height: 40px; border-radius: 12px; }
#kopier-aus { display: contents; }
.lp-wuerfel svg { transition: transform .5s var(--kurve); }
.lp-wuerfel:hover svg { transform: rotate(90deg); }

/* Ergebnis: Papier. Text = Absätze (jeder Block ein <p>), HTML/Markdown = Quelltext in Mono */
.lp-seite { width: 100%; padding: 26px 30px 20px; border-radius: 10px; background: var(--papier); color: var(--tinte);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 22px 40px -22px rgba(0, 0, 0, .55); font: 400 16px/1.65 var(--schrift); overflow-wrap: anywhere; }
.lp-seite > p { margin: 0 0 1em; white-space: pre-line; }
.lp-seite > :last-child { margin-bottom: 4px; }
.lp-seite .lp-ueb { font-weight: 700; color: var(--tinte); }
.lp-seite .lp-neu { animation: lp-ein .55s var(--kurve) both; }
@keyframes lp-ein { from { opacity: 0; transform: translateY(8px); } }
.lp-seite.lp-als-code { font-family: var(--mono); font-size: 14.5px; line-height: 1.65; }
.lp-seite pre { margin: 0 0 4px; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.lp-aus-zahl { margin: 12px 2px 0; font: 500 14px/1.5 var(--mono); color: var(--leise); }
.lp-vor .hinweis { margin-top: 6px; }

/* Menge */
.lp-einheiten { display: flex; width: 100%; margin-bottom: 14px; }
.lp-einheiten button { flex: 1; padding: 8px 4px; text-align: center; }
.lp-anzahl { margin-bottom: 4px; }
.lp-schnell { margin-top: 4px; }
.lp-schnell .chip { min-height: 40px; padding: 4px 14px; font: 500 16px var(--mono); }

/* Eingeklappte Kästen: Textart, Format */
.lp-opt + .lp-opt, .lp-format + .lp-opt { margin-top: 16px; }
.lp-opt .feld-label, .lp-format .feld-label { margin-bottom: 6px; }
.lp-quellen { display: grid; grid-template-columns: 1fr; gap: 8px; }
.chip[aria-pressed="true"] { background: color-mix(in srgb, var(--a1) 16%, var(--flaeche)); border-color: var(--a1); }
.chip[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.lp-quellen .chip { align-items: center; width: 100%; padding: 10px 14px; text-align: left; }
.lp-chip-t { display: flex; flex-direction: column; min-width: 0; }
.lp-chip-t b { font-size: 16px; }
.lp-chip-t small { font-size: 13.5px; }
.lp-ck { width: 18px; height: 18px; flex: none; border-radius: 6px; border: 2px solid var(--linie-stark); display: grid; place-items: center; transition: background .15s, border-color .15s; }
.lp-quellen .lp-ck { border-radius: 50%; }
.chip[aria-pressed="true"] .lp-ck { background: var(--a1); border-color: var(--a1); }
.chip[aria-pressed="true"] .lp-ck::after { content: ""; width: 9px; height: 5px; border: solid var(--a1-tinte); border-width: 0 0 2.4px 2.4px; transform: translateY(-1px) rotate(-45deg); }
.lp-format .segment { max-width: 100%; }

/* Tool-Profil „Über dieses Tool“ (statisch im HTML, SEO/GEO) — Muster pw-strength */
.tool-profil { margin-top: 18px; padding: 20px; border-radius: var(--r-gross); background: var(--flaeche); border: 1px solid var(--linie); box-shadow: var(--schatten); min-width: 0; }
.tool-profil-titel { margin: 0 0 10px; font: 700 15px/1.2 var(--schrift); letter-spacing: 0.08em; text-transform: uppercase; color: var(--leise); display: flex; align-items: center; gap: 9px; }
.tool-profil-titel::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--a1); }
.tool-profil h3 { margin: 18px 0 8px; font: 700 16px/1.3 var(--schrift); color: var(--text); }
.tool-profil p { margin: 0 0 10px; color: var(--leise); line-height: 1.6; }
.tool-profil-einl { color: var(--text); }
.tool-profil-liste { margin: 0; padding: 0 0 0 20px; color: var(--leise); line-height: 1.55; display: grid; gap: 4px; }
.tool-profil-faq { display: grid; gap: 8px; margin-top: 8px; }
.tool-profil-faq details { background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: var(--r); padding: 0 16px; }
.tool-profil-faq summary { list-style: none; cursor: pointer; padding: 13px 0; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.tool-profil-faq summary::-webkit-details-marker { display: none; }
.tool-profil-faq summary::after { content: "+"; margin-left: auto; font: 500 22px/1 var(--mono); color: var(--sehr-leise); transition: transform 0.25s var(--kurve); }
.tool-profil-faq details[open] summary::after { transform: rotate(45deg); }
.tool-profil-faq details p { margin: 0 0 14px; }

/* ── Tablet/Handy (≤ 980 px): eine Spalte, Eingabe zuerst: menge → Ergebnis → Textart/Format ── */
@media (max-width: 980px) {
  .lp-raster { grid-template-columns: minmax(0, 1fr); grid-template-areas: "menge" "vor" "optionen"; }
  .lp-links { display: contents; }
}
/* ── Handy (≤ 640 px) ── */
@media (max-width: 640px) {
  .kopf-glyphe img { width: 38px; height: 38px; }
  .lp-seite { padding: 20px 18px 14px; }
  .lp-aus-knoepfe { justify-content: flex-start; margin-left: 0; width: 100%; }
  .lp-aus-knoepfe .ikon-knopf .knopf-text { display: inline; font-size: 14px; }
  .tool-profil { padding: 16px; border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ── Lauf 2 entfernt (auskommentiert; Gründe: lauf2/lorem-ipsum/spec.json → entfernen; innere Kommentare beim Auskommentieren gestrichen) ──
@media (max-width: 980px) {
  .lp-raster { grid-template-columns: minmax(0, 1fr); grid-template-areas: "vor" "menge" "aus" "set"; }
  .lp-werte { grid-template-columns: 1fr 1fr; }
  .lp-werte .wert-zahl { font-size: 20px; }
  .lp-wuerfel { height: 38px; }
  .lp-aus-knoepfe .ikon-knopf .knopf-text { display: inline; font-size: 14px; }
}
*/