/* Verborgene Signale · Begleitseite — Aktivitäts-Lektionen
   Baut auf dem Design-System der Startseite auf (index.html). */
:root{
  --paper:#FAF8F3; --card:#FFFFFF; --ink:#242420; --muted:#5f5f58;
  --green:#2F5D3A; --green-d:#264c30; --amber:#8a5a1a; --red:#B5524C;
  --line:#E5E0D5; --codebg:#F4F0E6;
  --biene:#E0A82E; --ameise:#6B7A8F; --schmetterling:#C77DA0; --capybara:#6F9E78; --egel:#B5524C;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:18px;line-height:1.62}
.wrap{max-width:760px;margin:0 auto;padding:0 22px 90px}
a{color:var(--green);text-underline-offset:2px;text-decoration-thickness:1px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

header.top{border-bottom:1px solid var(--line);margin-bottom:30px;background:var(--paper)}
.top-inner{max-width:760px;margin:0 auto;padding:14px 22px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.brand{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.brand a{color:inherit;text-decoration:none}
.backlink{font-size:15px}

.eyebrow{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);font-family:var(--mono);margin:26px 0 10px}
h1{font-family:Georgia,var(--serif);font-weight:700;font-size:40px;line-height:1.1;margin:0 0 8px;letter-spacing:-.01em}
.sub{font-size:19px;color:var(--muted);font-style:italic;margin:0 0 22px;max-width:60ch}
h2{font-family:Georgia,var(--serif);font-size:25px;color:var(--green);margin:42px 0 12px;line-height:1.2;padding-bottom:6px;border-bottom:1px solid var(--line)}
h3{font-family:Georgia,var(--serif);font-size:20px;margin:26px 0 8px;line-height:1.25}
p{margin:0 0 15px}
.lede{font-size:20px}
strong{font-weight:700}
em{font-style:italic}

/* meta chips under the title */
.meta{display:flex;flex-wrap:wrap;gap:8px 10px;margin:0 0 8px}
.chip{font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 11px;color:#3a3a34}
.chip b{color:var(--ink)}
.tag{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.06em;border-radius:6px;padding:3px 8px;color:#fff}
.tag.h{background:var(--green)} .tag.s{background:var(--ameise)} .tag.hs{background:#6b8f7a}
.tag.m{background:var(--amber)} .tag.d{background:var(--schmetterling)} .tag.r{background:#7a6b8f}

/* call-out boxes */
.box{background:#F2F5F1;border:1px solid #e4ebe2;border-left:6px solid var(--green);border-radius:10px;padding:15px 18px;margin:18px 0}
.box.amber{background:#F6EFE0;border-color:#ece0c8;border-left-color:var(--amber)}
.box.red{background:#F7ECEB;border-color:#eed6d4;border-left-color:var(--red)}
.box.plain{background:#F3EFE5;border-left-color:#c9c0ab}
.box .bt{font-weight:700;color:var(--green);margin:0 0 6px;font-family:Georgia,var(--serif)}
.box.amber .bt{color:var(--amber)} .box.red .bt{color:var(--red)}
.box p:last-child,.box ul:last-child{margin-bottom:0}

ul,ol{margin:0 0 15px;padding-left:22px}
li{margin:0 0 6px}
ul.tight li{margin:0 0 3px}

/* step list */
.steps{list-style:none;counter-reset:s;padding:0;margin:16px 0}
.steps>li{counter-increment:s;position:relative;padding:2px 0 14px 44px;margin:0}
.steps>li::before{content:counter(s);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--green);color:#fff;font-family:var(--mono);font-size:15px;display:flex;align-items:center;justify-content:center}
.steps>li .st{font-weight:700}

/* tables */
table{width:100%;border-collapse:collapse;margin:14px 0 20px;font-size:16px}
th,td{border:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:top}
thead th{background:var(--green);color:#fff;font-family:Georgia,var(--serif);font-weight:700;font-size:15px}
tbody tr:nth-child(even){background:#F6F3EC}
td code,th code{font-size:14px}

/* figures */
figure{margin:22px 0}
figure img{width:100%;height:auto;border:1px solid var(--line);border-radius:10px;display:block}
figcaption{font-size:15px;color:#444;margin-top:7px}
figcaption b{color:#222}

/* code */
pre{font-family:var(--mono);font-size:13.5px;line-height:1.5;background:var(--codebg);color:#26302a;border:1px solid var(--line);border-radius:8px;padding:14px 16px;overflow:auto;margin:14px 0}
code{font-family:var(--mono);background:#efeadd;border-radius:4px;padding:1px 5px;font-size:.9em}
pre code{background:none;padding:0}
.formula{font-family:var(--mono);background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px 16px;margin:14px 0;font-size:15px;white-space:pre}

/* worksheet + solution reveal */
.sheet{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 22px;margin:20px 0}
.sheet h3{margin-top:0}
.sheet ol{padding-left:20px}
details.loesung{margin:14px 0 2px;border:1px solid #d8e0d6;border-radius:9px;background:#F2F5F1;overflow:hidden}
details.loesung>summary{cursor:pointer;list-style:none;padding:11px 16px;font-family:var(--mono);font-size:14px;letter-spacing:.04em;color:var(--green);font-weight:700;display:flex;align-items:center;gap:9px}
details.loesung>summary::-webkit-details-marker{display:none}
details.loesung>summary::before{content:"▸";transition:transform .15s}
details.loesung[open]>summary::before{transform:rotate(90deg)}
details.loesung .body{padding:2px 18px 16px;border-top:1px solid #dbe3d9;font-size:16px}
details.loesung .body p:first-child{margin-top:12px}

/* footer / nav between activities */
footer{margin-top:52px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.pager{display:flex;justify-content:space-between;gap:14px;margin:40px 0 0;flex-wrap:wrap}
.pager a{font-size:16px}
@media (max-width:560px){h1{font-size:32px}h2{font-size:22px}}

/* language toggle (DE/EN) — added for bilingual site */
.top-right{display:flex;gap:16px;align-items:baseline;flex-wrap:wrap}
.langtoggle{font-family:var(--mono);font-size:13px;letter-spacing:.05em;white-space:nowrap}
.langtoggle a{color:var(--muted);text-decoration:none;padding:0 1px}
.langtoggle a.on{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--amber);text-underline-offset:3px}
.langtoggle .sep{color:var(--line)}