/* Schriften für spezielle Themes: Retro (Terminal), Star Wars (Orbitron), Pixel (Press Start 2P + Pixelify Sans). */ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Share+Tech+Mono&family=VT323&family=Press+Start+2P&family=Pixelify+Sans:wght@400;600;700&display=swap'); /* --------------------------------------------------------------------------- Design-Varianten (Themes). Aktives Theme wird über data-theme am -Element gesetzt (siehe app.js). :root enthält das Standard-Theme "Sokrates" als Fallback. Die Schrift wird über --font-base / --font-display pro Theme gesteuert. --------------------------------------------------------------------------- */ /* Sokrates: DEAKTIVIERT (nicht mehr im Design-Menü, siehe DISABLED_THEMES in app.js). Bleibt zusätzlich der Fallback für :root, falls gar kein data-theme gesetzt ist. */ :root, :root[data-theme="sokrates"] { --bg: #faf9f7; --panel: #ffffff; --border: #e5e1da; --text: #2b2820; --muted: #756f62; --accent: #b5651d; --accent-soft: #f1e4d3; --student-bubble: #e8eef7; --correct: #2e7d32; --wrong: #b3261e; --on-accent: #ffffff; --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; } :root[data-theme="ocean"] { --bg: #f4f7fb; --panel: #ffffff; --border: #d8e2ee; --text: #1f2933; --muted: #5f6f7e; --accent: #2563a6; --accent-soft: #dce9fb; --student-bubble: #e6edf4; --correct: #1f7a4d; --wrong: #c0392b; } /* Wald: DEAKTIVIERT (nicht mehr im Design-Menü, siehe DISABLED_THEMES in app.js). */ :root[data-theme="forest"] { --bg: #f6f9f4; --panel: #ffffff; --border: #dce7d6; --text: #232a22; --muted: #64735f; --accent: #2f7d4f; --accent-soft: #dcecdf; --student-bubble: #e9eff2; --correct: #2e7d32; --wrong: #b3261e; } :root[data-theme="night"] { --bg: #1b1e24; --panel: #242832; --border: #363c48; --text: #e6e8ec; --muted: #9aa3af; --accent: #d99a4e; --accent-soft: #33302a; --student-bubble: #2d3644; --correct: #6cc070; --wrong: #e2726a; } /* Dark, cool & retro: dunkles Indigo, Neon-Cyan-Akzent, Terminal-Schrift. */ :root[data-theme="retro"] { --bg: #0e0b1a; --panel: #15122a; --border: #322a55; --text: #d8d2ff; --muted: #8b83bf; --accent: #22d3ee; --accent-soft: #16283a; --student-bubble: #241f42; --correct: #4ade80; --wrong: #fb7185; --on-accent: #06121a; --font-base: 'Share Tech Mono', 'Courier New', monospace; --font-display: 'VT323', 'Share Tech Mono', monospace; } /* Party: Bonbon-Farben + Comic Sans – bringt die Studis zum Schmunzeln. */ :root[data-theme="party"] { --bg: #fff5fb; --panel: #ffffff; --border: #ffd0e8; --text: #4a2540; --muted: #a76d92; --accent: #ff4da6; --accent-soft: #ffe0f0; --student-bubble: #e3f0ff; --correct: #12b886; --wrong: #fa5252; --on-accent: #ffffff; --font-base: 'Comic Sans MS', 'Comic Sans', 'Chalkboard SE', 'Segoe Print', cursive; --font-display: 'Comic Sans MS', 'Comic Sans', 'Chalkboard SE', 'Segoe Print', cursive; } /* Party-Feinschliff: schief gestellter Titel, knallige Pillen-Buttons. */ :root[data-theme="party"] .brand h1 { transform: rotate(-3deg); color: var(--accent); } :root[data-theme="party"] button { border-radius: 999px; } :root[data-theme="party"] .exercise-item.active { border-style: dashed; } /* Star Wars: tiefes Weltraum-Schwarz + ikonisches Star-Wars-Gelb, Orbitron-Schrift. */ :root[data-theme="starwars"] { --bg: #05070d; --panel: #0f131c; --border: #2a3040; --text: #e8e6d9; --muted: #8a8f9c; --accent: #ffe81f; --accent-soft: #2a2712; --student-bubble: #1a2030; --correct: #63d471; --wrong: #ff5c5c; --on-accent: #05070d; --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-display: 'Orbitron', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* Star-Wars-Feinschliff: leuchtendes Gelb im Logo-Stil. */ :root[data-theme="starwars"] .task-card-label, :root[data-theme="starwars"] .chapter-header { font-family: var(--font-display); } :root[data-theme="starwars"] .brand h1 { color: var(--accent); letter-spacing: 0.08em; text-shadow: 0 0 12px rgba(255, 232, 31, 0.5); } :root[data-theme="starwars"] button { box-shadow: 0 0 10px rgba(255, 232, 31, 0.3); } :root[data-theme="starwars"] .exercise-item.active { box-shadow: 0 0 8px rgba(255, 232, 31, 0.3); } /* Dracula: das beliebte Dev-Theme – dunkles Blaugrau, Lila-Akzent, Pink-Detail. */ :root[data-theme="dracula"] { --bg: #282a36; --panel: #343746; --border: #44475a; --text: #f8f8f2; --muted: #7d8ac0; --accent: #bd93f9; --accent-soft: #38344f; --student-bubble: #3b3e52; --correct: #50fa7b; --wrong: #ff5555; --on-accent: #282a36; } /* Dracula-Feinschliff: pinker Logo-Titel (die zweite Signaturfarbe), dezentes Lila-Leuchten. */ :root[data-theme="dracula"] .brand h1 { color: #ff79c6; } :root[data-theme="dracula"] .exercise-item.active { box-shadow: 0 0 8px rgba(189, 147, 249, 0.35); } /* Nord: ruhiges, arktisches Blaugrau mit Frost-Cyan-Akzent – dezent und augenschonend. */ :root[data-theme="nord"] { --bg: #2e3440; --panel: #3b4252; --border: #434c5e; --text: #eceff4; --muted: #9aa5bd; --accent: #88c0d0; --accent-soft: #3a4457; --student-bubble: #434c5e; --correct: #a3be8c; --wrong: #bf616a; --on-accent: #2e3440; } /* Solarized Light: warmes Creme-Beige, wissenschaftlich abgestimmter Kontrast, Blau-Akzent. DEAKTIVIERT: steht nicht mehr im Design-Menü (siehe DISABLED_THEMES in app.js), die Definition bleibt aber erhalten, falls das Theme zurückkommen soll. */ :root[data-theme="solarized"] { --bg: #fdf6e3; --panel: #fffdf5; --border: #e3dcc6; --text: #586e75; --muted: #7d8f8f; --accent: #268bd2; --accent-soft: #e8eef2; --student-bubble: #eee8d5; --correct: #859900; --wrong: #dc322f; --on-accent: #ffffff; } /* Party Aqua: die Party-Idee (Comic Sans, runde Pillen-Buttons, schiefer Titel) in Türkis statt Pink – Poolparty-Stimmung mit Mint-Hintergrund und Limetten-Detail. */ :root[data-theme="partyaqua"] { --bg: #f0fdfa; --panel: #ffffff; --border: #b9ece4; --text: #14413c; --muted: #5d8f88; --accent: #00b8a9; --accent-soft: #ccf5f0; --student-bubble: #e6f7d9; --correct: #3fa34d; --wrong: #f4623a; --on-accent: #ffffff; --font-base: 'Comic Sans MS', 'Comic Sans', 'Chalkboard SE', 'Segoe Print', cursive; --font-display: 'Comic Sans MS', 'Comic Sans', 'Chalkboard SE', 'Segoe Print', cursive; } /* Gleicher Feinschliff wie beim pinken Party-Theme. */ :root[data-theme="partyaqua"] .brand h1 { transform: rotate(-3deg); color: var(--accent); } :root[data-theme="partyaqua"] button { border-radius: 999px; } :root[data-theme="partyaqua"] .exercise-item.active { border-style: dashed; } /* HS PF: Corporate Design der Hochschule Pforzheim – viel Weiß, schwarze Schrift, das gelbe Signal-Gelb als einzige Akzentfarbe und kantige, rechtwinklige Flächen. */ :root[data-theme="hspf"] { --bg: #f4f4f2; --panel: #ffffff; --border: #d7d7d2; --text: #1a1a1a; --muted: #6b6b64; --accent: #f5b400; --accent-soft: #fdf0c8; --student-bubble: #ebebe7; --correct: #2e7d32; --wrong: #c62828; /* Auf dem Gelb steht auf hs-pforzheim.de immer Schwarz – Weiß wäre zu kontrastarm. */ --on-accent: #1a1a1a; --font-base: "Helvetica Neue", Helvetica, Arial, sans-serif; --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif; } /* HS-PF-Feinschliff: keine runden Ecken, dafür der typische gelbe Balken am Titel. */ :root[data-theme="hspf"] button, :root[data-theme="hspf"] .table-card, :root[data-theme="hspf"] .exercise-item, :root[data-theme="hspf"] #chat-input { border-radius: 0; } :root[data-theme="hspf"] .brand h1 { letter-spacing: 0.02em; border-left: 6px solid var(--accent); padding-left: 8px; } :root[data-theme="hspf"] .chapter-header { letter-spacing: 0.06em; text-transform: uppercase; } :root[data-theme="hspf"] .exercise-item.active { border-left: 4px solid var(--accent); } /* Pixel: 8-Bit-Jump'n'Run-Look – Himmelblau mit Gras- und Ziegelboden unten, cremefarbene Panels mit dicken dunklen Rändern, harte Pixel-Schatten statt weicher, keine runden Ecken. Buttons sehen aus wie gelbe Fragezeichen-Blöcke, Überschriften in der 8-Bit-Schrift "Press Start 2P", Fließtext in der besser lesbaren "Pixelify Sans". Passt zum Datenbank-Beispiel "Super Mario", funktioniert aber mit jedem Beispiel. */ :root[data-theme="pixel"] { --bg: #dcecff; --panel: #fffbea; --border: #2b1d0e; --text: #1f160b; --muted: #6e5a42; --accent: #d62418; --accent-soft: #ffe9a3; --student-bubble: #cfe8ff; --correct: #1f8a3b; --wrong: #d62418; --on-accent: #ffffff; --font-base: 'Pixelify Sans', 'Courier New', monospace; --font-display: 'Press Start 2P', 'Courier New', monospace; /* nur in diesem Theme genutzt */ --pixel-sky: #5c94fc; --pixel-coin: #fbd000; --pixel-coin-dark: #c98a00; --pixel-shadow: 3px 3px 0 var(--border); } /* Himmel mit Gras + Ziegelboden am unteren Rand (sichtbar hinter dem Chat). */ :root[data-theme="pixel"] body { background-color: var(--pixel-sky); background-image: linear-gradient(#43b047 0 6px, transparent 6px), repeating-linear-gradient(90deg, #c4611c 0 22px, var(--border) 22px 24px); background-size: 100% 16px, 100% 16px; background-position: left bottom, left bottom; background-repeat: no-repeat; background-attachment: fixed; } /* Keine runden Ecken – Pixel sind eckig. */ :root[data-theme="pixel"] :is(button, select, input, textarea, .table-card, .hint-card, .exercise-item, .task-card, .task-scenario, .chat-msg, .tour-bubble, .tour-spotlight, .nav-toggle span) { border-radius: 0; } /* Dicke, dunkle Ränder wie Sprite-Umrisse. */ :root[data-theme="pixel"] .sidebar { border-right: 4px solid var(--border); } :root[data-theme="pixel"] .splitter { border-bottom: 4px solid var(--border); } :root[data-theme="pixel"] :is(.table-card, #sql-input, #chat-input, select) { border: 3px solid var(--border); } :root[data-theme="pixel"] :is(.hint-card, .task-card, .task-scenario:not(:empty)) { border: 3px solid var(--border); border-left: 6px solid var(--accent); } :root[data-theme="pixel"] table.result-table :is(th, td) { border: 2px solid var(--border); } :root[data-theme="pixel"] #sql-input:focus, :root[data-theme="pixel"] #chat-input:focus { outline: 3px solid var(--pixel-coin); outline-offset: 0; } /* Schriften: 8-Bit-Schrift ist sehr breit, daher kleiner setzen. */ :root[data-theme="pixel"] .brand h1 { font-size: 0.8rem; color: var(--accent); text-shadow: 2px 2px 0 var(--border); } :root[data-theme="pixel"] .task-panel h2 { font-size: 0.95rem; line-height: 1.6; } :root[data-theme="pixel"] :is(.chapter-header, .task-card-label) { font-family: var(--font-display); font-size: 0.55rem; line-height: 1.6; } :root[data-theme="pixel"] .tour-bubble h3 { font-size: 0.8rem; line-height: 1.5; } /* Aufgabenliste: aktive Aufgabe als hervorgehobener Block mit Pixel-Schatten. */ :root[data-theme="pixel"] .exercise-item { border-width: 2px; } :root[data-theme="pixel"] .exercise-item.active { border-color: var(--border); box-shadow: var(--pixel-shadow); } /* Buttons als gelbe Fragezeichen-Blöcke: Lichtkante oben links, Schattenkante unten rechts, beim Klicken "drückt" sich der Block hinein. Die dezenten Hilfs-Buttons (Burger, Rundgang, Zurück, Schließen) behalten ihren schlichten Stil. */ :root[data-theme="pixel"] button:not(.nav-toggle):not(.tour-btn):not(.tour-back):not(.tour-close) { background: var(--pixel-coin); color: var(--text); border: 3px solid var(--border); box-shadow: inset -3px -3px 0 var(--pixel-coin-dark), inset 3px 3px 0 #fff3a8, var(--pixel-shadow); font-family: var(--font-display); font-size: 0.6rem; line-height: 1.4; padding: 10px 12px; } :root[data-theme="pixel"] button:not(.nav-toggle):not(.tour-btn):not(.tour-back):not(.tour-close):hover { opacity: 1; filter: brightness(1.07); } :root[data-theme="pixel"] button:not(.nav-toggle):not(.tour-btn):not(.tour-back):not(.tour-close):active { transform: translate(2px, 2px); box-shadow: inset -3px -3px 0 var(--pixel-coin-dark), inset 3px 3px 0 #fff3a8, 1px 1px 0 var(--border); } :root[data-theme="pixel"] :is(.nav-toggle, .tour-btn, .tour-back) { border: 2px solid var(--border); border-radius: 0; } /* Ein paar eckige Pixel-Wolken am Himmel hinter dem Chat (reines SVG, keine Bilddatei). */ :root[data-theme="pixel"] .chat-panel { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='170' shape-rendering='crispEdges' fill='white'%3E%3Crect x='72' y='24' width='36' height='12'/%3E%3Crect x='60' y='36' width='72' height='12'/%3E%3Crect x='48' y='48' width='96' height='18'/%3E%3Crect x='354' y='92' width='24' height='10'/%3E%3Crect x='342' y='102' width='54' height='10'/%3E%3Crect x='332' y='112' width='78' height='14'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-position: 0 0; } /* Chat: Sprechblasen als Pixel-Kästen; Systemhinweise stehen direkt auf dem Himmel. */ :root[data-theme="pixel"] .chat-msg { border: 3px solid var(--border); box-shadow: 4px 4px 0 rgba(43, 29, 14, 0.35); } :root[data-theme="pixel"] .chat-msg.system { border: none; box-shadow: none; color: #ffffff; text-shadow: 2px 2px 0 var(--border); } :root[data-theme="pixel"] .tour-bubble { border: 3px solid var(--border); box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.45); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-base); } /* Form-Elemente folgen dem Theme-Font (erben es sonst nicht automatisch). */ button, select, input, textarea { font-family: inherit; } /* Überschriften nutzen die Display-Schrift (im Retro-Theme die Pixel-Font). */ .brand h1, .task-panel h2 { font-family: var(--font-display); } /* Retro-Feinschliff: größere Display-Schrift + dezentes Neon-Leuchten. */ :root[data-theme="retro"] .brand h1 { font-size: 1.8rem; text-shadow: 0 0 10px rgba(34, 211, 238, 0.55); } :root[data-theme="retro"] .task-panel h2 { font-size: 1.55rem; } :root[data-theme="retro"] .task-card-label, :root[data-theme="retro"] .chapter-header { text-shadow: 0 0 8px rgba(34, 211, 238, 0.3); } :root[data-theme="retro"] button { box-shadow: 0 0 10px rgba(34, 211, 238, 0.35); } :root[data-theme="retro"] .exercise-item.active { box-shadow: 0 0 8px rgba(34, 211, 238, 0.4); } /* Die App ist auf 1900 px begrenzt und wird zentriert - auf den sehr breiten Labor-Bildschirmen läuft der Tutor sonst bis in die äußersten Ecken auseinander. Auf schmaleren Bildschirmen ändert sich dadurch nichts. */ .app { display: grid; grid-template-columns: 280px 1fr; height: 100vh; max-width: 1900px; margin: 0 auto; transition: grid-template-columns 0.18s ease; } /* Nur wenn tatsächlich Platz daneben bleibt: seitliche Kanten, damit die App sich sichtbar vom Hintergrund abhebt. */ @media (min-width: 1901px) { .app { border-left: 1px solid var(--border); border-right: 1px solid var(--border); } } .sidebar { background: var(--panel); border-right: 1px solid var(--border); padding: 18px 18px 14px; display: flex; flex-direction: column; height: 100vh; overflow: hidden; } .brand { display: flex; align-items: center; gap: 10px; } .brand h1 { font-size: 1.2rem; margin: 0; white-space: nowrap; } /* Burger-Button: klappt die Navigation auf eine schmale Leiste ein. Er bleibt dabei an derselben Stelle stehen (Leiste statt Breite 0), damit er nicht über dem Inhalt schwebt und immer da ist, wo man ihn zuletzt gedrückt hat. */ .nav-toggle { flex: none; width: 34px; height: 34px; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: transparent; color: var(--text); border: 1px solid var(--border); border-radius: 8px; } .nav-toggle span { display: block; width: 16px; height: 2px; border-radius: 2px; background: currentColor; } .nav-toggle:hover { background: var(--accent-soft); color: var(--accent); opacity: 1; } .nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Eingeklappt: nur noch die schmale Leiste mit dem Burger-Button. */ .app.nav-collapsed { grid-template-columns: 48px 1fr; } .app.nav-collapsed .sidebar { padding: 18px 6px 14px; } .app.nav-collapsed .brand h1, .app.nav-collapsed .dataset-switch, .app.nav-collapsed .exercise-list, .app.nav-collapsed .sidebar-footer { display: none; } .dataset-switch { margin: 14px 0 8px; } .dataset-switch label, .sidebar-footer label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 4px; } .dataset-switch select, .sidebar-footer select { width: 100%; padding: 7px; border-radius: 6px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: 0.85rem; cursor: pointer; } .exercise-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin-top: 6px; } .chapter-header { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--accent); margin: 16px 0 4px; padding: 0 10px; } .chapter-header:first-child { margin-top: 4px; } .exercise-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 0.85rem; border: 1px solid transparent; } .exercise-item:hover { background: var(--accent-soft); } .exercise-item.active { background: var(--accent-soft); border-color: var(--accent); font-weight: 600; } .exercise-item .ex-num { color: var(--muted); font-size: 0.75rem; min-width: 1.4em; text-align: right; } .exercise-item .ex-title { flex: 1; } .exercise-item .ex-check { color: var(--correct); font-weight: 700; font-size: 0.95rem; } .sidebar-footer { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); } .credit { margin: 10px 0 0; font-size: 0.72rem; color: var(--muted); text-align: center; } .credit .heart { color: #e0245e; } .credit a { color: var(--accent); text-decoration: none; font-weight: 600; } .credit a:hover { text-decoration: underline; } button { background: var(--accent); color: var(--on-accent); border: none; padding: 8px 12px; border-radius: 8px; cursor: pointer; font-size: 0.85rem; } button:hover { opacity: 0.9; } button:disabled { opacity: 0.5; cursor: not-allowed; } /* Aufgabenbereich, Zieh-Leiste, Chat. Der Chat nimmt als 1fr-Zeile immer den Rest ein - die Aufteilung steuert damit allein die Höhe des Aufgabenbereichs. */ .main { display: grid; grid-template-rows: auto auto 1fr; height: 100vh; overflow: hidden; } /* Startaufteilung: Der Aufgabenbereich wächst mit dem Inhalt bis 72vh, der Chat bekommt als 1fr-Zeile den Rest (also mindestens ~28vh). Sobald an der Zieh-Leiste gezogen wurde, setzt app.js hier eine feste height (und max-height: none) - ab dann bestimmt die gemerkte Höhe die Aufteilung. */ .task-panel { padding: 20px 24px; background: var(--panel); max-height: 72vh; overflow-y: auto; } /* Zieh-Leiste zwischen Aufgabenbereich und Chat. Der Griff in der Mitte macht sichtbar, dass sich hier etwas ziehen lässt. */ .splitter { position: relative; height: 10px; background: var(--panel); border-bottom: 1px solid var(--border); cursor: row-resize; touch-action: none; } .splitter::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 46px; height: 3px; border-radius: 2px; background: var(--border); } .splitter:hover::after, .splitter:focus-visible::after, .splitter.dragging::after { background: var(--accent); } .splitter:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* Während des Ziehens: kein versehentliches Markieren von Text. */ body.resizing { cursor: row-resize; -webkit-user-select: none; user-select: none; } /* Aufgaben-Karte: der eigentliche Arbeitsauftrag. Akzentleiste links + eigener Rahmen machen ihn auf einen Blick als Aufgabe erkennbar; Tabellen und Hinweis darunter sind als Hilfsmittel bewusst zurückhaltender gestaltet. Der Szenario-Kasten (nur 1. Aufgabe, steht darüber) nutzt exakt dieselben Styles - unterschieden wird nur über das Label/Icon. */ .task-card, .task-scenario:not(:empty) { border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 10px; background: var(--bg); padding: 14px 16px; margin: 0 0 14px; } .task-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; } .task-card-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--accent); } /* Kapitel-/Modus-Angabe: sekundärer Kontext, daher gedämpft neben dem Label. */ .task-kicker { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--muted); } .task-panel h2 { margin: 0 0 8px; font-size: 1.35rem; line-height: 1.3; } /* Keine max-width: der Text nutzt die volle Kartenbreite, genau wie der Syntax-Hinweis darunter. Sonst wirkt die Karte auf breiten Bildschirmen halb leer. */ .task-prompt { color: var(--text); margin: 0; font-size: 1.02rem; line-height: 1.6; } /* Breadcrumb: zeigt im Hauptfenster, wo man gerade steckt (Beispiel > Kapitel > Aufgabe). Rein informativ, nicht anklickbar - daher dezent gehalten. */ .task-breadcrumb { font-size: 0.78rem; color: var(--muted); } .task-breadcrumb:not(:empty) { margin: 0 0 10px; } .task-breadcrumb .crumb-db { font-weight: 700; color: var(--text); } .task-breadcrumb .crumb-sep { margin: 0 6px; opacity: 0.6; } .task-tables { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; } .tables-heading { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 2px; } .table-card { border: 1px solid var(--border); border-radius: 8px; background: var(--bg); overflow: hidden; } .table-card > summary { cursor: pointer; padding: 7px 10px; font-size: 0.82rem; list-style: none; } .table-card > summary::-webkit-details-marker { display: none; } .table-card > summary::before { content: '▸'; color: var(--muted); margin-right: 6px; font-size: 0.7rem; } .table-card[open] > summary::before { content: '▾'; } .table-card > summary:hover { background: var(--accent-soft); } .table-name { font-weight: 600; } .table-cols { color: var(--muted); font-family: "SF Mono", Menlo, monospace; font-size: 0.78rem; } .table-card-body { max-height: 200px; overflow: auto; padding: 0 10px 10px; } /* Primärschlüsselspalten werden wie in der Vorlesungsnotation unterstrichen. */ .pk-col { text-decoration: underline; text-underline-offset: 2px; } .tables-legend { text-transform: none; letter-spacing: 0; opacity: 0.8; } .null-cell { color: var(--muted); font-style: italic; } /* Aufklappbarer Syntax-Hinweis pro Aufgabe (erklärt das SQL-Element, keine Lösung). */ .task-hint { margin: 0 0 14px; } .hint-card { border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; background: var(--bg); overflow: hidden; } .hint-card > summary { cursor: pointer; padding: 7px 10px; font-size: 0.82rem; font-weight: 600; color: var(--accent); list-style: none; } .hint-card > summary::-webkit-details-marker { display: none; } .hint-card > summary::after { content: '▸'; color: var(--muted); margin-left: 6px; font-size: 0.7rem; font-weight: 400; } .hint-card[open] > summary::after { content: '▾'; } .hint-card > summary:hover { background: var(--accent-soft); } .hint-icon { margin-right: 4px; } .hint-card-body { padding: 4px 12px 12px; font-size: 0.85rem; line-height: 1.5; color: var(--text); white-space: pre-wrap; } #sql-input { width: 100%; min-height: 90px; font-family: "SF Mono", Menlo, monospace; font-size: 0.85rem; padding: 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel); color: var(--text); resize: vertical; } .actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; } .attempt-info { font-size: 0.8rem; color: var(--muted); } #result-table-wrap { margin-top: 14px; max-height: 160px; overflow: auto; } table.result-table { border-collapse: collapse; font-size: 0.8rem; width: 100%; } table.result-table th, table.result-table td { border: 1px solid var(--border); padding: 4px 8px; text-align: left; } table.result-table th { background: var(--accent-soft); } .result-status { font-weight: 600; margin-top: 8px; } .result-status.correct { color: var(--correct); } .result-status.wrong { color: var(--wrong); } .chat-panel { display: grid; grid-template-rows: 1fr auto; overflow: hidden; min-height: 0; padding: 16px 24px; } .chat-feed { overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-bottom: 10px; } .chat-msg { max-width: 80%; padding: 10px 14px; border-radius: 12px; font-size: 0.88rem; line-height: 1.4; white-space: pre-wrap; } .chat-msg.tutor { background: var(--accent-soft); align-self: flex-start; } .chat-msg.student { background: var(--student-bubble); align-self: flex-end; } .chat-msg.system { background: transparent; color: var(--muted); font-size: 0.78rem; align-self: center; } .chat-msg.typing { color: var(--muted); font-style: italic; opacity: 0.8; } .chat-input-row { display: flex; gap: 8px; } #chat-input { flex: 1; padding: 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel); color: var(--text); } /* --------------------------------------------------------------------------- Erst-Rundgang (Onboarding-Tour, siehe app.js). Alle Farben kommen aus den Theme-Variablen, damit die Sprechblase in jedem Design lesbar bleibt - auch in den dunklen (Nacht, Retro, Star Wars, Dracula). --------------------------------------------------------------------------- */ /* Der Rundgang-Button in der Seitenleiste soll die Aufmerksamkeit nicht vom „Ausführen"-Button abziehen: dezent, nur mit Rahmen. */ .tour-btn { width: 100%; margin-top: 10px; background: transparent; color: var(--muted); border: 1px solid var(--border); font-size: 0.78rem; } .tour-btn:hover { background: var(--accent-soft); color: var(--accent); opacity: 1; } /* Sichtbar sind Overlay, Lichtkegel und Sprechblase ausschließlich, solange die Tour läuft (app.js setzt dafür die Klasse tour-open am und nimmt sie beim Beenden wieder weg). Ohne diese Regel bliebe nach „Fertig" bzw. ✕ alles stehen - und das Overlay würde weiter jeden Klick abfangen. */ .tour-overlay, .tour-spotlight, .tour-bubble { display: none; } body.tour-open .tour-overlay, body.tour-open .tour-bubble { display: block; } /* :not([hidden]) ist nötig, damit der Lichtkegel bei den Schritten ohne Ziel (Begrüßung, Abschluss) wirklich verschwindet - sonst gewänne diese Regel gegen .tour-spotlight[hidden] weiter unten. */ body.tour-open .tour-spotlight:not([hidden]) { display: block; } /* Fängt Klicks ab, solange die Tour läuft - die Oberfläche soll sich während der Erklärung nicht unter dem Lichtkegel wegbewegen. Die Abdunklung selbst macht normalerweise der Lichtkegel; nur bei Schritten ohne Ziel (Anfang und Schluss) übernimmt sie das Overlay per .dim. */ .tour-overlay { position: fixed; inset: 0; z-index: 900; background: transparent; } .tour-overlay.dim { background: rgba(0, 0, 0, 0.55); } /* Der „Lichtkegel": ein Rahmen um das erklärte Element. Der riesige Schlagschatten dunkelt alles außerhalb ab - das klappt anders als eine Maske auch dann, wenn das Element in einem overflow-Container steckt. */ .tour-spotlight { position: fixed; z-index: 901; pointer-events: none; border-radius: 10px; border: 2px solid var(--accent); box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55); transition: all 0.2s ease; } .tour-spotlight[hidden] { display: none; } .tour-bubble { position: fixed; z-index: 902; width: 340px; max-width: calc(100vw - 24px); padding: 14px 16px 12px; border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 10px; background: var(--panel); color: var(--text); font-family: var(--font-base); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28); } /* Schritte ohne Ziel (Begrüßung, Abschluss) stehen mittig im Fenster. */ .tour-bubble.centered { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 420px; } .tour-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .tour-count { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--accent); } .tour-bubble h3 { margin: 0 0 6px; font-size: 1.05rem; font-family: var(--font-display); } .tour-text { margin: 0 0 12px; font-size: 0.86rem; line-height: 1.5; color: var(--text); } .tour-actions { display: flex; justify-content: flex-end; gap: 8px; } .tour-back { background: transparent; color: var(--muted); border: 1px solid var(--border); } .tour-back:hover { background: var(--accent-soft); color: var(--accent); opacity: 1; } .tour-back[hidden] { display: none; } .tour-close { background: transparent; color: var(--muted); border: none; padding: 2px 4px; font-size: 0.9rem; line-height: 1; } .tour-close:hover { color: var(--accent); opacity: 1; } .tour-bubble button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Pfeil zum erklärten Element: gedrehtes Quadrat, das die zwei sichtbaren Kanten der Sprechblase aufnimmt. */ .tour-arrow { position: absolute; width: 12px; height: 12px; background: var(--panel); border: 1px solid var(--border); transform: rotate(45deg); } .tour-arrow[hidden] { display: none; } .tour-arrow.arrow-bottom { top: -7px; margin-left: -6px; border-right: none; border-bottom: none; } .tour-arrow.arrow-top { bottom: -7px; margin-left: -6px; border-left: none; border-top: none; } .tour-arrow.arrow-right { left: -7px; margin-top: -6px; border-right: none; border-top: none; } .tour-arrow.arrow-left { right: -7px; margin-top: -6px; border-left: none; border-bottom: none; } /* Ruhigere Darstellung, wenn im Betriebssystem weniger Bewegung gewünscht ist. */ @media (prefers-reduced-motion: reduce) { .tour-spotlight { transition: none; } } /* --------------------------------------------------------------------------- Anmeldung: Vollbild über der App, bis jemand angemeldet ist. Nutzt die Theme-Variablen, sieht also in jedem Design passend aus. --------------------------------------------------------------------------- */ .auth-screen { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--bg); overflow-y: auto; } .auth-screen[hidden], .auth-card[hidden], .auth-card [hidden] { display: none; } .auth-card { width: 100%; max-width: 400px; background: var(--panel); border: 1px solid var(--border); border-top: 4px solid var(--accent); border-radius: 10px; padding: 24px 24px 18px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); display: flex; flex-direction: column; } .auth-card h1 { margin: 0 0 6px; font-size: 1.35rem; font-family: var(--font-display); } .auth-intro { margin: 0 0 16px; font-size: 0.88rem; color: var(--muted); line-height: 1.45; } .auth-card label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 4px; } .auth-card input[type="email"], .auth-card input[type="password"] { padding: 10px; margin-bottom: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font-size: 0.95rem; } .auth-card input:focus { outline: 2px solid var(--accent); outline-offset: 0; } .auth-card label.auth-check { display: flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-size: 0.85rem; color: var(--text); margin: 0 0 12px; cursor: pointer; } .auth-note { color: var(--muted); font-size: 0.78rem; } .auth-error { min-height: 1.2em; margin: 0 0 8px; color: var(--wrong); font-size: 0.85rem; font-weight: 600; } .auth-card button[type="submit"] { padding: 11px 12px; font-size: 0.95rem; } .auth-help { margin: 14px 0 0; font-size: 0.78rem; color: var(--muted); line-height: 1.45; } /* Angemeldete Person + Abmelden in der Seitenleiste. */ .account { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .account-email { flex: 1; min-width: 0; font-size: 0.75rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account .tour-btn { width: auto; margin-top: 0; flex: none; } /* Pixel-Design: auch die Anmeldung eckig mit harten Schatten. */ :root[data-theme="pixel"] .auth-card { border: 4px solid var(--border); border-radius: 0; box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.45); } :root[data-theme="pixel"] .auth-card h1 { font-size: 0.95rem; line-height: 1.5; color: var(--accent); text-shadow: 2px 2px 0 var(--border); } :root[data-theme="pixel"] .auth-card input[type="email"], :root[data-theme="pixel"] .auth-card input[type="password"] { border: 3px solid var(--border); border-radius: 0; } :root[data-theme="pixel"] .auth-screen { background-color: var(--pixel-sky); background-image: linear-gradient(#43b047 0 6px, transparent 6px), repeating-linear-gradient(90deg, #c4611c 0 22px, var(--border) 22px 24px); background-size: 100% 16px, 100% 16px; background-position: left bottom, left bottom; background-repeat: no-repeat; } /* HS-PF-Design: auch die Anmeldung kantig wie der Rest. */ :root[data-theme="hspf"] .auth-card, :root[data-theme="hspf"] .auth-card input { border-radius: 0; }