/* ========================= * Design Tokens + Theme * ========================= */ :root { color-scheme: light dark; /* native Form-Controls */ --bg: #f6f7fb; --panel-1: rgba(255,255,255,0.70); --panel-2: rgba(255,255,255,0.52); --panel-3: rgba(255,255,255,0.36); --line: rgba(0,0,0,0.14); --text: #0b0b0c; --muted: #5f6368; --chip: #eef1f7; --shadow: 0 10px 30px rgba(20,24,40,0.08); --accent: #1e6fff; /* Canvas-/Game-Tinte (als RGB, damit JS alpha mischen kann) */ --ink-rgb: 11,11,12; /* light: dunkel zeichnen */ } /* Manuelle Umschaltung: */ [data-theme="dark"] { --bg: #0c0d10; --panel-1: rgba(24,26,34,0.90); --panel-2: rgba(24,26,34,0.70); --panel-3: rgba(24,26,34,0.52); --line: rgba(255,255,255,0.12); --text: #e9eaee; --muted: #b9bdc6; --chip: #171a22; --shadow: 0 16px 40px rgba(0,0,0,0.45); --accent: #7fb0ff; /* dark: hell zeichnen */ --ink-rgb: 235,238,245; } /* Automatische Erkennung, wenn kein data-theme gesetzt ist */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: #0c0d10; --panel-1: rgba(24,26,34,0.90); --panel-2: rgba(24,26,34,0.70); --panel-3: rgba(24,26,34,0.52); --line: rgba(255,255,255,0.12); --text: #e9eaee; --muted: #b9bdc6; --chip: #171a22; --shadow: 0 16px 40px rgba(0,0,0,0.45); --accent: #7fb0ff; --ink-rgb: 235,238,245; } } /* ========================= * Base * ========================= */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100dvh; color: var(--text); font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--bg); transition: background-color .25s ease, color .25s ease; } /* Links */ a { color: var(--text); text-underline-offset: 2px; } a:hover { color: var(--accent); } /* ========================= * Layout Container * ========================= */ .container { position: relative; max-width: 1100px; margin: 0 auto; padding: 24px; } /* Atemraum am Seitenende */ .container::after { content: ""; display: block; height: clamp(72px, 12vh, 220px); } /* ========================= * Header & Cards * ========================= */ .site-header, .card { -webkit-backdrop-filter: saturate(120%) blur(8px); /* Safari */ backdrop-filter: saturate(120%) blur(8px); background: var(--panel-1); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); } .site-header { padding: 22px 20px; } .site-title { margin: 0 0 8px; font-size: 1.8rem; letter-spacing: .2px; } .site-subtitle { margin: 0; color: var(--muted); } .card { padding: 16px; } /* Inset-Variante für Canvas-/Code-Boxen (mit Fallback) */ .card--inset { background: var(--panel-2); border-color: var(--line); } @supports (color: color-mix(in srgb, white, black)) { .card--inset { border-color: color-mix(in srgb, var(--line) 80%, transparent); } } /* ========================= * Navigation Chips * ========================= */ .site-nav { margin: 16px 0 12px; } .site-nav .nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .site-nav .nav-list a { display: inline-block; padding: 6px 10px; font-size: .9rem; white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-3); text-decoration: none; color: var(--text); transition: background .2s ease, outline-color .2s ease, color .2s ease; } .site-nav .nav-list a:hover, .site-nav .nav-list a:focus-visible { background: #fff; outline: 2px solid var(--accent); outline-offset: 2px; } [data-theme="dark"] .site-nav .nav-list a:hover, [data-theme="dark"] .site-nav .nav-list a:focus-visible { background: rgba(255,255,255,0.07); } .site-nav .nav-list a.active { background: #fff; color: #111; } [data-theme="dark"] .site-nav .nav-list a.active { background: rgba(255,255,255,0.10); color: var(--text); } /* ========================= * Toolbar / Buttons / Chips * ========================= */ .toolbar { display: flex; justify-content: flex-end; margin-bottom: 10px; gap: 8px; } .btn { border: 1px solid var(--line); background: #fff; padding: 6px 10px; border-radius: 8px; cursor: pointer; transition: filter .2s ease, background .2s ease, color .2s ease, border-color .2s ease; } .btn:hover { filter: brightness(0.98); } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } [data-theme="dark"] .btn { background: rgba(255,255,255,0.07); color: var(--text); } [data-theme="dark"] .btn:hover { filter: none; background: rgba(255,255,255,0.12); } .chip { display: inline-block; padding: 6px 10px; background: var(--chip); border: 1px dashed var(--line); border-radius: 999px; color: inherit; text-decoration: none; } .chip:hover, .chip:focus-visible { background: #fff; outline: 2px solid var(--accent); outline-offset: 2px; } [data-theme="dark"] .chip { background: rgba(255,255,255,0.06); } [data-theme="dark"] .chip:hover, [data-theme="dark"] .chip:focus-visible { background: rgba(255,255,255,0.12); } /* ========================= * Grid (2-Spalten) * ========================= */ .cards-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } @media (max-width: 780px) { .cards-grid { grid-template-columns: 1fr; } } /* kompakte Dichte */ body.compact .card { padding: 12px; } /* ========================= * Game of Life / Canvas Styles * ========================= */ .gol-header { position: relative; margin-top: 28px; } .gol-controls { position: relative; margin-bottom: 8px; } /* Pfeil-Button rechts oben */ .gol-controls summary { list-style: none; cursor: pointer; position: absolute; right: 10px; top: 8px; width: 22px; height: 22px; border-radius: 6px; } .gol-controls summary:hover, .gol-controls summary:focus-visible { background: var(--panel-3); outline: 2px solid var(--accent); outline-offset: 2px; } /* Pfeil-Zeichen (CSS) */ .gol-controls summary::after { content: ""; position: absolute; top: 5px; left: 7px; border: solid var(--text); border-width: 0 2px 2px 0; display: inline-block; padding: 4px; transform: rotate(45deg); transition: transform .2s ease; } .gol-controls[open] summary::after { transform: rotate(135deg); } /* Wenn geöffnet, etwas Luft zwischen Pfeil und Toolbar */ .gol-controls[open] .gol-toolbar { margin-top: 28px; } /* Canvas Oberfläche – feines Raster, bessere Kontrastbasis */ #gameCanvas { display: block; width: 100%; border-radius: 10px; background: radial-gradient(circle at 1px 1px, rgba(0,0,0,0.05) 1px, transparent 1px) 0 0/8px 8px, linear-gradient(var(--panel-2), var(--panel-2)); } [data-theme="dark"] #gameCanvas { background: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1px, transparent 1px) 0 0/8px 8px, linear-gradient(#0f1116,#0f1116); } /* ========================= * Range-Slider * ========================= */ input[type="range"] { -webkit-appearance: none; width: 120px; height: 4px; background: var(--panel-3); border-radius: 2px; outline: none; cursor: pointer; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); cursor: pointer; transition: background .2s ease; } input[type="range"]::-webkit-slider-thumb:hover { background: #1452c3; } input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); cursor: pointer; transition: background .2s ease; } input[type="range"]::-moz-range-thumb:hover { background: #1452c3; } /* ========================= * Live-Code Dropdown (unten rechts) * ========================= */ .live-code { position: absolute; right: 10px; bottom: 8px; width: 22px; height: 22px; } .live-code summary { list-style: none; cursor: pointer; position: relative; width: 22px; height: 22px; border-radius: 6px; } .live-code summary:hover { background: var(--panel-3); } .live-code summary::after { content: ""; position: absolute; top: 5px; left: 7px; border: solid var(--text); border-width: 0 2px 2px 0; display: inline-block; padding: 4px; transform: rotate(-135deg); transition: transform .2s ease; } .live-code[open] summary::after { transform: rotate(45deg); } .live-code pre { margin: 8px 0 0 0; padding: 8px; background: var(--panel-2); border-radius: 6px; font-size: 0.85rem; max-height: 240px; overflow: auto; } /* ========================= * Taschenlampen-Button (mono, abstrakt) * ========================= */ .lamp-btn{ position: fixed; top: 14px; right: max(14px, env(safe-area-inset-right)); z-index: 10000; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-1); box-shadow: var(--shadow); cursor: pointer; user-select: none; color: var(--text); /* Icon-Farbe = currentColor -> mono */ } .lamp-btn:hover, .lamp-btn:focus-visible{ background: var(--panel-2); outline: 2px solid var(--accent); outline-offset: 2px; } /* Icon via CSS-Maske (kompakt, URL-encoded, eine Zeile) */ .lamp-btn::before{ content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='9' y='9' width='6' height='11' rx='2'/%3E%3Crect x='8' y='4' width='8' height='3' rx='1.2'/%3E%3Crect x='9' y='7' width='6' height='3' rx='1'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='9' y='9' width='6' height='11' rx='2'/%3E%3Crect x='8' y='4' width='8' height='3' rx='1.2'/%3E%3Crect x='9' y='7' width='6' height='3' rx='1'/%3E%3C/svg%3E") center/contain no-repeat; } @media (pointer: coarse){ .lamp-btn{ width: 40px; height: 40px; } } /* ========================= * Utilities * ========================= */ .justify { text-align: justify; hyphens: auto; /* Silbentrennung */ -webkit-hyphens: auto; /* Safari */ overflow-wrap: break-word;/* verhindert Überlaufen bei sehr langen Wörtern/URLs */ } /* Bewegungs-Reduktion respektieren */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } .portrait-container { position: relative; width: 300px; margin:auto; } .portrait { width: 100%; display: block; } .eye { position: absolute; width: 35px; height: 29px; background: #fff; border-radius: 50%; top: 134px; left: 100px; /* Werte passend zu Bild anpassen */ box-shadow: 0 2px 8px rgba(0,0,0,0.1); } #eye-right { left: 168px; } .pupil { width: 15px; height: 15px; background: #000; border-radius: 50%; position: absolute; top: 12px; left: 12px; }