/* ===================================================================== Handreichung – Designsystem Fachseminar Mathematik · Studienseminar Hameln --------------------------------------------------------------------- Wiederverwendbares Stylesheet für Handreichungs-/One-Pager-Seiten. Einbinden im : Komponenten + Beispiel-Markup: siehe Vorlage-Handreichung.html ===================================================================== */ :root{ --bg:#f4f6f8; --card:#ffffff; --ink:#1f2933; --muted:#6b7785; --line:#dce3ea; --accent:#9a1b1b; --accent2:#2c5d8f; --pp:#1a7a3c; --p:#4c9c63; --o:#c08a18; --m:#b4451f; --pp-bg:#e7f4ec; --p-bg:#eef7f1; --o-bg:#fbf3e1; --m-bg:#fbeae3; --blue-bg:#eaf1f8; --shadow:0 1px 3px rgba(0,0,0,.08); --shadow2:0 4px 18px rgba(0,0,0,.10); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; background:var(--bg);color:var(--ink);font-size:17px;line-height:1.62} /* Institutioneller Kopf (Stil Studienseminar Hameln) */ header.gov{background:var(--card);border-bottom:4px solid var(--accent); box-shadow:var(--shadow);padding:14px 24px;display:flex;align-items:center;gap:18px} header.gov .wappen{height:64px;width:auto;flex:none} header.gov .titles{display:flex;flex-direction:column;line-height:1.28} header.gov .titles .l1{font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)} header.gov .titles .l2{font-size:21px;font-weight:800;color:var(--accent);letter-spacing:.2px} header.gov .titles .l3{font-size:13.5px;color:var(--ink)} header.gov .spacer{flex:1} header.gov a.brand{display:flex;align-items:center;gap:18px;text-decoration:none;color:inherit;border-radius:8px} header.gov a.brand:focus-visible{outline:2px solid var(--accent2);outline-offset:3px} header.gov .tag{font-size:12px;color:#fff;background:var(--accent2);padding:4px 11px;border-radius:20px;font-weight:600;white-space:nowrap} @media (max-width:640px){ header.gov{padding:12px 16px;gap:12px} header.gov a.brand{gap:12px} header.gov .wappen{height:50px} header.gov .titles .l2{font-size:17px} header.gov .tag{display:none} } main{max-width:860px;margin:0 auto;padding:8px 20px 64px} /* Hero */ .hero{padding:34px 0 8px} .eyebrow{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase; color:var(--accent2);margin-bottom:10px} h1{font-size:34px;line-height:1.18;margin:0 0 14px;color:var(--ink);font-weight:800;letter-spacing:-.2px} h1 .q{color:var(--accent)} .lead{font-size:19px;color:#37434f;margin:0 0 6px} /* Inhaltsverzeichnis */ nav.toc{background:var(--card);border:1px solid var(--line);border-radius:12px; padding:14px 18px;margin:26px 0 8px;box-shadow:var(--shadow)} nav.toc b{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-bottom:8px} nav.toc ol{margin:0;padding-left:20px;columns:2;column-gap:28px} nav.toc li{margin:3px 0;font-size:14.5px} nav.toc a{color:var(--accent2);text-decoration:none} nav.toc a:hover{text-decoration:underline} /* Infografik / Bild-Block */ .info{margin:30px 0 8px} .info h2.center{text-align:center;border:none;color:var(--ink);padding:0;margin:0 0 4px;font-size:21px} .info .cap{text-align:center;color:var(--muted);font-size:13.5px;margin:0 0 18px} .info .poster{margin:0 0 26px} .info .poster img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow2)} .info .poster figcaption{text-align:center;color:var(--muted);font-size:12.5px;margin-top:8px} .info .journey-label{text-align:center;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:700;margin:0 0 12px} /* Schritt-Karten (farbcodierte Kacheln) */ .journey{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch;justify-content:center} .step{flex:1 1 150px;min-width:150px;background:var(--card);border:1px solid var(--line);border-top:4px solid var(--c,#888); border-radius:12px;padding:14px 14px 16px;box-shadow:var(--shadow);position:relative} .step .n{font-size:12px;font-weight:800;color:#fff;background:var(--c,#888);width:26px;height:26px;border-radius:50%; display:flex;align-items:center;justify-content:center;margin-bottom:8px} .step h3{margin:0 0 2px;font-size:16px;color:var(--ink)} .step .en{font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:7px} .step p{margin:0;font-size:13px;color:#42505c;line-height:1.5} .step.s1{--c:var(--pp)} .step.s2{--c:var(--p)} .step.s3{--c:var(--o)} .step.s4{--c:var(--accent2)} .step.s5{--c:var(--m)} .foundation{margin:14px 0 0;background:linear-gradient(180deg,#eef2f6,#e6ecf2);border:1px dashed #b9c6d3; border-radius:12px;padding:12px 16px;font-size:13.5px;color:#3a4753;text-align:center} .foundation b{color:var(--accent2)} /* Video */ .videowrap{margin:26px 0 8px;background:var(--card);border:1px solid var(--line);border-radius:14px; padding:14px;box-shadow:var(--shadow2)} .videowrap video{width:100%;border-radius:9px;display:block;background:#000} .videowrap .vcap{font-size:13px;color:var(--muted);margin:10px 2px 0} .videowrap .vcap b{color:var(--ink)} /* Artikel-Abschnitte */ section.art{margin:34px 0} h2{font-size:23px;margin:0 0 6px;color:var(--ink);font-weight:800;letter-spacing:-.2px; padding-bottom:8px;border-bottom:2px solid var(--line)} h2 .num{color:var(--accent);font-weight:800;margin-right:8px} section.art p{margin:14px 0} section.art p.first{margin-top:12px} blockquote{margin:20px 0;padding:14px 18px;background:var(--blue-bg);border-left:4px solid var(--accent2); border-radius:0 10px 10px 0;color:#33414e;font-size:16px} blockquote .src{display:block;margin-top:8px;font-size:12.5px;color:var(--muted);font-style:normal} /* Tabellen */ .tablewrap{overflow-x:auto;margin:18px 0} table{border-collapse:collapse;width:100%;font-size:14.5px;background:var(--card); border:1px solid var(--line);border-radius:10px;overflow:hidden} caption{caption-side:top;text-align:left;font-size:13px;color:var(--muted);margin-bottom:8px;font-weight:600} th,td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left} thead th{background:var(--accent2);color:#fff;font-weight:700;font-size:13.5px} tbody tr:last-child td{border-bottom:none} tbody tr:nth-child(even){background:#f8fafc} td .ziel{font-weight:700;color:var(--accent2)} .formula{font-family:"Cambria Math",Georgia,serif;font-style:italic} /* Zwei-Spalten-Werkzeugkasten */ .toolbox{margin:24px 0;background:var(--card);border:1px solid var(--line);border-radius:14px; box-shadow:var(--shadow2);overflow:hidden} .toolbox .tb-head{background:var(--accent2);color:#fff;padding:12px 18px;font-weight:700;font-size:15.5px} .toolbox .tb-grid{display:grid;grid-template-columns:1fr 1fr;gap:0} .toolbox .tb-col{padding:16px 18px} .toolbox .tb-col:first-child{border-right:1px solid var(--line)} .toolbox .tb-col h4{margin:0 0 4px;font-size:15px} .toolbox .tb-col .lbl{font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:10px} .toolbox .tb-col.assess h4{color:var(--accent2)} .toolbox .tb-col.advance h4{color:var(--pp)} .toolbox dl{margin:0;font-size:14px} .toolbox dt{font-weight:700;color:var(--ink);margin-top:8px} .toolbox dd{margin:1px 0 0;color:#42505c} /* schmale Variante (z. B. Monitoring-Chart) */ .mini-chart{margin:18px 0} .mini-chart table{font-size:13.5px} .mini-chart thead th{background:#5a728c} /* Reflexions-/Hinweis-Box */ .reflect{margin:34px 0 0;background:var(--m-bg);border:1px solid #eccbbd;border-left:5px solid var(--m); border-radius:0 12px 12px 0;padding:18px 20px} .reflect b{color:var(--m)} .reflect h3{margin:0 0 8px;font-size:16px;color:var(--m);text-transform:uppercase;letter-spacing:.5px} /* Quellen-Fußzeile */ footer.src{margin-top:40px;padding-top:18px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)} footer.src b{color:var(--ink)} footer.src ul{margin:8px 0 0;padding-left:20px} footer.src li{margin:4px 0} .legal{margin-top:14px;font-size:12.5px;line-height:1.6;color:var(--muted)} .legal a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:1px} .legal a:hover{color:var(--ink);border-color:var(--ink)} .printline{margin-top:18px;font-size:12px;color:#9aa6b2} /* ===================================================================== Dark-Mode (umschaltbar über data-theme="dark" auf ) Aktivierung/Toggle: Vorlage/handreichung-theme.js Nur am Bildschirm – der Druck bleibt grundsätzlich hell. ===================================================================== */ .theme-toggle{position:fixed;right:18px;bottom:18px;z-index:60;width:46px;height:46px;border-radius:50%; border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;box-shadow:var(--shadow2); font-size:21px;line-height:1;display:flex;align-items:center;justify-content:center; transition:transform .15s,box-shadow .15s} .theme-toggle:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(0,0,0,.18)} .theme-toggle:focus-visible{outline:2px solid var(--accent2);outline-offset:3px} @media screen{ :root[data-theme="dark"]{ --bg:#0f151c; --card:#19212b; --ink:#e6ecf2; --muted:#9aa7b4; --line:#2b3742; --accent:#e98b7f; --accent2:#7fb2e6; --pp:#5cc98a; --p:#74b88c; --o:#d8b25a; --m:#e8916a; --pp-bg:#16291f; --p-bg:#15251b; --o-bg:#2a2413; --m-bg:#2c1d15; --blue-bg:#15202c; --shadow:0 1px 3px rgba(0,0,0,.5); --shadow2:0 6px 22px rgba(0,0,0,.55); } /* Sekundärtext (hartkodiertes #42505c / #37434f / #33414e / #3a4753) */ :root[data-theme="dark"] .lead{color:#c6cfd8} :root[data-theme="dark"] blockquote{color:#ccd5dd} :root[data-theme="dark"] .step p, :root[data-theme="dark"] .toolbox dd, :root[data-theme="dark"] .toolbox .tb-col p, :root[data-theme="dark"] .card p, :root[data-theme="dark"] .checklist li, :root[data-theme="dark"] details.worry .ans, :root[data-theme="dark"] .bar .lbl{color:#b4bec9} /* Flächen & Linien */ :root[data-theme="dark"] tbody tr:nth-child(even){background:#1e2832} :root[data-theme="dark"] .bar .track{background:#2a3540} :root[data-theme="dark"] .foundation{background:linear-gradient(180deg,#1b2530,#161d26); border-color:#33414f;color:#c6cfd8} :root[data-theme="dark"] .reflect{border-color:#5e3d2e} :root[data-theme="dark"] .printline{color:#828d99} :root[data-theme="dark"] .tags span.tool{border-color:#2f5b40} :root[data-theme="dark"] .verbs span{border-color:#2f465c} :root[data-theme="dark"] .verbs.green span{border-color:#2f5b40} /* Gefüllte Kopf-Flächen: tiefes Blau, damit weißer Text trägt */ :root[data-theme="dark"] thead th, :root[data-theme="dark"] .toolbox .tb-head, :root[data-theme="dark"] header.gov .tag{background:#21364b} :root[data-theme="dark"] .mini-chart thead th{background:#2c3e52} /* Farbige Zahlen-Badges: dunkle Ziffer auf hellem Akzent */ :root[data-theme="dark"] .step .n{color:#10171f} } @media (max-width:620px){ h1{font-size:27px} nav.toc ol{columns:1} .toolbox .tb-grid{grid-template-columns:1fr} .toolbox .tb-col:first-child{border-right:none;border-bottom:1px solid var(--line)} } @media print{ body{background:#fff;font-size:12pt} header.gov{box-shadow:none} .videowrap,nav.toc,.theme-toggle{display:none} main{max-width:none} .step,.toolbox,table{box-shadow:none} }