/* === Design Tokens === */
:root{
  --primary-50:#ecfdf5;
  --primary-600:#059669;
  --primary-700:#047857;
  --animation-speed:.3s;
  --topbar-h: 0px;
  --header-h: 0px;
}

html{scroll-behavior:smooth}

/* === Fixierte Topbar & Header === */
#topbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

#site-header {
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  width: 100%;
  z-index: 999;
}

/* Platz für Topbar + Header schaffen */
body {
  padding-top: calc(var(--topbar-h) + var(--header-h));
}

/* === Navigation / Links === */
.nav-link{
  position:relative;
  transition:color var(--animation-speed) ease;
}
.nav-link:after{
  content:"";
  position:absolute;left:0;bottom:-2px;
  width:0;height:2px;background:var(--primary-600);
  transition:width var(--animation-speed) ease;
}
.nav-link:hover{color:var(--primary-600)}
.nav-link:hover:after{width:100%}

/* === Mobile Menu === */
.mobile-menu{
  transform:translateX(100%);
  transition:transform var(--animation-speed) ease;
}
.mobile-menu.active{transform:translateX(0)}

/* === Badges & Shadows === */
.badge{
  display:inline-flex;align-items:center;
  border:1px solid #e5e7eb;border-radius:9999px;
  padding:.375rem .75rem;font-size:.875rem;background:#fff;
  transition:border-color var(--animation-speed) ease,background-color var(--animation-speed) ease;
}
.badge:hover{border-color:var(--primary-600);background:var(--primary-50)}

.shadow-soft{box-shadow:0 10px 25px rgba(0,0,0,.08)}
.shadow-hover{
  transition:box-shadow var(--animation-speed) ease,transform var(--animation-speed) ease;
}
.shadow-hover:hover{box-shadow:0 20px 40px rgba(0,0,0,.12);transform:translateY(-2px)}

/* === Sticky CTA (Pulse) === */
.sticky-cta{
  position:fixed;right:1rem;bottom:1rem;z-index:50;
  animation:pulse 2s infinite;
}
@keyframes pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.05)}
}

/* === Consent Banner (Slide-in) === */
.consent{
  position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:60;
  animation:slideInUp .5s ease;
}
@keyframes slideInUp{
  from{transform:translateY(100%);opacity:0}
  to{transform:translateY(0);opacity:1}
}

/* === (Optional) Form-Felder – nur nutzen, wenn .form-input im Markup verwendet wird === */
.form-input{
  border:1px solid #d1d5db;border-radius:.5rem;padding:.75rem;font-size:1rem;
  transition:border-color var(--animation-speed) ease,box-shadow var(--animation-speed) ease;
}
.form-input:hover{border-color:var(--primary-600)}
.form-input:focus{outline:none;border-color:var(--primary-600);box-shadow:0 0 0 3px rgba(5,150,105,.1)}

/* === Details / FAQ === */
details summary{
  cursor:pointer;padding:1rem;background:#f9fafb;border:1px solid #e5e7eb;
  border-radius:.5rem;margin-bottom:.5rem;list-style:none;position:relative;
  transition:background-color var(--animation-speed) ease,border-color var(--animation-speed) ease;
}
details summary::-webkit-details-marker{display:none}
details summary::after{
  content:'+';position:absolute;right:1rem;top:50%;transform:translateY(-50%);
  font-weight:700;transition:transform var(--animation-speed) ease;
}
details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
details summary:hover{background:var(--primary-50);border-color:var(--primary-600)}
details[open] summary{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none}
details div{
  padding:1rem;background:#fff;border:1px solid #e5e7eb;border-top:none;border-radius:0 0 .5rem .5rem;
  animation:fadeInDown .3s ease;
}
@keyframes fadeInDown{
  from{opacity:0;transform:translateY(-10px)}
  to{opacity:1;transform:translateY(0)}
}

/* === Buttons (nur nutzen, wenn im Markup vorhanden) === */
.btn-primary{
  background:var(--primary-600);color:#fff;padding:.75rem 1.5rem;border-radius:.5rem;font-weight:600;
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;border:none;cursor:pointer;
  transition:background-color var(--animation-speed) ease,box-shadow var(--animation-speed) ease,transform var(--animation-speed) ease;
}
.btn-primary:hover{background:var(--primary-700);transform:translateY(-1px);box-shadow:0 4px 12px rgba(5,150,105,.3)}

.btn-secondary{
  padding:.75rem 1.5rem;border-radius:.5rem;border:1px solid #d1d5db;background:#fff;color:#374151;
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  transition:background-color var(--animation-speed) ease,border-color var(--animation-speed) ease,transform var(--animation-speed) ease;
}
.btn-secondary:hover{background:#f9fafb;border-color:var(--primary-600);transform:translateY(-1px)}

/* === Accessibility === */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
/* Besser als *:focus – keine unnötigen Outlines bei Mausnutzung */
*:focus-visible{outline:2px solid var(--primary-600);outline-offset:2px}

/* === Responsive / Print === */
@media (max-width:768px){
  .sticky-cta{right:1rem;bottom:1rem;font-size:.875rem}
}
@media print{
  .sticky-cta,.consent,#mobileMenuBtn{display:none !important}
}

/* === Reduced Motion (gezielt, nicht global zwingend) === */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sticky-cta,.shadow-hover,.mobile-menu,.consent,details div{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}