/* =====================================================================
   SENSABLE-ÜBERSICHT: großes Auge als Figur, drei Punkte, UDL zum Umschalten,
   Abschnitt „Aus der Lehre“ (js/sensable-seite.js bewegt Auge und Umschalter)
   ===================================================================== */

/* Kopf: Auge links, Text rechts (wie auf der Lora-Seite) */
.sa-kopf { position: relative; display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 20px 56px; align-items: center; padding: 6px 0 26px; }
.sa-kopf::before {
    content: ""; position: absolute; left: -140px; top: -120px; width: min(680px, calc(100% + 140px)); height: 560px; z-index: -1; pointer-events: none;
    background: radial-gradient(closest-side, var(--marke-glanz), transparent); filter: blur(14px); opacity: .9;
}
.sa-held { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.sa-held::before {
    content: ""; position: absolute; inset: 6%; border-radius: 50%;
    background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--marke) 18%, transparent), transparent 68%);
    border: 1px dashed color-mix(in srgb, var(--marke) 35%, transparent);
}
.sa-held::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 4%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--marke) 30%, transparent), transparent); }
.sa-held .gross-zeichen { position: relative; z-index: 1; width: 74%; height: auto; margin: 0; filter: drop-shadow(0 22px 34px color-mix(in srgb, var(--marke) 32%, transparent)); transform-origin: 50% 50%; }
.sa-held .gross-zeichen .auge-iris { transition: transform .35s var(--ease-out); }
.sa-held.folgt .gross-zeichen .auge-iris { animation: none; transform: translate(var(--ax, 0px), var(--ay, 0px)); }
.sa-held.blinzelt .gross-zeichen { animation: saBlinzeln .26s ease-in-out; }
@keyframes saBlinzeln { 50% { transform: scaleY(.08); } }
.sa-orbit { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.sa-orbit li {
    position: absolute; padding: 6px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; color: var(--text-light);
    background: var(--bg-panel); border: 1px solid color-mix(in srgb, var(--marke) 40%, var(--border-light)); box-shadow: 0 12px 26px -18px var(--glass-shadow);
    animation: saSchweben 6s ease-in-out infinite; animation-delay: calc(var(--o) * -2s);
}
.sa-orbit li:nth-child(1) { left: 0; top: 18%; }
.sa-orbit li:nth-child(2) { right: 0; top: 34%; }
.sa-orbit li:nth-child(3) { left: 10%; bottom: 12%; }
@keyframes saSchweben { 50% { transform: translateY(-8px); } }
.sa-kopf h1 { font-family: var(--font-serif); font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: 1; margin: 0 0 10px; }
.sa-kopf .untertitel { font-size: 15.5px; color: var(--marke); font-weight: 600; margin: 0 0 12px; }
.sa-kopf .lead { font-size: 16px; margin: 0; max-width: 580px; }
.sa-aktionen { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }
@media (max-width: 860px) {
    .sa-kopf { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .sa-held { width: min(300px, 80%); margin: 0 auto; }
}

/* Drei Punkte unter dem Kopf */
.sa-punkte { list-style: none; margin: 30px 0 64px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sa-punkte li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 2px 12px; align-content: start; padding: 18px 18px 18px 16px; border-radius: 16px; border: 1px solid var(--border-light); background: var(--bg-panel); font-size: 14px; line-height: 1.5; color: var(--text-main); }
.sa-punkte strong { color: var(--text-light); font-size: 15px; font-weight: 650; }
.sa-punkte li > span:last-child { grid-column: 2; }
.sa-symbol { grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--marke-weich); color: var(--marke); }
.sa-symbol svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 860px) { .sa-punkte { grid-template-columns: minmax(0, 1fr); gap: 12px; } }

/* UDL: Prinzip wählen, rechts die drei Projekte */
.udl-wahl { --farbe: #29c4f6; display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr); gap: 18px; align-items: stretch; }
[data-p="e"] { --farbe: #29c4f6; }
[data-p="r"] { --farbe: #7fd8c4; }
[data-p="h"] { --farbe: #ffb35c; }
body.light-mode [data-p="e"] { --farbe: #0b7fae; }
body.light-mode [data-p="r"] { --farbe: #1b7f6a; }
body.light-mode [data-p="h"] { --farbe: #a3541c; }
.udl-knoepfe { display: grid; gap: 10px; align-content: start; }
html:not(.js) .udl-knoepfe { display: none; }
html:not(.js) .udl-wahl { grid-template-columns: minmax(0, 1fr); }
.udl-knopf {
    position: relative; display: grid; gap: 2px; padding: 16px 18px 16px 22px; text-align: left; cursor: pointer;
    border-radius: 16px; border: 1px solid var(--border-light); background: var(--bg-panel); color: var(--text-light); font: inherit; overflow: hidden;
    transition: border-color .25s, box-shadow .35s, transform .35s var(--ease-out);
}
.udl-knopf::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--farbe); opacity: .35; transition: opacity .25s, width .25s; }
.udl-knopf:hover { border-color: color-mix(in srgb, var(--farbe) 50%, var(--border-light)); }
.udl-knopf[aria-selected="true"] {
    border-color: color-mix(in srgb, var(--farbe) 70%, var(--border-light)); transform: translateX(4px);
    background: linear-gradient(100deg, color-mix(in srgb, var(--farbe) 14%, var(--bg-panel)), var(--bg-panel) 70%);
    box-shadow: 0 20px 40px -30px color-mix(in srgb, var(--farbe) 80%, transparent);
}
.udl-knopf[aria-selected="true"]::before { opacity: 1; width: 6px; }
.udl-knopf:focus-visible { outline: 2px solid var(--farbe); outline-offset: 3px; }
.udl-frage { font: 700 clamp(1.5rem, 2.4vw, 1.9rem)/1 var(--font-serif); color: var(--farbe); letter-spacing: -.01em; }
.udl-name { font-size: 14px; font-weight: 600; color: var(--text-light); }
.udl-tafeln { display: grid; }
.udl-tafel {
    position: relative; overflow: hidden; display: grid; grid-template-rows: auto 1fr; padding: 26px 26px 22px; border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--farbe) 45%, var(--border-light));
    background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--farbe) 16%, transparent), transparent 60%), var(--bg-panel);
}
html.js .udl-wahl.bereit .udl-tafel { grid-area: 1 / 1; }
html.js .udl-wahl.bereit .udl-tafel[hidden] { display: grid; visibility: hidden; opacity: 0; }
html.js .udl-wahl.bereit .udl-tafel:not([hidden]) { animation: udlRein .45s var(--ease-out); }
@keyframes udlRein { from { opacity: 0; transform: translateY(8px); } }
html:not(.js) .udl-tafel + .udl-tafel { margin-top: 14px; }
.udl-tafel-frage {
    position: absolute; right: 18px; top: -18px; font: 700 clamp(5rem, 11vw, 8.5rem)/1 var(--font-serif); color: var(--farbe); opacity: .14; pointer-events: none; letter-spacing: -.03em;
}
.udl-tafel-kopf { position: relative; margin-bottom: 16px; }
.udl-tafel h3 { margin: 0 0 4px; font-family: var(--font-serif); font-size: clamp(1.4rem, 2.6vw, 1.8rem); color: var(--text-light); }
.udl-leitlinien { margin: 0; font-size: 13px; color: var(--text-muted); }
.udl-projekte { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; align-content: start; }
.udl-projekte li {
    display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 2px 14px; align-items: center; padding: 12px 14px 12px 12px;
    border-radius: 14px; border: 1px solid var(--border-light); background: color-mix(in srgb, var(--bg-panel) 86%, transparent);
    font-size: 14px; line-height: 1.5; color: var(--text-main);
}
.udl-projekte strong { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.udl-projekte li > span:last-child { grid-column: 2; color: var(--text-light); }
.udl-bild {
    grid-row: span 2; width: 52px; height: 52px; border-radius: 13px; background: var(--bg-subtle) center / cover no-repeat;
    display: grid; place-items: center; font: 700 18px/1 var(--font-serif); color: var(--marke); border: 1px solid var(--border-light);
}
[data-projekt="vision"] .udl-bild { background-image: url("../images/sensable/szene-bahnhof-960.webp"); filter: blur(.6px) saturate(.8); }
[data-projekt="vr"] .udl-bild { background-image: url("../images/klassenzimmer-vr/rundgang-poster.webp"); }
[data-projekt="seminar"] .udl-bild { background: linear-gradient(140deg, var(--marke-weich), var(--bg-subtle)); }
@media (max-width: 860px) {
    .udl-wahl { grid-template-columns: minmax(0, 1fr); }
    .udl-knoepfe { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .udl-knopf { padding: 12px 10px 12px 16px; }
    .udl-knopf[aria-selected="true"] { transform: translateY(-2px); }
    .udl-name { font-size: 12.5px; }
    .udl-tafel { padding: 20px 16px 16px; }
}
@media (max-width: 460px) { .udl-knoepfe { gap: 6px; } .udl-knopf { padding: 10px 8px 10px 14px; } .udl-frage { font-size: 1.25rem; } .udl-name { font-size: 11px; line-height: 1.3; } }

/* Aus der Lehre: Text links, Lernpfad rechts */
.sa-lehre {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px; align-items: center; padding: 32px; border-radius: 22px;
    border: 1px solid var(--border-light); background: radial-gradient(90% 120% at 100% 50%, var(--marke-weich), transparent 70%), var(--bg-panel);
}
.sa-lehre h2 { font-family: var(--font-serif); font-size: clamp(1.5rem, 2.8vw, 2rem); margin: 0 0 10px; }
.sa-lehre-text p { margin: 0 0 16px; font-size: 15px; line-height: 1.65; }
.sa-lehre-zahlen { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sa-lehre-zahlen li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-light); background: var(--bg-panel); font-size: 13px; color: var(--text-main); }
.sa-lehre-zahlen b { color: var(--text-light); margin-right: 3px; }
.sa-lehre-bild { position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; border: 1px solid var(--border-light); background: radial-gradient(120% 90% at 30% 20%, var(--marke-weich), transparent 70%), var(--bg-subtle); }
@media (max-width: 860px) { .sa-lehre { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; } }

@media (prefers-reduced-motion: reduce) {
    .sa-orbit li, .sa-held .gross-zeichen, .udl-tafel { animation: none !important; }
    .udl-knopf, .udl-knopf[aria-selected="true"] { transition: none; transform: none; }
}
@media (min-width: 601px) { .udl-tafel-kopf > * { max-width: 64%; } }
@media (max-width: 600px) { .udl-tafel-frage { font-size: 4.2rem; top: -8px; opacity: .1; } }