/* TinkerToys Unterrichtsmaterial – Übersicht und Einzelseite nach dem Website-Entwurf.
   Farben/Schriften aus dem TinkerToys Design System; die Variablen kommen aus dem Plugin TinkerSite (mit Ersatzwerten). */

.ttm{--ttm-ink:var(--tt-ink,#15232E);--ttm-text:var(--tt-text,#3B4954);--ttm-muted:var(--tt-muted,#5A6873);--ttm-blue:#107FC3;--ttm-head:var(--tt-font-head,'Tinker Sans','Barlow Semi Condensed',sans-serif);--ttm-body:var(--tt-font-body,'Barlow',system-ui,sans-serif);font-family:var(--ttm-body);color:var(--ttm-ink);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;box-sizing:border-box}
.ttm *,.ttm *::before,.ttm *::after{box-sizing:border-box}
.ttm :where(h1,h2,h3,p,ul,ol,dl,dd,figure){margin:0;padding:0}
.ttm :where(h1,h2,h3){font-family:var(--ttm-head);color:inherit;text-transform:none;letter-spacing:normal;font-style:normal}
.ttm :where(a){color:inherit;font-family:inherit;text-decoration:none;box-shadow:none}
.ttm :where(a:hover,a:focus){color:inherit;font-family:inherit;font-size:inherit}
.ttm img{max-width:100%;height:auto;border:0;border-radius:0;box-shadow:none}
.ttm .screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ttm button{font:inherit}
.ttm-eyebrow{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ttm-blue)}
.ttm-page.site-main{max-width:none;width:100%;margin:0;padding:0}

/* ------------------------------------------------ Übersicht */
.ttm-ov{display:flex;flex-direction:column;gap:18px}
.ttm-ov-head{display:flex;flex-direction:column;gap:14px;max-width:820px;padding-bottom:6px}
.ttm-ov-h{font-weight:800;font-size:clamp(44px,11vw,80px);line-height:.92;letter-spacing:-.015em}
.ttm-lead{font-size:19px;color:var(--ttm-text);max-width:620px}
.ttm-types{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ttm .ttm-type{all:unset;box-sizing:border-box;cursor:pointer;background:#FFFFFF;border:1.5px solid rgba(21,35,46,.12);border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:4px;color:var(--ttm-ink);font-family:var(--ttm-body);transition:border-color .2s,background .2s}
.ttm .ttm-type:hover{border-color:rgba(21,35,46,.35);background:#FFFFFF;color:var(--ttm-ink)}
.ttm .ttm-type[aria-pressed="true"]{background:var(--ttm-ink);border-color:var(--ttm-ink);color:#FFFFFF}
.ttm-type-h{display:flex;align-items:center;gap:8px;font-weight:800;font-size:16px;line-height:1.3}
.ttm-type-h i{width:10px;height:10px;border-radius:99px;flex:0 0 auto}
.ttm-type-h em{font-style:normal;font-weight:700;font-size:13px;opacity:.6}
.ttm-type-d{font-size:13px;line-height:1.4;color:var(--ttm-muted)}
.ttm-type[aria-pressed="true"] .ttm-type-d{color:rgba(255,255,255,.75)}
.ttm .ttm-type:focus-visible,.ttm .ttm-pill:focus-visible,.ttm-card:focus-visible,.ttm .ttm-reset:focus-visible,.ttm-mini:focus-visible,.ttm-dl:focus-visible,.ttm-btn:focus-visible,.ttm-need a:focus-visible,.ttm-back:focus-visible,.ttm-crumb a:focus-visible{outline:3px solid var(--ttm-blue);outline-offset:2px}
.ttm-bar{background:rgba(248,248,245,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);margin:0;padding:10px 0;display:flex;flex-direction:column;gap:8px}
.ttm-bar--sticky{position:sticky;top:calc(var(--wp-admin--admin-bar--height,0px) + 76px);z-index:20}
.ttm-search{display:flex;align-items:center;gap:8px;background:#FFFFFF;border:1.5px solid #DADAD6;border-radius:12px;padding:0 12px;color:var(--ttm-muted);margin:0}
.ttm-search:focus-within{border-color:var(--ttm-blue);box-shadow:0 0 0 4px rgba(16,127,195,.16)}
.ttm .ttm-search input{all:unset;flex:1 1 auto;min-width:0;min-height:46px;font-size:16px;color:var(--ttm-ink);font-family:var(--ttm-body)}
.ttm .ttm-search input::placeholder{color:#7A8690;opacity:1}
.ttm-row{position:relative;display:flex;gap:6px;align-items:center;overflow-x:auto;scrollbar-width:none;margin:0;padding:2px 0}
.ttm-row::-webkit-scrollbar{display:none}
.ttm-row-l{flex:0 0 auto;font-size:13px;font-weight:700;color:var(--ttm-muted);min-width:44px}
.ttm .ttm-pill{all:unset;position:relative;box-sizing:border-box;cursor:pointer;flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-height:38px;min-width:38px;justify-content:center;padding:0 12px;border-radius:999px;border:1.5px solid rgba(21,35,46,.16);background:#FFFFFF;color:var(--ttm-ink);font-family:var(--ttm-body);font-weight:700;font-size:14px;line-height:1;white-space:nowrap}
.ttm .ttm-pill:hover{border-color:rgba(21,35,46,.4);background:#FFFFFF;color:var(--ttm-ink)}
.ttm-pill i{width:9px;height:9px;border-radius:99px}
.ttm .ttm-pill[aria-pressed="true"]{background:var(--ttm-ink);border-color:var(--ttm-ink);color:#FFFFFF}
.ttm-count{font-size:15px;color:var(--ttm-muted);display:flex;gap:12px;align-items:center;flex-wrap:wrap;min-height:24px}
.ttm .ttm-reset,.ttm .ttm-empty button{all:unset;cursor:pointer;color:#0D68A0;font-weight:700;text-decoration:underline;text-underline-offset:3px;font-family:var(--ttm-body)}
.ttm .ttm-reset[hidden]{display:none}
.ttm-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.ttm-cardw{display:flex;margin:0;padding:0}
.ttm-cardw[hidden]{display:none}
.ttm .ttm-card{flex:1 1 auto;background:#FFFFFF;border:1px solid rgba(21,35,46,.08);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;color:var(--ttm-ink);transition:transform .2s ease,box-shadow .2s ease}
.ttm .ttm-card:hover{transform:translateY(-3px);box-shadow:0 16px 30px -18px rgba(21,35,46,.45);color:var(--ttm-ink)}
.ttm-card-img{position:relative;display:block;aspect-ratio:8 / 3;overflow:hidden}
.ttm-vis{position:absolute;inset:0;display:block}
.ttm-vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ttm-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--ttm-head);font-weight:800;font-size:46px;opacity:.9;letter-spacing:.02em}
.ttm-typ{position:absolute;left:10px;top:10px;font-size:12px;font-weight:800;line-height:1.4;border-radius:999px;padding:4px 10px;letter-spacing:.02em}
.ttm-card-b{display:flex;flex-direction:column;gap:8px;padding:14px 16px 16px;flex:1 1 auto}
.ttm-card-t{font-family:var(--ttm-head);font-weight:700;font-size:21px;line-height:1.12}
.ttm-chips{display:flex;flex-wrap:wrap;gap:6px}
.ttm-chip{font-size:12px;font-weight:700;line-height:1.4;border-radius:7px;padding:3px 8px;background:#EEF0F2;color:var(--ttm-text)}
.ttm-chip--line{background:transparent;border:1px solid rgba(21,35,46,.14)}
.ttm-acc{margin-top:auto;font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:6px;color:#15628A}
.ttm-acc--le{color:#036E5E}
.ttm-rel{font-size:13px;color:var(--ttm-muted)}
.ttm-empty{text-align:center;color:var(--ttm-muted);padding:24px}
.ttm-empty[hidden]{display:none}

/* ------------------------------------------------ Einzelseite */
.ttm-d{max-width:1180px;margin:0 auto;padding:28px 20px 48px;display:flex;flex-direction:column;gap:28px}
.ttm-crumb{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:var(--ttm-muted)}
.ttm .ttm-crumb a{color:var(--ttm-text);font-size:14px}
.ttm .ttm-crumb a:hover{text-decoration:underline;color:var(--ttm-ink);font-size:14px}
.ttm-crumb [aria-current]{color:var(--ttm-ink);font-weight:700}
.ttm-hero{display:flex;flex-direction:column-reverse;gap:20px}
.ttm-hero-t{display:flex;flex-direction:column;gap:14px;min-width:0}
.ttm-tags{display:flex;flex-wrap:wrap;gap:8px}
.ttm-tag{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:800;line-height:1.4;border-radius:999px;padding:5px 12px}
.ttm-tag i{width:9px;height:9px;border-radius:50%}
.ttm-h1{font-weight:800;font-size:clamp(40px,9.5vw,68px);line-height:.95;letter-spacing:-.015em;overflow-wrap:break-word;hyphens:auto}
.ttm-d .ttm-lead{max-width:600px}
.ttm-d .ttm-lead p+p{margin-top:.6em}
.ttm-meta{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.ttm-meta li{display:inline-flex;align-items:center;gap:8px;background:#FFFFFF;border:1px solid rgba(21,35,46,.1);border-radius:12px;padding:8px 12px;font-size:15px;font-weight:600;line-height:1.3;color:var(--ttm-ink)}
.ttm-meta svg{color:var(--ttm-blue);flex:0 0 auto}
.ttm-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.ttm-d--le .ttm-acts{display:none}
.ttm .ttm-btn{display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:0 22px;border-radius:14px;background:var(--ttm-blue);color:#FFFFFF;font-weight:800;font-size:16px;line-height:1.2;border:1.5px solid var(--ttm-blue)}
.ttm .ttm-btn:hover,.ttm .ttm-btn:focus{background:#15628A;border-color:#15628A;color:#FFFFFF;font-size:16px}
.ttm .ttm-btn--2{background:#FFFFFF;color:var(--ttm-ink);border-color:rgba(21,35,46,.18)}
.ttm .ttm-btn--2:hover,.ttm .ttm-btn--2:focus{background:#FFFFFF;color:#0D68A0;border-color:var(--ttm-blue)}
.ttm-fig{border-radius:24px;overflow:hidden;aspect-ratio:4 / 3;background:#D8EAF2;position:relative}
.ttm-fig img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
.ttm-fig-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--ttm-head);font-weight:800;font-size:clamp(72px,16vw,120px)}
.ttm-grid2{display:flex;flex-direction:column;gap:28px}
.ttm-aside{display:flex;flex-direction:column;gap:14px}
.ttm-dlbox{background:#FFFFFF;border:1px solid rgba(21,35,46,.08);border-radius:24px;padding:20px;display:flex;flex-direction:column;gap:18px;box-shadow:0 18px 36px -28px rgba(21,35,46,.5);scroll-margin-top:110px}
.ttm-dlhead h2{font-weight:800;font-size:28px;line-height:1.05}
.ttm-dlhead p{font-size:15px;color:var(--ttm-muted);margin-top:4px}
.ttm-dg{display:flex;flex-direction:column;gap:8px}
.ttm-dg h3{font-family:var(--ttm-body);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ttm-muted)}
.ttm-dg ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.ttm .ttm-dl{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 14px 8px 8px;border-radius:14px;border:1.5px solid rgba(21,35,46,.12);color:var(--ttm-ink);transition:border-color .15s ease,background .15s ease}
.ttm .ttm-dl:hover,.ttm .ttm-dl:focus{border-color:var(--ttm-blue);background:#F2F8FC;color:var(--ttm-ink)}
.ttm-dl-i{flex:0 0 auto;width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:#E7F2F9;color:var(--ttm-blue)}
.ttm-dl--play .ttm-dl-i{background:#EAF4D3;color:#3F6B07}
.ttm-dl--link .ttm-dl-i{background:#EEF0F2;color:var(--ttm-text)}
.ttm-dl-t{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.ttm-dl-t b{font-size:16px;font-weight:700;overflow-wrap:anywhere}
.ttm-dl-t small{font-size:13px;color:var(--ttm-muted)}
.ttm-need{background:#EAF4D3;border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;font-size:15px;line-height:1.45;color:#2F4A05}
.ttm .ttm-need a{color:var(--ttm-ink);font-weight:800;font-size:15px;text-decoration:underline;text-underline-offset:3px}
.ttm .ttm-need a:hover{color:var(--ttm-ink);font-size:15px}
.ttm-main{display:flex;flex-direction:column;gap:30px;min-width:0}
.ttm-sec{display:flex;flex-direction:column;gap:12px;scroll-margin-top:110px}
.ttm-sec h2,.ttm-more h2{font-weight:800;font-size:clamp(28px,6vw,38px);line-height:1}
.ttm-sec>p{font-size:18px;color:#24323C;max-width:680px}
.ttm-lzi{color:var(--ttm-muted);font-size:16px}
.ttm-lz{list-style:none;display:flex;flex-direction:column;gap:8px}
.ttm-lz li{display:flex;gap:12px;align-items:flex-start;background:#FFFFFF;border:1px solid rgba(21,35,46,.08);border-radius:14px;padding:12px 14px;font-size:16px;line-height:1.5}
.ttm-lz svg{flex:0 0 auto;color:#FFFFFF;background:#98C21D;border-radius:50%;padding:3px;width:22px;height:22px;margin-top:1px}
.ttm-facts{display:grid;grid-template-columns:minmax(0,1fr);background:#FFFFFF;border:1px solid rgba(21,35,46,.08);border-radius:20px;overflow:hidden}
.ttm-facts div{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-bottom:1px solid rgba(21,35,46,.07)}
.ttm-facts div:last-child{border-bottom:0}
.ttm-facts dt{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ttm-muted)}
.ttm-facts dd{font-size:16px;color:var(--ttm-ink)}
.ttm-facts ul{margin:0;padding-left:18px}
.ttm-more{display:flex;flex-direction:column;gap:16px;border-top:1px solid rgba(21,35,46,.1);padding-top:32px}
.ttm-more-h{display:flex;flex-direction:column;gap:8px}
.ttm-cards{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.ttm-cards li{display:flex}
.ttm .ttm-mini{flex:1 1 auto;display:flex;gap:14px;align-items:center;background:#FFFFFF;border:1px solid rgba(21,35,46,.08);border-radius:18px;padding:12px;color:var(--ttm-ink);transition:transform .2s ease,box-shadow .2s ease}
.ttm .ttm-mini:hover{transform:translateY(-2px);box-shadow:0 14px 28px -20px rgba(21,35,46,.45);color:var(--ttm-ink)}
.ttm-mini-v{position:relative;flex:0 0 auto;width:64px;height:64px;border-radius:14px;overflow:hidden;display:block}
.ttm-mini-v img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ttm-mini-v .ttm-ph{font-size:24px}
.ttm-mini-b{display:flex;flex-direction:column;gap:3px;min-width:0}
.ttm-typ--s{position:static;align-self:flex-start;font-size:11px;padding:2px 8px}
.ttm-mini-b b{font-family:var(--ttm-head);font-weight:700;font-size:20px;line-height:1.1}
.ttm-mini-b small{font-size:13px;color:var(--ttm-muted)}
.ttm .ttm-back{align-self:flex-start;font-weight:700;font-size:16px;color:#0D68A0;margin-top:4px}
.ttm .ttm-back:hover{text-decoration:underline;color:#0D68A0;font-size:16px}

@media (prefers-reduced-motion:reduce){.ttm .ttm-card,.ttm .ttm-mini,.ttm .ttm-dl{transition:none}.ttm .ttm-card:hover,.ttm .ttm-mini:hover{transform:none}}
@media (min-width:700px){
	.ttm-types{grid-template-columns:repeat(4,minmax(0,1fr))}
	.ttm-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
	.ttm-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
	.ttm-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
	.ttm-facts div:nth-last-child(2):nth-child(odd){border-bottom:0}
	.ttm-facts div:nth-child(odd){border-right:1px solid rgba(21,35,46,.07)}
}
@media (min-width:1024px){
	.ttm-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
	.ttm-bar--sticky{top:calc(var(--wp-admin--admin-bar--height,0px) + 88px)}
	.ttm-d{padding-top:48px;gap:40px}
	.ttm-hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:48px;align-items:center}
	.ttm-grid2{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:56px;align-items:start}
	.ttm-grid2--solo{display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:16px}
	.ttm-grid2--solo .ttm-aside{position:static;flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:16px;width:100%}
	.ttm-grid2--solo .ttm-dlbox{flex:1 1 480px;max-width:640px}
	.ttm-grid2--solo .ttm-need{flex:0 1 420px}
	.ttm-aside{order:2;position:sticky;top:calc(var(--wp-admin--admin-bar--height,0px) + 104px)}
	.ttm-main{order:1}
	.ttm-d--le .ttm-acts{display:flex}
	.ttm-cards{grid-template-columns:repeat(4,minmax(0,1fr))}
	.ttm .ttm-mini{align-items:flex-start}
	.ttm-mini-v{width:52px;height:52px;border-radius:12px}
	.ttm-mini-v .ttm-ph{font-size:20px}
}