:root{
--bg:#0b0b0c;
--text:#e9e9ee;
--muted:#b4b4c0;
--surface:#151518;
--surface-2:#1d1d22;
--border:#23232b;
--accent:#ff2ea6; /* Magenta */
--focus:#8be9fd;
--container:1120px;
--radius:14px;
}


/* Fonts */
@font-face{
font-family:'Sofia Sans';
src:url('/assets/fonts/SofiaSans-Regular.woff2') format('woff2');
font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
font-family:'Arizonia';
src:url('/assets/fonts/Arizonia-Regular.woff2') format('woff2');
font-weight:400; font-style:normal; font-display:swap;
}


/* Base */
body{font-family:'Sofia Sans',system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:radial-gradient(1200px 600px at 10% 0%, #111114, var(--bg) 60%);color:var(--text)}
.container{width:min(100% - 2rem,var(--container));margin-inline:auto}
.section{padding:4rem 0}
.grid{display:grid;gap:1.25rem}
.cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.cards-3{grid-template-columns:1fr}}


/* Header */
.site-header{position:sticky;top:0;background:rgba(11,11,12,.75);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);z-index:50}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0}
.brand{font-weight:700;letter-spacing:.3px;text-decoration:none;color:var(--text)}
.site-nav ul{display:flex;gap:.75rem;align-items:center;margin:0;padding:0;list-style:none}
.site-nav a{color:var(--muted);text-decoration:none;padding:.5rem .75rem;border-radius:.6rem}
.site-nav a:hover,.site-nav a:focus{color:var(--text);background:#1a1a20}
.nav-toggle{display:none}
@media (max-width:900px){
.nav-toggle{display:inline-flex;background:transparent;color:var(--text);border:1px solid var(--border);padding:.4rem .6rem;border-radius:.6rem}
.site-nav{display:none}
.site-nav.open{display:block;position:absolute;right:1rem;top:3.2rem;background:var(--surface);padding:.5rem;border-radius:.8rem;border:1px solid var(--border)}
.site-nav ul{flex-direction:column;align-items:stretch}
}


/* Hero */
.hero{padding:6rem 0 4rem;text-align:center}
.display{font-size:clamp(1.8rem,2.6vw + 1rem,2.6rem);line-height:1.15;margin:.5rem 0 1rem}
.accent-underline{background:linear-gradient(180deg,transparent 70%, rgba(255,46,166,.3) 0)}
.lead{font-size:1.125rem;color:var(--muted);max-width:60ch;margin:0 auto 1.5rem}
.actions{display:flex;justify-content:center;gap:1rem}


/* Signature Name (Arizonia) – Magenta + weißer Glanz-Sweep */
.hero-signature{font-family:'Arizonia', cursive; font-weight:400; font-size:clamp(2.8rem,7vw,5rem); letter-spacing:.2px;
color:transparent; background:linear-gradient(90deg, var(--accent) 0%, var(--accent) 42%, #fff 50%, var(--accent) 58%, var(--accent) 100%);
background-size:200% 100%; -webkit-background-clip:text; background-clip:text;
animation:sweep 8s ease-in-out infinite; text-shadow:0 0 .75rem rgba(255,46,166,.25)}
@keyframes sweep{0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%}}


/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.65rem 1rem;border-radius:.8rem;border:1px solid var(--border);color:var(--text);text-decoration:none;background:var(--surface)}
.btn:hover{background:var(--surface-2)}
.btn-primary{background:linear-gradient(180deg, var(--accent), #d11683); color:#fff; border:none; box-shadow:0 8px 22px rgba(255,46,166,.2)}
.btn-primary:hover{filter:brightness(.98)}


/* Cards */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem}
.card--package .badge{text-align:center;align-items:center;display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:999px;border:1px solid var(--border);background:var(--surface-2);color:var(--muted);margin-bottom:.5rem}



/* CTA & Footer */
/* Section bleibt full-width */
.cta{
  position: relative;
  padding: 3rem 0;
  border-top: 1px solid var(--border);
}

/* Glow: Breite = Container, zentriert */
.cta::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--container);
  max-width: calc(100% - 2rem); /* wie .container */
  height: 240px;
  pointer-events: none;
  z-index: 0;

  /* eigentlicher Glow */
  background:
    radial-gradient(
      1020px 250px at calc(100% - 120px) 0,
      rgba(255,46,166,.10) 0%,
      rgba(255,46,166,.06) 35%,
      rgba(255,46,166,.03) 55%,
      transparent 70%
    );

  /* SYMMETRISCHE, WEICHE Seiten-Maske – gleicher Charakter wie der Glow-Falloff */
  /* WebKit/Safari */
  -webkit-mask-image: linear-gradient(
    to right,
      rgba(0,0,0,0)   0%,
      rgba(0,0,0,.25) 6%,
      rgba(0,0,0,.55) 12%,
      rgba(0,0,0,.80) 18%,
      rgba(0,0,0,1)   24%,
      rgba(0,0,0,1)   76%,
      rgba(0,0,0,.80) 82%,
      rgba(0,0,0,.55) 88%,
      rgba(0,0,0,.25) 94%,
      rgba(0,0,0,0)   100%
  );
  /* Standard */
  mask-image: linear-gradient(
    to right,
      rgba(0,0,0,0)   0%,
      rgba(0,0,0,.25) 6%,
      rgba(0,0,0,.55) 12%,
      rgba(0,0,0,.80) 18%,
      rgba(0,0,0,1)   24%,
      rgba(0,0,0,1)   76%,
      rgba(0,0,0,.80) 82%,
      rgba(0,0,0,.55) 88%,
      rgba(0,0,0,.25) 94%,
      rgba(0,0,0,0)   100%
  );
}

/* Inhalt über dem Glow */
.cta .container{ position: relative; z-index: 1; }
.site-footer{padding:2rem 0;border-top:1px solid var(--border);background:#0a0a0d;color:var(--muted)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1rem}
.footer-grid a{color:var(--muted);text-decoration:none}
.footer-grid a:hover{color:var(--text)}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr}}


/* Accessibility */
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:1rem;top:1rem;background:var(--focus);color:#000;padding:.5rem .75rem;border-radius:.5rem}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* === Media Hero (überlappend, versetzt) === */
.media-hero{
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr; /* Bild leicht größer */
  align-items: start;
  gap: 2.2rem;
}

/* Bildblock */
.media-hero__img{
  margin: 0;
  position: relative;
  z-index: 2;                      /* liegt über der Karte */
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.media-hero__img img{
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4/5;               /* Portrait-Zuschnitt */
  object-fit: cover;
}

/* Textkarte – leicht nach unten versetzt, vom Bild überlappt */
.media-hero__card{
  position: relative;
  z-index: 1;                      /* unter dem Bild */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 2.25rem;
  box-shadow: 0 14px 36px rgba(0,0,0,.35);
  margin-top: 3rem;              /* VERSATZ nach unten */
  /* Überlappung: Karte etwas unter das Bild schieben */
  transform: translateX(-3rem);  /* negative X, damit Bild „reinschneidet“ */
}

/* Titel + kleine Akzentlinie wie im Screenshot-Stil */
.media-hero__title{
  margin: 0 0 .5rem;
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.8rem);
  line-height: 1.2;
}
.media-hero__title::after{
  content: "";
  display: block;
  width: 64px; height: 3px;
  margin-top: .55rem;
  background: var(--accent);
  border-radius: 3px;
}

.media-hero__actions{ display: flex; gap: .75rem; margin-top: 1rem; }

/* Responsiv: stapeln & Überlappung zurücknehmen */
@media (max-width: 1024px){
  .media-hero{
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .media-hero__card{
    transform: none;
    margin-top: -1rem;             /* kleiner „Überlapp“-Look bleibt erhalten */
  }
  .media-hero__img img{
    aspect-ratio: 16/10;           /* mobil etwas breiterer Zuschnitt */
    object-position: 50% 15%;  /* Kopf oben priorisieren */
  }
}

/* Motion-Respekt (falls du später Übergänge ergänzt) */
@media (prefers-reduced-motion: reduce){
  .media-hero__card{ transition: none; }
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text); /* Icon-Farbe */
  text-decoration: none;
  transition: background .2s, color .2s;
}

.social-icon:hover {
  background: var(--accent);
  color: #fff;
}

/* Testimonials Slider (scoped) */
.slider-testimonials{
  --bg:#121212;
  --panel:#1c2127;
  --panel-2:#1a1f25;
  --text:#e8edf2;
  --muted:#a8b3bf;
  --brand:#7bd7ff;
  --ring:#39424d;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --maxw:1100px;
  color:var(--text);
}
.slider-testimonials .section small{color:var(--muted)}
.slider-testimonials .slider{
  max-width:var(--maxw);
  margin:0 auto 64px;
  padding:0 16px 16px;
  position:relative;
}
.slider-testimonials .viewport{overflow:hidden;border-radius:calc(var(--radius) + 4px)}
.slider-testimonials .track{display:flex;transition:transform .525s cubic-bezier(.22,.61,.36,1);will-change:transform}
.slider-testimonials .slide{
  min-width:100%;padding:18px;display:grid;gap:18px;align-items:stretch;grid-template-columns:1fr 1fr;
  background:linear-gradient(180deg, #14171c 0%, #0f1216 100%);
  border-radius:calc(var(--radius) + 4px);
}
.slider-testimonials .card{
  background:linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border:1px solid var(--ring);border-radius:var(--radius);padding:clamp(16px,2.8vw,26px);box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:space-between;
}
.slider-testimonials .quote{font-size:clamp(14px,1.6vw,15.5px);line-height:1.6}
.slider-testimonials .quote::before, .slider-testimonials .quote::after{content:"\00BB"; color:var(--brand); margin:0 .1em}
.slider-testimonials .author{margin-top:22px;font-size:12px;letter-spacing:.2px;color:var(--muted)}
.slider-testimonials .photo{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--ring);background:#090b0e center/cover no-repeat;min-height:100px;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;isolation:isolate}
.slider-testimonials .photo img{width:100%;height:100%;object-fit:cover;display:block}
.slider-testimonials .controls{position:absolute;inset:0;pointer-events:none}
.slider-testimonials .nav{
  position:absolute;top:50%;transform:translateY(-50%);pointer-events:auto;display:grid;place-items:center;width:42px;height:42px;border-radius:999px;border:1px solid var(--ring);
  background:#0d1117;color:#cfe7ff;box-shadow:0 8px 18px rgba(0,0,0,.35);cursor:pointer;transition:transform .15s ease, opacity .15s ease, background .15s ease
}
.slider-testimonials .nav:hover{transform:translateY(-50%) scale(1.04)}
.slider-testimonials .nav:active{transform:translateY(-50%) scale(.98)}
.slider-testimonials .prev{left:8px}
.slider-testimonials .next{right:8px}
.slider-testimonials .dots{display:flex;gap:8px;justify-content:center;margin:14px 0 0}
.slider-testimonials .dot{width:6px;height:6px;border-radius:999px;background:#3a4653;opacity:.7;transition:all .25s ease;border:0;cursor:pointer}
.slider-testimonials .dot[aria-current="true"]{width:18px;opacity:1;background:#cfe7ff}
.slider-testimonials .section{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:8px}
.slider-testimonials h2{font-weight:800;letter-spacing:.3px;text-align:center;margin:28px 0 12px;font-size:clamp(20px,2.5vw,28px)}

@media (max-width: 860px){
  .slider-testimonials .slide{grid-template-columns:1fr;padding:12px}
  .slider-testimonials .photo{min-height:220px;}
  .slider-testimonials .nav{display:none}
  .slider-testimonials .slider{padding-left:10px;padding-right:10px}
}
.slider-testimonials .nav:focus-visible, .slider-testimonials .dot:focus-visible{outline:3px solid #99d1ff;outline-offset:2px}