:root{
  --bg:#0b0b0c; --text:#eaeaea;
  --accent-orange:#ff7300; --accent-gold:#c2a05b; --accent-green:#59ffa0; --accent-almond:#ecdcc9; --accent-blue:#1a00ff;
  --header-opacity:.6;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:400 18px/1.6 "Roboto",system-ui,-apple-system,Segoe UI,Arial,sans-serif}
img{max-width:100%;height:auto;display:block}
.container{width:min(1100px,92vw);margin:auto;padding:28px}

/* Header */
.site-header{position:sticky;top:0;background:rgba(0,0,0,1);transition:all .3s ease;z-index:100}
.header-inner{display:flex;align-items:center;gap:18px;justify-content:space-between;height:100px;transition:height .3s ease,padding .3s ease}
.brand{display:flex;gap:12px;align-items:center;color:#fff;text-decoration:none;font-weight:700}
.brand-logo{height:56px;width:56px;transition:transform .3s ease,height .3s ease,width .3s ease}
.nav{display:flex;gap:18px;align-items:center}
.nav-list{list-style:none;margin:0;padding:0;display:flex;gap:22px}
.nav-list a{color:#fff;text-decoration:none}
.social{list-style:none;display:flex;gap:14px;margin:0;padding:0}
.social-header .icon-link{color:#fff}
.site-header.scrolled{background:rgba(0,0,0,var(--header-opacity));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.site-header.scrolled .header-inner{height:70px}
.site-header.scrolled .brand-logo{transform:scale(.86)}

/* Icons */
.icon-link{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:4px;transition:transform .18s ease,color .18s ease;outline:0;color:currentColor}
.icon-link:hover{transform:scale(1.08)}
.icon-link:focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.25), 0 0 0 5px rgba(26,0,255,.5)}
.social-footer .icon-link{color:#111}
.social-footer .icon-link:focus-visible{box-shadow:0 0 0 3px rgba(0,0,0,.2), 0 0 0 5px rgba(26,0,255,.25)}
.social-header .icon-link.ig:hover{color:#ff7300}
.social-header .icon-link.tt:hover{color:#00f2ea}
.social-header .icon-link.in:hover{color:#1a00ff}
.social-footer .icon-link.ig:hover{color:#ff7300}
.social-footer .icon-link.tt:hover{color:#00f2ea}
.social-footer .icon-link.in:hover{color:#1a00ff}

/* Hero */
.hero{position:relative;overflow:hidden;min-height:75vh}
.hero .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr;align-items:center;min-height:75vh}
.hero-copy h1{font-family:"Inter",sans-serif;font-weight:800;font-size:clamp(28px,4.4vw,58px);line-height:1.1;margin:0 0 16px}
.btn{display:inline-flex;gap:10px;align-items:center;justify-content:center;padding:14px 22px;border-radius:16px;background:var(--accent-orange);border:2px solid var(--accent-green);color:#fff;text-decoration:none;font-weight:700;transition:transform .18s ease, box-shadow .18s ease, filter .18s ease}
.btn:hover{transform:translateY(-1px) scale(1.035);box-shadow:0 12px 22px rgba(0,0,0,.36)}
.btn:active{transform:translateY(0) scale(.985);box-shadow:0 8px 16px rgba(0,0,0,.28);filter:brightness(.98)}
.hero-sub{margin:.9rem 0 0 0;font-weight:800;color:var(--accent-green);}

/* Sections base */
.section{padding:120px 0}
.divider{display:block;height:6px;border-radius:999px;margin:16px auto 24px;opacity:.9}
.divider.gold{background:linear-gradient(90deg, var(--accent-green), var(--accent-blue))}
.divider.almond{background:linear-gradient(90deg, var(--accent-green), var(--accent-orange))}

/* Paper backgrounds with your images (kept from v2.4) */
.section.paper{color:#fff; position:relative}
.section.paper.paper-wow{background:linear-gradient(0deg, rgba(0,0,0,.2), rgba(0,0,0,.2)), url('./Wow Bämm Spam.jpg') center/cover no-repeat}
.section.paper.paper-curious{background:linear-gradient(0deg, rgba(0,0,0,.22), rgba(0,0,0,.22)), url("./Neugierig, was wir anbiten.jpg") center/cover no-repeat}

/* Unified framed card look (like Leistungen) */
.framed, .paper-card, .about-text{
  border-radius:28px;
  padding:36px;
  border:3px solid rgba(0,0,0,.65);
  box-shadow:0 16px 30px rgba(0,0,0,.28);
  background:linear-gradient(135deg, rgba(26,0,255,.5), rgba(255,115,0,.5));
  margin: 22px 0 32px;
}
.paper-card h2, .about-text h2{font:800 34px/1.15 "Inter", sans-serif}

/* About media remains */
.about-section{background:linear-gradient(0deg, rgba(0,0,0,.12), rgba(0,0,0,.12)), var(--about-bg, transparent); background-size:cover;background-position:center}
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:start}
.about-media{display:flex;flex-direction:column;gap:14px}
.about-media img{border-radius:24px;border:2px solid #000;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.about-media figcaption{margin-top:12px; font:600 16px/1.35 "Inter", sans-serif; color:#fff; display:inline-block; padding:10px 14px; border-radius:14px; background:linear-gradient(135deg, rgba(26,0,255,.75), rgba(255,115,0,.75)); box-shadow:0 10px 22px rgba(0,0,0,.3);}

/* Leistungen */
.leistungen-section{background:linear-gradient(0deg, rgba(0,0,0,.18), rgba(0,0,0,.18)), url('./Leistungen Background.jpg') center/cover no-repeat}
.band-title{display:flex;justify-content:center;margin:12px 0 26px}
.band-title span{display:inline-block;padding:18px 30px;border-radius:999px;background:linear-gradient(90deg, rgba(26,0,255,.55), rgba(255,115,0,.55));border:3px solid rgba(0,0,0,.6);box-shadow:0 10px 28px rgba(0,0,0,.28);font:800 42px/1.1 "Inter",sans-serif; color:#fff}
.packages{display:grid;gap:24px;margin-bottom:32px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-1{grid-template-columns:1fr}
.pkg h4{margin:6px 0 10px;font:800 26px/1.2 "Inter",sans-serif}
.pkg ul{margin:0 0 8px 0;padding-left:18px}
.pkg .meta{opacity:.9;margin:12px 0 16px}
.line{height:6px;border-radius:999px;background:linear-gradient(90deg, var(--accent-green), var(--accent-orange));margin:30px 0}

/* Footer */
.site-footer{background:#e7dbc8;color:#111}
.footer-grid{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center}
.footer-grid a{color:#111}

/* Responsive */
@media (max-width:980px){
  .section{padding:80px 0}

  .header-inner{height:84px}
  .site-header.scrolled .header-inner{height:64px}
  .hero{min-height:60vh}
  .hero-grid{min-height:60vh}
  .about-grid{grid-template-columns:1fr}
  .about-media{order:-1}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  body{font-size:17px}
}

/* v2.7.1 readability tweaks */
.framed p, .paper-card p, .about-text p, .pkg p,
.framed li, .paper-card li, .about-text li, .pkg li { line-height: 1.7; }
.framed ul, .paper-card ul, .about-text ul, .pkg ul { margin: 0.4rem 0 0.8rem 1.1rem; }
.framed li, .paper-card li, .about-text li, .pkg li { margin: 0.15rem 0; }

@media (max-width:980px){
  .section{padding:80px 0}

  .btn{ padding:16px 26px; min-height:48px; }
}

/* v2.7.2 gold cards for About + Deliver */
.gold-card{ border-radius:28px; padding:36px; border:3px solid rgba(0,0,0,.65); box-shadow:0 16px 30px rgba(0,0,0,.28); background: linear-gradient(135deg, rgba(210,175,90,.5), rgba(240,215,160,.5)); position:relative; overflow:hidden; }
/* deliver section background */
.section.paper.paper-deliver{
  background: linear-gradient(0deg, rgba(0,0,0,.2), rgba(0,0,0,.2)), url("./Was wir liefern.jpg") center/cover no-repeat;
}

/* v2.7.3 adjustments */
.gold-card{ border-radius:28px; padding:36px; border:3px solid rgba(0,0,0,.65); box-shadow:0 16px 30px rgba(0,0,0,.28); background: linear-gradient(135deg, rgba(210,175,90,.5), rgba(240,215,160,.5)); position:relative; overflow:hidden; color: #000 !important;
}
.gold-card h2, .gold-card p, .gold-card li, .gold-card strong, .gold-card em { color: #000 !important; }

/* v2.7.6: Explicit WOW card text color */
.section.paper.paper-wow .paper-card { color: #fff; }
.section.paper.paper-wow .paper-card h2,
.section.paper.paper-wow .paper-card p,
.section.paper.paper-wow .paper-card li,
.section.paper.paper-wow .paper-card strong,
.section.paper.paper-wow .paper-card em { color: #fff; }

/* v2.7.6: Button hover glow */
.btn{ position: relative; isolation: isolate; }
.btn:hover{
  box-shadow:
    0 0 18px rgba(26,0,255,.5),
    0 0 28px rgba(255,115,0,.5),
    0 12px 22px rgba(0,0,0,.36);
}
/* slightly reduced glow on active */
.btn:active{
  box-shadow:
    0 0 12px rgba(26,0,255,.28),
    0 0 18px rgba(255,115,0,.28),
    0 8px 16px rgba(0,0,0,.28);
}

/* warmer glow in gold sections */
.gold-card .btn:hover,
.section.paper.paper-deliver .btn:hover{
  box-shadow:
    0 0 18px rgba(194,160,91,.40),
    0 0 26px rgba(236,220,201,.5),
    0 12px 22px rgba(0,0,0,.34);
}
.gold-card .btn:active,
.section.paper.paper-deliver .btn:active{
  box-shadow:
    0 0 12px rgba(194,160,91,.32),
    0 0 18px rgba(236,220,201,.28),
    0 8px 16px rgba(0,0,0,.28);
}

/* v2.7.6: Subtle shimmer for gold cards */
.gold-card{ position: relative; overflow: hidden; }
.gold-card::after{
  content: "";
  position: absolute;
  inset: -10%;
  background: linear-gradient(120deg, transparent 45%, rgba(255,255,255,.18) 50%, transparent 55%);
  transform: translateX(-120%);
  animation: sliceShimmer 5.5s ease-in-out infinite;
  pointer-events: none;
  border-radius: inherit;
  mix-blend-mode: screen;
  opacity: .6;
}
@keyframes sliceShimmer{
  0%{ transform: translateX(-120%) rotate(0.001deg); }
  55%{ transform: translateX(10%) rotate(0.001deg); }
  100%{ transform: translateX(120%) rotate(0.001deg); }
}
@media (prefers-reduced-motion: reduce){
  .gold-card::after{ animation: none; opacity: 0; }
}

/* =========================
   v2.7.7 HARD SECTION STYLES
   Make blocks robust regardless of classes left behind
   ========================= */
.section.paper.paper-wow .paper-card{
  background: linear-gradient(135deg, rgba(26,0,255,.5), rgba(255,115,0,.5)) !important;
  color:#fff !important;
}
.section.paper.paper-wow .paper-card h2,
.section.paper.paper-wow .paper-card p,
.section.paper.paper-wow .paper-card li,
.section.paper.paper-wow .paper-card strong,
.section.paper.paper-wow .paper-card em{ color:#fff !important; }

.section.paper.paper-deliver .paper-card,
.about-text{
  background: linear-gradient(135deg, rgba(194,160,91,.5), rgba(236,220,201,.5)) !important;
  color:#000 !important;
}
.section.paper.paper-deliver .paper-card h2,
.section.paper.paper-deliver .paper-card p,
.section.paper.paper-deliver .paper-card li,
.section.paper.paper-deliver .paper-card strong,
.section.paper.paper-deliver .paper-card em,
.about-text h2, .about-text p, .about-text li, .about-text strong, .about-text em{
  color:#000 !important;
}

/* v2.7.8 specific heading emphasis for 'Was wir liefern' section */
.section.paper.paper-deliver .paper-card h3{
  font:800 1.6em/1.3 "Inter",sans-serif;
  margin:18px 0 10px;
}

/* v2.7.9: glossy overlay for gold cards */
.gold-card::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(160deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.10) 12%, rgba(255,255,255,0) 38%);
  pointer-events:none;
  mix-blend-mode: screen;
}

/* v2.7.9: Deliver block H3 styling */
.section.paper.paper-deliver .paper-card h3{
  font:800 1.6em/1.25 "Inter",sans-serif;
  margin:18px 0 12px;
  position:relative;
}
.section.paper.paper-deliver .paper-card h3::after{
  content:"";
  display:block;
  height:4px;
  width:72px;
  border-radius:999px;
  margin:8px 0 2px;
  background: linear-gradient(90deg, rgba(210,175,90,1), rgba(240,215,160,1));
}
.section.paper.paper-deliver .paper-card h3 + p{ margin-top: 8px; }


/* v2.9.6: Spacers restored + fixed CTA placement + color/transparency parity */

/* Keep spacers rendered */
.spacer { display:block; height:30px; min-height:30px; position:relative; overflow:hidden; }
.spacer::before { content:""; display:block; height:30px; width:100%; visibility:hidden; }
.spacer-video-bg { background: linear-gradient(180deg, #000000 0%, #c2a05b 100%); }
.spacer-wow-ueberuns { background: linear-gradient(180deg, #c2a05b 0%, #ecdcc0 100%); }
.spacer-neugierig-liefern { background: linear-gradient(180deg, #c2a05b 0%, #ecdcc0 100%); }
.spacer-liefern-leistung { background: linear-gradient(180deg, #ecdcc0 0%, #c2a05b 100%); }
/* lighter neutral spacer between image-BGs */
.spacer-bg { background: linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(212,175,91,0.08) 100%); }

/* Caption cards: blue→orange, with slight transparency & border like WOW */
.about-section .about-media .caption-card.paper-card {
  background: linear-gradient(135deg, rgba(26,0,255,0.92) 0%, rgba(255,115,0,0.92) 100%);
  color: #ffffff;
  border: 2px solid #1a00ff;
  border-radius: 24px;
  padding: 14px 18px;
  text-align:center;
  box-shadow: 0 6px 24px rgba(0,0,0,0.15), inset 0 0 0 1px rgba(255,255,255,0.08);
}
.about-section .about-media .caption-card.paper-card > * { color:#ffffff; text-align:center; }

/* Buttons under cards */
.caption-actions { margin-top: 12px; text-align:center; }
.btn-slice {
  display:inline-block;
  padding: 11px 18px;
  border-radius: 999px;
  text-decoration:none;
  font-weight:700;
  line-height:1;
  background: linear-gradient(135deg, #1a00ff 0%, #FF7300 100%);
  color:#fff;
  border: 2px solid #1a00ff;
  /* glow + popup */
  box-shadow: 0 10px 24px rgba(26,0,255,0.35), 0 0 0 rgba(255,115,0,0);
  transform: translateZ(0);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.btn-slice:hover {
  transform: scale(1.045);
  box-shadow: 0 16px 36px rgba(26,0,255,0.45), 0 0 26px rgba(255,115,0,0.35);
  filter: saturate(1.1);
}
.btn-slice:active {
  transform: scale(0.985);
  box-shadow: 0 8px 18px rgba(26,0,255,0.35);
}

/* Scroll offset so #leistungen aligns under transparent header */
.leistungen-section, #leistungen { scroll-margin-top: 90px; }
@media (max-width:640px){ .leistungen-section, #leistungen { scroll-margin-top: 64px; } }


/* v2.9.7: Feinschliff – weichere Verläufe, Abstände, Fokus-States, mobile Tweaks */

/* Spacers: etwas weicher und konsistenter */
.spacer-video-bg { background: linear-gradient(180deg, #000000 0%, #c2a05b 100%); }
.spacer-wow-ueberuns { background: linear-gradient(180deg, #c2a05b 0%, #ecdcc0 100%); }
.spacer-neugierig-liefern { background: linear-gradient(180deg, #c2a05b 0%, #ecdcc0 100%); }
.spacer-liefern-leistung { background: linear-gradient(180deg, #ecdcc0 0%, #c2a05b 100%); }
.spacer-bg { background: linear-gradient(180deg, rgba(0,0,0,0.06) 0%, rgba(212,175,91,0.06) 100%); }

/* Caption-Cards: leichte Transparenz, gleichmäßiger Glow, dezenter Rand */
.about-section .about-media .caption-card.paper-card,
.section.sunset .about-media .caption-card.paper-card {
  background: linear-gradient(135deg, rgba(26,0,255,0.92) 0%, rgba(255,115,0,0.92) 100%);
  border: 2px solid #1a00ff;
  box-shadow:
    0 8px 28px rgba(0,0,0,0.18),
    inset 0 0 0 1px rgba(255,255,255,0.08);
  backdrop-filter: saturate(110%);
}

/* Buttons: Abstand, Hover-Glow/Popup, Fokus für Tastatur */
.caption-actions { margin-top: 14px; text-align:center; }
.btn-slice {
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 700;
  background: linear-gradient(135deg, #1a00ff 0%, #FF7300 100%);
  color: #fff;
  border: 2px solid #1a00ff;
  box-shadow:
    0 10px 24px rgba(26,0,255,0.30),
    0 0 0 rgba(255,115,0,0);
  transform: translateZ(0);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.btn-slice:hover {
  transform: scale(1.05);
  box-shadow:
    0 18px 38px rgba(26,0,255,0.45),
    0 0 28px rgba(255,115,0,0.35);
  filter: saturate(1.08);
}
.btn-slice:active {
  transform: scale(0.985);
  box-shadow: 0 8px 20px rgba(26,0,255,0.35);
}
.btn-slice:focus-visible {
  outline: 0;
  box-shadow:
    0 0 0 3px rgba(26,0,255,0.35),
    0 0 0 6px rgba(255,115,0,0.35),
    0 12px 28px rgba(26,0,255,0.35);
}

/* Mobile Spacing */
@media (max-width: 640px) {
  .caption-actions { margin-top: 12px; }
  .btn-slice { padding: 11px 18px; }
}

/* Anchor Offset bleibt */
.leistungen-section, #leistungen { scroll-margin-top: 90px; }
@media (max-width:640px){ .leistungen-section, #leistungen { scroll-margin-top: 64px; } }