/* Diagnose lernen – App-Rahmen mit Seitenleiste, Onepager, Übersicht, Rätsel, Blickdiagnosen, Konto, Anmeldung, App, Recht */

:root { --dl-leiste-breite: 0px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.dl-sym { flex: none; display: block; }

/* ---------- Konto ---------- */
.dl-konto { display: grid; gap: 1rem; margin-bottom: 3rem; }
.dl-konto-karte { padding: 1.5rem 1.7rem; border-radius: 20px; background: var(--dl-karte); border: 1px solid var(--dl-linie); }
.dl-konto-karte h2 { font-size: 1.4rem; margin: 0 0 .4rem; }
.dl-konto-karte p { color: var(--dl-grau); line-height: 1.6; margin: 0 0 1rem; }
.dl-konto-zeile { display: flex; flex-wrap: wrap; gap: .6rem; }
.dl-konto-zeile input, .dl-ls-zugang input[type=password], .dl-ls-zugang input[type=text], .dl-ls-zugang input[type=email], .dl-konto-zeile input[type=email] {
	font: inherit; font-size: 1rem; padding: .75rem 1rem; border: 1px solid var(--dl-linie); border-radius: 12px; background: #fff; color: var(--dl-text); box-sizing: border-box;
}
.dl-konto-zeile input { flex: 1 1 220px; }
.dl-konto-zeile input:focus, .dl-ls-zugang input:focus { outline: 2px solid var(--dl-gelb); border-color: transparent; }
.dl-konto-code { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-bottom: .6rem; }
.dl-konto-code code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1.35rem; letter-spacing: .12em; padding: .55rem 1rem; border-radius: 12px; background: var(--dl-sand); color: var(--dl-tinte); }
.dl-konto-klein { font-size: .85rem; }
.dl-konto-gefahr { display: grid; gap: .8rem; justify-items: start; }
.dl-konto-gefahr label { display: flex; gap: .55rem; align-items: flex-start; font-size: .92rem; color: var(--dl-text); line-height: 1.5; }
.dl-konto-meldung { margin: 0; padding: .9rem 1.2rem; border-radius: 14px; background: #ecfdf5; color: #065f46; }
.dl-knopf.dl-knopf-zweit { background: transparent; color: var(--dl-tinte); border: 1px solid var(--dl-linie); text-decoration: none; display: inline-flex; align-items: center; }
.dl-knopf.dl-knopf-zweit:hover { border-color: var(--dl-tinte); filter: none; }
.dl-knopf.dl-knopf-gefahr { background: #fff; color: #b42318; border: 1px solid #f1c4bf; }
.dl-knopf.dl-knopf-gefahr:hover { background: #fef3f2; filter: none; }

.dl-ls-zugang {
	display: grid; gap: .55rem; padding: 2rem; border-radius: 24px; background: var(--dl-karte); scroll-margin-top: 90px;
	box-shadow: 0 1px 2px rgba(22, 24, 31, .04), 0 18px 48px rgba(22, 24, 31, .08);
}
.dl-ls-zugang .dl-etikett { margin: 0; }
.dl-ls-zugang h2 { font-size: 2rem; margin: 0; }
.dl-ls-zugang-text { color: var(--dl-grau); line-height: 1.6; margin: 0 0 .6rem; font-size: .95rem; }
.dl-ls-zugang label { font-size: .85rem; font-weight: 600; color: var(--dl-text); }
.dl-ls-zugang input { width: 100%; }
.dl-ls-zugang .dl-cta { justify-content: center; border: 0; cursor: pointer; font-family: inherit; margin-top: .5rem; }
.dl-ls-fehler { margin: 0; padding: .7rem 1rem; border-radius: 12px; background: #fef3f2; color: #b42318; font-size: .92rem; }
.dl-ls-code { margin: .2rem 0; }
.dl-ls-code summary { cursor: pointer; color: var(--dl-link); font-size: .88rem; font-weight: 500; }
.dl-ls-code[open] summary { margin-bottom: .6rem; }
.dl-ls-code label { display: block; margin-bottom: .4rem; }
.dl-ls-code input { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .08em; }

/* ---------- App: Installationshinweis und Offline-Seite ---------- */
.dl-app-hinweis { position: fixed; z-index: 200; left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: auto 1fr; gap: .6rem .8rem; align-items: center; padding: 1rem 1.1rem; border-radius: 20px; background: #fff; box-shadow: 0 10px 40px rgba(22, 24, 31, .22); animation: dl-hoch .3s ease; }
.dl-app-hinweis img { border-radius: 11px; }
.dl-app-hinweis strong { display: block; color: var(--dl-tinte); font-size: .98rem; }
.dl-app-hinweis span { display: block; font-size: .84rem; color: var(--dl-grau); line-height: 1.45; margin-top: .15rem; }
.dl-app-knoepfe { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: .6rem; }
.dl-app-spaeter { border: 0; background: none; font: inherit; font-size: .88rem; color: var(--dl-grau); cursor: pointer; padding: .5rem .7rem; }
@keyframes dl-hoch { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dl-app-hinweis { animation: none; } }
.dl-offline { padding-top: clamp(3rem, 10vw, 6rem); padding-bottom: 3rem; max-width: 720px; }
.dl-offline h1 { font-size: clamp(2rem, 5vw, 3rem); margin: .3rem 0 1rem; }
.dl-offline-liste { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .4rem; }
.dl-offline-liste li { padding: .7rem 1rem; border-radius: 12px; background: var(--dl-karte); border: 1px solid var(--dl-linie); }
.dl-offline .dl-cta { border: 0; cursor: pointer; font-family: inherit; }

/* ---------- Fall-Rätsel ---------- */
.dl-rt { margin-bottom: 3rem; }
.dl-rt-regeln { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 1.5rem; align-items: center; padding: 1.3rem 1.5rem; border-radius: 20px; background: var(--dl-tinte); color: #fff; margin-bottom: 1.2rem; }
.dl-rt-regeln strong { font-family: var(--dl-serif); font-weight: 500; font-size: 1.25rem; }
.dl-rt-regeln p { margin: .3rem 0 0; color: rgba(255, 255, 255, .8); line-height: 1.6; font-size: .92rem; }
.dl-rt-bilanz { display: grid; gap: .3rem; text-align: right; font-size: .85rem; color: rgba(255, 255, 255, .75); }
.dl-rt-bilanz b { font-family: var(--dl-serif); font-weight: 400; font-size: 1.6rem; color: #fff; margin-right: .3rem; }
.dl-rt-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.dl-rt-fallkarte { position: relative; display: flex; flex-direction: column; gap: .45rem; padding: 1.3rem 1.3rem 1.1rem; border-radius: 20px; background: var(--dl-karte); border: 1px solid var(--dl-linie); color: var(--dl-text) !important; text-decoration: none !important; transition: box-shadow .15s, transform .15s, border-color .15s; overflow: hidden; }
.dl-rt-fallkarte::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--dl-tinte), var(--dl-gelb)); }
.dl-rt-fallkarte:hover { border-color: transparent; box-shadow: 0 16px 40px rgba(43, 45, 110, .12); transform: translateY(-2px); }
.dl-rt-fallkarte.geloest::before { background: #059669; }
.dl-rt-nr { font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--dl-grau); }
.dl-rt-fallkarte strong { font-family: var(--dl-serif); font-weight: 500; font-size: 1.3rem; line-height: 1.25; color: var(--dl-tinte); }
.dl-rt-teaser { font-size: .88rem; color: var(--dl-grau); line-height: 1.5; flex: 1; }
.dl-rt-fuss { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .3rem; }
.dl-rt-gebiet { font-size: .76rem; color: var(--dl-link); }
.dl-rt-sterne { display: inline-flex; gap: 3px; vertical-align: middle; }
.dl-rt-sterne i { width: 8px; height: 8px; border-radius: 50%; background: var(--dl-linie); }
.dl-rt-sterne i.an { background: #d97706; }
.dl-rt-status { align-self: flex-start; font-size: .74rem; font-weight: 600; padding: .2rem .6rem; border-radius: 999px; background: var(--dl-sand); color: var(--dl-grau); }
.dl-rt-status.ok { background: #ecfdf5; color: #065f46; }
.dl-rt-status.neu { background: var(--dl-akzent-hell); color: var(--dl-tinte); }

.dl-rt-leiste { position: sticky; top: 0px; z-index: 30; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 1rem; margin: 0 0 1rem; border-radius: 16px; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--dl-linie); box-shadow: 0 6px 20px rgba(22, 24, 31, .06); }
@media (max-width: 899px) { .dl-rt-leiste { top: calc(0px + 58px); } }
.dl-rt-zurueck { font-size: .88rem; color: var(--dl-link) !important; text-decoration: none !important; white-space: nowrap; }
.dl-rt-anzeige { display: flex; gap: 1.2rem; font-size: .8rem; color: var(--dl-grau); }
.dl-rt-anzeige b { font-family: var(--dl-serif); font-weight: 500; font-size: 1.25rem; color: var(--dl-tinte); margin-right: .2rem; }
.dl-rt-punkte { color: #059669 !important; }
.dl-rt-kopf h2 { margin: .2rem 0 1.2rem; font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.dl-rt-kopf .dl-etikett { margin: 0; }
.dl-rt-raster { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr); gap: 1.2rem; align-items: start; }
.dl-rt-akte { display: grid; gap: 1rem; min-width: 0; }
.dl-rt-akte h3, .dl-rt-labor h3 { margin: 0 0 .7rem; font-family: var(--dl-sans); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--dl-grau); }
.dl-rt-vorstellung { padding: 1.4rem 1.5rem; border-radius: 18px; background: #fffdf7; border: 1px solid #efe6cf; box-shadow: 0 1px 0 #efe6cf; line-height: 1.7; }
.dl-rt-vorstellung p { margin: 0 0 .7rem; }
.dl-rt-hinweis { padding: .8rem 1rem; border-radius: 14px; background: #fff7ed; border-left: 3px solid #d97706; font-size: .92rem; line-height: 1.55; }
.dl-rt-mappe { display: grid; gap: .6rem; }
.dl-rt-leer { margin: 0; color: var(--dl-grau); font-size: .9rem; padding: 1rem; border: 1px dashed var(--dl-linie); border-radius: 14px; }
.dl-rt-befund { border-radius: 14px; background: var(--dl-karte); border: 1px solid var(--dl-linie); overflow: hidden; }
.dl-rt-befund.neu { animation: dl-befund 1.2s ease; }
@keyframes dl-befund { from { box-shadow: 0 0 0 3px rgba(242, 182, 50, .45); } to { box-shadow: 0 0 0 0 rgba(242, 182, 50, 0); } }
.dl-rt-befund header { display: flex; align-items: baseline; gap: .6rem; padding: .6rem .9rem; background: var(--dl-papier); border-bottom: 1px solid var(--dl-linie); }
.dl-rt-befund header span { font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--dl-link); }
.dl-rt-befund header strong { flex: 1; font-size: .92rem; }
.dl-rt-befund header em { font-style: normal; font-size: .78rem; color: #b42318; }
.dl-rt-befund > div { padding: .8rem .95rem; font-size: .9rem; line-height: 1.6; }
.dl-rt-befund > div p { margin: 0 0 .5rem; }
.dl-rt-befund table { font-size: .84rem; border-collapse: collapse; }
.dl-rt-befund td, .dl-rt-befund th { padding: .2rem .5rem; border-bottom: 1px solid var(--dl-linie); text-align: left; }

.dl-rt-labor { position: sticky; top: calc(0px + 84px); display: grid; gap: .7rem; padding: 1.2rem; border-radius: 20px; background: var(--dl-karte); border: 1px solid var(--dl-linie); max-height: calc(100vh - 110px); overflow-y: auto; }
.dl-rt-gruppe { border-radius: 12px; background: var(--dl-papier); }
.dl-rt-gruppe summary { display: flex; justify-content: space-between; cursor: pointer; padding: .6rem .8rem; font-weight: 600; font-size: .88rem; color: var(--dl-tinte); list-style: none; }
.dl-rt-gruppe summary::-webkit-details-marker { display: none; }
.dl-rt-gruppe summary span { font-weight: 400; font-size: .78rem; color: var(--dl-grau); }
.dl-rt-gruppe > div { display: grid; gap: .3rem; padding: 0 .5rem .6rem; }
.dl-rt-u, .dl-rt-tipp { display: flex; justify-content: space-between; align-items: center; gap: .6rem; width: 100%; text-align: left; font: inherit; font-size: .86rem; padding: .5rem .7rem; border-radius: 10px; border: 1px solid var(--dl-linie); background: #fff; color: var(--dl-text); cursor: pointer; }
.dl-rt-u:hover:not([disabled]), .dl-rt-tipp:hover { border-color: var(--dl-tinte); }
.dl-rt-u em, .dl-rt-tipp em { font-style: normal; font-size: .76rem; font-weight: 600; color: #b42318; white-space: nowrap; }
.dl-rt-u.da { background: #ecfdf5; border-color: #bbf7d0; color: var(--dl-grau); }
.dl-rt-u.da em { color: #059669; }
.dl-rt-u[disabled] { cursor: default; }
.dl-rt-tipp { background: #fff7ed; border-color: #fed7aa; font-weight: 600; }
.dl-rt-hilfe span { font-size: .82rem; color: var(--dl-grau); }
.dl-rt-notiz span { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--dl-grau); margin-bottom: .35rem; }
.dl-rt-notiz textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: .9rem; padding: .6rem .8rem; border-radius: 12px; border: 1px solid var(--dl-linie); resize: vertical; background: #fffdf7; }
.dl-rt-diagnose { padding-top: .8rem; border-top: 1px solid var(--dl-linie); display: grid; gap: .6rem; }
.dl-rt-diagnose h3 { margin: 0; }
.dl-rt-falsch { margin: 0; font-size: .84rem; color: #b42318; }
.dl-rt-optionen { display: grid; gap: .3rem; }
.dl-rt-optionen label { display: flex; gap: .55rem; align-items: flex-start; padding: .5rem .65rem; border-radius: 10px; border: 1px solid var(--dl-linie); font-size: .88rem; line-height: 1.4; cursor: pointer; }
.dl-rt-optionen label:has(input:checked) { border-color: var(--dl-tinte); background: var(--dl-akzent-hell); }
.dl-rt-optionen label.weg { opacity: .45; text-decoration: line-through; cursor: default; }
.dl-rt-optionen input { margin-top: .2rem; }
.dl-rt-diagnose .dl-cta { justify-content: center; border: 0; cursor: pointer; font-family: inherit; }
.dl-rt-diagnose .dl-cta[disabled] { opacity: .45; cursor: default; }
.dl-rt-aufgeben, .dl-rt-neu { border: 0; background: none; font: inherit; font-size: .82rem; color: var(--dl-grau); text-decoration: underline; cursor: pointer; }

.dl-rt-aufloesung { padding: 1.5rem 1.6rem; border-radius: 20px; background: var(--dl-karte); border: 2px solid #059669; scroll-margin-top: 140px; }
.dl-rt-aufloesung.nein { border-color: #d97706; }
.dl-rt-ergebnis { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.dl-rt-ergebnis .dl-etikett { margin: 0 0 .3rem; color: #059669; }
.dl-rt-aufloesung.nein .dl-rt-ergebnis .dl-etikett { color: #b45309; }
.dl-rt-ergebnis h3 { margin: 0; font-family: var(--dl-serif); font-weight: 500; font-size: 1.6rem; color: var(--dl-tinte); text-transform: none; letter-spacing: 0; }
.dl-rt-endpunkte { text-align: center; min-width: 84px; padding: .6rem .8rem; border-radius: 16px; background: #ecfdf5; }
.dl-rt-aufloesung.nein .dl-rt-endpunkte { background: #fff7ed; }
.dl-rt-endpunkte b { display: block; font-family: var(--dl-serif); font-weight: 500; font-size: 2rem; line-height: 1; color: var(--dl-tinte); }
.dl-rt-endpunkte span { font-size: .72rem; color: var(--dl-grau); }
.dl-rt-statistik { font-size: .84rem; color: var(--dl-grau); margin: .8rem 0 1rem; }
.dl-rt-aufloesung h4 { margin: 0 0 .5rem; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dl-grau); }
.dl-rt-schluessel { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .3rem; }
.dl-rt-schluessel li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem .7rem; border-radius: 10px; font-size: .88rem; background: #ecfdf5; }
.dl-rt-schluessel li.nein { background: #fef2f2; }
.dl-rt-schluessel li span { font-size: .76rem; color: var(--dl-grau); white-space: nowrap; }
.dl-rt-text { line-height: 1.7; }
.dl-rt-quellen { font-size: .78rem; color: var(--dl-grau-hell); }
.dl-rt-weiter { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.2rem; }

@media (max-width: 899px) {
	.dl-rt-regeln { grid-template-columns: 1fr; }
	.dl-rt-bilanz { text-align: left; grid-auto-flow: column; justify-content: start; gap: 1.2rem; }
	.dl-rt-raster { grid-template-columns: 1fr; }
	.dl-rt-labor { position: static; max-height: none; }
	.dl-rt-anzeige { gap: .8rem; }
	.dl-rt-anzeige span:nth-child(2) { display: none; }
}

/* ---------- Abmelden ---------- */
.dl-abmelden { min-height: 100vh; box-sizing: border-box; display: grid; place-content: center; justify-items: center; gap: 2rem; padding: 2rem 1rem; }
.dl-abmelden-karte { width: min(460px, 100%); box-sizing: border-box; padding: 2.2rem 2rem; border-radius: 26px; background: #fff; text-align: center; box-shadow: 0 1px 2px rgba(22, 24, 31, .04), 0 24px 60px rgba(43, 45, 110, .12); }
.dl-abmelden-symbol { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: var(--dl-akzent-hell); color: var(--dl-tinte); margin-bottom: 1rem; }
.dl-abmelden-symbol .dl-sym { width: 28px; height: 28px; }
.dl-abmelden-karte h1 { font-size: clamp(1.8rem, 5vw, 2.3rem); margin: 0 0 .7rem; }
.dl-abmelden-karte p { color: var(--dl-grau); line-height: 1.65; margin: 0 0 1.6rem; }
.dl-abmelden-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 1.6rem; }
.dl-abgemeldet { margin: 1.2rem 0 0; padding: .9rem 1.2rem; border-radius: 16px; background: #ecfdf5; color: #065f46; line-height: 1.55; }

/* ---------- Einwilligung Statistik ---------- */
.dl-einwilligung { position: fixed; z-index: 250; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: min(640px, calc(100vw - 1.5rem)); box-sizing: border-box; display: grid; gap: .9rem; padding: 1.2rem 1.3rem; border-radius: 20px; background: #fff; box-shadow: 0 12px 44px rgba(22, 24, 31, .24); font-size: .9rem; }
.dl-einwilligung strong { display: block; color: var(--dl-tinte); font-size: 1rem; margin-bottom: .3rem; }
.dl-einwilligung p { margin: 0; color: var(--dl-grau); line-height: 1.55; }
.dl-einwilligung-knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.dl-einwilligung-knoepfe .dl-knopf { flex: 1 1 160px; justify-content: center; }

/* Blickdiagnosen */
.dl-bd { margin-bottom: 3rem; }
.dl-bd-filter { margin: 0 0 1.2rem; }
.dl-bd-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.dl-bd-kachel { position: relative; display: flex; flex-direction: column; border-radius: 18px; background: var(--dl-karte); border: 1px solid var(--dl-linie); overflow: hidden; color: var(--dl-text) !important; text-decoration: none !important; transition: box-shadow .15s, transform .15s; }
.dl-bd-kachel::before { content: ""; position: absolute; inset: 0 0 auto 0; z-index: 1; height: 4px; background: linear-gradient(90deg, var(--dl-tinte), var(--dl-gelb)); }
.dl-bd-kachel.ok::before { background: #059669; }
.dl-bd-kachel.nein::before { background: #d97706; }
.dl-bd-kachel:hover { box-shadow: 0 16px 40px rgba(43, 45, 110, .12); transform: translateY(-2px); }
.dl-bd-vorschau { display: block; aspect-ratio: 4 / 3; background: var(--dl-sand); border-bottom: 1px solid var(--dl-linie); overflow: hidden; }
.dl-bd-vorschau img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.dl-bd-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .35rem .5rem; padding: .8rem 1rem .25rem; }
.dl-bd-fuss { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .25rem 1rem .9rem; }
.dl-bd-status { font-size: .74rem; font-weight: 600; padding: .2rem .6rem; border-radius: 999px; background: var(--dl-akzent-hell); color: var(--dl-tinte); }
.dl-bd-status.ok { background: #ecfdf5; color: #065f46; }
.dl-bd-status.nein { background: #fff7ed; color: #b45309; }

.dl-bd-zaehler { font-size: .85rem; color: var(--dl-grau); white-space: nowrap; }
.dl-bd-raster { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 1.4rem; align-items: start; }
.dl-bd-bild { margin: 0; position: sticky; top: calc(0px + 84px); min-width: 0; }
.dl-bd-bildknopf { display: block; width: 100%; padding: 0; border: 1px solid var(--dl-linie); border-radius: 14px; overflow: hidden; background: #fff; cursor: zoom-in; }
.dl-bd-bildknopf img { display: block; width: 100%; height: auto; }
.dl-bd-umschalter { display: inline-flex; gap: .25rem; padding: .25rem; margin-top: .6rem; border-radius: 12px; background: var(--dl-sand); }
.dl-bd-umschalter[hidden] { display: none; }
.dl-bd-umschalter button { min-height: 36px; padding: .4rem .9rem; border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: .84rem; color: var(--dl-grau); cursor: pointer; }
.dl-bd-umschalter button.aktiv { background: #fff; color: var(--dl-tinte); font-weight: 600; box-shadow: 0 1px 3px rgba(22, 24, 31, .1); }
.dl-bd-bild figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1rem; margin-top: .45rem; font-size: .76rem; line-height: 1.45; color: var(--dl-grau-hell); }
.dl-bd-quelle { font-style: italic; }

.dl-bd-frage { min-width: 0; }
.dl-bd-kontext { padding: 1.1rem 1.25rem; border-radius: 16px; background: #fffdf7; border: 1px solid #efe6cf; line-height: 1.65; }
.dl-bd-kontext p { margin: 0 0 .5rem; }
.dl-bd-kontext p:last-child { margin-bottom: 0; }
.dl-bd-frage h3 { margin: 1.2rem 0 .7rem; font-family: var(--dl-sans); font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--dl-tinte); }
.dl-bd-optionen { display: grid; gap: .45rem; }
.dl-bd-option { display: flex; align-items: flex-start; gap: .7rem; width: 100%; min-height: 48px; box-sizing: border-box; padding: .7rem .85rem; border: 1px solid var(--dl-linie); border-radius: 12px; background: #fff; font: inherit; font-size: .95rem; line-height: 1.4; text-align: left; color: var(--dl-text); cursor: pointer; }
.dl-bd-option:hover:not([disabled]) { border-color: var(--dl-tinte); }
.dl-bd-option.gewaehlt { border-color: var(--dl-tinte); background: var(--dl-akzent-hell); }
.dl-bd-buchstabe { flex: 0 0 auto; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--dl-sand); font-size: .8rem; font-weight: 700; color: var(--dl-tinte); }
.dl-bd-option.gewaehlt .dl-bd-buchstabe { background: var(--dl-tinte); color: #fff; }
.dl-bd-option[disabled] { opacity: .6; cursor: default; }
.dl-bd-option.richtig { opacity: 1; border-color: #059669; background: #ecfdf5; }
.dl-bd-option.richtig .dl-bd-buchstabe { background: #059669; color: #fff; }
.dl-bd-option.falsch { opacity: 1; border-color: #d2453a; background: #fef2f2; }
.dl-bd-option.falsch .dl-bd-buchstabe { background: #d2453a; color: #fff; }
.dl-bd-pruefen { width: 100%; margin-top: 1rem; justify-content: center; border: 0; font-family: inherit; cursor: pointer; }
.dl-bd-pruefen[disabled] { opacity: .45; cursor: default; }
.dl-bd-pruefen[hidden] { display: none !important; }
.dl-bd-aufloesung { margin-top: 1.2rem; scroll-margin-top: 140px; }
.dl-bd-aufloesung .dl-rt-ergebnis h3 { font-size: 1.4rem; }
.dl-bd-links { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; }
.dl-bd-links a { display: inline-flex; align-items: center; min-height: 40px; padding: .4rem .95rem; border: 1px solid var(--dl-linie); border-radius: 999px; font-size: .88rem; font-weight: 600; line-height: 1.3; text-decoration: none !important; color: var(--dl-link) !important; }

html.dl-bd-offen { overflow: hidden; }
.dl-bd-vollbild { position: fixed; inset: 0; z-index: 400; display: flex; flex-direction: column; background: rgba(12, 14, 20, .95); }
.dl-bd-vb-leiste { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .5rem .75rem .5rem 1rem; font-size: .85rem; color: rgba(255, 255, 255, .75); }
.dl-bd-vb-zu { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); font-size: 1.6rem; line-height: 1; color: #fff; cursor: pointer; }
.dl-bd-vb-flaeche { flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y pinch-zoom; }
.dl-bd-vb-flaeche img { display: block; width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.dl-bd-vb-flaeche.gross img { width: min(250%, 2600px); max-width: none; height: auto; background: #fff; cursor: zoom-out; }

@media (max-width: 899px) {
	.dl-bd-raster { grid-template-columns: 1fr; }
	.dl-bd-bild { position: static; }
}
@media (max-width: 600px) {
	.dl-bd-gitter { grid-template-columns: 1fr 1fr; gap: .7rem; }
	.dl-bd-kachel { border-radius: 14px; }
	.dl-bd-kopf { padding: .6rem .7rem .15rem; }
	.dl-bd-fuss { padding: .15rem .7rem .7rem; }
	.dl-bd-kopf .dl-rt-nr { font-size: .64rem; letter-spacing: .1em; }
	.dl-bd-bild { width: 100vw; margin-left: calc(50% - 50vw); }
	.dl-bd-bildknopf { border-radius: 0; border-left: 0; border-right: 0; }
	.dl-bd-bild figcaption, .dl-bd-umschalter { margin-left: 16px; margin-right: 16px; }
	.dl-bd-kontext { padding: .95rem 1rem; }
}

/* Anmeldung per E-Mail und Code */
.dl-ls-schritt { display: grid; gap: .5rem; }
.dl-ls-codefeld { font-size: 1.6rem !important; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.dl-ls-neu { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: .9rem; }
.dl-ls-link { padding: 0; border: 0; background: none; color: var(--dl-link); font: inherit; font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dl-ls-link:hover { color: var(--dl-tinte); }

/* Impressum und Datenschutz: eigenständige, ruhige Leseseite */
body.dl-recht { margin: 0; background: var(--dl-papier, #f7f6f2); color: var(--dl-text, #1d2433); }
.dl-recht-blatt { max-width: 720px; margin: 0 auto; padding: 32px 16px 64px; line-height: 1.6; font-size: 16px; }
.dl-recht-marke { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: inherit; text-decoration: none; margin-bottom: 24px; }
.dl-recht-marke svg, .dl-recht-marke img { width: 32px; height: 32px; }
.dl-recht-blatt h1 { font-size: 30px; line-height: 1.2; margin: 0 0 20px; }
.dl-recht-blatt h2 { font-size: 18px; margin: 28px 0 6px; }
.dl-recht-blatt p { margin: 0 0 12px; }
.dl-recht-blatt a { color: var(--dl-akzent, #3a3d96); }
.dl-recht-stand, .dl-recht-fuss { font-size: 14px; opacity: .75; }
.dl-recht-fuss { margin-top: 36px; padding-top: 16px; border-top: 1px solid rgba(0,0,0,.12); }
body.dl-recht{font-family:var(--dl-sans)} .dl-recht-blatt h1,.dl-recht-blatt h2{font-family:var(--dl-serif)}


/* Blickdiagnosen: Zufallsrunde */
.dl-bd-runde-start { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 1.5rem; margin: 0 0 1.4rem; padding: 1.1rem 1.3rem; border-radius: 18px; background: #fdf3d7; }
.dl-bd-runde-start strong { color: var(--dl-tinte); font-size: 1.05rem; }
.dl-bd-runde-start p { margin: .2rem 0 0; color: var(--dl-grau); font-size: .92rem; max-width: 34rem; }
.dl-bd-runde-knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; }
.dl-bd-runde-knoepfe .dl-cta { font: inherit; font-size: .92rem; cursor: pointer; }
.dl-bd-rundenzaehler { font-weight: 600; color: var(--dl-link); }
.dl-bd-runde-ende { padding: 1.5rem 1.6rem; border-radius: 20px; background: var(--dl-karte); border: 1px solid var(--dl-linie); }
.dl-bd-runde-ende h2 { margin: .3rem 0 .4rem; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.dl-bd-runde-ende > p { color: var(--dl-grau); margin: 0 0 1.2rem; }
.dl-bd-runde-ende .dl-rt-weiter { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.dl-bd-runde-ende .dl-rt-weiter button { font: inherit; cursor: pointer; }
button.dl-cta-neben { background: none; border: 0; border-bottom: 1px solid currentColor; }


/* ---------- App installieren: Anleitung ---------- */
.dl-app-blatt { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 1rem; background: rgba(22, 24, 31, .45); }
.dl-app-blatt-innen { position: relative; width: min(480px, 100%); box-sizing: border-box; padding: 1.6rem 1.7rem; border-radius: 22px; background: #fff; box-shadow: 0 20px 60px rgba(22, 24, 31, .3); }
.dl-app-blatt-innen h2 { margin: .2rem 0 1rem; font-size: 1.5rem; }
.dl-app-blatt-innen ol { margin: 0 0 1rem; padding-left: 1.3rem; display: grid; gap: .6rem; line-height: 1.55; }
.dl-app-blatt-innen .dl-etikett { margin: 0; color: var(--dl-ocker); }
.dl-app-klein { font-size: .85rem; color: var(--dl-grau); margin: 0; line-height: 1.55; }
.dl-app-zu { position: absolute; top: .9rem; right: .9rem; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--dl-sand); cursor: pointer; font-size: .9rem; }
.dl-hinweis { position: fixed; bottom: 1em; left: 50%; transform: translate(-50%, 200%); max-width: calc(100vw - 2rem); box-sizing: border-box; background: var(--dl-tinte); color: #fff; padding: .7em 1.1em; border-radius: 12px; transition: transform .25s; z-index: 9999; font-size: .9rem; }
.dl-hinweis.sichtbar { transform: translate(-50%, 0); }
.dl-ls-hinweis { margin: .4rem 0 0; font-size: .84rem; color: var(--dl-grau); }

/* ======================================================================
 * Diagnose lernen: Seitengerüst, Startseite, Fall des Tages, freie Eingabe
 * ==================================================================== */

/* Sprungmarke */
.dl-sprung { position: absolute; left: -9999px; top: .5rem; z-index: 999; background: var(--dl-tinte); color: #fff !important; padding: .6rem 1rem; border-radius: 10px; }
.dl-sprung:focus { left: .5rem; }
.dl-logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none !important; color: var(--dl-tinte) !important; font-family: var(--dl-serif); font-size: 1.22rem; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; }
.dl-logo-bild { width: 31px; height: 31px; flex: none; }

/* ---------- App-Rahmen mit Seitenleiste (nur angemeldet) ---------- */
.dl-mit-leiste { --dl-leiste-breite: 268px; }
html.dl-leiste-schmal .dl-mit-leiste { --dl-leiste-breite: 76px; }
.dl-app { margin-left: var(--dl-leiste-breite); min-height: 100vh; display: flex; flex-direction: column; transition: margin-left .2s ease; }
.dl-app > main { flex: 1; }

.dl-leiste {
	position: fixed; z-index: 120; left: 0; top: 0; bottom: 0;
	width: var(--dl-leiste-breite); box-sizing: border-box; display: flex; flex-direction: column;
	background: var(--dl-karte); border-right: 1px solid var(--dl-linie);
	transition: width .2s ease, transform .25s ease;
}
.dl-leiste-kopf { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 1.1rem .9rem 1rem 1.15rem; min-height: 68px; box-sizing: border-box; }
.dl-leiste-knopf, .dl-mobil-knopf {
	display: grid; place-items: center; width: 38px; height: 38px; flex: none; padding: 0; border: 0; border-radius: 10px;
	background: transparent; color: var(--dl-grau); cursor: pointer; transition: background .15s, color .15s;
}
.dl-leiste-knopf:hover, .dl-mobil-knopf:hover { background: var(--dl-sand); color: var(--dl-tinte); }
.dl-leiste-knopf:focus-visible, .dl-mobil-knopf:focus-visible, .dl-nav-link:focus-visible, .dl-nav-gruppe summary:focus-visible { outline: 2px solid var(--dl-tinte); outline-offset: 2px; }

.dl-nav { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: .3rem .75rem 1rem; scrollbar-width: thin; }
.dl-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dl-nav-oben { margin-bottom: .9rem !important; }
.dl-nav-link {
	position: relative; display: flex; align-items: center; gap: .8rem; width: 100%; box-sizing: border-box; padding: .62rem .75rem; border: 0; border-radius: 11px; background: none;
	color: var(--dl-text) !important; text-decoration: none !important; font: inherit; font-size: .94rem; font-weight: 500; line-height: 1.2; text-align: left; cursor: pointer;
	transition: background .15s, color .15s;
}
.dl-nav-link .dl-sym { color: var(--dl-grau-hell); transition: color .15s; }
.dl-nav-link:hover { background: var(--dl-sand); }
.dl-nav-link:hover .dl-sym { color: var(--dl-tinte); }
.dl-nav-link.aktiv { background: var(--dl-akzent-hell); color: var(--dl-tinte) !important; font-weight: 600; }
.dl-nav-link.aktiv .dl-sym { color: var(--dl-tinte); }
.dl-nav-link.aktiv::before { content: ""; position: absolute; left: -.75rem; top: .55rem; bottom: .55rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--dl-gelb); }
.dl-nav-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dl-nav-gruppe { margin: 0 0 .9rem; }
.dl-nav-gruppe summary {
	display: flex; align-items: center; justify-content: space-between; gap: .5rem; list-style: none; cursor: pointer;
	padding: .45rem .75rem; border-radius: 8px; color: var(--dl-grau); font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
	user-select: none;
}
.dl-nav-gruppe summary::-webkit-details-marker { display: none; }
.dl-nav-gruppe summary:hover { color: var(--dl-tinte); }
.dl-nav-gruppe summary .dl-sym { width: 16px; height: 16px; transform: rotate(90deg); transition: transform .2s; }
.dl-nav-gruppe:not([open]) summary .dl-sym { transform: rotate(0deg); }
.dl-nav-gruppe ul { margin-top: 2px; }

.dl-leiste-fuss { border-top: 1px solid var(--dl-linie); padding: .8rem .75rem 1rem; display: grid; gap: 2px; }
.dl-leiste-fuss .dl-nav-link { font-size: .88rem; }
.dl-nav-abmelden { color: var(--dl-grau) !important; }

/* schmale Leiste: nur Symbole */
html.dl-leiste-schmal .dl-mit-leiste .dl-leiste .dl-nav-text { display: none; }
html.dl-leiste-schmal .dl-mit-leiste .dl-leiste-kopf { flex-direction: column; padding: 1rem .5rem .6rem; gap: .6rem; }
html.dl-leiste-schmal .dl-mit-leiste .dl-nav { padding: .3rem .6rem 1rem; }
html.dl-leiste-schmal .dl-mit-leiste .dl-nav-link { justify-content: center; padding: .62rem 0; }
html.dl-leiste-schmal .dl-mit-leiste .dl-nav-link.aktiv::before { left: -.6rem; }
html.dl-leiste-schmal .dl-mit-leiste .dl-nav-gruppe summary { padding: 0; height: 1px; margin: .5rem .4rem .7rem; background: var(--dl-linie); cursor: default; }
html.dl-leiste-schmal .dl-mit-leiste .dl-nav-gruppe summary .dl-sym { display: none; }
html.dl-leiste-schmal .dl-mit-leiste .dl-nav-gruppe:not([open]) > ul { display: grid; }
html.dl-leiste-schmal .dl-mit-leiste .dl-nav-gruppe:not([open])::details-content { content-visibility: visible; height: auto; }
html.dl-leiste-schmal .dl-mit-leiste .dl-leiste-fuss { padding: .8rem .6rem 1rem; }
@media (hover: hover) {
	html.dl-leiste-schmal .dl-mit-leiste .dl-leiste .dl-nav-link:hover::after {
		content: attr(data-titel); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); z-index: 5;
		white-space: nowrap; background: var(--dl-tinte); color: #fff; font-size: .8rem; font-weight: 500; padding: .35rem .6rem; border-radius: 7px; pointer-events: none;
	}
	html.dl-leiste-schmal .dl-mit-leiste .dl-nav { overflow: visible; }
}

/* Kopfzeile auf dem Handy */
.dl-mobilkopf { display: none; }
.dl-leiste-schleier { position: fixed; inset: 0; z-index: 110; background: rgba(22, 24, 31, .35); }
.dl-leiste-schleier[hidden] { display: none; }

@media (max-width: 899px) {
	.dl-mit-leiste, html.dl-leiste-schmal .dl-mit-leiste { --dl-leiste-breite: 0px; }
	.dl-mobilkopf {
		display: flex; align-items: center; gap: .4rem; position: sticky; top: 0; z-index: 100;
		padding: .55rem .9rem; background: rgba(250, 248, 243, .92); -webkit-backdrop-filter: saturate(160%) blur(10px); backdrop-filter: saturate(160%) blur(10px);
		border-bottom: 1px solid var(--dl-linie);
	}
	.dl-mobilkopf .dl-logo { font-size: 1.1rem; }
	.dl-mobilkopf .dl-logo-bild { width: 27px; height: 27px; }
	.dl-leiste { width: min(300px, 86vw); transform: translateX(-100%); box-shadow: none; }
	html.dl-leiste-offen .dl-leiste { transform: none; box-shadow: 0 0 40px rgba(22, 24, 31, .2); }
	html.dl-leiste-schmal .dl-mit-leiste .dl-leiste .dl-nav-text { display: inline; }
	html.dl-leiste-schmal .dl-mit-leiste .dl-leiste-kopf { flex-direction: row; padding: 1.1rem .9rem 1rem 1.15rem; }
	html.dl-leiste-schmal .dl-mit-leiste .dl-nav-link { justify-content: flex-start; padding: .62rem .75rem; }
	html.dl-leiste-schmal .dl-mit-leiste .dl-nav-gruppe summary { height: auto; margin: 0; padding: .45rem .75rem; background: none; cursor: pointer; }
	html.dl-leiste-schmal .dl-mit-leiste .dl-nav-gruppe summary .dl-sym { display: block; }
	html.dl-leiste-offen body { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .dl-leiste, .dl-app { transition: none; } }

/* Fußzeile im App-Rahmen */
.dl-app-fuss { margin-top: 4rem; padding: 1.6rem 0 2rem; }
.dl-app-fuss .dl-fuss-hinweis a { color: inherit; }

/* Seitenkopf der Unterseiten und Abschnittsköpfe: zentriert */
.dl-seitenkopf { padding: clamp(2.2rem, 6vw, 4rem) 0 clamp(1.4rem, 3vw, 2.2rem); text-align: center; }
.dl-seitenkopf h1 { font-size: clamp(2.1rem, 4.5vw, 3.3rem); line-height: 1.08; margin: 0 0 1rem; font-weight: 450; }
.dl-seitenkopf .dl-lead { margin: 0 auto; }
.dl-seitenkopf .dl-etikett { margin-bottom: .8rem; color: var(--dl-ocker); }
.dl-mitte, .dl-os-mitte { text-align: center; }
.dl-schmal { max-width: 760px; }
.dl-os-schmal { max-width: 820px; }
.dl-uebersicht { margin-bottom: 3rem; }
.dl-uebersicht .dl-filter { justify-content: center; }
.dl-einzel { padding-top: 1.4rem; }
.dl-brotkrumen { display: flex; gap: .5rem; font-size: .84rem; color: var(--dl-grau); margin-bottom: .8rem; }
.dl-brotkrumen a { color: var(--dl-link); text-decoration: none; }
.dl-einzel .dl-rt-kopf h1 { margin: .2rem 0 1.2rem; font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.15; }

/* Stufen-Marke, Kacheln */
.dl-stufe-marke { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .2rem .55rem; border-radius: 999px; background: var(--dl-akzent-hell); color: var(--dl-tinte); }
.dl-stufe-marke.stufe-einsteiger { background: #e4f2e8; color: #1d5b33; }
.dl-stufe-marke.stufe-contest { background: var(--dl-tinte); color: #fff; }
.dl-bd-region { display: block; padding: 0 1rem; font-family: var(--dl-serif); font-size: 1.08rem; line-height: 1.3; color: var(--dl-tinte); }
.dl-rt-gebiet { color: var(--dl-ocker); }
.dl-rt-leiste { top: 12px; }
@media (max-width: 899px) { .dl-rt-leiste { top: 64px; } }
.dl-rt-stufe { font-size: .78rem; font-weight: 600; color: var(--dl-tinte); }
.dl-rt-labor { top: 90px; max-height: calc(100vh - 110px); }
.dl-bd-bild { top: 16px; }
@media (max-width: 899px) { .dl-bd-bild { top: 70px; } }
.dl-rt-fallkarte::before, .dl-bd-kachel::before { background: linear-gradient(90deg, var(--dl-tinte), var(--dl-gelb)); }
.dl-rt-status.nein, .dl-bd-status.nein { background: #fff7ed; color: #9a3412; }

/* Zufallsrunde */
.dl-runde-start { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 1.5rem; margin: 0 0 1.4rem; padding: 1.1rem 1.3rem; border-radius: 18px; background: var(--dl-gelb-hell); border-left: 4px solid var(--dl-gelb); }
.dl-runde-start strong { color: var(--dl-tinte); font-size: 1.05rem; }
.dl-runde-start p { margin: .2rem 0 0; color: var(--dl-grau); font-size: .92rem; max-width: 34rem; }
.dl-runde-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; }
.dl-bd-runde-ende { margin-bottom: 1.6rem; }

/* Freie Eingabe */
.dl-frei { display: flex; gap: .5rem; margin: 0 0 .6rem; }
.dl-frei input { flex: 1; min-width: 0; font: inherit; font-size: 1.05rem; padding: .8rem 1rem; border: 1px solid var(--dl-linie); border-radius: 12px; background: #fff; color: var(--dl-text); box-sizing: border-box; }
.dl-frei input:focus { outline: 2px solid var(--dl-tinte); border-color: transparent; }
.dl-frei .dl-cta { padding: .8rem 1.2rem; }
.dl-frei-meldung { margin: 0 0 .6rem; padding: .7rem .9rem; border-radius: 12px; background: var(--dl-gelb-hell); border-left: 3px solid var(--dl-gelb); color: var(--dl-text); font-size: .9rem; line-height: 1.5; }
.dl-frei-auswahl { border: 0; background: none; padding: .3rem 0; font: inherit; font-size: .88rem; color: var(--dl-link); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dl-bd-auswahl { margin-top: .6rem; }
.dl-rt-auswahl { display: grid; gap: .6rem; }

/* Auflösung: gemeinsame Teile */
.dl-rt-aufloesung { border-color: #059669; }
.dl-rt-aufloesung.nein { border-color: var(--dl-gelb); }
.dl-rt-aufloesung.nein .dl-rt-ergebnis .dl-etikett { color: var(--dl-ocker); }
.dl-rt-aufloesung.nein .dl-rt-endpunkte { background: var(--dl-gelb-hell); }
.dl-aufl-block h4 { margin: 1.2rem 0 .5rem; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dl-grau); }
.dl-aufl-liste { margin: 0; padding-left: 1.2rem; display: grid; gap: .3rem; line-height: 1.55; }
.dl-begriffe { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; font-size: .92rem; line-height: 1.5; }
.dl-begriffe dt { font-weight: 600; color: var(--dl-tinte); }
.dl-begriffe dd { margin: 0; color: var(--dl-grau); }
@media (max-width: 600px) { .dl-begriffe { grid-template-columns: 1fr; } .dl-begriffe dd { margin-bottom: .4rem; } }
.dl-aufl-schritt { margin: 1rem 0 0; line-height: 1.55; }
.dl-rt-verlauf-schritt { padding: .7rem .9rem; margin-bottom: .5rem; border-left: 3px solid var(--dl-gelb); background: var(--dl-papier); border-radius: 0 12px 12px 0; line-height: 1.6; }
.dl-rt-verlauf-schritt p { margin: .3rem 0 0; }
.dl-laie { margin: 1.2rem 0 0; padding: .6rem .9rem; border-radius: 10px; background: var(--dl-sand); font-size: .84rem; color: var(--dl-grau); }
.dl-tag-quote { margin: .8rem 0 0; padding: .7rem 1rem; border-radius: 12px; background: var(--dl-gelb-hell); border-left: 4px solid var(--dl-gelb); font-size: .95rem; }
.dl-tag-quote strong { font-family: var(--dl-serif); font-size: 1.35rem; color: var(--dl-tinte); }
.dl-bd-fall > .dl-bd-ende { margin-top: 1.4rem; }
.dl-bd-fall > .dl-bd-ende .dl-bd-aufloesung { margin-top: 0; }

/* Fall des Tages (/fall-des-tages/) */
.dl-tag { padding: clamp(1.8rem, 4vw, 3rem) 0 clamp(2.5rem, 5vw, 4rem); background: linear-gradient(180deg, var(--dl-gelb-hell) 0, var(--dl-papier) 340px); }
.dl-tag-kopf { text-align: center; margin: 0 auto 1.6rem; max-width: 760px; }
.dl-tag-kopf .dl-etikett { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; margin: 0 0 .6rem; color: var(--dl-ocker); }
.dl-tag-kopf .dl-etikett .dl-sym { width: 18px; height: 18px; margin-right: .4rem; }
.dl-tag-kopf h1 { margin: 0 0 .5rem; font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.12; font-weight: 450; text-wrap: balance; }
.dl-tag-meta { margin: 0; font-size: .85rem; color: var(--dl-grau); }
.dl-tag-meta .dl-punkt, .dl-etikett .dl-punkt { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--dl-gelb); margin: 0 .6em .15em; vertical-align: middle; }
.dl-tag-leer { text-align: center; color: var(--dl-grau); padding: 2rem 0; }
.dl-aufgabe-feld > .dl-lp-status { text-align: center; }

/* Abschnitte (Onepager) */
.dl-os-abschnitt { padding: clamp(3rem, 7vw, 5rem) 0; }
.dl-os-sand { background: var(--dl-sand); }
.dl-os-kopf { text-align: center; max-width: 720px; margin: 0 auto 2.2rem; }
.dl-os-kopf .dl-etikett { margin-bottom: .6rem; color: var(--dl-ocker); font-size: .72rem; line-height: 1.5; }
.dl-os-kopf h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.12; margin: 0 0 .8rem; font-weight: 450; }
.dl-os-kopf p { margin: 0; color: var(--dl-grau); line-height: 1.65; font-size: 1.04rem; }
.dl-os-schmal > p { line-height: 1.7; font-size: 1.04rem; }
.dl-os-klein { font-size: .86rem; color: var(--dl-grau); }
.dl-os-symbol { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--dl-gelb-hell); color: var(--dl-tinte); }
.dl-os-faecher { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.dl-os-faecher li { display: flex; flex-direction: column; gap: .15rem; padding: .85rem 1rem; border-radius: 14px; background: var(--dl-karte); border-left: 3px solid var(--dl-gelb); }
.dl-os-faecher li span { font-weight: 600; color: var(--dl-tinte); font-size: .94rem; }
.dl-os-faecher li small { color: var(--dl-grau); font-size: .8rem; }
.dl-os-faecher li.bald { border-left-color: var(--dl-linie); }
.dl-os-stufen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.dl-os-stufe { padding: 1.5rem; border-radius: 20px; background: var(--dl-karte); border: 1px solid var(--dl-linie); text-align: center; }
.dl-os-stufe p { margin: .9rem 0 .6rem; line-height: 1.6; color: var(--dl-text); }
.dl-os-stufe small { color: var(--dl-grau); }
.dl-os-schritte { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; counter-reset: schritt; }
.dl-os-schritte li { counter-increment: schritt; padding: 1.5rem 1.6rem; border-top: 3px solid var(--dl-gelb); background: var(--dl-karte); border-radius: 0 0 18px 18px; display: grid; gap: .4rem; align-content: start; }
.dl-os-schritte li::before { content: counter(schritt); font-family: var(--dl-serif); font-size: 2rem; line-height: 1; color: var(--dl-ocker); }
.dl-os-schritte strong { font-family: var(--dl-serif); font-weight: 500; font-size: 1.3rem; color: var(--dl-tinte); }
.dl-os-schritte span { color: var(--dl-grau); line-height: 1.6; font-size: .94rem; }
@media (max-width: 1000px) { .dl-os-faecher { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .dl-os-stufen, .dl-os-schritte { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .dl-os-faecher { gap: .5rem; } .dl-os-faecher li { padding: .7rem .8rem; } }

.dl-konto-klein { font-size: .85rem; }
.dl-abgemeldet { margin: 1.2rem 0 0; padding: .9rem 1.2rem; border-radius: 16px; background: #ecfdf5; color: #065f46; line-height: 1.55; text-align: center; }

@media (max-width: 600px) {
	.dl-rt-leiste { top: 62px; }
	.dl-bd-bild { position: static; }
	.dl-frei { flex-direction: column; }
	.dl-frei .dl-cta { justify-content: center; }
}

/* ======================================================================
 * Onepager für Gäste (includes/startseite.php)
 * ==================================================================== */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.dl-landing { margin: 0; }
.dl-ls-kopf { position: sticky; top: 0; z-index: 50; background: rgba(250, 248, 243, .92); -webkit-backdrop-filter: saturate(160%) blur(10px); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--dl-linie); }
.dl-ls-kopf-innen { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 64px; }
.dl-os-nav { display: flex; gap: 1.6rem; margin-left: auto; }
.dl-os-nav a { font-size: .86rem; font-weight: 500; color: var(--dl-grau) !important; text-decoration: none !important; }
.dl-os-nav a:hover { color: var(--dl-tinte) !important; }
.dl-ls-anmelden { font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--dl-tinte) !important; text-decoration: none !important; padding: .55rem 1rem; border: 1px solid var(--dl-linie); border-radius: 999px; white-space: nowrap; }
.dl-ls-anmelden:hover { border-color: var(--dl-tinte); }
.dl-ls-zugang, .dl-os-bereich, .dl-os-anker, .dl-os-intro, .dl-os-abschnitt, .dl-os-schluss { scroll-margin-top: 76px; }

/* Hero, zentriert */
.dl-ls-hero { padding: clamp(2.2rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 3.8rem); background: radial-gradient(ellipse 70% 60% at 50% 0%, var(--dl-gelb-hell), transparent 70%); }
.dl-ls-hero-innen { display: flex; flex-direction: column; align-items: center; text-align: center; }
.dl-ls-hero-marke { width: clamp(64px, 9vw, 88px); height: auto; margin-bottom: 1.1rem; }
.dl-ls-hero .dl-etikett { color: var(--dl-ocker); margin-bottom: 1rem; }
.dl-ls-hero h1 { font-size: clamp(2.3rem, 5.4vw, 4rem); line-height: 1.05; margin: 0 0 1.2rem; font-weight: 450; max-width: 15em; text-wrap: balance; }
.dl-ls-hero h1 em { font-style: italic; color: var(--dl-tinte); background: linear-gradient(transparent 68%, rgba(242, 182, 50, .55) 68%, rgba(242, 182, 50, .55) 92%, transparent 92%); padding: 0 .08em; }
.dl-ls-hero .dl-lead { margin: 0 auto 1.8rem; max-width: 38em; text-wrap: pretty; }
.dl-ls-hero .dl-ls-zugang { width: min(560px, 100%); text-align: left; }
.dl-ls-hero-unter { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3rem .2rem; margin: 1.2rem 0 0; font-size: .86rem; color: var(--dl-grau); }

/* Anmeldefeld */
.dl-ls-zugang { box-sizing: border-box; padding: 1.5rem 1.6rem; }
.dl-ls-zeile { display: flex; gap: .5rem; }
.dl-ls-zeile input { flex: 1; min-width: 0; }
.dl-ls-zeile .dl-cta { margin-top: 0; white-space: nowrap; }
.dl-ls-zugang .dl-ls-hinweis { margin: .3rem 0 0; line-height: 1.5; }
.dl-ls-neu { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: .3rem; }
.dl-ls-link { border: 0; background: none; padding: 0; font: inherit; font-size: .88rem; color: var(--dl-link); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dl-ls-codefeld { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .14em; font-size: 1.15rem !important; }
.dl-os-app { display: inline-flex; align-items: center; gap: .45rem; border: 0; background: none; padding: .3rem .4rem; font: inherit; font-size: .86rem; font-weight: 600; color: var(--dl-tinte); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--dl-gelb); }
.dl-os-app .dl-sym { width: 18px; height: 18px; }

/* Kennzahlen-Band */
.dl-os-band { background: var(--dl-tinte); color: #fff; padding: 1.8rem 0; }
.dl-os-band-raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; text-align: center; }
.dl-os-band strong { display: block; font-family: var(--dl-serif); font-weight: 400; font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: 1.1; }
.dl-os-band span { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.dl-os-band div { position: relative; }
.dl-os-band div + div::before { content: ""; position: absolute; left: -.5rem; top: 15%; bottom: 15%; width: 1px; background: rgba(255, 255, 255, .18); }

/* Einleitung und Bereiche */
.dl-os-intro { text-align: center; max-width: 780px; padding-top: clamp(3rem, 7vw, 5rem); padding-bottom: .5rem; }
.dl-os-intro .dl-etikett { color: var(--dl-ocker); margin-bottom: .6rem; }
.dl-os-intro h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.1; margin: 0 0 .9rem; font-weight: 450; text-wrap: balance; }
.dl-os-intro > p:last-child { color: var(--dl-grau); font-size: 1.05rem; line-height: 1.7; margin: 0; }
.dl-os-kopf h2 { text-wrap: balance; }

.dl-os-bereich { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.dl-os-bereich.gespiegelt { background: linear-gradient(180deg, transparent, var(--dl-sand) 12%, var(--dl-sand) 88%, transparent); }
.dl-os-bereich-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.dl-os-bereich.gespiegelt .dl-os-text { order: 2; }
.dl-os-text .dl-os-symbol { margin-bottom: 1rem; }
.dl-os-text .dl-etikett { margin-bottom: .5rem; color: var(--dl-ocker); }
.dl-os-text h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); line-height: 1.12; margin: 0 0 .9rem; font-weight: 450; text-wrap: balance; }
.dl-os-text > p { color: var(--dl-grau); line-height: 1.75; margin: 0 0 1.2rem; }
.dl-os-text > p.dl-os-klein { margin: 1.1rem 0 0; font-size: .82rem; line-height: 1.55; }
.dl-os-punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.dl-os-punkte li { position: relative; padding-left: 1.8rem; color: var(--dl-text); line-height: 1.5; }
.dl-os-punkte li::before { content: ""; position: absolute; left: 0; top: .2rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--dl-gelb-hell) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b2d6e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 62% no-repeat; box-shadow: inset 0 0 0 1px rgba(242, 182, 50, .6); }

/* ---------- Attrappen (keine echten Aufgaben, keine Lösungen) ---------- */
.dl-os-mock { position: relative; box-sizing: border-box; padding: 1.5rem; border-radius: 24px; background: var(--dl-karte); border: 1px solid var(--dl-linie); box-shadow: 0 2px 4px rgba(22, 24, 31, .03), 0 30px 60px rgba(43, 45, 110, .1); display: grid; gap: .8rem; font-size: .9rem; isolation: isolate; }
.dl-os-mock::before { content: ""; position: absolute; inset: -16px -16px auto auto; width: 96px; height: 96px; border-radius: 50%; background: radial-gradient(circle, rgba(242, 182, 50, .28), transparent 70%); z-index: -1; }
.dl-mk-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; }
.dl-mk-etikett { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--dl-grau); margin-right: auto; }
.dl-mk-chip { padding: .2rem .6rem; border-radius: 999px; background: var(--dl-akzent-hell); color: var(--dl-tinte); font-size: .74rem; font-weight: 600; }
.dl-mk-chip.stufe { background: var(--dl-tinte); color: #fff; }
.dl-mk-text { margin: 0; line-height: 1.55; color: var(--dl-text); }
.dl-mk-klein { margin: 0; font-size: .8rem; color: var(--dl-grau); }

/* Blickdiagnose: EKG-Schema auf Millimeterpapier */
.dl-mk-ekg { position: relative; height: 128px; border-radius: 14px; overflow: hidden; background-color: #fff8f4;
	background-image: linear-gradient(rgba(214, 120, 120, .32) 1px, transparent 1px), linear-gradient(90deg, rgba(214, 120, 120, .32) 1px, transparent 1px), linear-gradient(rgba(214, 120, 120, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(214, 120, 120, .14) 1px, transparent 1px);
	background-size: 25px 25px, 25px 25px, 5px 5px, 5px 5px; border: 1px solid #f0dcd4; }
.dl-mk-ekg svg { position: absolute; inset: 14px 0 0; width: 100%; height: calc(100% - 24px); }
.dl-mk-ekg path { fill: none; stroke: #23242e; stroke-width: 1.8; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.dl-mk-ekg span { position: absolute; left: .7rem; top: .5rem; font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #8a4a4a; background: rgba(255, 248, 244, .85); padding: .05rem .3rem; border-radius: 4px; }
.dl-mk-eingabe { display: flex; align-items: center; gap: .5rem; }
.dl-mk-eingabe span { flex: 1; display: flex; align-items: center; padding: .7rem .9rem; border-radius: 12px; border: 1px solid var(--dl-tinte); box-shadow: 0 0 0 3px rgba(43, 45, 110, .08); color: var(--dl-grau-hell); }
.dl-mk-eingabe i { display: inline-block; width: 1.5px; height: 1.1em; margin-left: .2rem; background: var(--dl-tinte); }
.dl-mk-eingabe b { padding: .7rem 1rem; border-radius: 999px; background: var(--dl-tinte); color: #fff; font-weight: 600; font-size: .85rem; }
.dl-mk-aufloesung { list-style: none; margin: 0; padding: .8rem .9rem; display: grid; grid-template-columns: 1fr 1fr; gap: .45rem .8rem; border-radius: 14px; background: var(--dl-papier); border-left: 3px solid #059669; }
.dl-mk-aufloesung li { display: flex; align-items: center; gap: .45rem; font-size: .8rem; color: var(--dl-text); }
.dl-mk-aufloesung li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #059669; }

/* Fall-Rätsel */
.dl-mk-punkte { display: flex; justify-content: space-between; gap: .6rem; padding: .7rem .9rem; border-radius: 14px; background: var(--dl-tinte); color: rgba(255, 255, 255, .85); font-size: .8rem; }
.dl-mk-punkte b { font-family: var(--dl-serif); font-weight: 500; font-size: 1.25rem; color: #fff; margin-right: .15rem; }
.dl-mk-akte, .dl-mk-befund { padding: .75rem .9rem; border-radius: 12px; background: var(--dl-papier); line-height: 1.5; }
.dl-mk-befund { background: #fff; border: 1px solid var(--dl-linie); }
.dl-mk-akte small, .dl-mk-befund small { display: block; font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--dl-ocker); margin-bottom: .2rem; }
.dl-mk-bestellen { display: flex; flex-wrap: wrap; gap: .4rem; }
.dl-mk-bestellen span { display: inline-flex; gap: .4rem; padding: .4rem .7rem; border-radius: 10px; border: 1px solid var(--dl-linie); font-size: .8rem; }
.dl-mk-bestellen em { font-style: normal; color: var(--dl-grau); }
.dl-mk-bestellen .da { background: #ecfdf5; border-color: #bbf7d0; }
.dl-mk-bestellen .da em { color: #065f46; }
.dl-mk-bestellen .tipp { background: var(--dl-gelb-hell); border-color: rgba(242, 182, 50, .6); }

/* Fall des Tages */
.dl-mk-tag { text-align: center; justify-items: center; }
.dl-mk-datum { margin: 0; font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--dl-ocker); }
.dl-mk-titel { margin: 0; font-family: var(--dl-serif); font-size: 1.9rem; line-height: 1.1; color: var(--dl-tinte); }
.dl-mk-tag .dl-mk-zeile { justify-content: center; }
.dl-mk-quote { width: 100%; box-sizing: border-box; display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: .1rem .6rem; padding: .9rem 1rem; border-radius: 14px; background: var(--dl-gelb-hell); text-align: left; }
.dl-mk-quote b { font-family: var(--dl-serif); font-weight: 500; font-size: 1.8rem; color: var(--dl-tinte); }
.dl-mk-quote span { color: var(--dl-text); }
.dl-mk-quote i { grid-column: 1 / -1; display: block; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .9); margin-top: .3rem; }
.dl-mk-quote em { display: block; height: 100%; border-radius: 6px; background: var(--dl-gelb); }
.dl-mk-serie { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; width: 100%; }
.dl-mk-serie span { display: grid; justify-items: center; gap: .3rem; font-size: .72rem; color: var(--dl-grau); }
.dl-mk-serie i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--dl-linie); box-sizing: border-box; }
.dl-mk-serie .an i { border-color: var(--dl-tinte); background: var(--dl-tinte) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2b632' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 60% no-repeat; }

/* Zufallsrunde und Serien */
.dl-mk-ergebnis { font-size: .8rem; font-weight: 600; color: #065f46; }
.dl-mk-runde { display: grid; grid-template-columns: repeat(10, 1fr); gap: .3rem; }
.dl-mk-runde span { aspect-ratio: 1; display: grid; place-items: center; border-radius: 8px; font-size: .74rem; font-weight: 600; }
.dl-mk-runde .ok { background: #ecfdf5; color: #065f46; box-shadow: inset 0 0 0 1px #bbf7d0; }
.dl-mk-runde .nein { background: #fff7ed; color: #9a3412; box-shadow: inset 0 0 0 1px #fed7aa; }
.dl-mk-knopf { justify-self: start; margin: 0; padding: .5rem .95rem; border-radius: 999px; border: 1px solid var(--dl-tinte); color: var(--dl-tinte); font-size: .82rem; font-weight: 600; }
.dl-mk-serien { list-style: none; margin: .2rem 0 0; padding: 0; display: grid; gap: .45rem; }
.dl-mk-serien li { display: grid; grid-template-columns: 1fr 34%; align-items: center; gap: .8rem; padding: .6rem .8rem; border-radius: 12px; background: var(--dl-papier); }
.dl-mk-serien b { display: block; color: var(--dl-tinte); font-size: .88rem; }
.dl-mk-serien small { font-size: .74rem; color: var(--dl-grau); }
.dl-mk-serien i, .dl-mk-balken i { display: block; height: 6px; border-radius: 6px; background: var(--dl-sand); overflow: hidden; }
.dl-mk-serien em, .dl-mk-balken em { display: block; height: 100%; border-radius: 6px; background: var(--dl-tinte); }

/* Contest und Team-Raum */
.dl-mk-runden { display: grid; grid-template-columns: repeat(4, 1fr); gap: .25rem; padding: .25rem; border-radius: 12px; background: var(--dl-sand); text-align: center; font-size: .74rem; color: var(--dl-grau); }
.dl-mk-runden span { padding: .45rem .2rem; border-radius: 9px; }
.dl-mk-runden .an { background: #fff; color: var(--dl-tinte); font-weight: 600; box-shadow: 0 1px 3px rgba(22, 24, 31, .1); }
.dl-mk-buehne { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; gap: .1rem 1rem; padding: 1rem 1.1rem; border-radius: 16px; background: linear-gradient(135deg, #20224f, #2b2d6e 55%, #3a3d8a); color: #fff; }
.dl-mk-uhr { grid-row: span 2; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(var(--dl-gelb) calc(var(--p) * 1%), rgba(255, 255, 255, .16) 0); position: relative; }
.dl-mk-uhr::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #262862; }
.dl-mk-uhr b { position: relative; font-family: var(--dl-serif); font-weight: 500; font-size: 1.15rem; }
.dl-mk-bildnr { font-family: var(--dl-serif); font-size: 1.25rem; }
.dl-mk-wertung { font-size: .78rem; color: rgba(255, 255, 255, .8); }
.dl-mk-team { padding: .9rem 1rem; border-radius: 14px; border: 1px solid var(--dl-linie); display: grid; gap: .6rem; }
.dl-mk-team > p { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; margin: 0; }
.dl-mk-team > p b { color: var(--dl-tinte); }
.dl-mk-team > p span { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .8rem; letter-spacing: .06em; color: var(--dl-grau); }
.dl-mk-koepfe { display: flex; }
.dl-mk-koepfe span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; margin-right: -6px; border: 2px solid #fff; background: var(--dl-akzent-hell); color: var(--dl-tinte); font-size: .76rem; font-weight: 700; }
.dl-mk-koepfe span:first-child { background: var(--dl-gelb); }
.dl-mk-team ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.dl-mk-team li { padding: .5rem .7rem; border-radius: 10px; background: var(--dl-papier); font-size: .82rem; line-height: 1.4; }
.dl-mk-team li b { display: block; font-size: .72rem; color: var(--dl-ocker); }

/* Statistik, Abzeichen, Archiv */
.dl-mk-zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.dl-mk-zahlen span { display: grid; padding: .7rem .6rem; border-radius: 12px; background: var(--dl-papier); text-align: center; font-size: .74rem; color: var(--dl-grau); }
.dl-mk-zahlen b { font-family: var(--dl-serif); font-weight: 500; font-size: 1.5rem; color: var(--dl-tinte); }
.dl-mk-balken { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.dl-mk-balken li { display: grid; grid-template-columns: 8.5rem 1fr 2.6rem; align-items: center; gap: .6rem; font-size: .82rem; }
.dl-mk-balken li b { text-align: right; color: var(--dl-tinte); font-size: .8rem; }
.dl-mk-abzeichen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.dl-mk-abzeichen li { padding: .35rem .7rem; border-radius: 999px; border: 1px dashed var(--dl-linie); font-size: .76rem; color: var(--dl-grau); }
.dl-mk-abzeichen li.an { border: 0; background: var(--dl-gelb-hell); color: var(--dl-tinte); font-weight: 600; box-shadow: inset 0 0 0 1px rgba(242, 182, 50, .6); }
.dl-mk-suche { display: flex; align-items: center; gap: .5rem; padding: .65rem .9rem; border-radius: 12px; border: 1px solid var(--dl-linie); color: var(--dl-grau-hell); }
.dl-mk-suche .dl-sym { width: 18px; height: 18px; }

/* Fächer, Stufen, Schritte auf dem Onepager */
#faecher .dl-os-faecher { margin-bottom: 1.4rem; }

/* Schluss mit zweitem Anmeldefeld */
.dl-os-schluss { padding: clamp(3rem, 7vw, 5rem) 0; background: linear-gradient(160deg, var(--dl-tinte-dunkel), var(--dl-tinte) 55%, #3b3f8f); color: #fff; }
.dl-os-schluss-raster { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 4.5rem); align-items: center; }
.dl-os-schluss-text .dl-etikett { color: var(--dl-gelb); font-size: .72rem; line-height: 1.5; }
.dl-os-schluss-text h2 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; margin: .3rem 0 1rem; font-weight: 450; text-wrap: balance; }
.dl-os-schluss-text p { color: rgba(255, 255, 255, .88); line-height: 1.7; font-size: 1.05rem; }
.dl-os-schluss-text a { color: #fff; }
.dl-os-app.hell { color: #fff; padding-left: 0; }
.dl-os-schluss .dl-ls-zugang { color: var(--dl-text); }
.dl-ls-fuss { margin-top: 0; }

@media (max-width: 900px) {
	.dl-os-nav { display: none; }
	.dl-os-bereich-raster, .dl-os-schluss-raster { grid-template-columns: 1fr; }
	.dl-os-bereich.gespiegelt .dl-os-text { order: 0; }
	.dl-os-text { text-align: center; }
	.dl-os-text .dl-os-symbol { margin-left: auto; margin-right: auto; }
	.dl-os-punkte { justify-content: center; text-align: left; }
	.dl-os-schluss-text { text-align: center; }
}
@media (max-width: 600px) {
	.dl-os-band-raster { grid-template-columns: 1fr 1fr; row-gap: 1.2rem; }
	.dl-os-band div:nth-child(3)::before { display: none; }
	.dl-ls-zeile { flex-direction: column; }
	.dl-ls-zeile .dl-cta { justify-content: center; }
	.dl-ls-zugang { padding: 1.2rem 1.1rem; }
	.dl-os-mock { padding: 1.1rem; }
	.dl-mk-balken li { grid-template-columns: 6.8rem 1fr 2.4rem; }
	.dl-mk-aufloesung { grid-template-columns: 1fr; }
	.dl-ls-anmelden { padding: .5rem .8rem; letter-spacing: .08em; }
	.dl-ls-kopf .dl-logo { font-size: 1.1rem; }
}

/* ======================================================================
 * Übersicht nach dem Anmelden (includes/uebersicht.php)
 * ==================================================================== */
.dl-db-gruss { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-top: clamp(2rem, 4vw, 3rem); padding-bottom: 1.6rem; }
.dl-db-gruss .dl-etikett { margin-bottom: .7rem; color: var(--dl-ocker); }
.dl-db-gruss h1 { font-size: clamp(2.1rem, 4vw, 3.1rem); line-height: 1.08; margin: 0 0 .6rem; font-weight: 450; }
.dl-db-gruss .dl-lead { margin: 0; }
.dl-db-bild { width: clamp(96px, 12vw, 150px); height: auto; flex: none; }

.dl-db-raster { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "t t t" "s w q"; margin-bottom: 1rem; }
.dl-db-tag { grid-area: t; }
.dl-db-stand { grid-area: s; }
.dl-db-weiter { grid-area: w; }
.dl-db-schnell { grid-area: q; }

.dl-db-karte { display: flex; flex-direction: column; gap: .8rem; min-width: 0; box-sizing: border-box; margin: 0; padding: 1.5rem 1.6rem; border-radius: 20px; background: var(--dl-karte); border: 1px solid var(--dl-linie); }
.dl-db .dl-etikett { display: flex; align-items: center; gap: .5rem; margin: 0; }
.dl-db .dl-etikett .dl-sym { width: 18px; height: 18px; color: var(--dl-tinte); }
.dl-db-link { color: var(--dl-text) !important; text-decoration: none !important; transition: border-color .15s, box-shadow .15s, transform .15s; }
.dl-db-link:hover { border-color: transparent; box-shadow: 0 1px 2px rgba(22, 24, 31, .05), 0 14px 34px rgba(43, 45, 110, .12); transform: translateY(-1px); }
.dl-db-titel { font-family: var(--dl-serif); font-weight: 500; font-size: 1.35rem; line-height: 1.25; color: var(--dl-tinte); }
.dl-db-klein { font-size: .86rem; color: var(--dl-grau); line-height: 1.5; }
.dl-db-meta { margin: 0; font-size: .8rem; color: var(--dl-grau); }
.dl-db-meta .dl-punkt { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--dl-gelb); margin: 0 .6em .15em; vertical-align: middle; }
.dl-db-aktion { margin-top: auto; font-size: .88rem; font-weight: 600; color: var(--dl-link); }
.dl-db-text { margin: 0; color: var(--dl-grau); line-height: 1.6; }
.dl-db-fuss { margin-top: auto; padding-top: .4rem; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; }

/* Fall des Tages als große Karte */
.dl-db-tag { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.6rem; align-items: stretch; padding: 1.7rem 1.8rem; background: linear-gradient(150deg, var(--dl-gelb-hell), var(--dl-karte) 58%); border-color: rgba(242, 182, 50, .45); }
.dl-db-tag-text { display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.dl-db-tag h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); line-height: 1.15; margin: .1rem 0 0; font-weight: 450; }
.dl-db-tag .dl-etikett { color: var(--dl-ocker); }
.dl-db-kopfzeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.dl-db-status { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .7rem; border-radius: 999px; font-size: .76rem; font-weight: 600; }
.dl-db-status .dl-sym { width: 15px; height: 15px; }
.dl-db-status.ok { background: #ecfdf5; color: #065f46; }
.dl-db-status.nein { background: #fff7ed; color: #9a3412; }
.dl-db-status.offen { background: var(--dl-tinte); color: #fff; }
.dl-db-quote { margin: 0; padding: .55rem .8rem; border-radius: 10px; background: rgba(255, 255, 255, .7); font-size: .9rem; }
.dl-db-quote strong { font-family: var(--dl-serif); font-size: 1.2rem; color: var(--dl-tinte); }
.dl-db-tag-bild { display: grid; place-items: center; min-height: 220px; border-radius: 16px; background: #fff; border: 1px solid var(--dl-linie); overflow: hidden; }
.dl-db-tag-bild img { width: 100%; height: 100%; max-height: 300px; object-fit: contain; display: block; }
.dl-db-tag-akte { align-self: center; padding: 1.2rem 1.3rem; border-radius: 16px; background: #fff; border: 1px solid var(--dl-linie); font-family: var(--dl-serif); font-size: 1.15rem; line-height: 1.5; color: var(--dl-text); }
.dl-db-tag-akte small { display: block; font-family: var(--dl-sans); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--dl-ocker); margin-bottom: .4rem; }

/* Kurzstatistik */
.dl-db-stand { background: var(--dl-tinte); border-color: var(--dl-tinte); color: #fff !important; }
.dl-db-stand .dl-etikett, .dl-db-stand .dl-etikett .dl-sym { color: rgba(255, 255, 255, .85); }
.dl-db-stand .dl-db-aktion { color: var(--dl-gelb); margin-top: .9rem; }
.dl-db-stand .dl-db-woche { margin-top: auto; }
.dl-db-zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.dl-db-zahlen > span { display: grid; gap: .15rem; font-size: .76rem; color: rgba(255, 255, 255, .8); line-height: 1.3; }
.dl-db-zahlen strong { font-family: var(--dl-serif); font-weight: 400; font-size: 2.1rem; line-height: 1; color: #fff; }

.dl-db-woche { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; margin-top: .4rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .16); }
.dl-db-woche span { display: grid; justify-items: center; gap: .3rem; font-size: .72rem; color: rgba(255, 255, 255, .8); }
.dl-db-woche i { width: 22px; height: 22px; border-radius: 50%; box-sizing: border-box; border: 2px solid rgba(255, 255, 255, .28); }
.dl-db-woche .an i { border-color: var(--dl-gelb); background: var(--dl-gelb); }

/* Weiter rätseln: Vorschau */
.dl-db-weiter-bild { display: block; height: 128px; border-radius: 12px; overflow: hidden; background: var(--dl-papier); }
.dl-db-weiter-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dl-db-weiter-akte { display: block; padding: .7rem .85rem; border-radius: 12px; background: var(--dl-papier); font-family: var(--dl-serif); font-size: 1rem; line-height: 1.45; color: var(--dl-text); }

/* Schnellstart */
.dl-db-start { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; padding: .7rem .8rem; border-radius: 14px; background: var(--dl-papier); color: var(--dl-text) !important; text-decoration: none !important; transition: background .15s; }
.dl-db-start:hover { background: var(--dl-akzent-hell); }
.dl-db-start > .dl-sym:first-child { color: var(--dl-tinte); }
.dl-db-start > .dl-sym:last-child { width: 18px; height: 18px; color: var(--dl-grau-hell); }
.dl-db-start strong { display: block; font-size: .95rem; color: var(--dl-tinte); }
.dl-db-start small { display: block; font-size: .78rem; color: var(--dl-grau); line-height: 1.35; }
.dl-db-schnell { gap: .5rem; }
.dl-db-schnell > .dl-etikett { margin-bottom: .3rem; }

/* Neue Aufgaben */
.dl-db-abschnitt { margin-top: 2.4rem; }
.dl-db-abschnitt-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1rem; }
.dl-db-abschnitt-kopf h2 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 1.9rem); font-weight: 450; }
.dl-db-abschnitt-kopf a { font-size: .88rem; font-weight: 600; text-decoration: none; }
.dl-db-neu + .dl-db-neu { margin-top: 1rem; }
.dl-db-neu.dl-bd-gitter { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dl-db-neu.dl-rt-gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 1100px) {
	.dl-db-raster { grid-template-columns: 1fr 1fr; grid-template-areas: "t t" "s w" "q q"; }
}
@media (max-width: 760px) {
	.dl-db-gruss { padding-top: 1.4rem; }
	.dl-db-bild { display: none; }
	.dl-db-raster { grid-template-columns: 1fr; grid-template-areas: "t" "s" "w" "q"; }
	.dl-db-tag { grid-template-columns: 1fr; padding: 1.3rem 1.2rem; gap: 1.1rem; }
	.dl-db-tag-bild { order: -1; min-height: 0; }
	.dl-db-tag-bild img { max-height: 230px; }
	.dl-db-karte { padding: 1.25rem 1.2rem; }
	.dl-db-neu.dl-bd-gitter { grid-template-columns: 1fr 1fr; }
	.dl-db-neu.dl-rt-gitter { grid-template-columns: 1fr; }
	.dl-db-tag .dl-cta { width: 100%; justify-content: center; box-sizing: border-box; }
}