/* public/css/style.css */ /* — Farben und Basiswerte — */ :root { --color-bg: #fafafa; --color-surface: #ffffff; --color-primary: #ff6f61; --color-primary-hover: #e55b57; --color-secondary: #6b5b95; --color-secondary-hover: #5a4a80; --color-accent: #88b04b; --color-info: #4b8bbe; --color-text: #333333; --color-border: #e0e0e0; --font-sans: 'Inter', 'Segoe UI', Roboto, sans-serif; --font-mono: 'Fira Code', monospace; --radius: 8px; --spacing: 1rem; --transition: 0.2s ease-in-out; } /* Dark Mode via Klasse auf */ body.dark { --color-bg: #121212; --color-surface: #1e1e1e; --color-primary: #ff8a65; --color-primary-hover: #e05660; --color-secondary: #9575cd; --color-secondary-hover: #8562b3; --color-accent: #aed581; --color-info: #64b5f6; --color-text: #e0e0e0; --color-border: #333333; } /* — Reset & Basis — */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 100%; scroll-behavior: smooth; } body { font-family: var(--font-sans); color: var(--color-text); background-color: var(--color-bg); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; } /* — Layout-Container — */ header, main, footer { width: 100%; max-width: 1024px; margin: 0 auto; padding: var(--spacing); } /* — Header & Navigation — */ header { display: flex; align-items: center; justify-content: space-between; background-color: var(--color-surface); padding: 0.75rem var(--spacing); border-radius: var(--radius) var(--radius) 0 0; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } header nav a, header nav .submenu > a { color: var(--color-text); text-decoration: none; margin-left: var(--spacing); font-weight: 600; transition: color var(--transition); } header nav a:hover, header nav a:focus, header nav .submenu > a:hover { color: var(--color-primary); } /* — Button-Grundstil — */ .btn { display: inline-block; font-weight: 600; text-align: center; text-decoration: none; padding: 0.5rem 1rem; border-radius: var(--radius); transition: background-color var(--transition), color var(--transition), transform var(--transition); } .btn-primary { background-color: var(--color-primary); color: #fff; } .btn-primary:hover, .btn-primary:focus { background-color: var(--color-primary-hover); transform: translateY(-1px); } .btn-secondary { background-color: var(--color-secondary); color: #fff; } .btn-secondary:hover, .btn-secondary:focus { background-color: var(--color-secondary-hover); transform: translateY(-1px); } /* — Dropdown-Menüs — */ nav .submenu { position: relative; display: inline-block; } nav .submenu-list { display: none; position: absolute; top: 100%; left: 0; min-width: 180px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); list-style: none; padding: 0; margin: 0; box-shadow: 0 4px 8px rgba(0,0,0,0.1); z-index: 200; } nav .submenu:hover > .submenu-list { display: block; } /* Level 2 */ nav .submenu-list li.submenu { position: relative; } nav .submenu-list li.submenu > a::after { content: " ▶"; float: right; } nav .submenu-list li.submenu:hover > .submenu-list { display: block; } nav .submenu-list li.submenu .submenu-list { top: 0; left: 100%; min-width: 180px; border-radius: var(--radius); } /* Links und Label */ nav .submenu-list li a, nav .submenu-list li label.darkmode-label { display: block; padding: 0.5rem 1rem; color: var(--color-text); text-decoration: none; cursor: pointer; transition: background var(--transition); } nav .submenu-list li a:hover, nav .submenu-list li label.darkmode-label:hover { background: var(--color-bg); } /* Checkbox */ nav .submenu-list li input#darkmode-toggle { margin-right: 0.5rem; vertical-align: middle; } /* — Main Content — */ main { flex: 1; background-color: var(--color-surface); border: 1px solid var(--color-border); border-top: none; border-radius: 0 0 var(--radius) var(--radius); padding: calc(var(--spacing) * 1.5); box-shadow: 0 2px 8px rgba(0,0,0,0.05); } /* — Formular-Buttons und Upload-Link — */ form button { border: none; cursor: pointer; } form button.btn-primary, a.btn-primary { /* siehe oben */ } /* Speziell für Admin-Übersicht */ .admin-add-email { margin-bottom: var(--spacing); } /* — Footer — */ footer { text-align: center; font-size: 0.875rem; color: var(--color-text); padding: var(--spacing); } /* — Responsive — */ @media (max-width: 768px) { header, main, footer { padding: var(--spacing); } nav .submenu-list, nav .submenu-list li.submenu .submenu-list { position: static; box-shadow: none; } }