/* ===== Base / Reset ===== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font: 17px/1.7 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial; color: var(--text); background: linear-gradient(180deg, #0b1224, #0f172a 40%, #0b1224); } /* ===== Theme Vars (Dark – Default) ===== */ :root { --bg: #0f172a; /* slate-900 */ --panel: #111827; /* gray-900 */ --muted: #cbd5e1; /* slate-300 */ --text: #e5e7eb; /* gray-200 */ --accent: #22c55e; /* green-500 */ --accent-2: #38bdf8; /* sky-400 */ --warn: #f59e0b; /* amber-500 */ --danger: #ef4444; /* red-500 */ } /* ===== Light Theme (optional, via ) ===== */ html[data-theme="light"] { --bg: #f9fafb; --panel: #ffffff; --muted: #4b5563; --text: #111827; --accent: #16a34a; --accent-2: #0369a1; --warn: #b45309; --danger: #b91c1c; } html[data-theme="light"] body { background: #f9fafb; color: var(--text); } /* ===== Base Elements ===== */ ::selection { background: rgba(56, 189, 248, .35); } img { max-width: 100%; height: auto; display: block; } a { color: var(--accent-2); font-weight: 600; text-decoration: none; } a:hover, a:focus { text-decoration: underline; filter: brightness(1.1); } p { margin: 0 0 0.8em; } /* ===== Layout ===== */ .container { max-width: 960px; margin: 0 auto; padding: 0 24px; } /* Schmalerer Header */ header { background: rgba(15, 23, 42, 0.96); border-bottom: 1px solid #1f2937; padding: 12px 0 6px; } header .container { display: flex; flex-direction: column; gap: 8px; } /* Navigation oben */ nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 0.9rem; } nav .brand { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text); } nav a { color: var(--muted); font-weight: 500; } nav a:hover, nav a:focus { color: var(--accent-2); } /* Kleine Pills / Badges */ .pill { padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.35); font-size: 0.8rem; color: var(--muted); } /* Hero-Bereich (unter der Navi) */ .hero { padding: 5px 0 6px; } .hero h1 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0 0 2px; } .hero .lead { margin: 0; color: var(--muted); font-size: 0.98rem; max-width: 52rem; } /* ===== Karten / Standard-Boxen ===== */ .card { background: var(--panel); border-radius: 16px; padding: 18px; border: 1px solid #1f2937; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45); margin-bottom: 20px; } .card h2 { margin-top: 0; font-size: 1.25rem; } /* ===== Typografie-Hilfsklassen ===== */ .lead { font-size: 1.02rem; color: var(--muted); } .small { font-size: 0.85rem; color: var(--muted); } .note { padding: 0.7rem 0.9rem; border-radius: 0.7rem; background: #020617; border: 1px dashed #1f2937; font-size: 0.85rem; color: var(--muted); margin: 0.5rem 0 1rem; } /* ===== Buttons / Controls ===== */ .btn, button { display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; padding: 0.5rem 1.1rem; border-radius: 999px; border: none; font: inherit; cursor: pointer; background: var(--accent); color: #022c22; font-weight: 600; } .btn:hover, .btn:focus, button:hover, button:focus { filter: brightness(1.06); } /* Sekundärer Button */ .btn-secondary { background: transparent; border: 1px solid rgba(148, 163, 184, 0.5); color: var(--muted); } .btn-secondary:hover, .btn-secondary:focus { border-color: var(--accent-2); color: var(--accent-2); } /* ===== Story-spezifische Layouts ===== */ /* Hauptbereich für Geschichten */ .story-main { padding: 32px 0 24px; } /* Leseboxen */ .story-section { background: linear-gradient( 180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02) ); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; padding: 18px 18px 16px; margin-bottom: 18px; } .story-section h2 { margin-top: 0; font-size: clamp(1.1rem, 2.4vw, 1.35rem); } .story-tagline { font-size: 0.95rem; color: var(--muted); margin: 4px 0 10px; } .story-small { font-size: 0.9rem; color: var(--muted); } /* Lesetypografie in Stories */ .story-section p, .story-section li { font-size: 1.05rem; line-height: 1.8; } .story-section em { font-style: italic; } /* Story-Footer-Links unter Kommentaren */ .story-footer-links { margin-top: 16px; font-size: 0.9rem; } .story-footer-links a { color: var(--accent-2); } /* ===== Kommentarfunktion (Server-basiert) ===== */ .comment-list { list-style: none; padding: 0; margin: 8px 0 0; } .comment-item { border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 10px; padding: 8px 10px; background: rgba(0, 0, 0, 0.28); margin-bottom: 6px; } .comment-meta { font-size: 0.75rem; color: var(--muted); margin-bottom: 2px; } .comment-text { font-size: 0.95rem; } .comment-form { margin-top: 12px; border-top: 1px dashed rgba(255, 255, 255, 0.2); padding-top: 10px; } .comment-form label { display: block; font-size: 0.9rem; margin-bottom: 4px; color: var(--muted); } .comment-input, .comment-textarea { width: 100%; padding: 6px 8px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(15, 23, 42, 0.95); color: var(--text); font: inherit; resize: vertical; } .comment-textarea { min-height: 90px; } .comment-input:focus, .comment-textarea:focus { outline: 2px solid var(--accent-2); outline-offset: 1px; } .comment-submit { margin-top: 8px; padding: 6px 14px; border-radius: 999px; border: none; font: inherit; cursor: pointer; background: var(--accent); color: #022c22; font-weight: 600; } .comment-submit:hover, .comment-submit:focus { filter: brightness(1.06); } .comment-error { margin-top: 4px; font-size: 0.8rem; color: var(--danger); } /* Wrapper für das Details-Element "Kommentare" */ .comments-details { margin-top: 10px; } /* ===== Tabellen / Inhalt (für Workshop-Seiten) ===== */ table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.9rem; } th, td { padding: 0.4rem 0.5rem; border: 1px solid rgba(148, 163, 184, 0.5); } th { background: rgba(15, 23, 42, 0.9); font-weight: 600; } /* Inhaltsverzeichnis / Seitenleiste (falls genutzt) */ .toc { border-radius: 12px; border: 1px solid rgba(148, 163, 184, 0.4); padding: 0.75rem 1rem; background: rgba(15, 23, 42, 0.9); font-size: 0.9rem; margin-bottom: 1.1rem; } .toc h2 { margin: 0 0 0.4rem; font-size: 1rem; } .toc ul { list-style: none; padding: 0; margin: 0; } .toc li { margin: 0.2rem 0; } /* ===== Footer ===== */ footer { text-align: center; padding: 1rem; font-size: 0.8rem; color: var(--muted); border-top: 1px solid #1f2937; background: rgba(2, 6, 23, 0.96); } /* ===== Responsive Feinschliff ===== */ @media (max-width: 640px) { .container { padding: 0 16px; } nav { flex-direction: column; align-items: flex-start; } .hero { padding-top: 4px; } .hero h1 { font-size: 1.4rem; } .story-section { padding: 14px 14px 12px; border-radius: 14px; } .story-section p, .story-section li { font-size: 1rem; line-height: 1.7; } } @media (min-width: 960px) { main.container.story-main { max-width: 820px; } } /* ===== Motion preferences ===== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ===== Print ===== */ @media print { header, .toc { display: none !important; } body { background: #fff !important; color: #000 !important; } .card, .story-section { border-color: #ddd; box-shadow: none; background: #fff; } a { color: #000; text-decoration: underline; } }