@import url('./tokens.css');

/* ================================
   Base Resets & Smooth Scrolling
   ================================ */
html { 
  scroll-behavior: smooth; 
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { 
  background: var(--color-brand); 
  border-radius: 4px; 
}
::-webkit-scrollbar-thumb:hover { 
  background: var(--color-brand-600); 
}

/* ================================
   Typography (Responsive Headings)
   ================================ */
h1, h2, h3, h4, h5, h6 {
  margin-top: 15px;
  margin-bottom: 15px;
  line-height: 1.2;
  overflow-wrap: break-word;
  hyphens: auto;
}

h1 { font-size: clamp(1.75rem, 5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 3.5vw, 1.75rem); }
h4 { font-size: clamp(1.1rem, 3vw, 1.5rem); }
h5 { font-size: clamp(1rem, 2.5vw, 1.25rem); }
h6 { font-size: clamp(0.9rem, 2vw, 1rem); }

/* ================================
   Navigation Components
   ================================ */
.nav-primary { position: relative; }
.nav-blur { transition: all .3s ease; background: transparent; }
.nav-scrolled {
  background: var(--color-dark-90);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.is-active { color: var(--color-brand) !important; }

/* Mobile-Menü als Glass-Panel */
#mobile-menu {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .25);
}
#mobile-menu a { color: var(--color-white); }
#mobile-menu a:hover { color: var(--color-brand); }
#mobile-menu .btn-primary { color: var(--color-white); }

/* Navigation breakpoints */
@media (min-width: 935px) {
  #desktop-nav { display: flex !important; }
  #mobile-menu-btn { display: none !important; }
}
@media (max-width: 934.98px) {
  #desktop-nav { display: none !important; }
  #mobile-menu-btn { display: inline-flex !important; }
}

/* Desktop-Nav kompakter & umbrechend */
#desktop-nav {
  gap: .75rem;
  flex-wrap: wrap;
  min-width: 0;
}
#desktop-nav a {
  font-size: clamp(.9rem, 1.2vw, 1rem);
  padding: .5rem 1rem;
}
#desktop-nav .btn-primary,
#desktop-nav .btn-dark {
  padding: .5rem 1rem;
}

/* ================================
   Button Components
   ================================ */
.btn-primary {
  background: var(--color-brand);
  color: var(--color-white);
  transition: transform .3s, box-shadow .3s;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-brand);
}
.btn-primary.is-active { color: var(--color-white) !important; }

.btn-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius);
  background: var(--color-dark);
  color: var(--color-white);
  font-weight: 500;
  text-decoration: none;
  padding: 0.5rem 1rem;
  transition: var(--transition);
  cursor: pointer;
}
.btn-dark:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-brand);
}

/* Glass effect */
.glass {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.1);
}

/* ================================
   Hero & Parallax Components
   ================================ */
.hero-bg {
  background: linear-gradient(-45deg, var(--color-brand), #2525CA, var(--color-brand), #0505AA);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.parallax-container { overflow: hidden; position: relative; }
.parallax-element { will-change: transform; }

/* ================================
   Card Components
   ================================ */
.service-card { transition: all 0.3s ease; }
.service-card:hover { transform: translateY(-4px); }

.ba-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ba-card__title {
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  line-height: 1.2;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.ba-card__text,
.ba-card__bullets {
  font-size: clamp(.95rem, 1.2vw, 1rem);
}
.ba-card__cta { margin-top: auto; }

.ba-cardgrid { gap: 1rem; }
@media (min-width: 768px) { .ba-cardgrid { gap: 1.5rem; } }
@media (min-width: 1024px){ .ba-cardgrid { gap: 2rem; } }

/* ================================
   Form Components
   ================================ */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.1);
}
.border-red-500 { border-color: #ef4444 !important; }
.text-red-500 { color: #ef4444; }
.error-message {
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

/* ================================
   Footer
   ================================ */
.footer { margin-top: auto; }
.footer-legal { text-align: center; }
@media (min-width: 768px) {
  .footer-legal { text-align: left; }
}

/* ================================
   Utility Classes
   ================================ */
.rounded-xl { border-radius: var(--radius-xl); }
.text-brand { color: var(--color-brand); }
.text-muted { color: var(--color-muted); }
.bg-brand { background-color: var(--color-brand); }
.bg-brand-10 { background-color: rgba(var(--brand-rgb), 0.1); }
.bg-brand-20 { background-color: rgba(var(--brand-rgb), 0.2); }
.shadow-brand { box-shadow: var(--shadow-brand); }

/* ================================
   Animation & Loading
   ================================ */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.fa-spin { animation: spin 1s linear infinite; }
button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
button:disabled:hover {
  transform: none;
  box-shadow: none;
}

/* ================================
   Accessibility
   ================================ */
a:focus,
button:focus {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--color-brand);
  color: white;
  padding: 8px;
  text-decoration: none;
  border-radius: 4px;
  z-index: 1000;
}
.skip-link:focus { top: 6px; }
a:hover { text-decoration: none; }

/* ================================
   Print Styles
   ================================ */
@media print {
  .nav-primary,
  .footer,
  .btn { display: none !important; }
  .hero-bg {
    background: none !important;
    color: black !important;
  }
  * {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
  }
}

/* ================================
   Dark Mode (Future)
   ================================ */
@media (prefers-color-scheme: dark) {
  /* Add dark mode styles here */
}

/* ================================
   High Contrast Mode
   ================================ */
@media (prefers-contrast: high) {
  :root {
    --color-brand: #0000FF;
    --color-text: #000000;
    --color-muted: #333333;
  }
}

/* ================================
   Responsive Buttons
   ================================ */
@media (max-width: 480px) {
  .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   AUDIO PLAYER (RESPONSIVE)
   - Für Markup mit IDs (ba-audio-*) und Data-Hook [data-audio-player]
   - Sorgt dafür, dass Controls niemals umbrechen/überlaufen
   - Progress-Bar passt sich Höhe/Breite an
   - Buttons werden auf kleinen Screens vollbreit
   ============================================================ */

/* Baseline: sorgt für stabile Zeilenhöhe und Zwischenräume */
[data-audio-player] {
  --ap-gap: 12px;
  --ap-gap-lg: 16px;
  --ap-radius: 999px;
}

#ba-audio-toggle,
#ba-audio-restart,
#ba-audio-mute {
  line-height: 1.1;
  white-space: nowrap;
  border-radius: var(--ap-radius);
}

/* Zeitangaben immer lesbar halten */
#ba-audio-current,
#ba-audio-duration {
  font-variant-numeric: tabular-nums;
}

/* Progressbar: solide Hit-Area auf Mobile */
#ba-audio-bar {
  height: 10px;
  border-radius: 999px;
  position: relative;
}
#ba-audio-progress {
  width: 0%;
  height: 100%;
  transition: width .15s linear;
  border-radius: inherit;
}

/* Gruppierung: Button + Zeit nebeneinander, wrappt sauber */
[data-audio-player] .ap-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ap-gap);
}

/* Optional: Wenn du .ap-row nicht im HTML hast, greifen folgende Fallbacks */
#ba-audio-toggle + .ap-time,
#ba-audio-toggle + div {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ————— Breakpoints ————— */

/* Groß (≥1280px): etwas luftiger */
@media (min-width: 1280px) {
  #ba-audio-bar { height: 12px; }
  [data-audio-player] { --ap-gap: var(--ap-gap-lg); }
}

/* Mittel (768px–1023px): Standardhöhen */
@media (min-width: 768px) and (max-width: 1023.98px) {
  #ba-audio-bar { height: 10px; }
}

/* Small (481px–767px): Buttons bleiben nebeneinander, aber kleiner paddings */
@media (max-width: 767.98px) and (min-width: 481px) {
  #ba-audio-toggle { padding: .6rem 1rem; }
  #ba-audio-restart,
  #ba-audio-mute { padding: .45rem .85rem; }
  #ba-audio-bar { height: 9px; }
}

/* X-Small (≤480px): volle Breite, gestapelt, nichts läuft über */
@media (max-width: 480px) {
  /* Button + Zeit stapeln */
  [data-audio-player] .ap-row,
  [data-audio-player] .ap-row--secondary {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  /* Primärer Button full-width */
  #ba-audio-toggle { width: 100%; justify-content: center; padding: .75rem 1.1rem; }
  
  /* Sekundär-Buttons: je 100% Breite */
  #ba-audio-restart,
  #ba-audio-mute { width: 100%; justify-content: center; }

  /* Zeitangaben unter dem Button, mittig */
  #ba-audio-toggle + .ap-time,
  .ap-time {
    justify-content: center;
    width: 100%;
  }

  /* Progressbar: gut antippbar */
  #ba-audio-bar { height: 12px; }
}

/* XX-Small (≤360px): noch engere Abstände, Schriften minimal kleiner */
@media (max-width: 360px) {
  #ba-audio-toggle { padding: .65rem 1rem; font-size: .95rem; }
  #ba-audio-restart,
  #ba-audio-mute { padding: .5rem .9rem; font-size: .95rem; }
  #ba-audio-bar { height: 14px; } /* größere Hitbox auf Mini-Screens */
}

/* ===== Layout-Schutz vor Überlauf im Kartengrid (Audio-Visual) ===== */
#ba-audio-info .hero-bg { border-radius: 0; } /* bleibt vom Wrapper-Overflow verdeckt */
#ba-audio-info .glass { max-width: 100%; }

/* Verhindert Clipping an Card-Rändern bei extremen Zoom/kleinen Screens */
#ba-audio-info .rounded-2xl { overflow: hidden; }

/* ===== Typo-Tweaks: langes Orbitron-Heading knickt sauber um ===== */
#ba-audio-info h2 {
  word-break: break-word;
  hyphens: auto;
}