/* ==============================
   Farbvariablen (Logo-inspiriert)
   ============================== */
:root {  --ds-bg: #0f172a;  --ds-surface: #1e293b;  --ds-text: #f8fafc;  --ds-accent: #facc15;  --ds-accent-hover: #d97706;  --ds-border: #334155; }

/* ==============================
   Basis-Typografie & Layout
   ============================== */
*, *::before, *::after {  box-sizing: border-box; }

body {  margin: 0;  padding: 0;  color: var(--ds-text);  font-family: 'Inter', sans-serif;  font-size: 1rem;  line-height: 1.6;  background-color: var(--ds-bg);  scroll-behavior: smooth;  display: flex;  flex-direction: column;  min-height: 100vh; }

h1, h2, h3, h4, h5, h6 {  color: var(--ds-text);  font-weight: 700;  margin-top: 0;  margin-bottom: 0.5em; }

p {  margin-top: 0;  margin-bottom: 1em; }

/* ==============================
   Links
   ============================== */
a {  color: var(--ds-accent);  text-decoration: none;  transition: color 0.2s ease; }

a:hover, a:focus {  color: var(--ds-accent-hover);  outline: none; }

/* ==============================
   Header & Footer
   ============================== */
header, .footer {  background-color: rgba(15, 23, 42, 0.9);  backdrop-filter: blur(8px);  width: 100%;  position: fixed;  top: 0;  z-index: 50; }

footer {  background-color: var(--ds-surface);  color: var(--ds-text);  padding: 1.5rem 0;  margin-top: auto; }

/* ==============================
   Buttons
   ============================== */
.btn {  display: inline-block;  background-color: var(--ds-accent);  color: #111;  font-weight: 600;  padding: 0.75rem 1.5rem;  border: none;  border-radius: 0.5rem;  text-align: center;  cursor: pointer;  transition: background-color 0.2s ease-in-out; }

.btn:hover, .btn:focus {  background-color: var(--ds-accent-hover);  color: #fff;  outline: none; }

/* ==============================
   Formularelemente
   ============================== */
input, textarea, select {  background-color: var(--ds-surface);  color: var(--ds-text);  border: 1px solid var(--ds-border);  padding: 0.75rem;  border-radius: 0.375rem;  font-size: 1rem;  width: 100%;  transition: border-color 0.2s ease, box-shadow 0.2s ease; }

input:focus, textarea:focus, select:focus {  border-color: var(--ds-accent);  box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.3);  outline: 2px solid var(--ds-accent); }

/* ==============================
   Utility-Klassen
   ============================== */
.shadow-soft {  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4); }

.bg-glass {  background-color: rgba(30, 41, 59, 0.75);  backdrop-filter: blur(6px);  border-radius: 0.75rem;  padding: 1rem; }

.bg-custom-gradient {  background: linear-gradient(to right, #1f2937, #111827); }

/* ==============================
   Tabellen
   ============================== */
table {  width: 100%;  border-collapse: collapse;  margin-bottom: 1em; }

th, td {  border: 1px solid var(--ds-border);  padding: 0.75rem;  text-align: left; }

th {  background-color: var(--ds-surface); }

/* ==============================
   Feedback & Animationen
   ============================== */
.logo {  animation: logo-fade-in 1s ease-in-out forwards; }

@keyframes logo-fade-in {  0% { opacity: 0; transform: scale(0.9); }  100% { opacity: 1; transform: scale(1); } }

.feedback {  transition: opacity 0.3s ease, transform 0.3s ease; }

.form-error {  color: #f87171;  font-size: 0.875rem;  margin-top: 0.25rem; }

/* ==============================
   Layout Helper
   ============================== */
.container {  width: 90%;  max-width: 1200px;  margin-left: auto;  margin-right: auto; }

/* ==============================
   Scrollbar entfernen
   ============================== */
.hide-scrollbar {  -ms-overflow-style: none;  scrollbar-width: none; }

.hide-scrollbar::-webkit-scrollbar {  display: none; }

/* ==============================
   Druckversion
   ============================== */
@media print {  body {   background-color: #fff;   color: #000;  }
  a::after {   content: " (" attr(href) ")";   font-size: 0.85em;  } }

/* ==============================
   Responsive Nav Menu
   ============================== */
@media (max-width: 768px) {  header nav {   transition: max-height 0.3s ease-in-out;   overflow: hidden;  } }