/* Gemeinsames Aussehen aller Seiten („Mischung“): ruhig, weiß, viel Platz – mit dezenten Heft-Details
   (leichtes Karomuster, Textmarker-Gelb). Wird als LETZTE Stil-Datei geladen und überschreibt
   site.css, werkzeug.css und die Seiten-Stile von app.html.
   Farblogik überall gleich: Blau = erklären, Grün = sitzt schon, Orange = braucht noch Übung. */
:root{
  --paper:#ffffff; --grid:#f3ecdf;
  --h-ink:#1e2a24; --h-muted:#4a5a50; --h-line:#eadfcc;
  --h-blue:#1f4d3a; --h-blue-dark:#163a2c; --h-blue-soft:#e2f2e9;
  --h-green:#1d7a4a; --h-green-soft:#e3f5ea;
  --h-orange:#b4470c; --h-orange-soft:#fff0e3;
  --h-yellow:#f2b544; --h-yellow-soft:#fff3d4;
  --hand:"Caveat","Segoe Print","Bradley Hand","Marker Felt","Comic Sans MS",cursive;
}

/* Leichtes Karopapier */
body,body.legal{background-color:#fbf6ee!important;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px)!important;background-size:24px 24px!important}
input,select,textarea{background-color:#fff}
:focus-visible{outline:3px solid var(--h-blue);outline-offset:2px}

/* ---- Kopf mit Menü: siehe lernapp.css */

/* ---- Pfad und Werkzeugliste auf den Werkzeug-Seiten */
.pfad{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.pfad .zurueck{font-weight:700;color:var(--h-blue);text-decoration:none;padding:6px 0}
.pfad .alle-werkzeuge{border:0;background:transparent}
.pfad .alle-werkzeuge summary{padding:6px 10px;border-radius:10px;color:var(--h-muted);font-weight:700;cursor:pointer}
.pfad .alle-werkzeuge[open]{flex-basis:100%}
.pfad .alle-werkzeuge div,.pfad .alle-werkzeuge nav{padding:8px 0 0}
.tool-nav{gap:6px!important}
.tool-nav a{border-radius:999px!important;color:var(--h-ink)!important;background:#fff!important;border:1.5px solid var(--h-line);padding:6px 12px!important}
.tool-nav a[aria-current="page"]{background:var(--h-ink)!important;color:#fff!important;border-color:var(--h-ink)}

/* ---- Hinweis in der Lernansicht auf KI-Seiten */
.ki-kind-hinweis{background:var(--h-yellow-soft);border:1.5px solid #f0d36b;border-radius:12px;padding:12px 14px;line-height:1.45}

/* ---- Karten: ruhig und gerade */
.card,.legal-card{border:1px solid var(--h-line)!important;border-radius:14px!important;background:#fff;box-shadow:0 4px 14px rgba(27,36,64,.05)}
.card.donate,section.donate{background:var(--h-yellow-soft)!important;border-color:#f0d36b!important;box-shadow:none}

/* Überschriften mit Textmarker */
.wrap > header h1 mark,h1 mark{background:linear-gradient(transparent 52%,var(--h-yellow) 52%,var(--h-yellow) 92%,transparent 92%)!important;color:inherit}
.legal-card h1::after{background:var(--h-yellow)}

/* Lange Wörter und schmale Bildschirme */
.legal-card h1,.wrap h1{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
@media (max-width:600px){ .legal-card h1{font-size:1.75rem!important} }

/* Wissenstext unten (für Leser und Suchmaschinen) */
.seo-text{position:relative;background:#fff;border:1px solid var(--h-line);border-radius:14px;padding:26px 24px 22px;display:flex;flex-direction:column;gap:10px;color:#2b3452}
.seo-text h2{font-family:"Nunito","Trebuchet MS",sans-serif;font-size:1.4rem;line-height:1.2;margin:0 0 4px;color:#1e2a24}
.seo-text h3{font-family:"Nunito","Trebuchet MS",sans-serif;font-size:1.06rem;margin:10px 0 0;color:#1e2a24}
.seo-text p{margin:0;line-height:1.65;white-space:normal}
.seo-text .seo-quellen{font-size:.82rem;color:#4a5a50;margin-top:8px}
.seo-text .seo-quellen a{color:#1f4d3a}
/* „Warum funktioniert das?“ – Hintergrund und Forschung zum Aufklappen */
.seo-text details.warum{border-top:1px solid var(--h-line);padding-top:10px;display:flex;flex-direction:column;gap:10px}
.seo-text details.warum > summary{cursor:pointer;list-style:none;font-family:"Nunito","Trebuchet MS",sans-serif;font-weight:800;font-size:1.08rem;color:#163a2c;min-height:44px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.seo-text details.warum > summary::-webkit-details-marker{display:none}
.seo-text details.warum > summary::before{content:"";width:10px;height:10px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s;flex:0 0 auto;margin-right:2px}
.seo-text details.warum[open] > summary::before{transform:rotate(45deg)}
.seo-text details.warum > summary span{font-family:"Nunito","Segoe UI",sans-serif;font-weight:400;font-size:.9rem;color:#4a5a50}
.seo-text details.warum[open]{gap:10px}
.seo-text details.warum > :not(summary){margin-top:8px}