/* ============================================
   NEW CHAPTER — GLOBAL STYLES
   Gilt für alle Seiten. Seiten-spezifisches CSS
   liegt in eigenen Dateien (home.css, karriere.css, ...)

   ⚠️ HINWEIS ZUR UMBENENNUNG (Redesign-Phase):
   Die CSS-Variablennamen (--navy-950, --blue-light, --star-gold, ...)
   sind noch die ALTEN Namen aus der "New Chapter"-Ära - nur ihre WERTE
   wurden auf die neue Sand/Ozean-Palette umgestellt. Das ist Absicht:
   so ziehen die neuen Farben automatisch in home.css, karriere.css,
   unternehmen.css, admin.css und kurs.css ein, ohne dass diese Dateien
   sofort alle gleichzeitig mit angefasst werden müssen. Die Variablen
   werden erst umbenannt, wenn wirklich JEDE Datei durch ist.
   ============================================ */

:root {
  /* ---- Sand / Hintergrund-Skala (ehem. Navy-Skala) ---- */
  --navy-950: #f5eee0; /* Seiten-Hintergrund: warmes Sand */
  --navy-900: #fffdf8; /* Karten / Modals / Tabellenzeilen: fast Weiß */
  --navy-800: #ece1cc; /* dezente Sekundärfläche */
  --navy-700: #e2d4b8; /* tieferer Sand-Ton (Reserve) */
  --navy-600: #d6c39e; /* tiefster Sand-Ton (Reserve) */

  /* ---- Ozean-Türkis (ehem. Blau-Skala) ---- */
  --blue-glow: #1f8a76; /* Haupt-Akzent: Buttons, Gradients */
  --blue-light: #17695b; /* dunkles Türkis: Text/Icons auf Hell */
  --blue-pale: #2f8d78; /* weicheres Türkis: sekundäre Akzente */

  /* ---- Bernstein-Gold (ehem. Star-Gold-Skala) ---- */
  --star-gold: #d1912c; /* warmer Bernstein: Buttons, Gradients */
  --gold-dark: #a8701c; /* Gradient-Unterton */
  --gold-pale: #b87f22; /* Text/Icon-Akzent auf Hell */

  /* ---- Text ---- */
  --text: #241d15; /* Haupttext: warmes Dunkelbraun */
  --text-muted: #8a8070; /* gedämpfter Text */
  --text-muted-2: #5c5344; /* Lead-/Sekundärtext */

  /* ---- Ränder ---- */
  --border: rgba(43, 36, 26, 0.12);
  --border-soft: rgba(43, 36, 26, 0.2);

  /* ---- Neu: dunkle "Dusk"-Fläche (nur Footer) ---- */
  --ink: #241d15;

  --max-width: 1280px;
  --radius-lg: 1.5rem;
  --radius-full: 999px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  min-width: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--navy-950);
  color: var(--text);
  font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection {
  background: var(--blue-glow);
  color: #ffffff;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

@media (min-width: 1024px) {
  .container {
    padding: 0 2.5rem;
  }
}

.text-center {
  text-align: center;
}

.eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--blue-light);
}

.eyebrow.gold {
  color: var(--gold-pale);
}

h1,
h2,
h3 {
  font-weight: 800;
  color: var(--text);
  text-wrap: balance;
}

h1 {
  font-size: 2.5rem;
  line-height: 1.1;
}

h2 {
  font-size: 1.875rem;
}

@media (min-width: 640px) {
  h1 {
    font-size: 3.25rem;
  }
  h2 {
    font-size: 2.25rem;
  }
}

@media (min-width: 1024px) {
  h1 {
    font-size: 3.75rem;
  }
}

p.lead {
  color: var(--text-muted-2);
  font-size: 1.0625rem;
}

.muted {
  color: var(--text-muted);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--radius-full);
  padding: 0.9rem 1.6rem;
  font-size: 0.875rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: box-shadow 0.2s ease, background 0.2s ease, transform 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-primary {
  background: linear-gradient(to right, var(--blue-glow), var(--blue-pale));
  color: #ffffff;
  box-shadow: 0 10px 30px rgba(31, 138, 118, 0.35);
}

.btn-primary:hover {
  box-shadow: 0 14px 38px rgba(31, 138, 118, 0.5);
}

.btn-outline {
  background: rgba(255, 255, 255, 0.6);
  color: var(--text);
  border: 1px solid var(--border-soft);
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.95);
}

.btn-gold {
  background: linear-gradient(to right, var(--star-gold), var(--gold-dark));
  color: #2c1a03;
  box-shadow: 0 10px 30px rgba(209, 145, 44, 0.3);
}

.btn-gold:hover {
  box-shadow: 0 14px 38px rgba(209, 145, 44, 0.45);
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 253, 247, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.site-header .container {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1.5rem;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.logo svg {
  height: 4.5rem;
  width: 4.5rem;
  overflow: visible;
}

.logo-flip {
  transform-box: view-box;
  transform-origin: 512px 705px;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), fill 0.5s ease;
}

.logo:hover .logo-flip {
  transform: scaleX(-1);
  fill: #0c5e62;
}

.logo-sun {
  transform-box: view-box;
  transform-origin: 512px 333px;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.logo:hover .logo-sun {
  transform: translateY(-60px);
}

.logo-text {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--text);
}

.logo-text span {
  color: var(--blue-light);
}

.nav-pill {
  display: none;
  justify-self: center;
  min-width: 0;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.035);
  border-radius: var(--radius-full);
  padding: 0.3rem;
}

.main-nav a {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted-2);
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-full);
  transition: color 0.15s ease, background 0.15s ease;
}

.main-nav a:hover {
  color: var(--text);
  background: rgba(0, 0, 0, 0.06);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-self: end;
}

.header-actions {
  display: none;
  align-items: center;
  gap: 0.75rem;
}

.nav-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 2.75rem;
  width: 2.75rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-soft);
  background: rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.nav-toggle:hover {
  background: rgba(0, 0, 0, 0.07);
  border-color: rgba(31, 138, 118, 0.4);
}

.hamburger-line {
  display: block;
  height: 2px;
  width: 1.1rem;
  border-radius: 1px;
  background: var(--text);
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.nav-toggle.open .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.open .hamburger-line:nth-child(2) {
  opacity: 0;
}

.nav-toggle.open .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (min-width: 768px) {
  .nav-pill,
  .header-actions {
    display: flex;
  }
  .nav-toggle {
    display: none;
  }
}

/* Im Bereich 768-1023px sind Nav-Pill UND Buttons gleichzeitig sichtbar -
   hier braucht das große Logo zu viel Platz und drückt den Header in den
   Overflow. Erst ab 1024px ist genug Breite fuer die volle Logo-Groesse da. */
@media (min-width: 768px) and (max-width: 1023px) {
  .logo svg {
    height: 3rem;
    width: 3rem;
  }
  .main-nav a {
    padding: 0.5rem 0.8rem;
  }
}

.mobile-menu {
  display: none;
  border-top: 1px solid var(--border);
  background: var(--navy-950);
  padding: 1.25rem 1.5rem;
}

.mobile-menu.open {
  display: block;
}

.mobile-menu nav {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mobile-menu a {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-muted-2);
}

.mobile-menu .mobile-actions {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mobile-menu .mobile-actions .btn {
  width: 100%;
}

@media (min-width: 768px) {
  .mobile-menu {
    display: none !important;
  }
}

/* ---------- Footer ----------
   Bewusst dunkel gehalten ("Dusk"-Fläche) - wie ein Sonnenuntergang,
   der in die Nacht übergeht. Da die globalen Text-/Rahmen-Variablen
   jetzt auf HELL ausgelegt sind, braucht der Footer eigene, fest
   gesetzte Farben statt der globalen var()s - sonst wäre der Text
   auf dem dunklen Footer-Hintergrund unlesbar. */

.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--ink);
}

.footer-grid {
  display: grid;
  gap: 2.5rem;
  padding: 4rem 0;
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

.site-footer .logo-text {
  color: #fffaf0;
}

.site-footer .logo-text span {
  color: #6fd6bd;
}

.footer-about p {
  max-width: 24rem;
  margin-top: 1rem;
  font-size: 0.875rem;
  color: rgba(255, 250, 240, 0.6);
  line-height: 1.6;
}

.footer-contact {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: rgba(255, 250, 240, 0.6);
}

.footer-contact span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-col p.title {
  font-size: 0.875rem;
  font-weight: 700;
  color: #fffaf0;
}

.footer-col ul {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  font-size: 0.875rem;
  color: rgba(255, 250, 240, 0.55);
}

.footer-col ul a:hover {
  color: #ffffff;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.5rem 0;
}

.footer-bottom .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: rgba(255, 250, 240, 0.4);
}

@media (min-width: 640px) {
  .footer-bottom .container {
    flex-direction: row;
  }
}

.footer-bottom .legal-links {
  display: flex;
  gap: 1.25rem;
}

.footer-bottom .legal-links a {
  transition: color 0.15s ease;
}

.footer-bottom .legal-links a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* ---------- Shared section / card patterns ---------- */

section {
  position: relative;
}

.section-pad {
  padding: 5rem 0;
}

.section-head {
  max-width: 42rem;
  margin: 0 auto;
}

.card {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-lg);
  padding: 2rem;
}

.card-solid {
  border: 1px solid var(--border);
  background: var(--navy-900);
  border-radius: 1rem;
  padding: 1.5rem;
}

.icon-badge {
  display: grid;
  place-items: center;
  height: 2.75rem;
  width: 2.75rem;
  border-radius: var(--radius-full);
  font-size: 1.25rem;
}

.icon-badge.blue {
  background: rgba(31, 138, 118, 0.14);
  color: var(--blue-light);
}

.icon-badge.gold {
  background: rgba(209, 145, 44, 0.16);
  color: var(--star-gold);
}

/* ---------- Animations (pure CSS, no JS needed) ---------- */

@keyframes float-slow {
  0%,
  100% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(-14px) translateX(6px);
  }
}

@keyframes pulse-glow {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

.animate-float {
  animation: float-slow 7s ease-in-out infinite;
}

.animate-pulse-glow {
  animation: pulse-glow 3.4s ease-in-out infinite;
}

/* ---------- Forms ---------- */

.form-grid {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .form-grid.cols-2 {
    grid-template-columns: 1fr 1fr;
  }
}

.field label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted-2);
  margin-bottom: 0.4rem;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  border-radius: 0.75rem;
  border: 1px solid var(--border-soft);
  background: #ffffff;
  color: var(--text);
  padding: 0.75rem 1rem;
  font-family: inherit;
  font-size: 0.9375rem;
}

.field select option {
  color: var(--text);
  background: #ffffff;
}

.field input::placeholder,
.field textarea::placeholder {
  color: #a89c88;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue-pale);
}

.field textarea {
  resize: vertical;
  min-height: 8rem;
}

.form-note {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.form-success,
.form-error {
  display: none;
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  font-size: 0.875rem;
  margin-top: 1rem;
}

.form-success {
  background: rgba(31, 138, 118, 0.1);
  border: 1px solid rgba(31, 138, 118, 0.3);
  color: var(--blue-light);
}

.form-error {
  background: rgba(179, 64, 44, 0.08);
  border: 1px solid rgba(179, 64, 44, 0.35);
  color: #8f3320;
}