/* ==========================================================
   Compass Studios – Landingpage
   Keine externen Anfragen. Keine Cookies. Kein Tracking.
   Alles läuft vom eigenen Server.
   ========================================================== */

:root{
  --navy-950:#04121F;
  --navy-900:#071B2E;
  --navy-800:#0B2545;
  --navy-700:#123B63;
  --navy-500:#2A6199;
  --orange:#E8791E;
  --orange-300:#FFA959;
  --paper:#F7F9FC;
  --paper-2:#EDF2F8;
  --ink:#0B2545;
  --muted:#5C6F85;
  --line:rgba(11,37,69,.11);
  --line-dark:rgba(255,255,255,.12);

  --wrap:1080px;
  --pad:clamp(1.25rem,4vw,2.5rem);
  --r:16px;

  /* Geometrische Grotesk für das Wortbild, wie in der Vorlage */
  --brand:"Avenir Next","Avenir","Futura","Century Gothic","URW Gothic",
          "Questrial","Trebuchet MS",-apple-system,BlinkMacSystemFont,sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); line-height:1.65;
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; display:block }
a{ color:inherit }
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad) }
.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 }
.skip{ position:absolute;left:-999px;top:0;z-index:300;background:var(--orange);
       color:#fff;padding:.75rem 1.25rem;font-weight:600 }
.skip:focus{ left:0 }

/* ==========================================================
   WORTBILD
   COMPASS oben, STUDIOS darunter – exakt wie in der Vorlage.
   Buchstabenabstand über flex-gap, damit C und O denselben
   Rhythmus haben wie alle übrigen Buchstaben.
   ========================================================== */

.wordmark{
  display:inline-flex; flex-direction:column; align-items:center;
  font-family:var(--brand); font-weight:400; color:currentColor;
  line-height:1; text-transform:uppercase; margin:0;
}
.wm-top{ display:flex; align-items:baseline; gap:.13em }
.wm-sub{
  display:flex; gap:.42em;
  font-size:.395em; margin-top:.42em;
  padding-left:.42em;              /* optischer Ausgleich des Trackings */
  color:currentColor; opacity:.92;
}
.ltr{ display:block }

/* Das O – identische Höhe und Strichstärke wie die Buchstaben */
/* Höhe und Lage werden aus der tatsächlichen Versalhöhe der
   Schrift abgeleitet, damit das O exakt auf derselben Linie und
   in derselben Höhe steht wie C, M, P, A und S.
   --cap setzt das Skript beim Laden; der Vorgabewert passt zu
   einer geometrischen Grotesk. */
.o-slot{
  position:relative; display:block; flex:none;
  width:calc(var(--cap,.715) * 1.062em);
  height:calc(var(--cap,.715) * 1.062em);
  transform:translateY(calc(var(--cap,.715) * .0373em));
}
.o-slot .compass{ width:100%; height:100%; overflow:visible; display:block }

.ring{ fill:none; stroke:currentColor; stroke-width:9 }
.needle-n{ fill:var(--orange) }
.needle-s{ fill:currentColor }
.hub{ fill:currentColor }
.pulse{ fill:none; stroke:var(--orange); stroke-width:4.5; opacity:0;
        transform-box:fill-box; transform-origin:center }
.needle{ transform-box:view-box; transform-origin:50px 50px; transform:rotate(45deg) }

/* ==========================================================
   KOPFZEILE
   ========================================================== */
.site-header{
  position:fixed; inset:0 0 auto; z-index:120;
  background:rgba(7,27,46,.82);
  backdrop-filter:saturate(170%) blur(14px);
  -webkit-backdrop-filter:saturate(170%) blur(14px);
  border-bottom:1px solid var(--line-dark);
  color:#fff; opacity:0; transform:translateY(-100%);
  transition:opacity .3s ease, transform .38s cubic-bezier(.22,.85,.3,1);
  pointer-events:none;
}
.site-header.is-visible{ opacity:1; transform:none; pointer-events:auto }
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between;
                    gap:1rem; min-height:62px }
.site-header .wordmark{ font-size:1.02rem }
.site-header .wm-sub{ display:none }
.header-cta{
  padding:.48rem 1.05rem; border-radius:999px; background:var(--orange);
  color:#fff; text-decoration:none; font-weight:600; font-size:.88rem; white-space:nowrap;
  transition:background .2s, transform .2s;
}
.header-cta:hover{ background:var(--orange-300); transform:translateY(-1px) }
.site-header.static{ position:relative; opacity:1; transform:none; pointer-events:auto }

/* ==========================================================
   BÜHNE mit räumlicher Tiefe
   ========================================================== */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:100svh; display:grid; align-items:center;
  padding-block:clamp(6rem,14vh,9rem) clamp(4rem,10vh,7rem);
  background:linear-gradient(170deg,#0C2A4D 0%,var(--navy-900) 52%,var(--navy-950) 100%);
  color:#fff;
  perspective:1200px;
}

/* Raster, das perspektivisch in die Tiefe läuft */
.depth{
  position:absolute; inset:0; z-index:-2; overflow:hidden;
  pointer-events:none; perspective:520px; perspective-origin:50% 42%;
}
.depth-grid{
  position:absolute; left:-60%; right:-60%; top:44%; height:180%;
  background-image:
    linear-gradient(rgba(120,175,235,.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,175,235,.11) 1px, transparent 1px);
  background-size:74px 74px;
  transform:rotateX(74deg);
  transform-origin:50% 0;
  mask-image:linear-gradient(#000 0%, transparent 62%);
  -webkit-mask-image:linear-gradient(#000 0%, transparent 62%);
  animation:gridDrift 26s linear infinite;
}
@keyframes gridDrift{ to{ background-position:0 74px } }

.glow{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(620px 420px at 50% 34%, rgba(232,121,30,.20), transparent 68%),
    radial-gradient(900px 560px at 84% 8%, rgba(42,97,153,.42), transparent 66%);
}

.hero-inner{ position:relative; z-index:1; text-align:center;
             display:flex; flex-direction:column; align-items:center }

.hero-mark{
  font-size:clamp(2.1rem,8.4vw,4.6rem);
  color:#fff; will-change:transform;
  transform:translate3d(var(--ix,0px),var(--iy,0px),0) scale(var(--is,1));
}

.hero h1{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.75rem,1.2rem + 2.4vw,2.95rem);
  line-height:1.18; letter-spacing:-.015em;
  margin:clamp(2.75rem,7vh,4.25rem) 0 1.1rem; max-width:21ch;
}
.hero h1 em{ font-style:normal; color:var(--orange-300) }
.hero-lead{
  font-size:clamp(1.02rem,.98rem + .42vw,1.22rem);
  color:rgba(255,255,255,.8); max-width:50ch; margin:0 0 2.15rem;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:.8rem .9rem; justify-content:center }
.hero-note{ display:none }
.dot{ width:6px;height:6px;border-radius:50%;background:var(--orange);flex:none }

.scroll-hint{
  position:absolute; left:50%; bottom:clamp(1.2rem,3.5vh,2.2rem);
  transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  color:rgba(255,255,255,.42); font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; text-decoration:none;
}
.scroll-hint svg{ animation:bob 2.4s ease-in-out infinite }
.scroll-hint:hover{ color:#fff }
@keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }

/* Überspringen-Schalter während des Einstiegs */
.skip-intro{
  position:fixed; right:clamp(1rem,4vw,2rem); bottom:clamp(1rem,4vh,2rem);
  z-index:210; background:rgba(255,255,255,.09); color:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.2); border-radius:999px;
  padding:.5rem 1.1rem; font:inherit; font-size:.82rem; cursor:pointer;
  backdrop-filter:blur(8px); transition:opacity .3s, background .2s, color .2s;
}
.skip-intro:hover{ background:rgba(255,255,255,.16); color:#fff }
.skip-intro[hidden]{ display:none }

/* Zeiger für den Einstieg */
.intro-cursor{
  position:fixed; left:50%; top:50%; z-index:200;
  width:26px; height:26px; margin:-2px 0 0 -3px;
  pointer-events:none; opacity:0;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.55));
}
.intro-cursor path{ fill:#fff; stroke:var(--navy-950); stroke-width:1.3; stroke-linejoin:round }


/* Vorspann und Merkmale in der Bühne ------------------------ */
.hero-eyebrow{
  display:inline-flex; align-items:center;
  margin:clamp(2.25rem,6vh,3.5rem) 0 0;
  padding:.4rem 1rem .4rem .75rem; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.72);
}

.hero-pills{
  display:flex; flex-wrap:wrap; gap:.5rem .55rem; justify-content:center;
  margin:2rem 0 0; padding:0; list-style:none;
}
.hero-pills li{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.42rem .9rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.045);
  font-size:.83rem; color:rgba(255,255,255,.72);
}
.hero-pills svg{ width:14px; height:14px; color:var(--orange); flex:none }

/* ==========================================================
   SCHALTFLÄCHEN
   ========================================================== */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.92rem 1.6rem; border-radius:999px; font-weight:600;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  font-size:1rem; font-family:inherit;
  transition:background .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.btn-primary{ background:var(--orange); color:#fff;
              box-shadow:0 10px 30px -12px rgba(232,121,30,.9) }
.btn-primary:hover{ background:var(--orange-300); transform:translateY(-2px) }
.btn-ghost{ border-color:rgba(255,255,255,.28); color:#fff }
.btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.07); transform:translateY(-2px) }
.btn-outline{ border-color:rgba(255,255,255,.3); color:#fff }
.btn-outline:hover{ border-color:#fff; transform:translateY(-2px) }

/* ==========================================================
   ABSCHNITTE
   ========================================================== */
section{ padding-block:clamp(3.75rem,9.5vh,7rem); position:relative }
.section-head{ max-width:60ch; margin-bottom:clamp(2rem,5vh,3.25rem) }
.section-head.center{ margin-inline:auto; text-align:center }
.eyebrow{ text-transform:uppercase; letter-spacing:.2em; font-size:.72rem;
          font-weight:700; color:var(--orange); margin:0 0 .8rem }
h2{ font-family:var(--serif); font-weight:600; margin:0 0 .85rem;
    font-size:clamp(1.55rem,1.22rem + 1.6vw,2.35rem); line-height:1.22;
    letter-spacing:-.01em }
h3{ font-size:1.08rem; margin:0 0 .5rem }
.section-head p{ color:var(--muted); margin:0 }

.grid{ display:grid; gap:1.15rem }
.g3{ grid-template-columns:repeat(auto-fit,minmax(258px,1fr)) }
.g2{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)) }

/* Karten mit leichter räumlicher Neigung ------------------- */
.tilt-scope{ perspective:900px }
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:1.6rem 1.5rem; height:100%;
  transform-style:preserve-3d; will-change:transform;
  transition:box-shadow .3s ease, border-color .3s ease, transform .12s ease-out;
}
.card:hover{ box-shadow:0 22px 48px -26px rgba(11,37,69,.5);
             border-color:rgba(11,37,69,.19) }
.card p{ margin:0; color:var(--muted); font-size:.97rem }
.card .lift{ transform:translateZ(26px) }

.problem{ background:var(--paper-2) }
.card-num{ font-family:var(--serif); font-size:1.75rem; line-height:1;
           color:var(--orange); margin:0 0 .6rem }

/* Ablauf ---------------------------------------------------- */
.steps{ counter-reset:s; display:grid; gap:1.15rem;
        grid-template-columns:repeat(auto-fit,minmax(272px,1fr)) }
.step{ position:relative; background:#fff; border:1px solid var(--line);
       border-radius:var(--r); padding:2.35rem 1.5rem 1.6rem;
       transform-style:preserve-3d; transition:box-shadow .3s, transform .12s ease-out }
.step:hover{ box-shadow:0 22px 48px -26px rgba(11,37,69,.5) }
.step::before{ counter-increment:s; content:counter(s);
  position:absolute; top:-17px; left:1.45rem; width:36px; height:36px;
  border-radius:50%; background:var(--navy-800); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:.95rem }
.step.free::before{ background:var(--orange) }
.step p{ margin:0; color:var(--muted); font-size:.97rem }
.tag{ display:inline-block; margin-bottom:.55rem; padding:.18rem .62rem;
      border-radius:999px; font-size:.7rem; font-weight:700; letter-spacing:.09em;
      text-transform:uppercase; background:rgba(232,121,30,.14); color:#A9560D }

/* Leistungen ------------------------------------------------ */
.included{ background:var(--navy-800); color:#fff; overflow:hidden }
.included h2{ color:#fff }
.included .section-head p{ color:rgba(255,255,255,.72) }
.feature-list{ list-style:none; margin:0; padding:0; display:grid;
               gap:.1rem 2.4rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) }
.feature-list li{ display:flex; gap:.75rem; align-items:flex-start; padding:.68rem 0;
                  border-bottom:1px solid var(--line-dark); color:rgba(255,255,255,.9);
                  font-size:.97rem }
.check{ flex:none; width:19px; height:19px; margin-top:.3em; color:var(--orange) }
.excluded{ margin-top:2.2rem; padding-top:1.4rem; border-top:1px solid var(--line-dark);
           color:rgba(255,255,255,.58); font-size:.93rem; max-width:68ch }

/* Warum ----------------------------------------------------- */
.reason{ display:flex; gap:1rem; align-items:flex-start }
.reason-icon{ flex:none; width:42px; height:42px; border-radius:11px;
              background:rgba(232,121,30,.12); color:var(--orange);
              display:grid; place-items:center }
.reason-icon svg{ width:21px; height:21px }

/* CS-Monogramm als ruhiges Wasserzeichen -------------------- */
.mono-bg{
  position:absolute; z-index:0; pointer-events:none; user-select:none;
  width:min(52vw,520px); aspect-ratio:1;
  left:50%; top:50%; translate:-50% -50%;
  opacity:.045;
}
.mono-bg img{ width:100%; height:100%; object-fit:contain }
/* Das Monogramm ist marineblau und steht deshalb auf den hellen
   Abschnitten – genau wie auf den Angebots- und Rechnungsseiten. */
.problem .mono-bg{ opacity:.05 }
#warum .mono-bg{ opacity:.045 }
section > .wrap{ position:relative; z-index:1 }

/* Kontakt --------------------------------------------------- */
.contact{
  background:linear-gradient(165deg,var(--navy-800),var(--navy-950));
  color:#fff; text-align:center; overflow:hidden;
}
.contact h2{ color:#fff; max-width:19ch; margin-inline:auto }
.contact-lead{ color:rgba(255,255,255,.8); max-width:50ch; margin:0 auto 2.1rem }
.contact-actions{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center }
.contact-small{ margin-top:2.1rem; font-size:.86rem; color:rgba(255,255,255,.48) }

/* Fußzeile -------------------------------------------------- */
.site-footer{ background:var(--navy-950); color:rgba(255,255,255,.6);
              padding-block:2.6rem; font-size:.89rem }
.footer-inner{ display:flex; flex-wrap:wrap; gap:1.4rem 2rem;
               align-items:center; justify-content:space-between }
.footer-brand{ display:flex; align-items:center; gap:.85rem }
.footer-mono{ width:36px; height:36px; flex:none; border-radius:9px; opacity:.95 }
.site-footer .wordmark{ font-size:.86rem; color:#fff }
.footer-links{ display:flex; gap:1.4rem; flex-wrap:wrap }
.footer-links a{ color:rgba(255,255,255,.72); text-decoration:none }
.footer-links a:hover{ color:#fff; text-decoration:underline }
.footer-legal{ margin-top:1.7rem; padding-top:1.4rem; border-top:1px solid var(--line-dark);
               font-size:.81rem; color:rgba(255,255,255,.4); display:flex;
               flex-wrap:wrap; gap:.4rem 1.2rem; justify-content:space-between }
.privacy-badge{ display:inline-flex; align-items:center; gap:.4rem; color:rgba(255,255,255,.55) }
.privacy-badge svg{ width:15px; height:15px; color:var(--orange) }

/* ==========================================================
   RECHTSSEITEN
   ========================================================== */
.legal{ padding-block:clamp(2.5rem,7vh,4.5rem) }
.legal .wrap{ max-width:740px }
.legal h1{ font-family:var(--serif); font-weight:600; margin:0 0 .4rem;
           font-size:clamp(1.8rem,1.4rem + 1.8vw,2.5rem) }
.legal h2{ font-size:1.2rem; margin-top:2.4rem }
.legal p,.legal li{ color:#2B3D51 }
.legal a{ color:var(--navy-500) }
.legal dt{ font-weight:600; margin-top:.9rem }
.legal dd{ margin:0 }
.notice{ background:#FFF6EC; border:1px solid rgba(232,121,30,.35);
         border-left:4px solid var(--orange); border-radius:10px;
         padding:1.05rem 1.2rem; margin:1.7rem 0; font-size:.94rem }
.back-link{ display:inline-flex; align-items:center; gap:.45rem; text-decoration:none;
            color:var(--muted); font-size:.9rem; margin-bottom:1.4rem }
.back-link:hover{ color:var(--navy-700) }

/* ==========================================================
   ZUSTÄNDE DER ANIMATION
   ========================================================== */

/* Ausgangslage: nur der Kompass, groß und mittig. */
.js .hero-mark .ltr,
.js .hero-mark .wm-sub{ opacity:0 }
.js .hero-eyebrow, .js .hero h1, .js .hero-lead, .js .hero-actions,
.js .hero-pills, .js .scroll-hint{ opacity:0; transform:translateY(16px) }
.js .depth, .js .glow{ opacity:0; transition:opacity 1.1s ease }
.js .needle{ transform:rotate(-30deg) }

.intro-run .hero-mark{ transition:transform 1s cubic-bezier(.34,.86,.28,1) }
.intro-run .depth, .intro-run .glow{ opacity:1 }

/* Endzustand. Die Klasse hat Vorrang vor den Inline-Werten des
   Skripts – dadurch ist der Schlusszustand unabhängig davon,
   in welcher Reihenfolge die Schritte tatsächlich eintreffen. */
.intro-done .hero-mark{ --ix:0px !important; --iy:0px !important; --is:1 !important }
.intro-settled .hero-mark{ transition:none !important }
.intro-done .hero-mark .ltr,
.intro-done .hero-mark .wm-sub{ opacity:1; transition:opacity .5s ease var(--d,0s) }
.intro-done .hero-eyebrow,
.intro-done .hero h1,
.intro-done .hero-lead,
.intro-done .hero-actions,
.intro-done .hero-pills,
.intro-done .scroll-hint{
  opacity:1; transform:none;
  transition:opacity .6s ease var(--d,0s), transform .6s cubic-bezier(.22,.85,.3,1) var(--d,0s);
}
.needle.spin{ transition:transform 1.35s cubic-bezier(.26,.84,.3,1); transform:rotate(765deg) }
.intro-done .depth, .intro-done .glow{ opacity:1 }

.cursor-run{ animation:cursorGlide .95s .25s cubic-bezier(.36,.72,.28,1) forwards }
.cursor-click{ animation:cursorTap .3s ease forwards }
.cursor-out{ animation:cursorOut .4s ease forwards }
@keyframes cursorGlide{
  0%{ transform:translate(190px,180px) scale(1.25); opacity:0 }
  30%{ opacity:1 }
  100%{ transform:translate(0,0) scale(1); opacity:1 }
}
@keyframes cursorTap{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(.78) } }
@keyframes cursorOut{ to{ opacity:0; transform:translate(26px,34px) scale(.9) } }
.pulse-run{ animation:pulseOut .7s ease-out forwards }
@keyframes pulseOut{ 0%{ transform:scale(.75); opacity:.95 } 100%{ transform:scale(2.1); opacity:0 } }

/* Einblenden beim Scrollen */
.reveal{ opacity:0; transform:translateY(22px);
         transition:opacity .7s ease, transform .7s cubic-bezier(.22,.85,.3,1) }
.reveal.in{ opacity:1; transform:none }

/* ==========================================================
   BEWEGUNG REDUZIERT – sofort die Endfassung
   ========================================================== */
@media (prefers-reduced-motion:reduce){
  .js .hero-mark .ltr, .js .hero-mark .wm-sub,
  .js .hero h1, .js .hero-lead, .js .hero-actions,
  .js .hero-note, .js .scroll-hint{ opacity:1 !important; transform:none !important }
  .js .hero-mark{ --ix:0px !important; --iy:0px !important; --is:1 !important }
  .js .needle{ transform:rotate(45deg) !important }
  .js .depth, .js .glow{ opacity:1 !important }
  .intro-cursor, .skip-intro{ display:none !important }
  .reveal{ opacity:1 !important; transform:none !important; transition:none }
  .depth-grid, .scroll-hint svg{ animation:none !important }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important }
}

a:focus-visible, button:focus-visible{
  outline:3px solid var(--orange); outline-offset:3px; border-radius:8px;
}

@media (max-width:520px){
  .hero{ min-height:92svh }
  .footer-legal{ flex-direction:column }
}