/* ============================================================
   Mathematik Atelier — Stylesheet
   Design tokens mirror the existing Elementor build:
   off-white paper bg, black headlines, brand red accent,
   Space Grotesk throughout.
   Breakpoints: 600 / 900 / 1200 px (mobile-first)
   ============================================================ */

:root {
  --bg:#FBFBFB;
  --bg-soft:#F3F3F3;
  --ink:#000000;
  --ink-soft:#333333;
  --muted:#787878;
  --muted-2:#69727D;
  --line:#E5E5E5;
  --line-strong:#D9D9D9;

  --red:#8FB8DD;
  --red-dark:#5C8EBA;
  --red-tint:#E8F0F8;

  --wa:#25D366;
  --wa-dark:#128C7E;

  --radius:8px;
  --radius-lg:14px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.04);
  --shadow:0 8px 28px rgba(0,0,0,.08);
  --shadow-red:0 14px 40px rgba(143,184,221,.45);

  --transition:all .25s ease;
  --container:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; padding:0;
  font-family:'Space Grotesk', system-ui, -apple-system, sans-serif;
  font-size:16px; line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--ink); text-decoration:none; transition:var(--transition)}
a:hover{color:var(--red)}
img,svg{max-width:100%; height:auto; display:block}
h1,h2,h3,h4{margin:0; font-weight:500; line-height:1.05; letter-spacing:-.01em; color:var(--ink)}
p{margin:0 0 1em}
ul{margin:0; padding:0; list-style:none}

/* ── Containers ─── */
.container{max-width:var(--container); margin:0 auto; padding:0 24px}
@media (min-width:900px){ .container{padding:0 48px} }

/* ── Eyebrow / kicker label ─── */
.eyebrow{
  font-size:14px; font-weight:400; letter-spacing:.01em;
  color:var(--muted); margin-bottom:16px;
}

/* ============================================================
   Top nav — transparent over hero, solid after scroll
   ============================================================ */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:18px 0;
  background:transparent;
  transition:padding .3s ease;
}
/* Background + blur live on a pseudo-element so the nav itself never
   creates a containing block for its fixed-positioned mobile menu. */
.site-nav::before{
  content:''; position:absolute; inset:0;
  background:rgba(251,251,251,0);
  box-shadow:0 1px 0 rgba(0,0,0,0);
  transition:background-color .3s ease, box-shadow .3s ease;
  pointer-events:none;
  z-index:-1;
}
.site-nav.scrolled{padding:12px 0}
.site-nav.scrolled::before{
  background:rgba(251,251,251,.94);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
          backdrop-filter:saturate(180%) blur(12px);
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}
.nav-inner{
  max-width:var(--container); margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
@media (min-width:900px){ .nav-inner{padding:0 48px} }

.nav-brand{display:flex; align-items:center; gap:10px}
.nav-brand img{height:42px; width:auto}
@media (min-width:900px){ .nav-brand img{height:56px} }

.nav-links{display:flex; align-items:center; gap:32px}
.nav-link{
  display:flex; flex-direction:column; align-items:flex-end; gap:2px;
  font-size:15px; color:var(--ink); padding:6px 0;
}
.nav-link .num{
  font-size:11px; color:var(--muted); letter-spacing:.04em; line-height:1;
}
.nav-link .lbl{font-weight:500; line-height:1}
.nav-link.is-active .lbl{color:var(--red)}
.nav-link:hover .lbl{color:var(--red)}

/* Primary nav CTA — sends students to the planner subdomain */
.nav-cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 18px;
  background:var(--red); color:#fff;
  border:2px solid var(--red);
  border-radius:999px;
  font-size:14px; font-weight:500;
  letter-spacing:.01em;
  transition:transform .25s ease, box-shadow .25s ease,
             background-color .2s ease, color .2s ease;
  white-space:nowrap;
}
.nav-cta:hover,
.nav-cta:active{
  background:#fff; color:var(--red);
  transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(143,184,221,.35);
}
.nav-cta svg{width:16px; height:16px; flex-shrink:0}

.nav-toggle{
  display:none;
  width:42px; height:42px; align-items:center; justify-content:center;
  background:transparent; border:0; cursor:pointer;
  color:var(--ink);
}
.nav-toggle svg{width:24px; height:24px}

@media (max-width:899px){
  .nav-links{
    position:fixed; inset:0;
    background:var(--bg);
    flex-direction:column; align-items:center; justify-content:center;
    gap:32px;
    transform:translateX(100%); transition:transform .35s ease;
    z-index:99;
  }
  .nav-links.open{transform:translateX(0)}
  .nav-link{align-items:center; font-size:24px}
  .nav-link .num{font-size:13px}
  .nav-cta{padding:14px 24px; font-size:16px; margin-top:8px}
  .nav-toggle{display:inline-flex; z-index:101; position:relative}
}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative;
  padding:120px 0 80px;
  overflow:hidden;
}
@media (min-width:900px){
  .hero{padding:160px 0 100px}
}
.hero-inner{position:relative; z-index:2}
.hero h1{
  font-size:clamp(56px, 12.5vw, 168px);
  font-weight:500;
  line-height:.95;
  letter-spacing:-.02em;
  margin:0 0 48px;
}
.hero h1 .l1, .hero h1 .l2{display:block}
.hero h1 .l3{
  display:block;
  font-size:.42em;
  font-weight:400;
  letter-spacing:.02em;
  color:var(--ink);
  opacity:.85;
  margin-top:.18em;
}

/* Two-column body row beneath the H1 */
.hero-body{
  display:grid; grid-template-columns:1fr; gap:40px;
  align-items:start;
}
@media (min-width:900px){
  .hero-body{
    grid-template-columns: 1fr 300px;
    gap:80px;
    align-items:start;
  }
}

.hero-left{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:32px;
}
.hero-right{
  display:flex; flex-direction:column;
  gap:14px;
}
@media (min-width:900px){
  .hero-right{align-items:flex-end; text-align:right; padding-top:40px}
}

.hero-sub{
  font-size:15px; color:var(--ink-soft); line-height:1.55;
  margin:0; max-width:320px;
}
.hero-tagline{
  font-size:15px; color:var(--ink-soft); line-height:1.55;
  margin:0; width:100%; max-width:360px;
}

.hero-icons{
  display:flex; gap:18px;
}
.hero-icons a{
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; color:var(--ink);
}
.hero-icons a:hover{color:var(--red)}
.hero-icons svg{width:20px; height:20px}

/* Decorative orbital ellipses behind hero */
.hero-orbit{
  position:absolute; inset:0; pointer-events:none; z-index:1;
  display:flex; align-items:center; justify-content:center;
}
.hero-orbit svg{width:140%; height:auto; max-width:1600px; opacity:.7}

/* Rotating circular badge — uses rotation.svg (logo + circular text baked in).
   Clipped to a circle so corners don't show during rotation. */
.rot-badge{
  width:170px; height:170px; position:relative;
  margin:0;
}
.rot-badge img{
  width:100%; height:100%;
  border-radius:50%;
  clip-path:circle(50% at 50% 50%);
  animation:spin 22s linear infinite;
  transform-origin:50% 50%;
}
@keyframes spin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion: reduce){ .rot-badge img{animation:none} }

/* Blue CTA — pill shape, inverts to white bg / blue fg on hover & active */
.cta-circle{
  display:inline-block; padding:18px 38px;
  background:var(--red); color:#fff;
  border:3px solid #fff;
  border-radius:999px;
  font-family:inherit; font-size:16px; font-weight:500;
  letter-spacing:.01em; cursor:pointer;
  box-shadow:var(--shadow-red);
  transition:transform .3s ease, box-shadow .3s ease,
             background-color .2s ease, color .2s ease, border-color .2s ease;
}
.cta-circle:hover,
.cta-circle:active{
  background:#fff; color:var(--red); border-color:var(--red);
  transform:scale(1.04);
  box-shadow:0 18px 50px rgba(143,184,221,.55);
}

/* Full-width row to center the hero CTA across the page */
.hero-cta-row{
  text-align:center;
  margin-top:48px;
}

/* ── MOBILE-ONLY HERO LAYOUT ──
   Centered, compact, CTA brought above the fold.
   Desktop / tablet (>= 900px) is untouched. */
@media (max-width:899px){
  .hero{padding:96px 0 56px}

  .hero .eyebrow{text-align:left; margin-bottom:8px; font-size:13px}
  .hero h1{
    font-size:clamp(48px, 16vw, 88px);
    text-align:left;
    margin:0;
  }

  /* Mobile flow:
       eyebrow → H1 → badge → icons+sub (right) → tagline (left) → CTA
     Collapse hero-body / hero-left / hero-right with display:contents so
     every leaf is a direct child of hero-inner with its own `order`. */
  .hero-inner{
    display:flex; flex-direction:column;
    align-items:stretch; gap:16px;
  }
  .hero-body,
  .hero-left,
  .hero-right{display:contents}

  /* Badge sits directly under the H1, left-aligned, compact */
  .rot-badge{order:3; margin:0; width:108px; height:108px}

  /* Right block — icons + sub, right-aligned */
  .hero-icons{order:4; justify-content:flex-end; margin-top:4px}
  .hero-sub{order:5; max-width:320px; text-align:right; margin:0 0 0 auto; font-size:14px}

  /* Tagline left-aligned */
  .hero-tagline{order:6; max-width:340px; text-align:left; margin:8px 0 0; font-size:14px}

  /* CTA centered at bottom */
  .hero-cta-row{order:7; width:100%; margin:48px 0 0; text-align:center}

  /* Soften the orbital ellipses on mobile so they don't compete */
  .hero-orbit{opacity:.45}

  /* Subtle blue glow behind the hero on mobile to add visual depth */
  .hero::before{
    content:'';
    position:absolute; inset:auto -10% -20% -10%; height:55%;
    background:
      radial-gradient(50% 60% at 50% 30%, rgba(143,184,221,.28), transparent 70%);
    filter:blur(40px);
    z-index:0;
    pointer-events:none;
  }
}

/* Pill-shape blue CTA — inverts to white bg / blue fg on hover & active */
.btn-red{
  display:inline-block; padding:18px 38px;
  background:var(--red); color:#fff;
  border:3px solid #fff;
  border-radius:999px;
  font-family:inherit; font-size:16px; font-weight:500;
  letter-spacing:.01em; cursor:pointer;
  text-align:center;
  box-shadow:var(--shadow-red);
  transition:transform .3s ease, box-shadow .3s ease,
             background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn-red:hover,
.btn-red:active{
  background:#fff; color:var(--red); border-color:var(--red);
  transform:scale(1.04);
  box-shadow:0 18px 50px rgba(143,184,221,.55);
}

.btn-outline{
  display:inline-block; padding:16px 34px;
  background:transparent; color:var(--ink);
  border:1.5px solid var(--ink); border-radius:999px;
  font-family:inherit; font-size:16px; font-weight:500;
  cursor:pointer; transition:var(--transition);
}
.btn-outline:hover{background:var(--ink); color:#fff}

/* ============================================================
   Mega-headline section ("REGENSBURG")
   ============================================================ */
.mega{
  padding:60px 0 40px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  text-align:center;
}
.mega h2{
  /* scaled so "REGENSBURG" (10 chars) always fits container width */
  font-size:clamp(40px, 11.2vw, 180px);
  font-weight:500;
  line-height:.95;
  letter-spacing:-.03em;
  white-space:nowrap;
  text-align:center;
}
.mega-eyebrow{
  font-size:14px; color:var(--muted); margin-bottom:20px;
}

/* ============================================================
   Sections
   ============================================================ */
.section{padding:80px 0}
@media (min-width:900px){ .section{padding:120px 0} }
.section-title{
  font-size:clamp(36px, 5vw, 56px);
  font-weight:500; line-height:1.1; letter-spacing:-.02em;
  margin-bottom:24px;
}
.section-lead{
  font-size:18px; color:var(--ink-soft); max-width:680px; line-height:1.6;
}

/* Two-column intro */
.intro-grid{
  display:grid; grid-template-columns:1fr; gap:40px;
}
@media (min-width:900px){
  .intro-grid{grid-template-columns:1fr 1fr; gap:80px; align-items:end}
}

/* ============================================================
   Course cards
   ============================================================ */
.cards{
  display:grid; grid-template-columns:1fr; gap:40px;
}
@media (min-width:700px){ .cards{grid-template-columns:repeat(2,1fr); gap:48px} }
@media (min-width:1100px){ .cards{grid-template-columns:repeat(2,1fr)} }

.card{
  position:relative;
  display:block; color:var(--ink);
  padding:16px;
  border-radius:var(--radius-lg);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),
             background-color .35s ease;
  z-index:0;
}
/* Blue radial glow that bloomes behind the card on hover/focus */
.card::before{
  content:'';
  position:absolute; inset:-20px;
  border-radius:24px;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(143,184,221,.55), transparent 70%),
    radial-gradient(50% 60% at 75% 70%, rgba(143,184,221,.35), transparent 70%);
  filter:blur(28px);
  opacity:0; transform:scale(.92);
  transition:opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1);
  z-index:-1;
  pointer-events:none;
}
.card:hover,
.card:focus-visible{
  color:var(--ink);
  transform:translateY(-10px);
  background:rgba(255,255,255,.6);
  backdrop-filter:saturate(1.05);
  box-shadow:0 30px 70px -20px rgba(143,184,221,.45),
             0 0 0 1px rgba(143,184,221,.15);
}
.card:hover::before,
.card:focus-visible::before{opacity:1; transform:scale(1)}

.card .card-img-wrap{
  position:relative; width:100%; aspect-ratio:3/2;
  border-radius:var(--radius);
  overflow:hidden; background:var(--bg-soft);
  isolation:isolate;
}
.card .card-img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.8,.2,1),
             filter .35s ease;
}
.card:hover .card-img{transform:scale(1.08); filter:saturate(1.1) brightness(1.03)}

/* Soft blue tint that fades over the image on hover */
.card .card-img-wrap::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 60%, rgba(143,184,221,.18) 100%);
  opacity:0;
  transition:opacity .4s ease;
  z-index:1;
  pointer-events:none;
}
.card:hover .card-img-wrap::before{opacity:1}

/* Blue accent bar that sweeps across the image bottom on hover */
.card .card-img-wrap::after{
  content:''; position:absolute; inset:auto 0 0 0;
  height:4px; background:var(--red);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
  z-index:2;
}
.card:hover .card-img-wrap::after{transform:scaleX(1)}

.card h3{
  font-size:24px; font-weight:500; margin:18px 0 4px;
  display:inline-flex; align-items:center; gap:10px;
  transition:color .25s ease, gap .35s cubic-bezier(.2,.8,.2,1);
}
.card h3::after{
  content:'→'; display:inline-block;
  font-size:.85em; color:var(--red);
  opacity:0; transform:translateX(-6px);
  transition:opacity .3s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
.card:hover h3{color:var(--red); gap:14px}
.card:hover h3::after{opacity:1; transform:translateX(0)}

.card .card-eyebrow{font-size:13px; color:var(--muted); margin-bottom:8px; transition:color .25s ease}
.card:hover .card-eyebrow{color:var(--red)}
.card p{font-size:15px; color:var(--ink-soft); line-height:1.55; margin:0}

/* Pricing / offer cards */
.offers{
  display:grid; grid-template-columns:1fr; gap:24px;
}
@media (min-width:900px){ .offers{grid-template-columns:repeat(3,1fr)} }
.offer{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:36px 32px;
  display:flex; flex-direction:column; gap:18px;
  transition:var(--transition);
}
.offer:hover{box-shadow:var(--shadow); transform:translateY(-4px)}
.offer h3{font-size:24px; font-weight:500}
.offer .price{font-size:18px; color:var(--red); font-weight:500}
.offer ul{display:flex; flex-direction:column; gap:10px; margin:0; padding:0}
.offer li{
  font-size:15px; color:var(--ink-soft); padding-left:24px; position:relative;
}
.offer li::before{
  content:''; position:absolute; left:0; top:.6em;
  width:12px; height:2px; background:var(--red); border-radius:2px;
}
.offer .btn-red{align-self:flex-start; margin-top:8px}
.offer .note{font-size:12px; color:var(--muted); margin-top:auto}

/* When the cards stack into a single column (tablet & mobile), center
   their contents so the wide cards don't look left-orphaned. */
@media (max-width:899px){
  .offer{align-items:center; text-align:center}
  .offer ul{
    align-self:center;
    text-align:left;          /* list text reads naturally next to its dash */
  }
  .offer .btn-red{align-self:center}
}

/* ============================================================
   Feature list
   ============================================================ */
.features{
  display:grid; grid-template-columns:1fr; gap:14px;
  margin:32px 0;
}
@media (min-width:700px){ .features{grid-template-columns:repeat(2,1fr)} }
.features li{
  font-size:16px; padding-left:28px; position:relative; color:var(--ink-soft);
}
.features li::before{
  content:''; position:absolute; left:0; top:.55em;
  width:14px; height:2px; background:var(--red);
}

/* ============================================================
   Image + text composition (subpage hero)
   ============================================================ */
.subpage-hero{
  padding:140px 0 60px;
}
@media (min-width:900px){ .subpage-hero{padding:200px 0 80px} }
.subpage-hero .eyebrow{color:var(--muted)}
.subpage-hero h1{
  font-size:clamp(44px, 7vw, 96px);
  font-weight:500; line-height:1.02; letter-spacing:-.02em;
  margin:8px 0 24px;
}
.subpage-hero .lead{
  font-size:18px; color:var(--ink-soft); max-width:640px; line-height:1.55;
}

.split{
  display:grid; grid-template-columns:1fr; gap:48px; align-items:center;
}
@media (min-width:900px){
  .split{grid-template-columns:1.1fr 1fr; gap:80px}
  .split.reverse{grid-template-columns:1fr 1.1fr}
  .split.reverse .split-text{order:2}
}
/* On mobile, always show the image FIRST, then the text below.
   Switch to flex so we can use `order`, which grid-template-columns
   inline overrides would otherwise fight against. */
@media (max-width:899px){
  .split{
    display:flex !important;
    flex-direction:column;
    grid-template-columns:none !important;
  }
  .split-img{order:-1}
  .split-text{order:0}
}
.split-img{
  width:100%; border-radius:var(--radius-lg);
  aspect-ratio:4/3; object-fit:cover;
}
.split-text h2{font-size:clamp(32px, 4vw, 48px); font-weight:500; margin-bottom:20px}
.split-text p{font-size:16px; color:var(--ink-soft); line-height:1.65}

/* ============================================================
   Contact / footer-info section
   ============================================================ */
.contact-grid{
  display:grid; grid-template-columns:1fr; gap:40px;
}
@media (min-width:900px){ .contact-grid{grid-template-columns:1fr 1fr; gap:80px} }
.contact-card{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:36px;
  overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),
             border-color .25s ease, box-shadow .35s ease;
  z-index:0;
}
/* Soft blue glow that bloomes behind on hover/focus */
.contact-card::before{
  content:'';
  position:absolute; inset:-30%;
  background:radial-gradient(45% 50% at 25% 25%, rgba(143,184,221,.45), transparent 70%);
  filter:blur(28px);
  opacity:0; transform:scale(.92);
  transition:opacity .5s ease, transform .55s cubic-bezier(.2,.8,.2,1);
  z-index:-1;
  pointer-events:none;
}
/* Blue accent bar that sweeps in along the bottom */
.contact-card::after{
  content:''; position:absolute; left:0; right:0; bottom:0;
  height:3px; background:var(--red);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.contact-card:hover,
.contact-card:focus-within{
  transform:translateY(-6px);
  border-color:var(--red);
  box-shadow:0 24px 50px -16px rgba(143,184,221,.45);
}
.contact-card:hover::before,
.contact-card:focus-within::before{opacity:1; transform:scale(1)}
.contact-card:hover::after,
.contact-card:focus-within::after{transform:scaleX(1)}
.contact-card:active{transform:translateY(-3px)}

.contact-card h3{
  font-size:14px; color:var(--muted); font-weight:400;
  margin-bottom:8px; letter-spacing:.04em;
  transition:color .25s ease;
}
.contact-card:hover h3,
.contact-card:focus-within h3{color:var(--red)}
.contact-card a, .contact-card p{
  font-size:22px; color:var(--ink); font-weight:500;
  word-break:break-word;
  transition:color .25s ease;
}
.contact-card a:hover{color:var(--red)}
.contact-card:hover a{color:var(--red)}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{
  border-top:1px solid var(--line);
  padding:80px 0 40px;
  background:var(--bg);
}
.footer-grid{
  display:grid; grid-template-columns:1fr; gap:48px;
  margin-bottom:60px;
}
@media (min-width:900px){
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr; gap:60px}
}
.footer-col h4{
  font-size:15px; font-weight:500; margin-bottom:18px; color:var(--ink);
}
.footer-col ul{display:flex; flex-direction:column; gap:10px}
.footer-col a{font-size:15px; color:var(--muted-2)}
.footer-col a:hover{color:var(--red)}
.footer-about{font-size:15px; color:var(--ink-soft); max-width:380px; line-height:1.6}
.footer-about img{height:48px; margin-bottom:18px}

/* Footer row: tiles (stacked) on left + marquee on right */
.footer-cta-wrap{
  display:grid; grid-template-columns:1fr; gap:24px;
  align-items:stretch;
  margin:40px 0;
}
@media (min-width:700px){
  .footer-cta-wrap{
    grid-template-columns:200px 1fr;
    gap:0;
  }
}

.footer-tiles{
  display:grid; grid-template-columns:1fr; grid-auto-rows:1fr; gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--radius-lg); overflow:hidden;
  min-height:140px;
}
.footer-tiles a{
  background:#fff; padding:16px 20px; text-align:center;
  font-size:14px; font-weight:500;
  display:flex; align-items:center; justify-content:center;
  transition:var(--transition);
}
.footer-tiles a:hover{background:var(--red); color:#fff}

/* Marquee — horizontally scrolling huge red email, framed to match tiles */
.footer-cta{
  overflow:hidden;
  white-space:nowrap;
  display:flex; align-items:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  min-height:140px;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
          mask-image:linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}
.footer-cta-track{
  display:inline-flex; gap:80px; align-items:center;
  animation:marquee 28s linear infinite;
  will-change:transform;
}
.footer-cta-track > span,
.footer-cta-track > a{
  font-size:clamp(40px, 7vw, 92px);
  font-weight:500; color:var(--red);
  letter-spacing:-.02em; line-height:1;
}
.footer-cta-track a:hover{color:var(--red-dark)}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media (prefers-reduced-motion: reduce){
  .footer-cta-track{animation:none}
}

.footer-bottom{
  border-top:1px solid var(--line); padding-top:24px;
  display:flex; flex-wrap:wrap; gap:16px;
  justify-content:space-between; align-items:center;
  font-size:13px; color:var(--muted);
}
.footer-bottom nav{display:flex; gap:18px; flex-wrap:wrap}
.footer-bottom a{color:var(--muted)}
.footer-bottom a:hover{color:var(--red)}

/* ============================================================
   WhatsApp floating button + popup
   ============================================================ */
.wa-float{
  position:fixed; bottom:24px; right:24px; z-index:90;
  display:flex; flex-direction:column; align-items:flex-end; gap:14px;
  font-family:inherit;
  transition:transform .35s ease, opacity .35s ease;
}
/* When the footer-bottom row scrolls into view, lift the WhatsApp button
   so it doesn't sit on top of the Impressum / Datenschutz links. */
.wa-float.lifted{transform:translateY(-72px)}
.wa-toggle{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px 14px 18px;
  background:var(--wa); color:#fff;
  border:2px solid var(--wa);
  border-radius:999px; cursor:pointer;
  font-family:inherit; font-size:16px; font-weight:500;
  box-shadow:0 10px 30px rgba(37,211,102,.35);
  transition:transform .25s ease, box-shadow .25s ease,
             background-color .15s ease, color .15s ease;
}
.wa-toggle:hover,
.wa-toggle:active{
  background:#fff; color:var(--wa);
  transform:translateY(-2px);
  box-shadow:0 14px 36px rgba(37,211,102,.45);
}
.wa-toggle:active{transform:translateY(0)}
.wa-toggle svg{width:22px; height:22px; flex-shrink:0}

.wa-box{
  width:320px; max-width:calc(100vw - 48px);
  background:#fff; border-radius:var(--radius-lg);
  box-shadow:0 20px 60px rgba(0,0,0,.18);
  overflow:hidden;
  display:none;
  animation:wa-in .25s ease;
}
.wa-float.open .wa-box{display:block}
@keyframes wa-in{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)} }
.wa-head{
  background:var(--wa); color:#fff; padding:18px 20px;
  display:flex; align-items:center; gap:12px;
}
.wa-avatar{
  width:42px; height:42px; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; overflow:hidden;
}
.wa-avatar img{width:34px; height:34px; object-fit:contain}
.wa-head h4{color:#fff; font-size:15px; font-weight:500; margin:0; line-height:1.2}
.wa-head p{color:rgba(255,255,255,.85); font-size:12px; margin:2px 0 0; line-height:1.2}
.wa-body{
  padding:20px;
  background:
    linear-gradient(rgba(229,221,213,.6), rgba(229,221,213,.6)),
    repeating-linear-gradient(45deg, #ECE5DD 0 6px, #E5DDD3 6px 12px);
  min-height:120px;
}
.wa-bubble{
  background:#fff; padding:12px 14px; border-radius:8px;
  box-shadow:0 1px 1px rgba(0,0,0,.08);
  font-size:14px; color:var(--ink); line-height:1.45;
  max-width:90%;
}
.wa-bubble small{display:block; font-size:11px; color:var(--muted); margin-top:6px}
.wa-foot{
  padding:14px 20px; background:#F0F0F0; border-top:1px solid var(--line);
  display:flex; gap:10px;
}
.wa-foot input{
  flex:1; padding:10px 14px; border-radius:999px;
  border:1px solid var(--line); background:#fff;
  font-family:inherit; font-size:14px;
  outline:none;
}
.wa-foot input:focus{border-color:var(--wa)}
.wa-foot button{
  padding:10px 18px; background:var(--wa); color:#fff;
  border:0; border-radius:999px; cursor:pointer;
  font-family:inherit; font-size:14px; font-weight:500;
}
.wa-foot button:hover{background:var(--wa-dark)}

@media (max-width:600px){
  .wa-float{bottom:16px; right:16px}
  .wa-toggle{padding:12px 16px; font-size:14px}
  .wa-toggle .wa-label{display:none}
}

/* ============================================================
   Annika card — compact team profile on /kontakt/
   ============================================================ */
.annika-card{
  display:grid; grid-template-columns:1fr; gap:24px;
  align-items:center;
  max-width:760px;
  margin:0 auto;
}
.annika-card img{
  width:100%; max-width:240px; aspect-ratio:1/1;
  object-fit:cover; object-position:center 25%;
  border-radius:50%;
  margin:0 auto;
}
@media (min-width:700px){
  .annika-card{grid-template-columns:240px 1fr; gap:40px}
  .annika-card img{margin:0}
}

/* ============================================================
   Location callout — "Zentral in Regensburg" highlight
   ============================================================ */
.location-callout{
  position:relative;
  background:var(--red-tint);
  border:1px solid var(--red);
  border-radius:var(--radius-lg);
  padding:32px 36px;
  display:grid; grid-template-columns:auto 1fr; gap:24px;
  align-items:center;
  overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),
             box-shadow .35s ease, border-color .25s ease;
}
.location-callout::after{
  /* Gentle drifting blue glow inside the callout — alive but subtle */
  content:'';
  position:absolute; inset:-30%;
  background:
    radial-gradient(35% 45% at 20% 30%, rgba(143,184,221,.55), transparent 70%),
    radial-gradient(30% 40% at 80% 70%, rgba(143,184,221,.4),  transparent 70%);
  filter:blur(34px);
  z-index:0;
  animation:callout-drift 14s ease-in-out infinite alternate;
  pointer-events:none;
}
.location-callout > *{position:relative; z-index:1}
.location-callout:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 44px -16px rgba(143,184,221,.5);
}
@keyframes callout-drift{
  0%   { transform:translate(0,0)     scale(1)    }
  50%  { transform:translate(4%,-3%)  scale(1.05) }
  100% { transform:translate(-3%,4%)  scale(1)    }
}

@media (max-width:700px){
  .location-callout{
    grid-template-columns:1fr; text-align:center;
    padding:28px 24px; gap:14px;
  }
}

.location-callout .pin{
  position:relative;
  width:56px; height:56px;
  background:var(--red); color:#fff;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  margin:0 auto;
  animation:pin-bob 3.2s ease-in-out infinite;
  transform-origin:50% 100%;
}
/* Radiating pulse ring around the pin */
.location-callout .pin::before{
  content:'';
  position:absolute; inset:0;
  border-radius:50%;
  border:2px solid var(--red);
  animation:pin-ping 2.4s cubic-bezier(.2,.8,.2,1) infinite;
}
.location-callout .pin svg{
  width:28px; height:28px;
  position:relative; z-index:1;
}
@keyframes pin-bob{
  0%,100%{ transform:translateY(0)    rotate(0)    }
  50%    { transform:translateY(-6px) rotate(-4deg) }
}
@keyframes pin-ping{
  0%   { transform:scale(1);   opacity:.7 }
  80%  { transform:scale(1.6); opacity:0  }
  100% { transform:scale(1.6); opacity:0  }
}
@media (prefers-reduced-motion: reduce){
  .location-callout::after,
  .location-callout .pin,
  .location-callout .pin::before{ animation:none }
}

.location-callout h3{
  font-size:24px; font-weight:500; color:var(--ink);
  margin:0 0 6px;
}
.location-callout p{
  font-size:15px; color:var(--ink-soft); margin:0; line-height:1.55;
}

/* ============================================================
   Map embed — used on /kontakt/
   ============================================================ */
.map-embed{
  width:100%; aspect-ratio:16/9;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--bg-soft);
}
.map-embed iframe{width:100%; height:100%; border:0; display:block}

/* ============================================================
   Welcome popup (Lukas) — modern glass card, springs in from left
   ============================================================ */
.welcome-popup{
  position:fixed; left:24px; bottom:24px; z-index:95;
  width:320px; max-width:calc(100vw - 48px);
  padding:20px 22px 22px;
  background:linear-gradient(135deg, #fff 0%, var(--red-tint) 130%);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border:1px solid rgba(143,184,221,.4);
  border-radius:20px;
  box-shadow:0 24px 60px -16px rgba(143,184,221,.45),
             0 8px 24px rgba(0,0,0,.06),
             inset 0 1px 0 rgba(255,255,255,.6);
  font-family:inherit;
  transform:translate(calc(-100% - 48px), 0) scale(.92);
  opacity:0;
  transition:transform .65s cubic-bezier(.34,1.56,.64,1), opacity .35s ease;
}
.welcome-popup.open{
  transform:translate(0,0) scale(1);
  opacity:1;
}

/* Decorative blue glow drifting behind the card */
.welcome-popup::before{
  content:'';
  position:absolute; inset:-30%;
  background:radial-gradient(40% 40% at 30% 30%, rgba(143,184,221,.45), transparent 70%);
  filter:blur(36px);
  z-index:-1;
  pointer-events:none;
  animation:welcome-glow 7s ease-in-out infinite alternate;
}
@keyframes welcome-glow{
  0%   { transform:translate(0,0)    scale(1)   }
  100% { transform:translate(8%,-4%) scale(1.1) }
}
@media (prefers-reduced-motion: reduce){
  .welcome-popup{transition:opacity .3s ease}
  .welcome-popup::before{animation:none}
}

/* Header row: avatar + name + status */
.welcome-head{
  display:flex; align-items:center; gap:12px;
  margin-bottom:12px;
}
.welcome-avatar{
  position:relative;
  width:54px; height:54px;
  flex-shrink:0;
  border-radius:50%;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px -4px rgba(143,184,221,.55),
             0 0 0 3px rgba(255,255,255,.9),
             0 0 0 4px rgba(143,184,221,.4);
  overflow:hidden;
  animation:welcome-bob 4s ease-in-out infinite;
}
.welcome-avatar img{
  width:46px; height:46px; object-fit:contain;
  display:block;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.1));
}
@keyframes welcome-bob{
  0%,100%{ transform:translateY(0) }
  50%    { transform:translateY(-3px) }
}
.welcome-meta{flex:1; min-width:0}
.welcome-meta h4{
  font-size:15px; font-weight:600; margin:0;
  color:var(--ink); line-height:1.2;
}
.welcome-meta p{
  font-size:12px; color:var(--muted); margin:2px 0 0;
  line-height:1.3;
  display:flex; align-items:center; gap:6px;
}
/* Pulsing green status dot before "Online" — animated ping ring */
.welcome-meta p::before{
  content:'';
  width:8px; height:8px;
  background:#22c55e;
  border-radius:50%;
  display:inline-block;
  flex-shrink:0;
  box-shadow:0 0 0 0 rgba(34,197,94,.55);
  animation:welcome-online 2.4s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes welcome-online{
  0%   { box-shadow:0 0 0 0   rgba(34,197,94,.55) }
  70%  { box-shadow:0 0 0 8px rgba(34,197,94,0)   }
  100% { box-shadow:0 0 0 0   rgba(34,197,94,0)   }
}
@media (prefers-reduced-motion: reduce){
  .welcome-meta p::before{animation:none}
}

.welcome-body{
  font-size:14px; color:var(--ink); margin:0 0 10px;
  line-height:1.5;
}

.welcome-location{
  display:flex; align-items:flex-start; gap:8px;
  font-size:12.5px; line-height:1.45;
  color:var(--red-dark);
  background:rgba(143,184,221,.18);
  border:1px solid rgba(143,184,221,.45);
  border-radius:10px;
  padding:8px 12px;
  margin:0 0 14px;
}
.welcome-location svg{
  width:14px; height:14px;
  color:var(--red);
  flex-shrink:0;
  margin-top:2px;
}
.welcome-location span{font-weight:500}

.welcome-cta{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 18px;
  background:var(--red); color:#fff;
  border:2px solid var(--red);
  border-radius:999px;
  font-size:13px; font-weight:500;
  letter-spacing:.01em;
  box-shadow:0 8px 20px -6px rgba(143,184,221,.55);
  transition:transform .25s ease, box-shadow .25s ease,
             background-color .2s ease, color .2s ease;
}
.welcome-cta:hover,
.welcome-cta:active{
  background:#fff; color:var(--red);
  transform:translateY(-1px);
  box-shadow:0 10px 24px -4px rgba(143,184,221,.55);
}

.welcome-close{
  position:absolute; top:10px; right:10px;
  width:28px; height:28px;
  background:rgba(255,255,255,.6);
  border:1px solid rgba(143,184,221,.3);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); border-radius:50%;
  transition:var(--transition);
  backdrop-filter:blur(4px);
}
.welcome-close:hover{
  background:#fff; color:var(--ink);
  border-color:var(--red);
  transform:rotate(90deg);
}
.welcome-close svg{width:12px; height:12px}

@media (max-width:600px){
  .welcome-popup{
    width:calc(100vw - 32px); left:16px; bottom:88px;
    padding:18px 18px 20px;
  }
}

/* ============================================================
   Team
   ============================================================ */
.team{
  display:grid; grid-template-columns:1fr; gap:40px;
}
@media (min-width:700px){ .team{grid-template-columns:repeat(2,1fr)} }
.team-card{text-align:center}
.team-card img{
  width:160px; height:160px; border-radius:50%; object-fit:cover;
  margin:0 auto 20px;
}
.team-card h3{font-size:20px; font-weight:500; margin-bottom:4px}
.team-card .role{font-size:14px; color:var(--muted)}

/* ============================================================
   FAQ accordion — used on /kontakt/
   ============================================================ */
.faq{
  display:flex; flex-direction:column; gap:12px;
  max-width:820px; margin:0 auto;
}
.faq-item{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:border-color .25s ease, box-shadow .35s ease;
}
.faq-item[open]{
  border-color:var(--red);
  box-shadow:0 14px 30px -16px rgba(143,184,221,.45);
}
.faq-item summary{
  list-style:none; cursor:pointer;
  padding:20px 56px 20px 24px;
  font-size:17px; font-weight:500; color:var(--ink);
  position:relative;
  transition:color .2s ease;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:''; position:absolute; right:24px; top:50%;
  width:14px; height:14px;
  border-right:2px solid var(--ink-soft);
  border-bottom:2px solid var(--ink-soft);
  transform:translateY(-65%) rotate(45deg);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .25s ease;
}
.faq-item[open] summary{color:var(--red)}
.faq-item[open] summary::after{
  transform:translateY(-30%) rotate(-135deg);
  border-color:var(--red);
}
.faq-item summary:hover{color:var(--red)}
.faq-item .faq-body{
  padding:0 24px 22px;
  font-size:15px; color:var(--ink-soft);
  line-height:1.65;
}
.faq-item .faq-body p{margin:0 0 12px}
.faq-item .faq-body p:last-child{margin:0}

/* ============================================================
   Legal pages (Impressum, Datenschutz)
   ============================================================ */
.legal{
  padding:140px 0 80px;
}
.legal h1{font-size:clamp(36px, 5vw, 56px); margin-bottom:24px}
.legal h2{font-size:24px; margin:40px 0 12px; font-weight:500}
.legal p{font-size:16px; color:var(--ink-soft); line-height:1.65; max-width:760px}
.legal a{color:var(--red); text-decoration:underline}

/* ============================================================
   Utilities
   ============================================================ */
.text-red{color:var(--red)}
.center{text-align:center}
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}
.scroll-hint{
  position:absolute; left:50%; bottom:24px; transform:translateX(-50%);
  font-size:12px; color:var(--muted); letter-spacing:.04em;
}

/* Reveal-on-scroll */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease}
.reveal.visible{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none} }