/* ================================================================================================ * OK-I-DO-KI Portal — 2-Zustands-Hero + 5-Tab-Single-Panel (Preview-gegated). * Scoped unter .scl-okd. Nutzt Portal-Tokens (--accent/--surface/--text/--bg) mit Fallbacks. * KEINE .scl-m2mc*-Overrides (Musikkarte bleibt unangetastet). * ============================================================================================== */ .scl-okd { --okd-neon: linear-gradient(90deg,#ff2fd0,#8a5cff,#43d6ff,#40e59b,#ffcf47,#ff2fd0); --okd-accent: var(--accent, #a78bfa); --okd-surface: var(--surface, rgba(255,255,255,.05)); --okd-border: var(--border, rgba(255,255,255,.12)); --okd-text: var(--text, #e8e8f0); --okd-muted: var(--muted, #a8a5c2); /* SCL_PORTAL_UI_..._V1 (§9): zentraler Sticky-Offset-Kontrakt. Portal-Bar = sticky, top:0, Höhe 42px (siehe SCL_Portal_Shell). Die Tabs kleben direkt UNTER der Bar (Sekundär-Stack). */ --scl-portal-bar-height: 42px; --scl-sticky-secondary-top: var(--scl-portal-bar-height, 42px); /* Breadcrumb-Stack (Addendum): manche Portal-Routen rendern eine STICKY Breadcrumb (.scl-ctx-path, sticky top:42px, z 9970) DIREKT unter der Portal-Bar. Der Sekundär-Stack der Sticky-Nav muss deren aktuell sichtbare Höhe kumulativ addieren, sonst überdeckt die Breadcrumb die Nav. --scl-breadcrumb-height ist EINE geteilte, gemessene Variable (SCL_Portal_Unified_Shell::breadcrumb_stack_controller() misst .scl-ctx-path im DOM via ResizeObserver und setzt sie auf :root; 0px wenn keine Breadcrumb / responsiv versteckt / nicht sticky). Default 0px → Routen ohne Breadcrumb (z.B. Portalstart) docken unverändert direkt unter der Bar. KEIN hartkodierter Offset, KEIN page-spezifischer Wert. */ width: min(1200px, 94vw); margin-inline: auto; } .scl-okd-vh-h1 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ── HERO (2 Zustände) ── */ /* SCL_PORTAL_HERO_OUTER_FRAME_AND_ZERO_GAP_CORRECTION_V2 (§5.1): Media-Zustand = KEIN äusserer Rahmen/Card, KEIN äusseres Padding/Margin → das Portal-Grafik- Frame (.scl-pg-hero) beginnt direkt am Hero-Anfang. Der Card-Look bleibt AUSSCHLIESSLICH für den reinen Text-Zustand (Hero OHNE Media-Child), single-sourced via :not(:has()). */ .scl-okd-hero { position: relative; overflow: hidden; } .scl-okd-hero:not(:has(.scl-okd-hero__media)) { border-radius: 20px; margin-top: 14px; border: 1px solid var(--okd-border); background: radial-gradient(900px 420px at 50% -120px, rgba(138,92,255,.30), transparent 62%), #0d0920; box-shadow: 0 0 60px rgba(138,92,255,.08); padding: 34px max(18px, 3vw); } /* Defensiv: Portrait-Video (contain) darf den Hero nicht überhöhen */ /* V2 (§5.2): der äussere Media-Wrapper trägt KEINEN eigenen Rahmen/Radius/Margin mehr. Der EINZIGE sichtbare Media-Rahmen ist die innere .scl-pg-hero. line-height:0 verhindert eine Inline-Baseline-Lücke unter dem Media. (V1-Override .scl-pg-hero{margin-bottom:0} ist entfernt — die Komponente selbst ist jetzt margin:0 auto, single source of truth.) */ .scl-okd-hero__media { position: relative; overflow: hidden; margin: 0; border-radius: 0; line-height: 0; max-height: 72vh; } .scl-okd-hero__media video, .scl-okd-hero__media img { width: 100%; height: auto; display: block; } .scl-okd-hero__copy { position: relative; z-index: 2; max-width: min(900px, 72vw); } .scl-okd-hero__copy.is-with-media { max-width: none; } .scl-okd-hero__brand { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; } .scl-okd-hero__brandmark { font-weight: 900; letter-spacing: .04em; font-size: clamp(1.1rem, 2.2vw, 1.5rem); background: var(--okd-neon); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; } .scl-okd-hero__powered { font-size: .78rem; font-weight: 700; color: var(--okd-muted); text-transform: none; letter-spacing: .02em; } .scl-okd-heart { background: var(--okd-neon); -webkit-background-clip: text; background-clip: text; color: transparent; } .scl-okd-hero__title { font-size: clamp(1.5rem, 3.4vw, 2.4rem); font-weight: 800; line-height: 1.12; letter-spacing: -.3px; margin: 4px 0 10px; color: var(--okd-text); text-wrap: balance; } .scl-okd-hero__text { color: var(--okd-muted); font-size: clamp(.95rem, 1.4vw, 1.06rem); max-width: 66ch; line-height: 1.45; margin: 0; } .scl-okd-hero__deco { position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(67,214,255,.16), transparent 70%); z-index: 1; } @media (prefers-reduced-motion: no-preference) { .scl-okd-hero__brandmark { animation: scl-okd-shift 9s linear infinite; } } @keyframes scl-okd-shift { to { background-position: 200% 0; } } /* ── TABLIST (5 Tabs, LED-Neon) ── */ /* §9: Tabs kleben unter der Portal-Bar (nicht mehr top:0 → kein Verschwinden hinter der Bar). z-index bleibt UNTER der Portal-Bar (9980), damit die Bar bei Überlappung immer oben bleibt. */ /* SCL_PORTAL_NAV_..._V1 §5/§6: KEIN äusserer Rahmen/Hintergrund-Streifen mehr um die 5-Tab-Navigation. Der Container ist transparent; die Lesbarkeit im Sticky-Zustand tragen die einzelnen Kacheln (opaker .scl-okd-tab-Hintergrund #160d2b). Kein Pseudo-Element, kein opaker Strip, kein Box-Shadow. */ /* Addendum §1-Korrektur: äußerer Grid/Flow-Wrapper trägt Layout + Sticky; die Tablist selbst ist `display:contents`, sodass ihre 5 Tabs + der Social-Button (DOM-Geschwister) EINE geteilte Kachelreihe/ -grid bilden, OHNE dass der Button ein Kind der role="tablist" ist. */ .scl-okd-tabnav { position: sticky; top: calc(var(--scl-sticky-secondary-top, 42px) + var(--scl-breadcrumb-height, 0px)); z-index: 29; display: flex; gap: 10px; margin: 0 0 6px; padding: 8px 2px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; -webkit-overflow-scrolling: touch; background: transparent; } /* Tablist bleibt ein ECHTES Element (role bleibt im A11y-Baum) mit ihren 5 Tabs als DOM-Kindern; Desktop: Flex-Reihe der 5 Tabs, der Social-Button ist Flex-Geschwister → sichtbare 6er-Reihe. */ .scl-okd-tabs { display: flex; gap: 10px; min-width: 0; } /* §9: WordPress-Admin-Bar (nur eingeloggt) erhöht den Sticky-Stack. */ body.admin-bar .scl-okd-tabnav { top: calc(var(--scl-sticky-secondary-top, 42px) + 32px + var(--scl-breadcrumb-height, 0px)); } @media screen and (max-width: 782px) { body.admin-bar .scl-okd-tabnav { top: calc(var(--scl-sticky-secondary-top, 42px) + 46px + var(--scl-breadcrumb-height, 0px)); } } /* §8 Scroll-Margin-Kontrakt: Fragment-/Fokus-Ziele im Portal dürfen nicht unter dem kompletten Top-Chrome-Stack (Bar + Breadcrumb + Sticky-Nav ~52px) verschwinden. EIN geteilter Offset. */ .scl-okd { --scl-portal-scroll-offset: calc(var(--scl-sticky-secondary-top, 42px) + var(--scl-breadcrumb-height, 0px) + 60px); } .scl-okd [id], .scl-okd-panel { scroll-margin-top: var(--scl-portal-scroll-offset, 102px); } .scl-okd-tabnav::-webkit-scrollbar { height: 6px; } .scl-okd-tabnav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.24); border-radius: 6px; } .scl-okd-tab { position: relative; display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; white-space: nowrap; text-decoration: none; color: var(--okd-text); font-weight: 800; font-size: .95rem; border: 2px solid rgba(255,255,255,.16); border-radius: 13px; padding: 11px 17px; background: #160d2b; } .scl-okd-tab__led { width: 11px; height: 11px; border-radius: 50%; background: var(--okd-accent); box-shadow: 0 0 10px var(--okd-accent); opacity: .72; transition: opacity .2s; } .scl-okd-tab__icon { font-size: 1rem; } .scl-okd-tab--musik .scl-okd-tab__led { background: #ff2fd0; box-shadow: 0 0 12px #ff2fd0; } .scl-okd-tab--kuenstler .scl-okd-tab__led { background: #43d6ff; box-shadow: 0 0 12px #43d6ff; } .scl-okd-tab--news .scl-okd-tab__led { background: #ffcf47; box-shadow: 0 0 12px #ffcf47; } .scl-okd-tab--ok-i-do-ki .scl-okd-tab__led { background: #40e59b; box-shadow: 0 0 12px #40e59b; } .scl-okd-tab--community .scl-okd-tab__led { background: #8a5cff; box-shadow: 0 0 12px #8a5cff; } .scl-okd-tab--social .scl-okd-tab__led { background: #2fe6c8; box-shadow: 0 0 12px #2fe6c8; } /* Active treatment shared by MODE A (Portalstart tab, aria-selected) and MODE B (subpage link, aria-current). */ .scl-okd-tab[aria-selected="true"], .scl-okd-tab[aria-current="page"] { border-color: rgba(255,255,255,.5); background: #20143c; box-shadow: 0 10px 30px -12px rgba(243,79,208,.6); } .scl-okd-tab[aria-selected="true"] .scl-okd-tab__led, .scl-okd-tab[aria-current="page"] .scl-okd-tab__led { opacity: 1; } .scl-okd-tab[aria-selected="false"] { opacity: .84; } @media (hover: hover) and (pointer: fine) { .scl-okd-tab { transition: transform .12s ease, border-color .12s ease; } .scl-okd-tab:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.4); } } .scl-okd-tab:focus-visible { outline: 3px solid var(--okd-accent); outline-offset: 2px; } /* §6 Menü-Zentrierung: die Ein-Zeilen-Tablist (>=831px, wo die 5 Tabs in eine Reihe passen) mittig im Content-Shell ausrichten. Nur Desktop/Tablet-Einzeiler — das mobile 3+2-Grid (@media max-width:830px) zentriert sich bereits selbst (max-width:520px + margin-inline:auto) und bleibt unberührt. Kein DOM-Eingriff, keine zweite Navigation. */ @media (min-width: 831px) { .scl-okd-tabnav { justify-content: center; } } .scl-okd-status { color: var(--okd-muted); font-size: .8rem; min-height: 1.1em; margin: 0 0 4px; padding: 0 2px; } /* ── PANELS (immer nur eines sichtbar) ── */ .scl-okd-panel { outline: none; padding: 6px 0 30px; } .scl-okd-panel[hidden] { display: none !important; } .scl-okd-panel:focus-visible { outline: 3px solid var(--okd-accent); outline-offset: 6px; border-radius: 10px; } @media (prefers-reduced-motion: no-preference) { .scl-okd-panel.is-enter { animation: scl-okd-in .24s cubic-bezier(.2,.7,.2,1); } } @keyframes scl-okd-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .scl-okd[data-okd-js="1"] .scl-okd-panels { view-transition-name: scl-okd-panels; } @media (prefers-reduced-motion: reduce) { ::view-transition-group(scl-okd-panels) { animation: none !important; } } /* ── Panel-Inhalte ── */ .scl-okd-sec { background: var(--okd-surface); border: 1px solid var(--okd-border); border-radius: 16px; padding: 26px max(20px,2.5vw); } .scl-okd-sec__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; } .scl-okd-h2 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); font-weight: 800; color: var(--okd-text); margin: 0 0 8px; } .scl-okd-h3 { font-size: 1.02rem; font-weight: 800; color: var(--okd-text); margin: 16px 0 8px; } .scl-okd-powered-inline { font-size: .72rem; font-weight: 700; color: var(--okd-muted); } .scl-okd-lead { color: var(--okd-muted); max-width: 68ch; margin: 0 0 14px; } .scl-okd-more { margin-inline-start: auto; color: var(--okd-accent); text-decoration: none; font-weight: 700; white-space: nowrap; } .scl-okd-cta { display: inline-block; margin-top: 14px; font-weight: 800; text-decoration: none; color: #fff; background: linear-gradient(90deg, #f34fd0, #8a5cff); border-radius: 12px; padding: 11px 18px; } .scl-okd-stats { display: flex; gap: 12px; flex-wrap: wrap; margin: 4px 0 14px; } .scl-okd-stats div { background: var(--bg-2, rgba(255,255,255,.04)); border: 1px solid var(--okd-border); border-radius: 12px; padding: 12px 18px; text-align: center; min-width: 88px; } .scl-okd-stats dt { font-size: 1.6rem; font-weight: 900; background: var(--okd-neon); -webkit-background-clip: text; background-clip: text; color: transparent; } .scl-okd-stats dd { margin: 0; color: var(--okd-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; } .scl-okd-list { margin: 0 0 14px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; color: var(--okd-muted); } .scl-okd-list li { padding-left: 18px; position: relative; } .scl-okd-list li::before { content: "›"; position: absolute; left: 2px; color: var(--okd-accent); font-weight: 800; } .scl-okd-news-lead { display: flex; gap: 16px; text-decoration: none; color: inherit; background: var(--bg-2, rgba(255,255,255,.03)); border: 1px solid var(--okd-border); border-radius: 14px; overflow: hidden; margin-bottom: 12px; } .scl-okd-news-lead__media { flex: 0 0 40%; max-width: 320px; } .scl-okd-news-lead__media img { width: 100%; height: 100%; object-fit: cover; } .scl-okd-news-lead__body { padding: 16px; display: flex; flex-direction: column; gap: 8px; } .scl-okd-news-lead__title { font-weight: 800; font-size: 1.1rem; line-height: 1.3; color: var(--okd-text); } .scl-okd-news-lead__excerpt { color: var(--okd-muted); font-size: .92rem; } .scl-okd-news-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .scl-okd-news-list a { display: block; text-decoration: none; color: var(--okd-text); background: var(--okd-surface); border: 1px solid var(--okd-border); border-radius: 10px; padding: 12px 14px; font-weight: 600; } .scl-okd-news-list a:hover { border-color: var(--okd-accent); } .scl-okd-empty { color: var(--okd-muted); padding: 12px 0; } .scl-okd-empty a { color: var(--okd-accent); } /* ── A · Musik-Guard (portal-eigener Wrapper; min-height via JS gesetzt, sonst rein transparent) ── */ .scl-okd-music-guard { display: block; } /* ── B · Künstlerkarten (reales Discovery-Grid; Desktop bis 5, Tablet 2–3, Mobile 1) ── */ .scl-okd-eyebrow { margin: 6px 0 10px; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--okd-muted); } .scl-okd-artists { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin: 2px 0 16px; } .scl-okd-artist { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; background: var(--bg-2, rgba(255,255,255,.03)); border: 1px solid var(--okd-border); border-radius: 14px; padding: 16px; } .scl-okd-artist:focus-visible { outline: 3px solid var(--okd-accent); outline-offset: 2px; } .scl-okd-artist__avatar { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: #1b1233; border: 1px solid var(--okd-border); display: grid; place-items: center; } .scl-okd-artist__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .scl-okd-artist__avatar-fallback { font-weight: 900; font-size: 1.7rem; background: var(--okd-neon); -webkit-background-clip: text; background-clip: text; color: transparent; } .scl-okd-artist__name { font-weight: 800; font-size: 1.04rem; color: var(--okd-text); } .scl-okd-artist__bio { color: var(--okd-muted); font-size: .88rem; line-height: 1.4; } .scl-okd-artist__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 4px; } .scl-okd-artist__stat { font-size: .74rem; font-weight: 700; color: var(--okd-text); background: rgba(255,255,255,.06); border: 1px solid var(--okd-border); border-radius: 8px; padding: 3px 9px; } .scl-okd-artist__go { font-size: .82rem; font-weight: 800; color: var(--okd-accent); } @media (hover: hover) and (pointer: fine) { .scl-okd-artist { transition: border-color .14s ease, transform .14s ease; } .scl-okd-artist:hover { border-color: var(--okd-accent); transform: translateY(-2px); } } /* ── C · News-Meta (Kategorie-Chip + Datum) — Lead + Karten ── */ .scl-okd-news__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .scl-okd-news__cat { font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #0d0920; background: linear-gradient(90deg,#ffcf47,#40e59b); border-radius: 6px; padding: 2px 8px; } .scl-okd-news__date { font-size: .74rem; color: var(--okd-muted); } /* ── C · News-Lead — Fallback-Visual falls kein Bild ── */ .scl-okd-news-lead__media[data-okd-fallback] { min-height: 150px; background: linear-gradient(135deg, rgba(138,92,255,.42), rgba(67,214,255,.26)); } /* ── C · News-Karussell (horizontaler scroll-snap → Swipe; Prev/Next; Tastatur) ── */ .scl-okd-news-carousel { position: relative; } .scl-okd-caro-track { list-style: none; margin: 0; padding: 4px 2px 10px; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .scl-okd-caro-track::-webkit-scrollbar { height: 6px; } .scl-okd-caro-track::-webkit-scrollbar-thumb { background: rgba(255,255,255,.24); border-radius: 6px; } .scl-okd-caro-track:focus-visible { outline: 3px solid var(--okd-accent); outline-offset: 3px; border-radius: 12px; } .scl-okd-news-card { flex: 0 0 clamp(220px, 46%, 300px); scroll-snap-align: start; } .scl-okd-news-card > a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; background: var(--bg-2, rgba(255,255,255,.03)); border: 1px solid var(--okd-border); border-radius: 14px; overflow: hidden; } .scl-okd-news-card__media { aspect-ratio: 16/9; overflow: hidden; } .scl-okd-news-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .scl-okd-news-card__media[data-okd-fallback] { background: linear-gradient(135deg, rgba(255,207,71,.35), rgba(138,92,255,.30)); } .scl-okd-news-card__body { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; } .scl-okd-news-card__title { font-weight: 800; font-size: .98rem; line-height: 1.3; color: var(--okd-text); } .scl-okd-news-card__excerpt { color: var(--okd-muted); font-size: .85rem; line-height: 1.4; } /* V3-CONTRACT-V2: News-Kategorie-Filter (Chips über „Alle News"). Aktiv = gefüllt (nicht nur farblich). */ .scl-okd-newsfilter { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 12px; } .scl-okd-newsfilter[hidden] { display: none; } .scl-okd-filterchip { font-size: .8rem; font-weight: 700; color: var(--okd-text); background: rgba(255,255,255,.05); border: 1px solid var(--okd-border); border-radius: 999px; padding: 6px 14px; cursor: pointer; line-height: 1; } .scl-okd-filterchip.is-active { color: #0d0920; background: linear-gradient(90deg,#f34fd0,#8a5cff); border-color: transparent; } .scl-okd-filterchip:focus-visible { outline: 3px solid var(--okd-accent); outline-offset: 2px; } @media (hover: hover) and (pointer: fine) { .scl-okd-filterchip:not(.is-active) { transition: border-color .14s ease, background .14s ease; } .scl-okd-filterchip:not(.is-active):hover { border-color: var(--okd-accent); background: rgba(255,255,255,.1); } } @media (hover: hover) and (pointer: fine) { .scl-okd-news-card > a { transition: border-color .14s ease; } .scl-okd-news-card > a:hover { border-color: var(--okd-accent); } } /* Vertikal am Bildband ausrichten (16/9-Media) → auf Mobile nicht über Datum/Titel. */ /* V3 · Karussell-Kopfsteuerung (Prev / Zähler „1–5 von N" / Next) statt Overlay-Pfeile */ .scl-okd-newsgroup { margin-top: 16px; } .scl-okd-newsgroup:first-of-type { margin-top: 4px; } .scl-okd-sec__head--sub { margin-bottom: 10px; gap: 10px; } .scl-okd-sec__head--sub .scl-okd-h3 { margin: 0; } .scl-okd-caro-ctl { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: auto; flex: 0 0 auto; } .scl-okd-caro-count { font-size: .8rem; font-weight: 700; color: var(--okd-muted); white-space: nowrap; } .scl-okd-caro-nav { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--okd-border); background: rgba(255,255,255,.06); color: var(--okd-text); font-size: 1.25rem; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; flex: 0 0 auto; } .scl-okd-caro-nav[hidden], .scl-okd-caro-count[hidden] { display: none; } /* [hidden] muss display:grid schlagen (Specificity) */ .scl-okd-caro-nav:disabled { opacity: .3; cursor: default; } .scl-okd-caro-nav:focus-visible { outline: 3px solid var(--okd-accent); outline-offset: 2px; } @media (hover: hover) and (pointer: fine) { .scl-okd-caro-nav:not(:disabled) { transition: border-color .14s ease, background .14s ease; } .scl-okd-caro-nav:not(:disabled):hover { border-color: var(--okd-accent); background: rgba(255,255,255,.12); } } /* V3 · News-Karten dürfen als Grundfläche auch ohne Bild eine Mindesthöhe haben */ .scl-okd-news-card > a { min-height: 100%; } /* V3 · OK-I-DO-KI Lernstatistik */ .scl-okd-daymetric { display: flex; align-items: center; gap: 8px; margin: 2px 0 14px; color: var(--okd-text); font-size: .92rem; font-weight: 600; } .scl-okd-daymetric__dot { width: 9px; height: 9px; border-radius: 50%; background: #40e59b; box-shadow: 0 0 8px #40e59b; flex: 0 0 auto; } @media (prefers-reduced-motion: no-preference) { .scl-okd-daymetric__dot { animation: scl-okd-pulse 2.4s ease-in-out infinite; } } @keyframes scl-okd-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } } .scl-okd-learnbox, .scl-okd-joinbox { background: var(--bg-2, rgba(255,255,255,.04)); border: 1px solid var(--okd-border); border-radius: 14px; padding: 18px; margin: 6px 0 14px; } .scl-okd-learnbox { border-left: 3px solid var(--okd-accent); } .scl-okd-joinbox { background: radial-gradient(600px 200px at 0% 0%, rgba(138,92,255,.18), transparent 70%), var(--bg-2, rgba(255,255,255,.04)); } .scl-okd-learnbox .scl-okd-h3, .scl-okd-joinbox .scl-okd-h3 { margin-top: 0; } .scl-okd-stats--personal { margin: 8px 0 12px; } .scl-okd-lastcourse { color: var(--okd-muted); font-size: .9rem; margin: 4px 0 12px; } .scl-okd-lastcourse strong { color: var(--okd-text); } /* V3 · OK-I-DO-KI — Join-CTA-Zeile, Fortschrittsbalken, Kurs-Einstiegskarten */ .scl-okd-joinbox__cta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-top: 4px; } .scl-okd-joinbox__cta .scl-okd-cta { margin-top: 0; } .scl-okd-loginlink { color: var(--okd-muted); font-size: .86rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .scl-okd-loginlink:hover, .scl-okd-loginlink:focus-visible { color: var(--okd-text); } /* Fortschritt: nicht allein über Farbe — Prozent-Textlabel + role=progressbar (A11y §16). */ .scl-okd-progress { margin: 4px 0 12px; } .scl-okd-progress__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .82rem; color: var(--okd-muted); margin-bottom: 6px; } .scl-okd-progress__head strong { color: var(--okd-text); font-size: .92rem; font-weight: 800; } .scl-okd-progress__bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid var(--okd-border); overflow: hidden; } .scl-okd-progress__bar > span { display: block; height: 100%; min-width: 3px; border-radius: 999px; background: var(--okd-neon); background-size: 200% 100%; } .scl-okd-courses-h { margin-top: 18px; } .scl-okd-courses { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 4px 0 16px; } .scl-okd-course { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; background: var(--bg-2, rgba(255,255,255,.03)); border: 1px solid var(--okd-border); border-radius: 14px; padding: 16px; } .scl-okd-course__title { font-weight: 800; font-size: 1rem; line-height: 1.3; color: var(--okd-text); } .scl-okd-course__desc { color: var(--okd-muted); font-size: .85rem; line-height: 1.45; } .scl-okd-course__meta { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 4px; } .scl-okd-course__tasks { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--okd-muted); } .scl-okd-course__go { font-size: .8rem; font-weight: 800; color: var(--okd-accent); white-space: nowrap; } @media (hover: hover) and (pointer: fine) { .scl-okd-course { transition: border-color .14s ease, transform .14s ease; } .scl-okd-course:hover { border-color: var(--okd-accent); transform: translateY(-2px); } } .scl-okd-cta--ghost { background: transparent; border: 1px solid var(--okd-border); color: var(--okd-text); } @media (hover: hover) and (pointer: fine) { .scl-okd-cta--ghost { transition: border-color .14s ease; } .scl-okd-cta--ghost:hover { border-color: var(--okd-accent); } } /* V3 · Community — Creator-Club-Tipp-Karten + Aktionen */ .scl-okd-news__cat--club { background: linear-gradient(90deg,#43d6ff,#8a5cff); color: #0d0920; } .scl-okd-tip-card { flex: 0 0 clamp(240px, 60%, 320px); scroll-snap-align: start; } .scl-okd-tip-card > a { display: flex; flex-direction: column; gap: 8px; height: 100%; text-decoration: none; color: inherit; background: var(--bg-2, rgba(255,255,255,.03)); border: 1px solid var(--okd-border); border-radius: 14px; padding: 16px; } .scl-okd-tip-card__title { font-weight: 800; font-size: 1rem; line-height: 1.3; color: var(--okd-text); } .scl-okd-tip-card__excerpt { color: var(--okd-muted); font-size: .86rem; line-height: 1.45; } .scl-okd-tip-card__replies { margin-top: auto; font-size: .74rem; font-weight: 700; color: var(--okd-accent); } @media (hover: hover) and (pointer: fine) { .scl-okd-tip-card > a { transition: border-color .14s ease, transform .14s ease; } .scl-okd-tip-card > a:hover { border-color: var(--okd-accent); transform: translateY(-2px); } } .scl-okd-replies { color: var(--okd-muted); font-weight: 600; font-size: .82rem; } .scl-okd-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .scl-okd-actions .scl-okd-cta { margin-top: 0; } /* ── RESPONSIVE ── */ @media (max-width: 720px) { /* V2 (§7): Card-Padding nur im Text-Zustand; Media-Zustand bleibt rahmenlos (auch mobil). */ .scl-okd-hero:not(:has(.scl-okd-hero__media)) { padding: 22px 16px; } .scl-okd-hero__deco { display: none; } .scl-okd-news-lead { flex-direction: column; } .scl-okd-news-lead__media { flex: none; max-width: none; aspect-ratio: 16/9; } .scl-okd-tab { padding: 10px 14px; font-size: .9rem; } .scl-okd-artists { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .scl-okd-news-card { flex-basis: clamp(200px, 78%, 260px); } /* Mobile: ~1 Karte pro Breite + Peek → Swipe */ .scl-okd-tip-card { flex-basis: clamp(220px, 82%, 280px); } .scl-okd-sec__head--sub { flex-wrap: nowrap; } .scl-okd-sec__head--sub .scl-okd-h3 { font-size: .96rem; } .scl-okd-caro-count { font-size: .74rem; } .scl-okd-actions .scl-okd-cta { flex: 1 1 auto; text-align: center; } .scl-okd-courses { grid-template-columns: 1fr; } } @media (max-width: 480px) { .scl-okd-stats div { min-width: 66px; padding: 10px 12px; } .scl-okd-stats dt { font-size: 1.4rem; } } /* ── V3-ADDENDUM: Mobile/Tablet-Navigation als festes 3+2-Raster (kein horizontales Scrollen) ── EINE Tablist, dieselben 5 Tabs — nur per CSS responsiv umgelegt. Reihe 1: Musik · Künstler · News, Reihe 2 zentriert darunter: OK-I-DO-KI · Community. Evidenzbasierter Breakpoint: die Einzeilen-Navigation überläuft bereits ab ~767px (Inhalt ~767px > Container 0,94·vw) → 3+2 bis 830px, klassischer Einzeiler ab 831px. Dieser Block steht bewusst zuletzt und überschreibt die @720/@480-Tab-Feinheiten (Cascade). */ @media (max-width: 830px) { .scl-okd-tabnav { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: auto auto; gap: 8px; overflow: visible; /* kein horizontales Scrollen */ max-width: 520px; /* 3+3 kompakt + zentriert auch auf breiteren Tablets */ margin-inline: auto; padding: 8px 0 8px; /* SCL_PORTAL_NAV_..._V1 §5/§6: kein opaker Sticky-Streifen mehr — transparent, Kacheln tragen die Lesbarkeit. */ background: transparent; } /* Die ECHTE Tablist spannt das gesamte 6×2-Grid und übernimmt per Subgrid exakt dessen Spuren; ihre 5 Tabs füllen 5 der 6 Zellen. Der Social-Button (Geschwister) wird in die freie 6. Zelle gelegt und liegt (spätere DOM-Position) über der leeren, transparenten Tablist-Zelle. So bleibt der role="tablist" erhalten UND es entsteht optisch EIN 3+3-Kachelraster. */ .scl-okd-tabs { grid-column: 1 / -1; grid-row: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; gap: 8px; } .scl-okd-tabnav::-webkit-scrollbar { display: none; } .scl-okd-tab { flex: none; /* SCL_PORTAL_NAV_..._V1 Addendum: Icon LINKS neben dem Label auf EINER horizontalen Zeile (row) — NICHT gestapelt. Reduziert die Navigationshöhe; logische Reihenfolge Icon→Label bleibt. */ flex-direction: row; justify-content: center; align-items: center; text-align: center; /* SCL_PORTAL_NAV_..._V1 §7: mobile Menü-Inhalte ~40% kleiner als Desktop; EINE fluide Quelle (clamp) interpoliert Label/Icon/Gap/Padding zwischen Phone-Floor (<=430px, ~60% von Desktop) und den aktuellen Tablet-Werten (@768px). Der Touch-Target bleibt garantiert >=44px (min-height). */ gap: clamp(3px, 0.8vw, 5px); white-space: nowrap; /* keine Zeilenumbrüche — Icon + Label bleiben in einer Zeile */ line-height: 1; min-height: 44px; /* Touch-Target >=44px CSS (Vorgabe eingehalten) */ padding: clamp(3px, 0.7vw, 5px) clamp(4px, 0.9vw, 7px); font-size: clamp(0.57rem, calc(1.089vw + 4.44px), 0.8rem); /* Label: ~0.57rem @<=430 (40% < Desktop .95rem) → .8rem @768 */ border-radius: 12px; } .scl-okd-tab__led { display: none; } /* dekorativ (aria-hidden) — Platz sparen; Aktiv-State bleibt über Rahmen/Glow/Deckkraft erkennbar */ .scl-okd-tab__icon { font-size: clamp(0.6rem, calc(2.13vw + 0.44px), 1.05rem); } /* Icon: ~0.6rem @<=430 (40% < Desktop 1rem) → 1.05rem @768 */ /* §23 + §1-Korrektur: 3+3 — die 5 Tabs (DOM-Kinder der display:contents-Tablist) + der Social-Button (DOM-Geschwister) sind alle Grid-Items von .scl-okd-tabnav. Tabs via `.scl-okd-tabs > … :nth-child`, Social via Klasse (liegt außerhalb der Tablist → nth-child würde dort neu zählen). */ .scl-okd-tabs > .scl-okd-tab:nth-child(1) { grid-column: 1 / 3; grid-row: 1; } /* Musik */ .scl-okd-tabs > .scl-okd-tab:nth-child(2) { grid-column: 3 / 5; grid-row: 1; } /* Künstler */ .scl-okd-tabs > .scl-okd-tab:nth-child(3) { grid-column: 5 / 7; grid-row: 1; } /* News */ .scl-okd-tabs > .scl-okd-tab:nth-child(4) { grid-column: 1 / 3; grid-row: 2; } /* OK-I-DO-KI */ .scl-okd-tabs > .scl-okd-tab:nth-child(5) { grid-column: 3 / 5; grid-row: 2; } /* Community */ .scl-okd-tab--social { grid-column: 5 / 7; grid-row: 2; } /* Social (Button, Geschwister der Tablist) */ /* Aktiv-State auch ohne LED klar nicht-nur-farblich: heller Rahmen + Glow + volle Deckkraft (inaktiv = .84). */ .scl-okd-tab[aria-selected="true"], .scl-okd-tab[aria-current="page"] { border-color: #fff; box-shadow: 0 6px 20px -8px rgba(243,79,208,.7), inset 0 0 0 1px rgba(255,255,255,.35); } } /* ================================================================================================ * OK-I-DO-KI GOLD — VARIANTENSCHICHT (SCL_OKIDOKI_CLASS1_GOLD_VISUAL_PRODUCT_UPLIFT_LOCAL_V1) * ------------------------------------------------------------------------------------------------ * ZENTRALE Erweiterung des bestehenden .scl-okd-Systems. Rein ADDITIV: es wird keine bestehende * Regel geaendert, nur neue Varianten-Selektoren ergaenzt. Die Legacy-Portalflaechen bleiben damit * byte-identisch. * * REGELN, DIE HIER GELTEN: * - KEINE neue Farbwelt. Jeder Farbwert kommt aus einem bereits zentral gesetzten Token: * --okd-neon / --button-bg (Regenbogen) --okd-accent --okd-surface --okd-border * --okd-text / --okd-muted --card-bg / --card-bg-hover / --card-border * --success-bg|border|text --warning-bg|border|text --danger-bg|border|text * --shadow-card / --shadow-card-hover --surface-2 / --surface-3 / --glass * - KEINE neue --ok-*-Tokenwelt. Die einzige neue Custom-Property ist --okd-hue: ein reiner * INDEX (0..5), der den ZENTRALEN Regenbogen --okd-neon an unterschiedlicher Stelle abtastet. * Aendert der Operator --okd-neon zentral, folgen alle Varianten automatisch. * - MOTION ausschliesslich ueber die zentralen Motion-Tokens (--motion-duration-*, --motion-easing*, * --motion-hover-lift, --motion-hover-scale, --motion-stagger). Bewegung ist NIE die einzige * Bedeutungsebene; jeder Zustand hat zusaetzlich Text und/oder ARIA. * - prefers-reduced-motion: reduce schaltet saemtliche Bewegung dieser Schicht ab (Block am Ende). * ============================================================================================== */ /* ── Regenbogen-Abtastung: EIN zentraler Verlauf, sechs Positionen ───────────────────────────── */ .scl-okd [data-okd-hue] { --okd-hue-pos: calc(var(--okd-hue, 0) * 20%); } .scl-okd-lane { position: relative; } .scl-okd-lane::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: 0; width: 4px; border-start-start-radius: inherit; border-end-start-radius: inherit; background: var(--okd-neon); background-size: 600% 100%; background-position: var(--okd-hue-pos, 0%) 0; } /* ── Sektions-Dramaturgie: Einstieg → Schritt → Erkenntnis → Ergebnis → Abschluss ────────────── */ .scl-okd-sec--intro { background: radial-gradient(760px 300px at 8% -40%, var(--accent-dim, rgba(255,255,255,.10)), transparent 66%), var(--okd-surface); border-color: var(--card-border, var(--okd-border)); } .scl-okd-sec--step { padding-block: 22px; } .scl-okd-sec--result { background: var(--surface-2, var(--okd-surface)); } .scl-okd-sec--quiet { background: transparent; border-style: dashed; } .scl-okd-sec--finish { background: radial-gradient(700px 260px at 88% -30%, var(--success-bg, transparent), transparent 70%), var(--okd-surface); } /* Schritt-Kopf: Nummer im zentralen Regenbogen, Titel daneben. */ .scl-okd-stepbadge { display: inline-flex; align-items: center; justify-content: center; inline-size: 30px; block-size: 30px; border-radius: 999px; flex: 0 0 auto; font-weight: 900; font-size: .82rem; color: var(--button-text, var(--okd-text)); background: var(--okd-neon); background-size: 600% 100%; background-position: var(--okd-hue-pos, 0%) 0; } .scl-okd-sec__head--step { align-items: center; gap: 10px; margin-bottom: 10px; } .scl-okd-sec__head--step .scl-okd-h3 { margin: 0; } /* ── Chips: Rolle/Status. Nie nur Farbe — immer Text, oft zusaetzlich ein Zeichen. ───────────── */ .scl-okd-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; border: 1px solid var(--okd-border); background: var(--surface-2, rgba(255,255,255,.06)); color: var(--okd-muted); } .scl-okd-chip--required { border-color: var(--card-border, var(--okd-border)); color: var(--okd-text); } .scl-okd-chip--optional { border-style: dashed; } .scl-okd-chip--exam { border-color: var(--warning-border, var(--okd-border)); color: var(--warning-text, var(--okd-text)); background: var(--warning-bg, transparent); } .scl-okd-chip--done { border-color: var(--success-border, var(--okd-border)); color: var(--success-text, var(--okd-text)); background: var(--success-bg, transparent); } .scl-okd-chiprow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 2px 0 12px; } /* ── Missionskarte: Kartenvariante mit Regenbogen-Kante + zentralen Card-Tokens ──────────────── */ .scl-okd-course--mission { position: relative; overflow: hidden; background: var(--card-bg, var(--bg-2, rgba(255,255,255,.04))); border-color: var(--card-border, var(--okd-border)); border-radius: var(--card-radius, 14px); padding-inline-start: calc(16px + 4px); } .scl-okd-course--mission .scl-okd-course__title { line-height: 1.3; } .scl-okd-course--mission.is-completed { background: var(--success-bg, var(--card-bg)); border-color: var(--success-border, var(--okd-border)); } @media (hover: hover) and (pointer: fine) { .scl-okd-course--mission { transition: transform var(--motion-duration-base, 220ms) var(--motion-easing, ease), border-color var(--motion-duration-fast, 120ms) var(--motion-easing, ease), box-shadow var(--motion-duration-base, 220ms) var(--motion-easing, ease); } .scl-okd-course--mission:hover { transform: translateY(var(--motion-hover-lift, -4px)); border-color: var(--okd-accent); box-shadow: var(--shadow-card-hover, none); } } /* ── Feedbackflaechen: sichtbar unterschieden, immer mit Text ───────────────────────────────── */ .scl-okd-feedback { display: block; margin: 10px 0 0; padding: 10px 14px; border-radius: var(--radius-sm, 10px); border: 1px solid var(--okd-border); background: var(--surface-2, rgba(255,255,255,.05)); color: var(--okd-text); font-size: .94rem; line-height: 1.45; } .scl-okd-feedback[hidden] { display: none; } .scl-okd-feedback--ok { border-color: var(--success-border, var(--okd-border)); background: var(--success-bg, transparent); } .scl-okd-feedback--try { border-color: var(--warning-border, var(--okd-border)); background: var(--warning-bg, transparent); } /* ── Blöki: Figur + Sprechblase statt anonymer Textzeile ────────────────────────────────────── */ .scl-okd-bloeki { display: flex; gap: 12px; align-items: flex-start; } .scl-okd-bloeki__avatar { flex: 0 0 auto; inline-size: 38px; block-size: 38px; border-radius: 999px; display: grid; place-items: center; font-size: 1.05rem; line-height: 1; color: var(--button-text, var(--okd-text)); background: var(--okd-neon); background-size: 600% 100%; background-position: 40% 0; box-shadow: var(--shadow-card, none); } .scl-okd-bloeki__body { min-width: 0; flex: 1 1 auto; } .scl-okd-bloeki__name { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--okd-muted); margin: 0 0 6px; } .scl-okd-bloeki__bubble { position: relative; margin: 10px 0 0; padding: 12px 14px; border: 1px solid var(--okd-border); border-radius: var(--radius-sm, 10px); background: var(--surface-2, rgba(255,255,255,.05)); color: var(--okd-text); line-height: 1.5; } .scl-okd-bloeki__bubble[hidden] { display: none; } .scl-okd-bloeki__bubble::before { content: ""; position: absolute; inset-block-start: -7px; inset-inline-start: 16px; inline-size: 12px; block-size: 12px; rotate: 45deg; border-inline-start: 1px solid var(--okd-border); border-block-start: 1px solid var(--okd-border); background: inherit; } /* ── Fortschritt: zentrale Bar + Regenbogen-Schimmer (nur bei erlaubter Motion) ─────────────── */ .scl-okd-progress__bar > span { background-size: 300% 100%; } /* Startbreite gehoert ins Stylesheet, nicht ins Markup; die Engine setzt sie danach dynamisch. */ .scl-okd-progress__bar > span:not([style]) { inline-size: 0; } .scl-okd-progress--live > .scl-okd-progress__bar > span { animation: scl-okd-shimmer 5s linear infinite; } @keyframes scl-okd-shimmer { from { background-position: 0 0; } to { background-position: 300% 0; } } /* ── Kurs-Orientierung: wie weit bin ich? ───────────────────────────────────────────────────── */ .scl-okd-stepline { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; padding: 0; list-style: none; } .scl-okd-stepline li { inline-size: 22px; block-size: 6px; border-radius: 999px; background: var(--surface-3, rgba(255,255,255,.10)); border: 1px solid var(--okd-border); } .scl-okd-stepline li.is-done { background: var(--okd-neon); background-size: 600% 100%; border-color: transparent; } .scl-okd-stepline li.is-current { border-color: var(--okd-accent); } /* ── Abschluss/Erfolg ───────────────────────────────────────────────────────────────────────── */ .scl-okd-finish { text-align: start; } .scl-okd-finish__mark { display: inline-flex; align-items: center; justify-content: center; inline-size: 46px; block-size: 46px; border-radius: 999px; margin-bottom: 8px; font-size: 1.3rem; color: var(--button-text, var(--okd-text)); background: var(--okd-neon); background-size: 600% 100%; background-position: 60% 0; } /* ── Sanftes Einblenden mit zentralem Stagger ──────────────────────────────────────────────── */ @media (prefers-reduced-motion: no-preference) { .scl-okd-rise { animation: scl-okd-rise var(--motion-duration-slow, 350ms) var(--motion-easing, ease) both; animation-delay: calc(var(--okd-i, 0) * var(--motion-stagger, 40ms)); } @keyframes scl-okd-rise { from { opacity: 0; transform: translateY(var(--motion-panel-slide-distance, 10px)); } to { opacity: 1; transform: none; } } } /* ── Reduced Motion: diese ganze Schicht wird statisch ─────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .scl-okd-rise { animation: none !important; } .scl-okd-progress--live > .scl-okd-progress__bar > span { animation: none !important; } .scl-okd-course--mission { transition: none !important; } .scl-okd-course--mission:hover { transform: none !important; } } /* ── Mobile ─────────────────────────────────────────────────────────────────────────────────── */ @media (max-width: 720px) { .scl-okd-bloeki__avatar { inline-size: 32px; block-size: 32px; font-size: .95rem; } .scl-okd-stepbadge { inline-size: 26px; block-size: 26px; font-size: .74rem; } .scl-okd-sec--step { padding-block: 18px; } } /* ================================================================================================ * OK-I-DO-KI GOLD — VARIANTENSCHICHT V2 (SCL_OKIDOKI_CLASS1_GOLD_VISUAL_PRODUCT_UPLIFT_LOCAL_V2) * ------------------------------------------------------------------------------------------------ * Ziel: vier Ebenen sofort unterscheidbar — (1) Aufgabe, (2) Auswahl/Eingabe, (3) Erklärung/Feedback, * (4) Fortschritt/Abschluss. Weiterhin rein additiv, weiterhin ohne eine einzige neue Farbe. * * NEU IN V2: * - KEINE Inline-Styles mehr: die Regenbogen-Position kommt jetzt ueber [data-okd-hue] statt style="". * - Der Missionskopf ist eine eigene Zone und ausdruecklich KEINE Inhalts-Card. * - Auswahlkarten, Feedback-Typen und Bloeki-Zustaende sind eigene Komponenten mit Form+Symbol, * nicht nur mit Farbe. * - Bloeki nutzt die BESTEHENDE Figur (Oktopus, wie im Legacy-Renderer seit Beginn) in Gross. * ============================================================================================== */ /* ── Hue ohne Inline-Style ──────────────────────────────────────────────────────────────────── */ .scl-okd [data-okd-hue="0"] { --okd-hue-pos: 0%; } .scl-okd [data-okd-hue="1"] { --okd-hue-pos: 20%; } .scl-okd [data-okd-hue="2"] { --okd-hue-pos: 40%; } .scl-okd [data-okd-hue="3"] { --okd-hue-pos: 60%; } .scl-okd [data-okd-hue="4"] { --okd-hue-pos: 80%; } .scl-okd [data-okd-hue="5"] { --okd-hue-pos: 100%; } /* Stagger ohne Inline-Style */ .scl-okd-rise:nth-of-type(1) { --okd-i: 0; } .scl-okd-rise:nth-of-type(2) { --okd-i: 1; } .scl-okd-rise:nth-of-type(3) { --okd-i: 2; } .scl-okd-rise:nth-of-type(4) { --okd-i: 3; } .scl-okd-rise:nth-of-type(n+5) { --okd-i: 4; } /* ══ 1 · MISSIONSKOPF — eigene Zone, keine Card ═════════════════════════════════════════════ */ .scl-okd-mhead { position: relative; margin: 14px 0 22px; padding: 0 0 20px; border: 0; background: none; border-bottom: 1px solid var(--okd-border); } .scl-okd-mhead::before { /* Farbsignatur der Mission */ content: ""; display: block; block-size: 5px; inline-size: clamp(72px, 22%, 180px); border-radius: 999px; margin-bottom: 14px; background: var(--okd-neon); background-size: 600% 100%; background-position: var(--okd-hue-pos, 0%) 0; } .scl-okd-mhead__top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } .scl-okd-mhead__num { font-weight: 900; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; background: var(--okd-neon); background-size: 600% 100%; background-position: var(--okd-hue-pos, 0%) 0; -webkit-background-clip: text; background-clip: text; color: transparent; } .scl-okd-mhead__course { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--okd-muted); } .scl-okd-mhead__title { font-size: clamp(1.35rem, 3vw, 2rem); font-weight: 800; line-height: 1.15; color: var(--okd-text); margin: 0 0 8px; text-wrap: balance; } .scl-okd-mhead__goal { color: var(--okd-muted); max-width: 62ch; line-height: 1.5; margin: 0 0 14px; } .scl-okd-mhead__meter { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .scl-okd-mhead__steps { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; } .scl-okd-mhead__steps li { inline-size: 30px; block-size: 8px; border-radius: 999px; background: var(--surface-3, rgba(255,255,255,.10)); border: 1px solid var(--okd-border); } .scl-okd-mhead__steps li.is-done { background: var(--okd-neon); background-size: 600% 100%; background-position: var(--okd-hue-pos, 0%) 0; border-color: transparent; } .scl-okd-mhead__steps li.is-current { border-color: var(--okd-accent); border-width: 2px; } .scl-okd-mhead__count { font-size: .84rem; font-weight: 700; color: var(--okd-text); } .scl-okd-mhead__count b { font-weight: 900; } /* ══ 2 · SEKTIONSROLLEN — unterschiedliche Gewichtung ═══════════════════════════════════════ */ /* Aufgabe: der Fokus. Kräftigste Fläche, breiter Innenabstand, eigene Kante. */ .scl-okd-task { position: relative; margin: 0 0 20px; padding: 24px max(18px, 2.2vw); background: var(--card-bg, rgba(255,255,255,.07)); border: 1px solid var(--card-border, var(--okd-border)); border-radius: var(--card-radius, 18px); box-shadow: var(--shadow-card, none); } .scl-okd-task__head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; } .scl-okd-task__label { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--okd-muted); } .scl-okd-task__q { font-size: clamp(1.02rem, 1.7vw, 1.2rem); font-weight: 800; color: var(--okd-text); line-height: 1.35; margin: 0 0 16px; max-width: 60ch; } /* Blöki-Hilfe: begleitend, zurückgenommen, KEINE Card-Fläche. */ .scl-okd-aside { margin: 0 0 20px; padding: 16px 18px; border-radius: var(--radius-sm, 10px); background: none; border: 1px dashed var(--okd-border); } /* Abschluss: eigener Zustand. */ .scl-okd-outro { margin: 4px 0 0; padding: 22px max(18px, 2vw); border-radius: var(--card-radius, 18px); border: 1px solid var(--okd-border); background: var(--surface-2, rgba(255,255,255,.06)); } .scl-okd-outro.is-ready { border-color: var(--okd-accent); } .scl-okd-outro.is-done { border-color: var(--success-border, var(--okd-border)); background: radial-gradient(620px 220px at 12% -40%, var(--success-bg, transparent), transparent 70%), var(--surface-2, rgba(255,255,255,.06)); } /* ══ 3 · AUSWAHLKARTEN ═════════════════════════════════════════════════════════════════════ */ .scl-okd-choices { display: grid; gap: 10px; margin: 0 0 4px; } @media (min-width: 900px) { .scl-okd-choices--2 { grid-template-columns: 1fr 1fr; } } .scl-okd-optioncard { display: flex; align-items: flex-start; gap: 12px; inline-size: 100%; text-align: start; font: inherit; font-weight: 600; color: var(--okd-text); padding: 14px 16px; min-block-size: 56px; cursor: pointer; background: var(--surface-2, rgba(255,255,255,.06)); border: 1px solid var(--okd-border); border-radius: var(--radius-sm, 12px); } .scl-okd-optioncard__mark { /* Form + Symbol, nicht nur Farbe */ flex: 0 0 auto; inline-size: 24px; block-size: 24px; border-radius: 999px; border: 2px solid var(--okd-border); display: grid; place-items: center; font-size: .8rem; font-weight: 900; line-height: 1; color: transparent; margin-block-start: 1px; } .scl-okd-optioncard__text { flex: 1 1 auto; min-inline-size: 0; } .scl-okd-optioncard[aria-checked="true"], .scl-okd-optioncard[aria-pressed="true"] { border-color: var(--okd-accent); border-width: 2px; padding: 13px 15px; background: var(--surface-3, rgba(255,255,255,.10)); } .scl-okd-optioncard[aria-checked="true"] .scl-okd-optioncard__mark, .scl-okd-optioncard[aria-pressed="true"] .scl-okd-optioncard__mark { border-color: var(--okd-accent); color: var(--okd-text); } .scl-okd-optioncard[aria-checked="true"] .scl-okd-optioncard__mark::after, .scl-okd-optioncard[aria-pressed="true"] .scl-okd-optioncard__mark::after { content: "●"; } .scl-okd-optioncard.is-correct { border-color: var(--success-border, var(--okd-border)); border-width: 2px; padding: 13px 15px; background: var(--success-bg, var(--surface-3)); } .scl-okd-optioncard.is-correct .scl-okd-optioncard__mark { border-color: var(--success-border); color: var(--success-text); } .scl-okd-optioncard.is-correct .scl-okd-optioncard__mark::after { content: "✓"; } .scl-okd-optioncard.is-wrong { border-color: var(--warning-border, var(--okd-border)); border-width: 2px; padding: 13px 15px; background: var(--warning-bg, var(--surface-3)); } .scl-okd-optioncard.is-wrong .scl-okd-optioncard__mark { border-color: var(--warning-border); color: var(--warning-text); } .scl-okd-optioncard.is-wrong .scl-okd-optioncard__mark::after { content: "↻"; } .scl-okd-optioncard:focus-visible { outline: var(--scl-focus-ring-width, 3px) solid var(--scl-focus-ring-color, var(--okd-accent)); outline-offset: var(--scl-focus-ring-offset, 2px); } @media (hover: hover) and (pointer: fine) { .scl-okd-optioncard { transition: border-color var(--motion-duration-fast, 120ms) var(--motion-easing, ease), background-color var(--motion-duration-fast, 120ms) var(--motion-easing, ease), transform var(--motion-duration-fast, 120ms) var(--motion-easing, ease); } .scl-okd-optioncard:hover { border-color: var(--okd-accent); background: var(--surface-3, rgba(255,255,255,.10)); } } /* ══ 4 · FEEDBACK-TYPEN ════════════════════════════════════════════════════════════════════ */ .scl-okd-fb { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: start; margin: 12px 0 0; padding: 12px 14px; border-radius: var(--radius-sm, 10px); border: 1px solid var(--okd-border); border-inline-start-width: 4px; background: var(--surface-2, rgba(255,255,255,.05)); } .scl-okd-fb[hidden] { display: none; } .scl-okd-fb__icon { grid-row: span 2; inline-size: 26px; block-size: 26px; border-radius: 999px; display: grid; place-items: center; font-size: .85rem; font-weight: 900; line-height: 1; border: 1px solid var(--okd-border); color: var(--okd-text); } .scl-okd-fb__title { font-size: .74rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--okd-muted); } .scl-okd-fb__text { color: var(--okd-text); line-height: 1.5; } .scl-okd-fb--correct { border-color: var(--success-border); background: var(--success-bg); } .scl-okd-fb--correct .scl-okd-fb__icon { border-color: var(--success-border); color: var(--success-text); } .scl-okd-fb--retry { border-color: var(--warning-border); background: var(--warning-bg); } .scl-okd-fb--retry .scl-okd-fb__icon { border-color: var(--warning-border); color: var(--warning-text); } .scl-okd-fb--explain { border-inline-start-color: var(--okd-accent); } .scl-okd-fb--note { border-style: dashed; } .scl-okd-fb--stepdone { border-color: var(--success-border); } .scl-okd-fb--stepdone .scl-okd-fb__icon { border-color: var(--success-border); color: var(--success-text); } /* ══ 5 · BLÖKI ALS FIGUR (bestehende Oktopus-Figur, gross) ═════════════════════════════════ */ .scl-okd-fig { display: flex; gap: 14px; align-items: flex-start; } .scl-okd-fig__avatar { position: relative; flex: 0 0 auto; inline-size: 62px; block-size: 62px; border-radius: 999px; display: grid; place-items: center; font-size: 2rem; line-height: 1; background: var(--surface-3, rgba(255,255,255,.10)); border: 2px solid var(--okd-border); /* VARIANTE B (Bloeki bleibt der Legacy-Unicode-Oktopus): Emoji-Metriken unterscheiden sich je Plattform. Feste Box + zentrierte Ausrichtung + Overflow-Schutz verhindern, dass das Layout je nach Emoji-Font springt. Der Font-Stack haelt die Darstellung so nah wie moeglich beieinander. */ font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif; overflow: hidden; contain: layout paint; } .scl-okd-fig__avatar::after { /* Zustandsmarke: Form + Symbol */ content: ""; position: absolute; inset-block-end: -2px; inset-inline-end: -2px; inline-size: 22px; block-size: 22px; border-radius: 999px; display: grid; place-items: center; font-size: .7rem; font-weight: 900; line-height: 1; background: var(--okd-surface); border: 2px solid var(--okd-border); color: var(--okd-text); } .scl-okd-fig.is-neutral .scl-okd-fig__avatar::after { content: "·"; } .scl-okd-fig.is-explain .scl-okd-fig__avatar::after { content: "?"; border-color: var(--okd-accent); } .scl-okd-fig.is-correct .scl-okd-fig__avatar { border-color: var(--success-border); } .scl-okd-fig.is-correct .scl-okd-fig__avatar::after { content: "✓"; border-color: var(--success-border); color: var(--success-text); } .scl-okd-fig.is-wrong .scl-okd-fig__avatar { border-color: var(--warning-border); } .scl-okd-fig.is-wrong .scl-okd-fig__avatar::after { content: "↻"; border-color: var(--warning-border); color: var(--warning-text); } .scl-okd-fig.is-success .scl-okd-fig__avatar { border-color: transparent; background: var(--okd-neon); background-size: 600% 100%; background-position: var(--okd-hue-pos, 40%) 0; } .scl-okd-fig.is-success .scl-okd-fig__avatar::after { content: "★"; border-color: var(--success-border); color: var(--success-text); } .scl-okd-fig__body { flex: 1 1 auto; min-inline-size: 0; } .scl-okd-fig__name { font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--okd-muted); margin: 2px 0 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* Bloekis Zustand steht als LESBARER TEXT neben dem Namen. Die Grafik allein traegt keine Statusinformation — Anforderung aus Variante B. */ .scl-okd-fig__state { font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--okd-border); color: var(--okd-muted); } .scl-okd-fig.is-correct .scl-okd-fig__state { border-color: var(--success-border); color: var(--success-text); } .scl-okd-fig.is-wrong .scl-okd-fig__state { border-color: var(--warning-border); color: var(--warning-text); } .scl-okd-fig.is-success .scl-okd-fig__state { border-color: var(--success-border); color: var(--success-text); } .scl-okd-fig.is-neutral .scl-okd-fig__state { display: none; } .scl-okd-fig__say { /* echte Sprechblase mit Zipfel zur Figur */ position: relative; margin: 0 0 10px; padding: 12px 15px; border: 1px solid var(--okd-border); border-radius: var(--radius-sm, 12px); background: var(--surface-2, rgba(255,255,255,.06)); color: var(--okd-text); line-height: 1.5; } .scl-okd-fig__say[hidden] { display: none; } .scl-okd-fig__say::before { content: ""; position: absolute; inset-inline-start: -7px; inset-block-start: 18px; inline-size: 12px; block-size: 12px; rotate: 45deg; border-inline-start: 1px solid var(--okd-border); border-block-end: 1px solid var(--okd-border); background: inherit; } .scl-okd-fig.is-correct .scl-okd-fig__say { border-color: var(--success-border); } .scl-okd-fig.is-wrong .scl-okd-fig__say { border-color: var(--warning-border); } @media (max-width: 720px) { .scl-okd-fig__avatar { inline-size: 50px; block-size: 50px; font-size: 1.6rem; } } /* ══ 6 · AKTIONSHIERARCHIE — genau EINE primaere Aktion ════════════════════════════════════ */ .scl-okd-act { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-top: 16px; } .scl-okd-act .scl-okd-cta { margin-top: 0; } .scl-okd-act__sub { /* sekundaer: als Link, nicht als zweiter Button */ font-weight: 700; font-size: .9rem; color: var(--okd-muted); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 6px 2px; cursor: pointer; } .scl-okd-act__sub:hover { color: var(--okd-text); } .scl-okd-act__sub:focus-visible { outline: var(--scl-focus-ring-width, 3px) solid var(--scl-focus-ring-color, var(--okd-accent)); outline-offset: var(--scl-focus-ring-offset, 2px); } /* ══ 7 · ERFOLGSZUSTAND ════════════════════════════════════════════════════════════════════ */ .scl-okd-win { display: flex; gap: 16px; align-items: flex-start; } /* [hidden] muss die display-Regeln dieser Schicht schlagen (sonst wird Zustand C sofort sichtbar). */ .scl-okd-win[hidden], .scl-okd-fig[hidden], .scl-okd-choices[hidden], .scl-okd-optioncard[hidden], .scl-okd-act[hidden], [data-okidoki-stage][hidden], .scl-okd-cta[hidden], .scl-okd-fb[hidden], .scl-okd-fig__say[hidden], .scl-okd-act__sub[hidden] { display: none !important; } .scl-okd-win__mark { flex: 0 0 auto; inline-size: 54px; block-size: 54px; border-radius: 999px; display: grid; place-items: center; font-size: 1.5rem; color: var(--button-text, var(--okd-text)); background: var(--okd-neon); background-size: 600% 100%; background-position: var(--okd-hue-pos, 60%) 0; } .scl-okd-win__title { font-size: 1.15rem; font-weight: 900; color: var(--okd-text); margin: 4px 0 6px; } .scl-okd-win__text { color: var(--okd-muted); line-height: 1.5; margin: 0 0 4px; max-width: 60ch; } @media (prefers-reduced-motion: no-preference) { .scl-okd-outro.is-done .scl-okd-win__mark { animation: scl-okd-pop var(--motion-duration-slow, 350ms) var(--motion-easing-emphasis, ease) 1; } @keyframes scl-okd-pop { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } } } /* ══ NATIVES FORTSCHRITTSELEMENT ═══════════════════════════════════════════════════════════ * Ersetzt die frühere span+style.width-Loesung. traegt value/max selbst, wird von * Screenreadern nativ als Fortschritt gemeldet und braucht kein designrelevantes style-Attribut. * Der sichtbare Textwert steht zusaetzlich daneben — Fortschritt nie nur ueber Balkenlaenge. */ .scl-okd-meter { inline-size: 100%; block-size: 10px; display: block; margin: 6px 0 0; appearance: none; -webkit-appearance: none; border: 1px solid var(--okd-border); border-radius: 999px; overflow: hidden; background: var(--surface-3, rgba(255,255,255,.10)); } .scl-okd-meter::-webkit-progress-bar { background: transparent; } .scl-okd-meter::-webkit-progress-value { border-radius: 999px; background: var(--okd-neon); background-size: 300% 100%; } .scl-okd-meter::-moz-progress-bar { border-radius: 999px; background: var(--okd-neon); background-size: 300% 100%; } .scl-okd-progress--live .scl-okd-meter::-webkit-progress-value { animation: scl-okd-shimmer 5s linear infinite; } .scl-okd-progress--live .scl-okd-meter::-moz-progress-bar { animation: scl-okd-shimmer 5s linear infinite; } @media (prefers-reduced-motion: reduce) { .scl-okd-progress--live .scl-okd-meter::-webkit-progress-value, .scl-okd-progress--live .scl-okd-meter::-moz-progress-bar { animation: none !important; } } /* ══ 8 · SICHERHEITSBEREICH DES SCHWEBENDEN BUTTONS ═══════════════════════════════════════ */ /* Ab 768px dockt der Beta-FAB mittig an der rechten Viewportkante. Die Portalbreite (min(1200px, 94vw)) kann dort darunterlaufen. Wir ziehen den Inhalt zentral um genau die reservierte Breite ein — keine feste Pixelzahl, keine seitenspezifische Regel. */ @media (min-width: 768px) { /* Zentrierter Inhalt: der reservierte Streifen muss beidseitig abgezogen werden. */ .scl-okd { max-inline-size: min(1200px, calc(100vw - 2 * var(--scl-fab-safe-inline-end, 0px))); } } /* ══ 8 · LESEBREITE AUF DESKTOP ═══════════════════════════════════════════════════════════ */ .scl-okd-task .scl-okd-lead, .scl-okd-aside .scl-okd-lead { max-width: 68ch; } /* ══ REDUCED MOTION ═══════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .scl-okd-optioncard { transition: none !important; } .scl-okd-outro.is-done .scl-okd-win__mark { animation: none !important; } } /* ── LERNWEG-VORSCHAU (SCL_OKIDOKI_CLASS1_LEARNING_PATH_SELECTION_LOCAL_V1) ────────────────────── * Nicht auswählbare Vorschau eines noch nicht freigeschalteten Lernwegs. Unverfügbarkeit wird durch * STRUKTUR (gestrichelter Rahmen) + Text (Status/Chip) getragen, nicht durch Farbe allein. Additiv, * nur zentrale Tokens, 0 neue Farben. */ .scl-okd-course--preview { border-style: dashed; opacity: .85; background: var(--surface-2, rgba(255,255,255,.05)); } .scl-okd-course--preview:hover { transform: none; } /* nicht interaktiv → kein Hover-Lift */ /* ================================================================================================ * LERNWEG-WECHSLER + WEGWAHL-MODAL (SCL_OKIDOKI_CLASS1_PATH_SWITCHER_UI_REDESIGN_LOCAL_V1) * ------------------------------------------------------------------------------------------------ * Additiver Block nach Gold-Variantenschicht-Regeln (Z. 348-360): keine neue Farbwelt, jeder Wert * aus zentralen Tokens (--okd-* / --card-* / --success-* / --motion-*), Reduced-Motion-Block am * Ende. Einzige dokumentierte Ausnahme: ::backdrop kann Seiten-Tokens nicht zuverlässig erben * (Top-Layer) → Scrim nutzt die bereits in dieser Datei etablierte Grundfarbe #0d0920. * Das Modal ist ein NATIVES (showModal): Fokusfalle/inert/Escape/Top-Layer kommen vom * Browser — dieses Modal definiert den Dialogvertrag der Gold-Flächen. * Beide Wegkarten sind visuell GLEICHWERTIG (identische Fläche/Typo/Radius); der aktive Zustand * wird über Chip-TEXT + Success-Token-Rahmen getragen, nie über Farbe allein. * ============================================================================================== */ /* ── C · Kompakter Wechsler auf der Klassenansicht ── */ .scl-okd-pathnow { display: flex; align-items: center; gap: 14px 26px; flex-wrap: wrap; } .scl-okd-pathnow__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 220px; } .scl-okd-pathnow__main .scl-okd-chiprow { margin: 0 0 6px; } .scl-okd-pathnow__title { font-size: 1.3rem; font-weight: 900; color: var(--okd-text); line-height: 1.2; } .scl-okd-pathnow__sub { color: var(--okd-muted); font-size: .9rem; } .scl-okd-pathnow__stat { display: flex; flex-direction: column; gap: 2px; text-align: center; background: var(--bg-2, rgba(255,255,255,.04)); border: 1px solid var(--okd-border); border-radius: 16px; padding: 12px 20px; flex: 0 0 auto; } .scl-okd-pathnow__stat strong { font-size: 1.6rem; font-weight: 900; line-height: 1.1; background: var(--okd-neon); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; } .scl-okd-pathnow__stat span { color: var(--okd-muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; } .scl-okd-pathnow__btn { margin-top: 0; margin-inline-start: auto; flex: 0 0 auto; } .scl-okd-pathnow__btn:focus-visible { outline: var(--scl-focus-ring-width, 3px) solid var(--scl-focus-ring-color, var(--okd-accent)); outline-offset: var(--scl-focus-ring-offset, 2px); } .scl-okd-pathnow__note { color: var(--okd-muted); font-size: .88rem; line-height: 1.5; margin: 14px 0 0; } /* ── D · Wegwahl-Modal (natives ) ── */ .scl-okd-pathmodal { inset: 0; margin: auto; padding: 0; border: 1px solid var(--card-border, var(--okd-border)); border-radius: 26px; width: min(880px, calc(100vw - 24px)); max-height: min(88vh, 100%); background: radial-gradient(760px 300px at 8% -40%, var(--accent-dim, rgba(255,255,255,.10)), transparent 66%), var(--bg, #0d0920); color: var(--okd-text); box-shadow: var(--shadow-card-hover, 0 24px 80px rgba(0,0,0,.5)); } /* [open] als Flex-Spalte: so erbt __inner eine ECHTE Höhenschranke (max-height des Dialogs) und scrollt bei Überlauf — Prozent-max-height gegen auto-Höhe wäre wirkungslos (Inhalt würde am Dialogrand abgeschnitten, auf Mobile unerreichbare CTAs). :not([open]) bleibt UA-display:none. */ .scl-okd-pathmodal[open] { display: flex; flex-direction: column; } .scl-okd-pathmodal::backdrop { background: rgba(13,9,32,.72); backdrop-filter: blur(5px); } .scl-okd-pathmodal__inner { padding: 22px max(18px, 2.6vw) 26px; overflow: auto; flex: 1 1 auto; min-height: 0; box-sizing: border-box; } .scl-okd-pathmodal__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 6px; } .scl-okd-pathmodal__title { margin: 0; font-size: 1.2rem; } .scl-okd-pathmodal__close { flex: 0 0 auto; inline-size: 38px; block-size: 38px; border-radius: 999px; cursor: pointer; display: grid; place-items: center; font-size: 1.3rem; line-height: 1; padding: 0; color: var(--okd-text); background: var(--surface-2, rgba(255,255,255,.06)); border: 1px solid var(--okd-border); } .scl-okd-pathmodal__close:hover { border-color: var(--okd-accent); } .scl-okd-pathmodal__close:focus-visible { outline: var(--scl-focus-ring-width, 3px) solid var(--scl-focus-ring-color, var(--okd-accent)); outline-offset: var(--scl-focus-ring-offset, 2px); } .scl-okd-pathmodal__note { color: var(--okd-muted); font-size: .9rem; line-height: 1.5; margin: 0 0 16px; max-width: 62ch; } .scl-okd-pathmodal__status { margin: 14px 2px 0; color: var(--okd-text); font-size: .9rem; } .scl-okd-pathmodal__status[hidden] { display: none; } /* ── Zwei gleichwertige, stark abgerundete Auswahlkarten ── */ .scl-okd-pathcards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; } .scl-okd-pathcard { display: flex; flex-direction: column; gap: 8px; min-width: 0; background: var(--card-bg, rgba(255,255,255,.05)); border: 1px solid var(--card-border, var(--okd-border)); border-radius: 28px; padding: 22px 22px 20px; } .scl-okd-pathcard.is-active { border-color: var(--success-border, var(--okd-border)); } .scl-okd-pathcard__badge { margin: 0 0 2px; min-block-size: 22px; } .scl-okd-pathcard__title { margin: 0; font-size: 1.18rem; font-weight: 900; color: var(--okd-text); } .scl-okd-pathcard__sub { margin: 0; color: var(--okd-muted); font-size: .88rem; font-weight: 700; } .scl-okd-pathcard__desc { margin: 4px 0 0; color: var(--okd-muted); font-size: .9rem; line-height: 1.5; } .scl-okd-pathcard__num { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 0; } .scl-okd-pathcard__num strong { font-size: 1.9rem; font-weight: 900; line-height: 1; background: var(--okd-neon); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; } .scl-okd-pathcard__num span { color: var(--okd-muted); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } .scl-okd-pathcard__same { display: inline-flex; align-items: center; gap: 7px; margin: 2px 0 0; color: var(--okd-text); font-size: .82rem; font-weight: 700; } .scl-okd-pathcard__same::before { content: "✓"; flex: 0 0 auto; inline-size: 18px; block-size: 18px; border-radius: 999px; display: grid; place-items: center; font-size: .66rem; font-weight: 900; border: 1px solid var(--success-border, var(--okd-border)); color: var(--success-text, var(--okd-text)); } .scl-okd-pathcard__hint { margin: 4px 0 0; color: var(--okd-muted); font-size: .8rem; line-height: 1.5; border-inline-start: 3px solid var(--okd-border); padding-inline-start: 10px; } .scl-okd-pathcard__act { margin-top: auto; padding-top: 14px; } .scl-okd-pathcard__cta { margin-top: 0; width: 100%; text-align: center; box-sizing: border-box; } .scl-okd-pathcard__cta.is-current { background: var(--surface-2, rgba(255,255,255,.06)); color: var(--okd-text); cursor: default; border: 1px solid var(--success-border, var(--okd-border)); } .scl-okd-pathcard__cta:focus-visible { outline: var(--scl-focus-ring-width, 3px) solid var(--scl-focus-ring-color, var(--okd-accent)); outline-offset: var(--scl-focus-ring-offset, 2px); } .scl-okd-pathcard__login { margin: 0; color: var(--okd-muted); font-size: .82rem; line-height: 1.5; } /* ── Öffnungsbewegung (nur bei erlaubter Motion) ── */ @media (prefers-reduced-motion: no-preference) { .scl-okd-pathmodal[open] { animation: scl-okd-pathmodal-in var(--motion-duration-base, 220ms) var(--motion-easing, ease) 1; } @keyframes scl-okd-pathmodal-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } } /* ── Responsive: Mobile stapelt Karten, Wechsler bricht sauber um ── */ @media (max-width: 720px) { .scl-okd-pathcards { grid-template-columns: 1fr; } .scl-okd-pathnow { align-items: stretch; flex-direction: column; gap: 12px; } .scl-okd-pathnow__stat { flex-direction: row; align-items: baseline; justify-content: center; gap: 8px; padding: 10px 14px; } .scl-okd-pathnow__btn { margin-inline-start: 0; width: 100%; text-align: center; box-sizing: border-box; } .scl-okd-pathmodal { width: calc(100vw - 16px); border-radius: 22px; } .scl-okd-pathmodal__inner { padding: 18px 16px 22px; } .scl-okd-pathcard { border-radius: 24px; padding: 18px 18px 16px; } } /* ── Reduced Motion: dieser Block wird statisch ── */ @media (prefers-reduced-motion: reduce) { .scl-okd-pathmodal[open] { animation: none !important; } } /* ═══════════════════════════════════════════════════════════════════════════ B-04 · Klassenprüfung EX-K-01 (FIXER2) — ADDITIVER Block am Dateiende. Nur zentrale Tokens + bestehende .scl-okd-Muster; keine neuen Farbwerte, keine Änderungen an bestehenden Regeln. Scope: .scl-okd-exam-* Klassen. ═══════════════════════════════════════════════════════════════════════════ */ .scl-okd-exam-msg { min-block-size: 1.3em; } .scl-okd-exam-form { display: flex; flex-direction: column; gap: 18px; margin-top: 14px; } .scl-okd-exam-form[hidden] { display: none; } .scl-okd-exam-field { display: flex; flex-direction: column; gap: 6px; } .scl-okd-exam-field > label, .scl-okd-exam-field__label { color: var(--okd-text); font-weight: 800; font-size: .95rem; } .scl-okd-exam-help { margin: 0; color: var(--okd-muted); font-size: .84rem; line-height: 1.5; max-width: 62ch; } .scl-okd-exam-field textarea { background: var(--surface-2, rgba(255,255,255,.05)); border: 1px solid var(--card-border, var(--okd-border)); border-radius: 14px; color: var(--okd-text); font: inherit; padding: 12px 14px; min-height: 92px; resize: vertical; box-sizing: border-box; width: 100%; } .scl-okd-exam-field textarea:focus-visible { outline: var(--scl-focus-ring-width, 3px) solid var(--scl-focus-ring-color, var(--okd-accent)); outline-offset: var(--scl-focus-ring-offset, 2px); } .scl-okd-exam-check { display: flex; align-items: flex-start; gap: 10px; color: var(--okd-text); font-size: .92rem; line-height: 1.5; } .scl-okd-exam-check input { margin-top: 3px; flex: 0 0 auto; accent-color: var(--okd-accent); } .scl-okd-exam-sim { border: 1px dashed var(--card-border, var(--okd-border)); border-radius: 14px; padding: 12px 14px; color: var(--okd-text); font-size: .92rem; line-height: 1.6; white-space: pre-wrap; } .scl-okd-exam-sim[hidden] { display: none; } .scl-okd-exam-result { margin-top: 14px; } .scl-okd-exam-result[hidden] { display: none; } .scl-okd-exam-dims { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; } .scl-okd-exam-dim { border: 1px solid var(--card-border, var(--okd-border)); border-radius: 14px; padding: 12px 14px; background: var(--card-bg, rgba(255,255,255,.04)); } .scl-okd-exam-dim__name { margin: 0; color: var(--okd-text); font-weight: 800; font-size: .95rem; } .scl-okd-exam-dim__next { margin: 4px 0 0; color: var(--okd-muted); font-size: .88rem; line-height: 1.5; } .scl-okd-exam-safety { margin: 12px 0 0; color: var(--danger-text, var(--okd-text)); font-weight: 700; font-size: .92rem; border-inline-start: 3px solid var(--danger-border, var(--okd-border)); padding-inline-start: 10px; } .scl-okd-exam-cred { margin: 14px 0 0; color: var(--okd-text); font-weight: 900; font-size: 1.05rem; } .scl-okd-exam-disc { margin: 6px 0 0; color: var(--okd-muted); font-size: .8rem; line-height: 1.5; max-width: 62ch; } .scl-okd-exam-attempts { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; } .scl-okd-exam-attempts li { color: var(--okd-muted); font-size: .86rem; } /* ============================================================================ RUNTIME-FIXER 1 (Welle 4) — rein additive Ergaenzungen. Keine bestehende Regel wird veraendert, keine neuen Farbtoken: alles sampelt die zentralen --okd-* / --card-* / --success-* / --warning-* Variablen dieser Datei. Zustaende tragen immer Text; Farbe ist nie der einzige Traeger. ========================================================================== */ /* S-04 · Sicherheits-/Datenhinweis-Zone (safety_guidance + privacy_guidance) */ .scl-okd-guide { display: grid; gap: 10px; } .scl-okd-guide__item { display: grid; gap: 6px; margin: 0; border: 1px solid var(--card-border, var(--okd-border)); border-radius: 16px; padding: 12px 14px; background: var(--card-bg, rgba(255,255,255,.04)); } .scl-okd-guide__label { justify-self: start; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--okd-text); border: 1px solid var(--card-border, var(--okd-border)); border-radius: 999px; padding: 3px 10px; } .scl-okd-guide__item--safety .scl-okd-guide__label { border-color: var(--warning-border, var(--okd-border)); color: var(--warning-text, var(--okd-text)); background: var(--warning-bg, transparent); } .scl-okd-guide__text { color: var(--okd-text); font-size: .93rem; line-height: 1.6; max-width: 68ch; } /* S-01 · Gestaffelte Hilfeleiter (Denkanstoß / Strategie / Auflösung) */ .scl-okd-ladder { display: grid; gap: 12px; margin: 6px 0 10px; } .scl-okd-ladder__stage { border: 1px solid var(--card-border, var(--okd-border)); border-radius: 18px; padding: 12px 14px; display: grid; gap: 8px; } .scl-okd-ladder__stage.is-locked { border-style: dashed; } .scl-okd-ladder__title { margin: 0; font-size: .95rem; font-weight: 900; color: var(--okd-text); } .scl-okd-ladder__hint { margin: 0; font-size: .84rem; line-height: 1.5; color: var(--okd-muted); } .scl-okd-ladder__state { margin: 0; } .scl-okd-ladder__stage.is-locked .scl-okd-ladder__state { color: var(--warning-text, var(--okd-muted)); font-weight: 700; } /* aria-disabled statt disabled: bedienbar + fokussierbar, nur sichtbar zurueckgenommen */ .scl-okd-optioncard[aria-disabled="true"] { opacity: .62; border-style: dashed; cursor: not-allowed; } .scl-okd-optioncard[aria-disabled="true"] .scl-okd-optioncard__mark::after { content: "🔒"; font-size: .7em; } /* A-03 · statement_set: angetippt ist NEUTRAL, nicht "richtig" */ .scl-okd-optioncard.is-read { border-color: var(--card-border, var(--okd-border)); } .scl-okd-optioncard.is-read .scl-okd-optioncard__mark::after { content: "•"; } .scl-okd-statement-state { display: block; margin: 4px 0 2px; font-style: italic; } /* S-08 · Ehrliches Diagnose-Ergebnis in der Abschlusszone */ .scl-okd-diagres { margin: 12px 0 0; border: 1px solid var(--card-border, var(--okd-border)); border-radius: 16px; padding: 12px 14px; background: var(--card-bg, rgba(255,255,255,.04)); } .scl-okd-diagres[hidden] { display: none; } .scl-okd-diagres__head { margin: 0; font-weight: 900; font-size: .98rem; color: var(--okd-text); } .scl-okd-diagres__text { margin: 6px 0 0; font-size: .9rem; line-height: 1.6; color: var(--okd-muted); max-width: 68ch; } /* ================================================================================================ * ÖFFENTLICHE LEHRPLANSEITE — /okidoki/lehrplan/ (W6, additiver Block, Namespace .scl-okd-lp-*) * ------------------------------------------------------------------------------------------------ * Additiv nach Gold-Variantenschicht-Regeln: KEINE neuen Custom-Properties, keine Rohfarben, keine * zweite Kartensprache — alle Werte stammen aus den bereits etablierten zentralen Tokens * (--okd-* / --card-* / --surface-* / --bg-*). Der Block ergänzt ausschließlich drei Dinge: * 1) eine NICHT-verlinkte Variante der Kurskarte (Lehrplan-Karten sind kein Link → kein Hover-Lift), * 2) eine mobil scrollbare Statustabelle (kein horizontales Body-Scrolling bei 320 px), * 3) Listen-/Typo-Feinschliff für redaktionellen Fließtext. * Status wird NIE nur über Farbe getragen: die Chips enthalten immer Text (+ Zeichen); "geplant" * trägt zusätzlich einen gestrichelten Rahmen (Struktur statt Farbe). * ============================================================================================== */ /* ── Nicht-verlinkte Kartenvariante (Kompetenzbereiche + Klassenkarten) ── */ .scl-okd-lp-card { cursor: default; padding-inline-start: 20px; } @media (hover: hover) and (pointer: fine) { .scl-okd-lp-card:hover { transform: none; border-color: var(--okd-border); } } /* ── Klassenkarten: mehr Textfläche als die Kurskacheln ── */ .scl-okd-lp-classgrid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .scl-okd-lp-classcard { gap: 6px; } .scl-okd-lp-classcard__kicker { margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--okd-muted); } .scl-okd-lp-classcard__title { margin: 0 0 2px; font-size: 1.02rem; line-height: 1.3; } .scl-okd-lp-classcard__text { margin: 0; color: var(--okd-muted); font-size: .88rem; line-height: 1.6; max-width: 62ch; } .scl-okd-lp-classcard__text strong { color: var(--okd-text); } .scl-okd-lp-classcard .scl-okd-chiprow { margin: 2px 0 4px; } .scl-okd-lp-classcard .scl-okd-actions { margin-top: 10px; } /* ── Stufen-Gruppierung: dezente Trennung ohne neue Farbwelt ── */ .scl-okd-lp-stage { border-top: 2px solid var(--card-border, var(--okd-border)); } .scl-okd-lp-stage .scl-okd-h2 { margin-bottom: 0; } /* ── Status-Chip "geplant": Struktur (gestrichelt) + Text, nicht Farbe ── */ .scl-okd-lp-chip--planned { border-style: dashed; white-space: normal; text-align: start; } /* ── Redaktionelle Listen ── */ .scl-okd-lp-list { margin: 4px 0 6px; padding-inline-start: 1.25em; display: grid; gap: 8px; color: var(--okd-muted); font-size: .92rem; line-height: 1.65; max-width: 72ch; } .scl-okd-lp-list strong { color: var(--okd-text); } /* ── Statustabellen: mobil eigenständig scrollbar ── */ .scl-okd-lp-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--okd-border); border-radius: 14px; } .scl-okd-lp-table table { width: 100%; border-collapse: collapse; min-width: 460px; } .scl-okd-lp-table th, .scl-okd-lp-table td { text-align: start; vertical-align: top; padding: 10px 14px; font-size: .88rem; line-height: 1.55; border-bottom: 1px solid var(--okd-border); color: var(--okd-muted); } .scl-okd-lp-table thead th { color: var(--okd-text); font-weight: 800; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; background: var(--surface-2, rgba(255,255,255,.05)); } .scl-okd-lp-table tbody th { color: var(--okd-text); font-weight: 800; } .scl-okd-lp-table tbody tr:last-child th, .scl-okd-lp-table tbody tr:last-child td { border-bottom: 0; } .scl-okd-lp-caption { caption-side: top; text-align: start; padding: 10px 14px 0; color: var(--okd-muted); font-size: .76rem; } .scl-okd-lp-tblnote { display: block; margin-top: 6px; color: var(--okd-muted); font-size: .84rem; } .scl-okd-lp-footnote { font-size: .84rem; margin-top: 12px; } @media (max-width: 640px) { .scl-okd-lp-classgrid { grid-template-columns: 1fr; } .scl-okd-lp-table table { min-width: 380px; } } /* ================================================================================================ * UX-BLOCKER-FIX (Welle 5b) — rein additiv. Keine bestehende Regel wird veraendert, keine neuen * Custom-Properties, keine Rohfarben: alles sampelt die zentralen --okd-* / --card-* / --warning-* * Tokens dieser Datei. Zustaende tragen immer Text; Farbe ist nie der einzige Traeger. * 1) C-01 Dauerzonen (Sicherheitshinweis + Hilfeleiter) als eingeklappte
-Zonen * 2) U-01 Ausgabezeile je Leiterstufe * 3) F-01 Erst-Versuch-Hinweis in den 12 Einstiegs-Checks * ============================================================================================== */ /* ── 1) Einklappbare Zonen (nativ: tastaturbedienbar, screenreader-korrekt, kein ARIA-Nachbau) ── */ .scl-okd-disclosure { display: block; } .scl-okd-guide.scl-okd-disclosure { gap: 0; } .scl-okd-disclosure > .scl-okd-disclosure__sum { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 10px; border: 1px solid var(--card-border, var(--okd-border)); border-radius: 16px; padding: 10px 14px; background: var(--card-bg, rgba(255,255,255,.04)); } .scl-okd-disclosure > .scl-okd-disclosure__sum::-webkit-details-marker { display: none; } .scl-okd-disclosure > .scl-okd-disclosure__sum::before { content: "▸"; flex: 0 0 auto; color: var(--okd-muted); font-size: .9em; line-height: 1.4; } .scl-okd-disclosure[open] > .scl-okd-disclosure__sum::before { content: "▾"; } .scl-okd-disclosure > .scl-okd-disclosure__sum:focus-visible { outline: 2px solid var(--okd-text); outline-offset: 2px; } .scl-okd-disclosure > .scl-okd-disclosure__sum .scl-okd-h3 { margin: 0; } .scl-okd-disclosure__meta { font-weight: 600; font-size: .84rem; color: var(--okd-muted); } .scl-okd-disclosure__body { display: grid; gap: 10px; padding: 12px 2px 2px; } /* ── 2) U-01 · Ausgabezeile der jeweiligen Leiterstufe ── */ .scl-okd-ladder__out { margin: 8px 0 0; border: 1px solid var(--card-border, var(--okd-border)); border-radius: 14px; padding: 10px 12px; background: var(--card-bg, rgba(255,255,255,.04)); color: var(--okd-text); font-size: .92rem; line-height: 1.6; max-width: 68ch; } .scl-okd-ladder__out[hidden] { display: none; } /* ── 3) F-01 · Erst-Versuch-Regel in den Einstiegs-Checks (Text, nicht Farbe) ── */ .scl-okd-firsttry { display: grid; gap: 6px; margin: 0 0 14px; border: 1px solid var(--warning-border, var(--card-border, var(--okd-border))); border-radius: 16px; padding: 12px 14px; background: var(--card-bg, rgba(255,255,255,.04)); } .scl-okd-firsttry__label { justify-self: start; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--warning-text, var(--okd-text)); background: var(--warning-bg, transparent); border: 1px solid var(--warning-border, var(--okd-border)); border-radius: 999px; padding: 3px 10px; } .scl-okd-firsttry__text { color: var(--okd-text); font-size: .93rem; line-height: 1.6; max-width: 68ch; } /* ------------------------------------------------------------------ * * WELLE 2 / AGENT 2b — Gast-/Vorschau-Hinweis (additiv, keine Ueberschreibung) * Ohne Konto gibt es keine Serverbewertung und keinen gespeicherten Fortschritt. Der Hinweis * sagt genau das — ruhig, in Kartensprache, ohne Alarmton (kein Fehlerrot, kein role=alert). * ------------------------------------------------------------------ */ .scl-okd-guestnote { margin: 0 0 12px; padding: 10px 14px; border: 1px dashed var(--card-border, var(--okd-border)); border-inline-start: 3px solid var(--okd-accent); border-radius: 14px; background: var(--card-bg, rgba(255,255,255,.04)); color: var(--okd-text); font-size: .9rem; line-height: 1.6; max-width: 68ch; }