/* Reset */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:var(--header-h); -webkit-text-size-adjust:100%; overflow-x:hidden; }
body { font-family:var(--ff-body); font-size:var(--fs-base); line-height:1.7; color:var(--clr-text); background-color:var(--clr-bg); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
ul,ol { list-style:none; }
address { font-style:normal; }
button { font:inherit; cursor:pointer; border:none; background:none; }
input,select,textarea { font:inherit; color:inherit; }

:focus-visible { outline:2px solid var(--clr-primary); outline-offset:3px; border-radius:var(--radius-sm); }
:focus:not(:focus-visible) { outline:none; }

.skip-link { position:absolute; top:-100%; left:var(--space-md); padding:var(--space-sm) var(--space-lg); background:var(--clr-secondary); color:var(--clr-white); font-weight:600; border-radius:0 0 var(--radius-md) var(--radius-md); z-index:10000; transition:top var(--transition); }
.skip-link:focus { top:0; }

.container { width:100%; max-width:1200px; margin-inline:auto; padding-inline:var(--space-xl); }

/* Section Header */
.section-header { text-align:center; margin-bottom:var(--space-3xl); }
.section-header--left { text-align:left; }
.section-header__badge { display:inline-flex; align-items:center; padding:0.35rem 1rem; font-size:var(--fs-xs); font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--clr-primary); background:var(--clr-primary-light); border-radius:var(--radius-full); margin-bottom:var(--space-md); border:1px solid rgba(232,118,26,0.2); }
.section-header__title { font-size:var(--fs-4xl); font-weight:800; color:var(--clr-text); line-height:1.15; margin-bottom:var(--space-md); letter-spacing:-0.02em; }
.section-header__text { font-size:var(--fs-lg); color:var(--clr-text-mid); max-width:560px; margin-inline:auto; line-height:1.7; }
.section-header--left .section-header__text { margin-inline:0; }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-sm); padding:0.875rem 1.875rem; font-size:var(--fs-base); font-weight:600; line-height:1; border-radius:var(--radius-lg); border:2px solid transparent; transition:all var(--transition); text-decoration:none; cursor:pointer; white-space:nowrap; letter-spacing:0.01em; }
.btn--primary { background:var(--clr-accent); color:var(--clr-white); border-color:var(--clr-accent); }
.btn--primary:hover,.btn--primary:focus-visible { background:var(--clr-accent-dark); border-color:var(--clr-accent-dark); transform:translateY(-2px); box-shadow:var(--shadow-orange); }
.btn--outline { background:transparent; color:var(--clr-white); border-color:rgba(255,255,255,0.45); }
.btn--outline:hover,.btn--outline:focus-visible { background:rgba(255,255,255,0.1); border-color:var(--clr-white); transform:translateY(-2px); }
.btn--full { width:100%; }
.btn--blue { background:var(--clr-primary); color:var(--clr-white); border-color:var(--clr-primary); }
.btn--blue:hover,.btn--blue:focus-visible { background:var(--clr-primary-dark); border-color:var(--clr-primary-dark); transform:translateY(-2px); box-shadow:var(--shadow-blue); }

.btn__loader { display:none; width:18px; height:18px; border:2.5px solid rgba(255,255,255,0.3); border-top-color:var(--clr-white); border-radius:var(--radius-full); animation:spin 0.7s linear infinite; }
.btn__loader:not([hidden]) { display:inline-block; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Back-to-Top */
.back-to-top { position:fixed; bottom:var(--space-xl); right:var(--space-xl); width:46px; height:46px; background:var(--clr-primary); color:var(--clr-white); border-radius:var(--radius-full); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-blue); z-index:999; transition:all var(--transition); opacity:0; transform:translateY(16px); }
.back-to-top[hidden] { display:flex; pointer-events:none; }
.back-to-top:not([hidden]) { opacity:1; transform:translateY(0); pointer-events:auto; }
.back-to-top:hover,.back-to-top:focus-visible { background:var(--clr-primary-dark); transform:translateY(-3px); }

/* WhatsApp */
.whatsapp-float { position:fixed; bottom:var(--space-xl); left:var(--space-xl); width:54px; height:54px; background:#25d366; color:var(--clr-white); border-radius:var(--radius-full); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(37,211,102,0.4); z-index:999; transition:all var(--transition); text-decoration:none; }
.whatsapp-float:hover,.whatsapp-float:focus-visible { background:#1da851; transform:translateY(-3px) scale(1.05); box-shadow:0 8px 24px rgba(37,211,102,0.5); }

/* ==========================================================
   COOKIE BANNER – DSGVO
   ========================================================== */
.cookie-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 13, 26, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9000;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.cookie-overlay[hidden] { display: none; }
.cookie-overlay--visible { opacity: 1; }

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9001;
  padding: var(--space-lg) var(--space-lg) var(--space-xl);
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.08, 0.64, 1), opacity 0.35s ease;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner--visible { transform: translateY(0); opacity: 1; }

.cookie-banner__box {
  max-width: 900px;
  margin-inline: auto;
  background: var(--clr-white);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  box-shadow: 0 -8px 48px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--clr-primary) 0%, var(--clr-accent) 100%) 1;
}

.cookie-banner__inner {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  padding: var(--space-xl) var(--space-2xl);
}

.cookie-banner__icon {
  width: 52px;
  height: 52px;
  min-width: 52px;
  background: linear-gradient(135deg, var(--clr-primary-light) 0%, #d4eded 100%);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  border: 1px solid rgba(13, 138, 138, 0.2);
}

.cookie-banner__text { flex: 1; }

.cookie-banner__title {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--clr-secondary);
  margin-bottom: var(--space-xs);
}

.cookie-banner__desc {
  font-size: var(--fs-sm);
  color: var(--clr-text-mid);
  line-height: 1.65;
}

.cookie-banner__desc a {
  color: var(--clr-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}
.cookie-banner__desc a:hover { color: var(--clr-primary-dark); }

.cookie-banner__actions {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  flex-shrink: 0;
}

.cookie-banner__btn {
  padding: 0.7rem 1.5rem;
  border-radius: var(--radius-lg);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  border: 2px solid transparent;
}

.cookie-banner__btn--accept {
  background: var(--clr-accent);
  color: var(--clr-white);
  border-color: var(--clr-accent);
}
.cookie-banner__btn--accept:hover,
.cookie-banner__btn--accept:focus-visible {
  background: var(--clr-accent-dark);
  border-color: var(--clr-accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(232, 115, 26, 0.35);
}

.cookie-banner__btn--decline {
  background: transparent;
  color: var(--clr-text-mid);
  border-color: var(--clr-border);
}
.cookie-banner__btn--decline:hover,
.cookie-banner__btn--decline:focus-visible {
  background: var(--clr-bg-alt);
  border-color: var(--clr-text-light);
  color: var(--clr-text);
}

/* Mobile Cookie Banner */
@media (max-width: 640px) {
  .cookie-banner { padding: var(--space-md) var(--space-md) var(--space-lg); }

  .cookie-banner__box {
    border-radius: 18px 18px 0 0;
  }

  .cookie-banner__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg);
  }

  .cookie-banner__icon { width: 44px; height: 44px; font-size: 22px; }

  .cookie-banner__actions {
    width: 100%;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .cookie-banner__btn {
    width: 100%;
    text-align: center;
    min-height: 48px;
    font-size: var(--fs-base);
    justify-content: center;
    display: flex;
    align-items: center;
  }
}