/* alogtra transportrechner Farbdefinitionen */

:root {
  /* Primärfarben */
  --color-primary: #0077CC;
  --color-secondary: #00C49A;

  /* Hintergrundfarben */
  --color-bg-dark: #0B1D2A;
  --color-bg-light: #F4F6F8;
  --color-bg-footer: #0B1D2A;

  /* Textfarben */
  --color-text-main: #2B2B2B;
  --color-text-secondary: #C3C8CD;
  --color-text-white: #FFFFFF;

  /* Schriften */
  --font-family-base: 'Inter', 'Roboto', 'Open Sans', sans-serif;
}

/* in alogtra_colors.css – nur wenn du magst */
body { color: var(--color-text-main); background-color: var(--bg); }        /* statt var(--color-bg-light) */
.card { background-color: var(--bg-elev); }                                  /* statt var(--color-bg-light) */


/* Überschriften */
h1 {
  font-size: 3rem;
  color: var(--color-text-white);
  font-weight: 700;
  line-height: 1.2;
}

h2 {
  font-size: 2rem;
  color: var(--color-primary);
  font-weight: 600;
  line-height: 1.3;
}

/* Body-Text */
body {
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  color: var(--color-text-main);
  background-color: var(--color-bg-light);
  line-height: 1.5;
}

/* Sekundärtext */
.small-text, .hint {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

/* Buttons */
.button-primary {
  background-color: var(--color-primary);
  color: var(--color-text-white);
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.button-primary:hover {
  background-color: var(--color-secondary);
}

/* Cards / Boxen */
.card {
  background-color: var(--color-bg-light);
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* Footer */
footer {
  background-color: var(--color-bg-footer);
  color: var(--color-text-secondary);
  padding: 2rem 1rem;
  font-size: 0.875rem;
}