/* ===========================
   Modern Responsive Theme
   =========================== */

/* Farbvariablen: Light Theme */
:root {
--anim-time: 0.5s; /*macht nix*/
--primary: #2563EB;
--primary-light: #E0E7FF;
--accent: #F59E42;
--bg: #F9FAFB;
--surface: #FFFFFF;
--border: #E5E7EB;
--text: #1F2937;
--text-light: #4B5563;
--shadow: 0 2px 8px rgba(31, 41, 55, 0.08);
--radius: 16px;
--spacing-1: 0.5rem;
--spacing-2: 1rem;
--spacing-3: 1.5rem;
--transition: 0.2s cubic-bezier(.4,0,.2,1);
--infobox: rgba(255, 255, 255, 0.85);

}


[data-theme="light"] {
--anim-time: 0.5s;
--primary: #2563EB;
--primary-light: #E0E7FF;
--accent: #F59E42;
--bg: #F9FAFB;
--surface: #FFFFFF;
--border: #E5E7EB;
--text: #1F2937;
--text-light: #4B5563;
--shadow: 0 2px 8px rgba(31, 41, 55, 0.08);
--radius: 16px;
--spacing-1: 0.5rem;
--spacing-2: 1rem;
--spacing-3: 1.5rem;
--transition: 0.2s cubic-bezier(.4,0,.2,1);
--infobox: rgba(255, 255, 255, 0.85);

}

/* Dark Theme */
[data-theme="dark"] {
--primary: #60A5FA;
--primary-light: #1E293B;
--accent: #FBBF24;
--bg: #0F172A;
--surface: #1E293B;
--border: #334155;
--text: #F1F5F9;
--text-light: #CBD5E1;
--shadow: 0 2px 12px rgba(0, 0, 0, 0.20);
--radius: 16px;
--spacing-1: 0.5rem;
--spacing-2: 1rem;
--spacing-3: 1.5rem;
--transition: 0.2s cubic-bezier(.4,0,.2,1);
--infobox: rgba(30, 41, 59, 0.85);

}




/*


:root {
  --primary: #2563eb;
  --primary-light: #e0e7ff;
  --accent: #f59e42;
  --bg: #f9fafb;
  --surface: #fff;
  --border: #e5e7eb;
  --text: #222;
  --text-light: #555;
  --shadow: 0 2px 8px rgba(30, 41, 59, 0.06);
  --radius: 16px;
  --spacing-1: 0.5rem;
  --spacing-2: 1rem;
  --spacing-3: 1.5rem;
  --transition: 0.2s cubic-bezier(.4,0,.2,1);
}


[data-theme="dark"] {
  --primary: #2563eb;
  --primary-light: #1e293b;
  --accent: #fbbf24;
  --bg: #181e29;
  --surface: #232a3a;
  --border: #334155;
  --text: #f3f6fa;
  --text-light: #cbd5e1;
  --shadow: 0 2px 12px rgba(0,0,0,0.18);
}

*/



/* System-Theme als Fallback */
/*
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --primary: #60a5fa;
    --primary-light: #1e293b;
    --accent: #fbbf24;
    --bg: #181e29;
    --surface: #232a3a;
    --border: #334155;
    --text: #f3f6fa;
    --text-light: #cbd5e1;
    --shadow: 0 2px 12px rgba(0,0,0,0.18);
  }
}
*/
/* ========== Layout ========== */
html {
  box-sizing: border-box;
  font-size: 16px;
  background: var(--bg);
  color: var(--text);
  scroll-behavior: smooth;
}
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: system-ui, 'Segoe UI', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  transition: background var(--transition), color var(--transition);
}

header {
  padding: var(--spacing-3) var(--spacing-2) var(--spacing-2) var(--spacing-2);
  background: var(--surface);
  box-shadow: var(--shadow);
  border-radius: 0 0 var(--radius) var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-1);
}

.header-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
  max-width: 900px;
}

h1 {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--primary);
  margin: 0;
  letter-spacing: -1px;
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-1);
  align-items: center;
  justify-content: center;
  margin: var(--spacing-1) 0;
  animation: nav-slide-in 0.7s cubic-bezier(.4,0,.2,1);
}

@keyframes nav-slide-in {
  from { opacity: 0; transform: translateY(-30px);}
  to   { opacity: 1; transform: translateY(0);}
}

.display h3 {
  margin: 0;
  color: var(--accent);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.5px;
}

main {
  margin: 0 auto;
  padding: var(--spacing-2);
  max-width: 900px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

footer {
  margin: var(--spacing-3) 0 0 0;
  text-align: center;
  color: var(--text-light);
  font-size: 0.95em;
}

/* ========== Table Styles ========== */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0 auto var(--spacing-3) auto;
  animation: fade-slide-in 0.7s cubic-bezier(.4,0,.2,1);
}

@keyframes fade-slide-in {
  from { opacity: 0; transform: translateY(30px);}
  to   { opacity: 1; transform: translateY(0);}
}

th, td {
  padding: 0.85em 0.5em;
  text-align: center;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 1em;
  transition: background var(--transition), color var(--transition);
}

th {
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 600;
  border-bottom: 2px solid var(--primary);
}

tr:last-child td { border-bottom: none; }
tr:nth-child(even) { background: #f3f6fa; }
[data-theme="dark"] tr:nth-child(even) { background: #232a3a; }
tr:hover {
  background: #e7f0fd;
  transition: background var(--transition);
}
[data-theme="dark"] tr:hover {
  background: #334155;
}

/* ========== Card View (Mobile) ========== */
/*
@media (max-width: 600px) {
  table, thead, tbody, th, td, tr {
    display: block;
    width: 100%;
  }
  thead { display: none; }
  tr {
    margin-bottom: var(--spacing-2);
    background: var(--surface);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
    padding: var(--spacing-1) var(--spacing-1);
    animation: fade-slide-in 0.7s cubic-bezier(.4,0,.2,1);
  }
  td {
    border: none;
    position: relative;
    padding-left: 48%;
    text-align: left;
    min-height: 32px;
    font-size: 1em;
  }
  td:before {
    position: absolute;
    left: 1em;
    top: 0;
    width: 44%;
    white-space: nowrap;
    font-weight: 600;
    color: var(--primary);
    content: attr(data-label);
  }
}
*/
/* ========== Buttons ========== */
.button,
.arrow-button,
.dark-button,
.home-button,
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  outline: none;
  border-radius: var(--radius);
  background: var(--primary);
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  padding: 0.65em 1.2em;
  margin: 0 0.2em;
  box-shadow: 0 1px 4px rgba(37,99,235,0.08);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  text-decoration: none;
  min-width: 44px;
  min-height: 44px;
  gap: 0.5em;
  position: relative;
  will-change: transform, box-shadow, background;
}

.arrow-button.left-arrow { margin-right: 0.5em; }
.arrow-button.right-arrow { margin-left: 0.5em; }

.button:hover,
.arrow-button:hover,
.dark-button:hover,
.home-button:hover,
.theme-toggle:hover {
  background: #1746a2;
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 4px 16px rgba(37,99,235,0.13);
}

.button:active,
.arrow-button:active,
.dark-button:active,
.home-button:active,
.theme-toggle:active {
  background: #0f2e6b;
  transform: scale(0.98);
}

.home-button {
  background: var(--accent);
  color: #fff;
  width: 44px;
  height: 44px;
  padding: 0;
  box-shadow: 0 1px 4px rgba(245,158,66,0.10);
}
.home-button:hover { background: #e26c0a; }
.home-button img { width: 22px; height: 22px; }

.theme-toggle {
  background: var(--surface);
  color: var(--primary);
  border: 1.5px solid var(--border);
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 1.3rem;
  box-shadow: 0 1px 4px rgba(37,99,235,0.06);
  transition: background var(--transition), color var(--transition), border var(--transition);
}
.theme-toggle[aria-pressed="true"] {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.theme-toggle:focus { outline: 2px solid var(--primary); }

/* ========== Info Box ========== */
.trans-box {
  width: 100%;
  background: var(--infobox);
  border-radius: var(--radius);
  margin: var(--spacing-3) auto 0 auto;
  padding: var(--spacing-2) var(--spacing-3);
  box-shadow: 0 1px 8px rgba(30, 41, 59, 0.07);
  color: var(--text-light);
  font-size: 1.05em;
  max-width: 700px;
  transition: background var(--transition), color var(--transition);
}
[data-theme="dark"] .trans-box {
  background: rgba(30, 41, 59, 0.85);
  color: var(--text-light);
}

.leer {
  color: #22c55e;
  font-weight: 500;
  text-align: center;
  margin: var(--spacing-3) 0;
}

/* ========== Typography ========== */
h1, h2, h3, h4, h5 {
  font-family: inherit;
  font-weight: 700;
  margin: 0 0 var(--spacing-1) 0;
  color: var(--primary);
}
h3, .display h3 { font-size: 1.1rem; color: var(--accent); font-weight: 500; }
p, ul, ol { margin: 0 0 var(--spacing-1) 0; }
.zi-zeile { font-size: 1em; color: var(--text-light); }

/* ========== Responsive ========== */
    table th:nth-child(2),
    table th:nth-child(3),
    table td:nth-child(2),
    table td:nth-child(3) {
        display: none;
@media (max-width: 900px) {
    /* 2. und 3. Spalte in Tabellen ausblenden */

    }
  main {
    padding: var(--spacing-1);
  }
  .trans-box {
    padding: var(--spacing-1) var(--spacing-1);
  }
  .header-row {
    flex-direction: column;
    gap: var(--spacing-1);
  }
}

@media (max-width: 600px) {
  html {
    font-size: 15px;
  }
  nav {
    flex-direction: column;
    gap: 8px;
  }
  .trans-box {
    font-size: 1em;
    padding: 0.8em 0.5em;
  }

  /* ========== Tabelle direkt scrollbar machen ========== */
  table {
    display: inline-flexbox;
    overflow-x: auto;
    white-space: nowrap;
    min-width: 100%;
  }
}

/* ========== Theme Switch Animation ========== 
.theme-flash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  animation: theme-flash-anim var(--anim-time) cubic-bezier(.4,0,.2,1);
  background: radial-gradient(circle at 50% 50%, var(--primary) 0%, var(--bg) 100%);
  opacity: 0.7;
}

@keyframes theme-flash-anim {
  0%   { opacity: 0.7; transform: scale(0.8);}
  60%  { opacity: 1;   transform: scale(1.05);}
  100% { opacity: 0;   transform: scale(1.2);}
}
*/
/* Sanfter Übergang für Farben und Schatten */
body, header, main, footer, .trans-box, table, .button, .arrow-button, .dark-button, .home-button, .theme-toggle {
  transition: 
    background 0.6s cubic-bezier(.4,0,.2,1),
    color 0.6s cubic-bezier(.4,0,.2,1),
    box-shadow 0.6s cubic-bezier(.4,0,.2,1),
    border-color 0.6s cubic-bezier(.4,0,.2,1);
}

/* ========== Utility ========== */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  border: 0;
}



/*-----------------REACT------------------*/