/* AK86 2026 – Code of the Week als Labor (labor.js). Der Code steht immer dunkel, wie auf einem Schirm */
.lab-kopf, .lab-demo, .lab-schluss { position: relative; z-index: 2; padding-inline: var(--gut); }
.lab-kopf { padding-top: clamp(170px, 24svh, 240px); padding-bottom: clamp(40px, 7vh, 80px); }
.lab-kopf h1 { font-size: clamp(54px, 13vw, 250px); text-transform: none; margin-top: 14px; }
.lab-kopf .kick { color: var(--textcolor); }
.lab-sub { margin: 14px 0 0; font-weight: 700; font-size: clamp(20px, 2.6vw, 44px); line-height: 1.15; letter-spacing: -.01em; }
.lab-lead { max-width: 62ch; margin-top: clamp(24px, 3.5vw, 44px); font-size: clamp(17px, 1.3vw, 21px); line-height: 1.5; }
.lab-lead p { margin: 0 0 .8em; }

/* Steckbrief */
.lab-steck { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; margin: clamp(30px, 4vw, 54px) 0 0; border: 1px solid rgba(var(--gridcolor-rgb),.26); background: rgba(var(--gridcolor-rgb),.26); }
.lab-steck > div { padding: 16px 18px; background: rgba(var(--bgcolor-rgb),.42); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.lab-steck dt { font: 12px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(var(--gridcolor-rgb),.72); }
.lab-steck dd { margin: 8px 0 0; font-family: var(--f-ext); font-stretch: 125%; font-weight: 900; font-size: clamp(19px, 1.7vw, 28px); line-height: 1.05; letter-spacing: -.02em; }
.lab-nerd { display: flex; gap: 5px; height: 1.05em; align-items: center; }
.lab-nerd i { width: 16px; height: 16px; border: 1px solid rgba(var(--gridcolor-rgb),.5); }
.lab-nerd i.an { background: var(--static-maincolor); border-color: var(--static-maincolor); }
.lab-ja { color: var(--static-seccolor); }
.lab-nein { color: var(--static-maincolor); }
html.lightmode .lab-ja { color: #1d7f7c; }

/* Demo */
.lab-demo { padding-top: clamp(50px, 8vh, 100px); padding-bottom: clamp(30px, 5vh, 60px); scroll-margin-top: 90px; }
.lab-demo h2, .lab-schluss h2 { font-size: clamp(28px, 3.4vw, 62px); line-height: 1.02; letter-spacing: -.02em; }
.lab-text { max-width: 66ch; margin: -8px 0 clamp(20px, 2.4vw, 32px); font-size: clamp(16px, 1.15vw, 19px); line-height: 1.5; }
.lab-text code, .lab-lead code { font: .92em var(--f-mono); }
.lab-tisch { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.lab-hinweis { max-width: 80ch; margin: 14px 0 0; font: 13px/1.6 var(--f-mono); color: rgba(var(--gridcolor-rgb),.75); }

/* Bühne */
.lab-buehne { min-width: 0; padding: clamp(16px, 2vw, 28px); border: 1px solid rgba(var(--gridcolor-rgb),.26); background: rgba(var(--bgcolor-rgb),.5); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.lab-buehne .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.lab-buehne .card { min-width: 0; border: 2px solid transparent; background: rgba(var(--gridcolor-rgb),.07); transition: transform .2s, box-shadow .2s, border-color .2s; }
.lab-buehne .card img { display: block; width: 100%; height: 120px; object-fit: cover; }
.lab-buehne .card-body { padding: 14px; }
.lab-buehne .card h3 { margin: 0 0 6px; font-size: 16px; line-height: 1.2; }
.lab-buehne .card p { margin: 0; font-size: 13.5px; line-height: 1.45; opacity: .8; }
.lab-buehne .form-group { margin-bottom: 18px; }
.lab-buehne .form-group label { display: block; margin-bottom: 8px; font: 13px var(--f-mono); opacity: 1; transition: color .2s; }
.lab-buehne input { width: 100%; max-width: 100%; padding: 12px 14px; font: 16px var(--f-body); color: var(--textcolor); background: rgba(var(--gridcolor-rgb),.06); border: 2px solid rgba(var(--gridcolor-rgb),.3); border-radius: 0; outline: none; transition: border-color .2s, width .3s; }
.lab-buehne input::placeholder { color: rgba(var(--gridcolor-rgb),.6); }
.lab-buehne .nav-demo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 14px 16px; background: rgba(var(--gridcolor-rgb),.07); }
.lab-buehne .logo { font-family: var(--f-ext); font-stretch: 125%; font-weight: 900; font-size: 18px; }
.lab-buehne .nav-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; transition: opacity .3s; }
.lab-buehne .nav-links a { font-size: 14px; text-decoration: none; }
.lab-buehne .search-input { width: 150px; margin-left: auto; padding: 8px 12px; font-size: 14px; border-width: 1px; }

/* Code */
.lab-code { --zh: 21px; min-width: 0; display: flex; flex-direction: column; background: #141413; color: #e8e6df; border: 1px solid #2c2c2b; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.lab-kopfzeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; font: 12px var(--f-mono); background: #1e1e1d; border-bottom: 1px solid #2c2c2b; }
.lab-live { display: inline-flex; align-items: center; gap: 7px; font-weight: 400; color: #50BBB8; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; }
.lab-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #50BBB8; box-shadow: 0 0 8px #50BBB8; animation: toastpunkt 1.2s ease-in-out infinite; }
.lab-ed { flex: 1; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: #4a4a49 transparent; }
.lab-ed-in { position: relative; min-width: 100%; width: calc(var(--zeichen, 40) * 1ch + 40px); font: 13px/var(--zh) var(--f-mono); padding: 12px 0; }
.lab-z { white-space: pre; pointer-events: none; }
.lab-z > div { min-height: var(--zh); padding: 0 16px 0 17px; box-shadow: inset 3px 0 0 transparent; transition: background-color .18s, box-shadow .18s; }
.lab-z > div.an { background: rgba(80,187,184,.15); box-shadow: inset 3px 0 0 #50BBB8; }
.lab-ta { position: absolute; left: 0; top: 12px; display: block; width: 100%; height: calc(100% - 24px); margin: 0; padding: 0 16px 0 17px; border: 0; border-radius: 0; background: none; color: transparent; caret-color: #50BBB8; font: inherit; line-height: var(--zh); white-space: pre; overflow: hidden; resize: none; outline: none; }
.lab-ta::selection { background: rgba(80,187,184,.35); color: transparent; }
.lab-ta:focus-visible { box-shadow: inset 0 0 0 1px #50BBB8; }
.lab-sel { color: #8fe6e2; }
.lab-sel b { color: #ff6b7a; font-weight: 600; }
.lab-pr { color: #d7d4ca; }
.lab-wert { color: #f3c27a; }
.lab-code .tk-c { color: #8a877e; }
.lab-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 14px; font: 12px var(--f-mono); background: #1e1e1d; border-top: 1px solid #2c2c2b; }
.lab-st { margin-right: auto; color: #a8a59c; transition: color .2s; }
.lab-st.an { color: #8fe6e2; }
.lab-fuss button { padding: 5px 9px; font: inherit; color: #e8e6df; background: none; border: 1px solid #4a4a49; border-radius: 0; cursor: pointer; transition: border-color .2s, background-color .2s; }
.lab-fuss button:hover, .lab-fuss button:focus-visible { border-color: #50BBB8; background: rgba(80,187,184,.15); outline: none; }

/* Schluss */
.lab-schluss { display: grid; gap: clamp(36px, 6vw, 80px); padding-top: clamp(50px, 9vh, 110px); padding-bottom: clamp(70px, 12vh, 140px); }
.lab-box { padding: clamp(28px, 4vw, 56px); color: #141413; background: var(--static-seccolor); }
.lab-box h2 { font-family: var(--f-ext); font-stretch: 125%; font-weight: 900; text-transform: uppercase; color: inherit; }
.lab-box p { max-width: 62ch; margin: 18px 0 0; font-size: clamp(16px, 1.2vw, 20px); line-height: 1.5; }
.lab-warum p { max-width: 66ch; margin: 16px 0 0; font-size: clamp(16px, 1.15vw, 19px); line-height: 1.5; }
.lab-warum ul { max-width: 66ch; margin: 22px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.lab-warum li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: clamp(15px, 1.1vw, 18px); line-height: 1.4; }
.lab-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; }
.lab-cta > div { flex: 1 1 340px; min-width: 0; }
.lab-cta p { max-width: 60ch; margin: 14px 0 0; font-size: clamp(16px, 1.15vw, 19px); line-height: 1.5; }

@media (max-width: 900px) {
  .lab-tisch { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .lab-steck { grid-template-columns: 1fr 1fr; }
  .lab-kopf h1 { font-size: clamp(50px, 16vw, 110px); }
}
@media (prefers-reduced-motion: reduce) { .lab-live::before { animation: none; } }