:root { --color-bg: #ffffff; --color-surface: #f9fafb; --color-text: #1a1a1a; --color-muted: #6b7280; --color-border: #e5e7eb; --color-accent: #1a5cdb; --radius: 6px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* Dunkelmodus greift nur, wenn gesetzt ist – das betrifft nur die öffentliche Seite, nicht den Admin-Bereich. */ [data-theme="dark"] { --color-bg: #0f1115; --color-surface: #171a21; --color-text: #e8eaed; --color-muted: #9aa1ac; --color-border: #2a2e37; } [data-theme="dark"] .alert-success { background: #0d2b1d; color: #6fe3a3; border-color: #1e4a34; } [data-theme="dark"] .alert-error { background: #341012; color: #ff9c94; border-color: #5c2226; } * { box-sizing: border-box; } body { margin: 0; font-family: var(--font); color: var(--color-text); background: var(--color-bg); line-height: 1.6; transition: background-color 0.15s ease, color 0.15s ease; } .container { max-width: 860px; margin: 0 auto; padding: 0 20px; } a { color: var(--color-accent); text-decoration: none; } a:hover { text-decoration: underline; } .site-header { border-bottom: 1px solid var(--color-border); padding: 18px 0; } .header-inner { display: flex; align-items: center; justify-content: space-between; } .brand { font-weight: 700; font-size: 1.1rem; color: var(--color-text); } .main-nav { display: flex; align-items: center; } .main-nav a { margin-left: 20px; color: var(--color-text); font-weight: 500; } .main-nav a:hover { color: var(--color-accent); } .theme-toggle { margin-left: 20px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius); color: var(--color-text); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; } .theme-toggle:hover { border-color: var(--color-accent); } main.container { padding: 48px 20px; min-height: 60vh; } .site-footer { border-top: 1px solid var(--color-border); padding: 24px 0; color: var(--color-muted); font-size: 0.9rem; } .footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; } .footer-nav a { color: var(--color-muted); margin-left: 16px; } .footer-nav a:first-child { margin-left: 0; } .footer-nav a:hover { color: var(--color-accent); } h1 { font-size: 2rem; margin-bottom: 0.5em; } .post-list { list-style: none; padding: 0; } .post-list li { padding: 16px 0; border-bottom: 1px solid var(--color-border); } .post-list time { color: var(--color-muted); font-size: 0.85rem; } form.contact-form { max-width: 480px; } form.contact-form label { display: block; margin: 14px 0 6px; font-weight: 500; } form.contact-form input, form.contact-form textarea { width: 100%; padding: 10px; border: 1px solid var(--color-border); border-radius: var(--radius); font-family: inherit; font-size: 1rem; } form.contact-form button { margin-top: 18px; background: var(--color-accent); color: #fff; border: none; padding: 10px 20px; border-radius: var(--radius); font-size: 1rem; cursor: pointer; } form.contact-form button:hover { opacity: 0.9; } .alert { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 20px; } .alert-success { background: #ecfdf3; color: #027a48; border: 1px solid #abefc6; } .alert-error { background: #fef3f2; color: #b42318; border: 1px solid #fecdca; } /* Admin */ .admin-body { background: #f9fafb; } .admin-header { background: #111827; color: #fff; padding: 14px 0; } .admin-header .container { display: flex; justify-content: space-between; align-items: center; } .admin-header a { color: #d1d5db; margin-right: 16px; } .admin-header a:hover { color: #fff; } .admin-header .brand { color: #fff; font-weight: 700; } .admin-main { padding: 32px 20px; max-width: 900px; margin: 0 auto; } table.admin-table { width: 100%; border-collapse: collapse; background: #fff; } table.admin-table th, table.admin-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--color-border); } table.admin-table th { background: #f3f4f6; font-size: 0.85rem; text-transform: uppercase; color: var(--color-muted); } .btn { display: inline-block; padding: 8px 16px; border-radius: var(--radius); background: var(--color-accent); color: #fff; border: none; cursor: pointer; font-size: 0.9rem; } .btn-secondary { background: #6b7280; } .btn-danger { background: #dc2626; } .login-box { max-width: 360px; margin: 80px auto; padding: 32px; border: 1px solid var(--color-border); border-radius: var(--radius); } .module-list { list-style: none; padding: 0; } .module-list li { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); margin-bottom: 10px; }