:root { --green:#174c48; --ink:#19342f; --muted:#667a72; --bg:#f7f8f5; --line:#e0e7e1; --white:#fff; --soft:#e8f3ed; --focus:#efb54f; font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); line-height:1.55; }
a { color:inherit; }
a:focus-visible, summary:focus-visible { outline:3px solid var(--focus); outline-offset:4px; }
.wrap { width:min(1020px, calc(100% - 40px)); margin-inline:auto; }
.site-header { background:var(--white); border-bottom:1px solid var(--line); }
.header-inner { display:flex; align-items:center; min-height:78px; }
.brand { text-decoration:none; display:inline-flex; align-items:center; gap:11px; font-size:23px; font-weight:850; letter-spacing:-.8px; color:var(--green); }
.brand-icon { width:43px; height:43px; background:var(--soft); border-radius:13px; display:grid; place-items:center; font-size:23px; }
main { min-height:calc(100svh - 155px); }
.intro { padding:75px 0 36px; }
.eyebrow { margin:0 0 12px; color:var(--green); font-size:13px; letter-spacing:1.2px; text-transform:uppercase; font-weight:800; }
h1 { font-size:clamp(36px,5vw,55px); line-height:1.13; letter-spacing:-1.7px; margin:0 0 13px; color:var(--ink); }
.lead { font-size:clamp(16px,2vw,19px); color:var(--muted); margin:0; max-width:760px; }
.subjects { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:17px; padding:8px 0 82px; }
.subject-link { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; position:relative; aspect-ratio:1 / 1; min-height:0; padding:22px 16px; background:var(--white); border:1px solid var(--line); border-radius:22px; text-decoration:none; box-shadow:0 3px 14px rgba(11,48,36,.025); transition:border-color .15s, box-shadow .15s, transform .15s; }
.subject-link:hover { border-color:#86b09b; transform:translateY(-2px); box-shadow:0 8px 22px rgba(11,48,36,.08); }
.subject-link .emoji { width:64px; height:64px; display:grid; place-items:center; background:var(--soft); border-radius:18px; font-size:31px; margin-bottom:16px; }
.subject-link strong { font-size:18px; letter-spacing:-.25px; line-height:1.25; max-width:12ch; }
.subject-link .sub-text { display:none; }
.subject-link .count { font-size:12px; color:#37725d; font-weight:750; margin-top:11px; }
.subject-link .arrow { display:none; }
.back { color:var(--green); font-weight:750; text-decoration:none; display:inline-flex; padding:20px 0; }
.back:hover { text-decoration:underline; }
.subject-title { display:flex; gap:20px; align-items:center; margin:10px 0 12px; }
.subject-title .emoji { flex-shrink:0; background:var(--soft); width:76px; height:76px; border-radius:22px; display:grid; place-items:center; font-size:39px; }
.subject-header { padding-bottom:24px; border-bottom:1px solid var(--line); }
.subject-header h1 { font-size:clamp(34px,5vw,49px); margin-bottom:2px; }
.subject-header .lead { font-size:16px; }
.idea-heading { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:10px; padding:28px 0 14px; }
.idea-heading h2 { font-size:23px; letter-spacing:-.5px; margin:0; }
.idea-heading p { color:var(--muted); font-size:14px; margin:0; }
.ideas { display:grid; gap:13px; padding-bottom:40px; }
details.idea { background:white; border-radius:16px; border:1px solid var(--line); overflow:hidden; }
details.idea[open] { border-color:#8dbbaa; box-shadow:0 8px 25px rgba(18,74,58,.07); }
.idea summary { padding:22px 23px; display:flex; justify-content:space-between; gap:16px; align-items:center; list-style:none; cursor:pointer; }
.idea summary::-webkit-details-marker { display:none; }
.idea summary:hover { background:#fbfdfb; }
.idea .summary-body { min-width:0; }
.idea .idea-name { display:block; font-size:18px; font-weight:780; line-height:1.32; }
.idea .meta { font-size:13px; font-weight:650; color:var(--muted); margin-top:7px; display:block; }
.idea .chevron { width:34px; height:34px; flex-shrink:0; display:grid; place-items:center; border-radius:50%; background:var(--soft); color:var(--green); font-size:23px; transition:transform .16s; }
.idea[open] .chevron { transform:rotate(45deg); }
.idea-content { padding:0 23px 23px; border-top:1px solid var(--line); }
.idea-content h3 { font-size:15px; font-weight:780; margin:21px 0 7px; }
.idea-content p { margin:0; color:#3a5148; }
.idea-content ol { margin:7px 0 0; padding-left:24px; }
.idea-content li { padding-left:3px; margin-bottom:9px; color:#3a5148; }
.idea-content .note { background:#f0f7f1; border-left:3px solid #91bfa4; padding:13px 15px; border-radius:0 8px 8px 0; }
.bottom-back { padding:14px 0 70px; }
.site-footer { background:white; border-top:1px solid var(--line); padding:21px 0; color:var(--muted); font-size:13px; }
.site-footer .wrap { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.site-footer strong { color:var(--green); }
@media(max-width:980px) { .subjects{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(max-width:700px) { .subjects{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:550px) { .wrap{width:calc(100% - 30px)} .header-inner{min-height:68px} .intro{padding:50px 0 26px} .subjects{gap:12px;padding-bottom:55px} .subject-link{padding:18px 12px;border-radius:18px} .subject-link .emoji{width:58px;height:58px;font-size:28px;margin-bottom:14px;border-radius:16px} .subject-link strong{font-size:16px;max-width:10ch} .subject-link .count{margin-top:8px;font-size:11px} .subject-title{gap:13px}.subject-title .emoji{width:61px;height:61px;font-size:31px;border-radius:16px}.subject-header h1{font-size:34px}.idea-heading h2{font-size:21px}.idea summary{padding:18px}.idea-content{padding:0 18px 18px} }
@media print { .site-header,.site-footer,.back,.bottom-back{display:none} body{background:white}.idea-content{display:block!important} details.idea{break-inside:avoid;margin-bottom:15px}.ideas{display:block} }

/* Korte materialelister gør aktiviteterne hurtige at forberede. */
.materials-list { list-style: none; margin: 9px 0 14px; padding: 0; display: grid; gap: 9px; }
.materials-list li { position: relative; padding: 10px 12px 10px 39px; border: 1px solid var(--line); border-radius: 10px; background: #f8fbf9; color: #344e44; }
.materials-list li::before { content: ""; position: absolute; width: 15px; height: 15px; left: 13px; top: 13px; background: #fff; border: 2px solid #84a998; border-radius: 4px; }
.grade-list { margin: 9px 0 16px; padding: 0; display: grid; gap: 9px; list-style: none; }
.grade-list li { color: #344e44; background: #f0f5f0; padding: 11px 13px; border-radius: 10px; }
.grade-list strong { color: var(--green); }
@media print { .materials-list li, .grade-list li { background: white !important; border-color: #ddd; } }

/* Eksterne undervisningsspil */
.external-game-link { display:inline-block; color:#fff; background:var(--green); border:1px solid var(--green); border-radius:11px; padding:12px 18px; font-weight:800; text-decoration:none; }
.external-game-link:hover { background:#24695f; }
.idea-content .external-note { font-size:13px; color:var(--muted); margin-top:10px; }

.pdf-preview { display:block; width:100%; min-height:550px; height:75vh; max-height:770px; margin-top:15px; border:1px solid var(--line); border-radius:12px; background:white; }
@media(max-width:550px) { .pdf-preview { min-height:390px; height:60vh; } }
@media print { .pdf-preview { display:none; } }