/* SODA76 SOCIAL — Konzeptarbeit von VALO Studio, 31.07.2026
   Boutique Social-Media-Agentur, Frankfurt.

   Vorbild: kudos.framer.media — übernommen wurden Aufbau-LOGIK und
   Animations-VOKABULAR (Statement-Hero, Prinzipien-Zeilen,
   editoriale Leistungsliste, gestaffelte Reveals, gepinnte Sektion).
   Layout, Typografie, Farbe, Proportionen und Texte sind eigenständig.
   Begründung siehe arbeiten/README.md. */

:root{
  /* Farbwelt gewechselt 03.08.2026: „Tinte & Champagner".
     Vorher Neongrün auf Fast-Schwarz — das las sich wie Gaming-Setup,
     nicht wie Boutique-Studio. Tiefes Marineblau trägt Wärme statt Härte,
     Champagner ersetzt das Signal durch Wertigkeit.
     Alle Werte gerechnet: Akzent 12,8:1 · Fließtext 15,0:1 · Hilfstext 5,9:1 */
  --bg:#101A2E;        /* Tinte */
  --bg-2:#18243C;      /* Tinte, eine Stufe heller — Karten und Bänder */
  --ink:#F2EEE6;       /* warmes Papierweiß, kein reines Weiß */
  --ink-2:#B9BECB;
  --dim:#8E97A8;
  --gold:#E8DCC8;      /* Champagner — der einzige Akzent */
  --line:rgba(242,238,230,.16);
  --px:clamp(1.25rem,5vw,6rem);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:"Archivo","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  font-weight:400;font-size:1.02rem;line-height:1.7;-webkit-font-smoothing:antialiased;
  overflow-x:hidden
}
img{display:block;width:100%;height:auto}
a{color:inherit}

.konzept-band{
  background:var(--gold);color:#101A2E;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;padding:.6rem var(--px);display:flex;gap:1rem;
  justify-content:space-between;flex-wrap:wrap;font-weight:600
}
.konzept-band a{color:#101A2E}

/* Schlanke Kopfleiste */
.kopf{
  position:sticky;top:0;z-index:40;display:flex;justify-content:space-between;
  align-items:center;padding:1.1rem var(--px);gap:2rem;
  background:rgba(16,26,46,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s ease
}
.kopf.gescrollt{border-bottom-color:var(--line)}
/* Wortmarke mit Zusatz (03.08.2026): Der volle Firmenname steht sichtbar
   im Kopf. Jeder Buchstabe kippt einzeln aus dem Raum herein und rastet
   ein — dieselbe Tiefen-Logik wie im Hero, nur im Kleinen. */
.marke{display:flex;align-items:baseline;gap:.7rem;text-decoration:none;flex-wrap:wrap;
  perspective:520px}
.marke-name{font-family:"Anton",Impact,sans-serif;font-size:1.4rem;letter-spacing:.02em;
  text-transform:uppercase;display:flex;transform-style:preserve-3d}
.marke-name b{font-weight:400;display:inline-block;transform-origin:50% 100%;
  transform:rotateX(-92deg) translateY(.32em);opacity:0;
  animation:einrasten .62s cubic-bezier(.22,1.4,.36,1) forwards;
  animation-delay:calc(var(--i) * .07s + .15s)}
.marke-name b.gold{color:var(--gold)}
@keyframes einrasten{
  60%{opacity:1;transform:rotateX(9deg) translateY(0)}
  100%{opacity:1;transform:none}}

.marke-zusatz{font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--dim);white-space:nowrap;
  opacity:0;transform:translateX(-6px);
  animation:zusatz-auf .7s cubic-bezier(.16,.8,.3,1) forwards;animation-delay:.66s}
@keyframes zusatz-auf{to{opacity:1;transform:none}}

/* Beim Zeigen ein Champagner-Schimmer. Bewusst über Farbe und Leuchten statt
   über transform: Die Einrast-Animation hält ihren Endzustand mit
   "forwards" fest und würde jeden transform-Übergang überschreiben —
   beim Verlassen liefe sonst die ganze Einblendung erneut. */
.marke-name b{transition:color .25s ease,text-shadow .25s ease}
.marke:hover .marke-name b{color:var(--gold);text-shadow:0 0 18px rgba(232,220,200,.45)}

@media(max-width:34rem){.marke-zusatz{display:none}}
@media(prefers-reduced-motion:reduce){
  .marke-name b{animation:none;opacity:1;transform:none}
  .marke-zusatz{animation:none;opacity:1;transform:none}
}
.kopf nav{display:flex;gap:1.6rem;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase}
.kopf nav a{text-decoration:none;color:var(--ink-2)}
.kopf nav a:hover{color:var(--gold)}
@media(max-width:44rem){.kopf nav a:not(.mini){display:none}}

.pad{padding:clamp(4rem,11vh,9rem) var(--px)}
.pad-t0{padding-top:0}

h1,h2{font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;
  line-height:.92;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(3rem,11vw,10rem)}
h2{font-size:clamp(2.2rem,6.4vw,5.6rem)}
h3{font-size:clamp(1.1rem,1.9vw,1.45rem);font-weight:600;line-height:1.25}
.gross{font-size:clamp(1.05rem,1.7vw,1.3rem);line-height:1.6;color:var(--ink-2);max-width:46ch}
.klein{font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--dim);font-weight:600}
.klein.gold{color:var(--gold)}
p{max-width:62ch;color:var(--ink-2)}
p+p{margin-top:1rem}

/* Gestaffelte Einblendungen */
.rein{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.rein.da{opacity:1;transform:none}
.rein[data-verzug="1"]{transition-delay:.09s}
.rein[data-verzug="2"]{transition-delay:.18s}
.rein[data-verzug="3"]{transition-delay:.27s}
.rein[data-verzug="4"]{transition-delay:.36s}
@media(prefers-reduced-motion:reduce){.rein{opacity:1;transform:none;transition:none}}

/* Statement-Hero — als Raum gebaut, nicht als Fläche */
/* Höhe bewusst auf 60 % begrenzt (Beschluss 03.08.2026): Der Folgeabschnitt
   „Wir bauen auf. Monat für Monat." soll schon im ersten Bild anreißen. */
.auftakt{min-height:48svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(3rem,7vh,5rem) var(--px) clamp(2rem,4vh,3rem);position:relative;
  overflow:hidden;perspective:1100px;perspective-origin:50% 42%}
.auftakt h1{font-size:clamp(2.6rem,8.4vw,7.2rem);line-height:.92}

/* Der WebGL-Moment: fließende Bänder hinter allem */
#shader{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
/* Fällt WebGL aus, bleibt dieser stille Lichtschein stehen */
.auftakt::before{content:"";position:absolute;z-index:0;left:50%;top:38%;
  width:min(120vw,1400px);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(232,220,200,.13) 0%,rgba(232,220,200,.04) 38%,transparent 68%)}

.auftakt .raum{position:relative;z-index:1;transform-style:preserve-3d;width:100%}
.auftakt .raum > *{transition:transform .5s cubic-bezier(.16,.8,.3,1);will-change:transform}

/* Zeilenweiser Auftritt: jede Zeile schiebt sich aus ihrer eigenen Blende */
.auftakt h1{margin:0}
.auftakt h1 .zeile{display:block;overflow:hidden;padding-bottom:.02em}
.auftakt h1 .zeile > span{display:block;transform:translateY(105%);
  transition:transform 1s cubic-bezier(.16,.85,.24,1)}
.auftakt h1 .zeile > span.da{transform:none}
.auftakt h1 .gold{color:var(--gold)}

.auftakt .unten{display:flex;justify-content:space-between;align-items:end;gap:2rem;
  flex-wrap:wrap;margin-top:clamp(2rem,5vh,3.4rem);border-top:1px solid var(--line);padding-top:1.6rem}
.auftakt .unten p{max-width:38ch;color:var(--ink-2)}

/* Scroll-Wink am unteren Rand */
.wink{position:absolute;z-index:1;left:50%;bottom:1.1rem;width:1px;height:clamp(28px,5vh,46px);
  background:linear-gradient(180deg,transparent,var(--gold));opacity:.55;
  animation:wink 2.4s cubic-bezier(.6,0,.4,1) infinite}
@keyframes wink{0%,100%{transform:scaleY(.3);transform-origin:top;opacity:.2}
  50%{transform:scaleY(1);transform-origin:top;opacity:.7}}

/* Karten stehen im Raum statt auf dem Papier */
.karten{perspective:1300px}
.karten .leistung,.stimmen .stimme{transform-style:preserve-3d;
  transition:transform .45s cubic-bezier(.16,.8,.3,1),background .3s}
.stimmen{perspective:1300px}
.stimmen .stimme:hover{background:#1E2B45}

.zahlen{transform-origin:50% 0;will-change:transform,opacity}

@media(prefers-reduced-motion:reduce){
  .auftakt h1 .zeile > span{transform:none;transition:none}
  .wink{animation:none;opacity:.35}
  #shader{display:none}
  .auftakt .raum > *,.karten .leistung,.stimmen .stimme,.zahlen{transition:none;transform:none!important}
}

/* Das Kunden-Laufband ist am 03.08.2026 entfernt worden. Grund: Der Hero
   wurde auf 60 % gekürzt, damit der Folgeabschnitt schon im ersten Bild
   anreißt — ein Laufband dazwischen hätte genau diesen Platz wieder
   verbraucht. Die Namen waren ohnehin erfunden. */

.zwei{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,5vw,5rem)}
@media(max-width:56rem){.zwei{grid-template-columns:1fr}}

/* Prinzipien als große Zeilen */
.prinzipien{border-top:1px solid var(--line)}
.prinzip{border-bottom:1px solid var(--line);padding:clamp(1.4rem,3.4vw,2.4rem) 0;
  display:flex;align-items:baseline;gap:1.4rem;position:relative;overflow:hidden}
.prinzip b{font-family:"Anton",Impact,sans-serif;font-size:clamp(1.6rem,4.6vw,3.6rem);
  text-transform:uppercase;font-weight:400;transition:color .35s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.prinzip span{font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);margin-left:auto;white-space:nowrap}
.prinzip:hover b{color:var(--gold);transform:translateX(clamp(.6rem,2vw,2rem))}
@media(prefers-reduced-motion:reduce){.prinzip:hover b{transform:none}}

/* Gepinnte Leistungssektion */
.gepinnt{display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.gepinnt .halt{position:sticky;top:clamp(5rem,14vh,8rem)}
.leistung{border-top:1px solid var(--line);padding:clamp(2rem,5vh,3.4rem) 0}
.leistung:last-child{border-bottom:1px solid var(--line)}
.leistung .nr{font-family:"Anton",Impact,sans-serif;font-size:1rem;color:var(--gold);display:block;margin-bottom:.7rem}
.leistung h3{margin-bottom:.6rem}
.leistung ul{list-style:none;margin-top:1rem;display:flex;flex-wrap:wrap;gap:.5rem}
.leistung li{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  border:1px solid var(--line);border-radius:999px;padding:.4rem .9rem}
@media(max-width:56rem){.gepinnt{grid-template-columns:1fr}.gepinnt .halt{position:static}}

/* Zahlen */
.zahlen{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.zahlen div{padding:clamp(1.6rem,4vh,2.6rem) var(--px);border-left:1px solid var(--line)}
.zahlen div:first-child{border-left:0}
.zahlen b{display:block;font-family:"Anton",Impact,sans-serif;font-size:clamp(2rem,4.4vw,3.4rem);color:var(--gold);font-weight:400}
@media(max-width:56rem){.zahlen{grid-template-columns:1fr 1fr}}

/* Stimmen */
.stimmen{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.6vw,2rem)}
@media(max-width:60rem){.stimmen{grid-template-columns:1fr}}
.stimme{background:var(--bg-2);border-radius:20px;padding:clamp(1.6rem,3vw,2.2rem);display:flex;flex-direction:column;gap:1.2rem}
.stimme q{font-size:clamp(1.05rem,1.7vw,1.25rem);line-height:1.5;color:var(--ink);quotes:"„" "“"}
.stimme footer{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-top:auto}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:1.3rem 0;font-size:clamp(1rem,1.6vw,1.2rem);
  display:flex;justify-content:space-between;gap:1.4rem;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq p{padding-bottom:1.4rem}

/* Knöpfe, magnetisch */
.knopf{display:inline-flex;align-items:center;gap:.7rem;border:0;border-radius:999px;
  background:var(--gold);color:#101A2E;padding:1rem 2rem;text-decoration:none;
  font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  will-change:transform;transition:transform .25s cubic-bezier(.2,.7,.2,1),background .25s}
.knopf:hover{background:#F5EDDF}
.knopf.linie{background:none;color:var(--ink);border:1px solid var(--line)}
.knopf.linie:hover{border-color:var(--gold);color:var(--gold)}
@media(prefers-reduced-motion:reduce){.knopf{transition:background .25s}}

/* Schluss-CTA */
.finale{text-align:center;padding:clamp(5rem,16vh,11rem) var(--px)}

/* Vorgezogener Kontaktblock (11.08.2026): oben angerissen, unten als Reprise.
   Der obere Innenabstand ist klein, damit Trennlinie und Label schon auf dem
   ersten Bildschirm unter dem Auftakt hervorsehen. */
.finale-oben{
  padding-top:clamp(1.6rem,3.5vh,2.6rem);
  padding-bottom:clamp(4rem,12vh,8rem);
  border-top:1px solid var(--line);
}
.finale-klein{
  padding-top:clamp(3rem,8vh,5rem);
  padding-bottom:clamp(3rem,8vh,5rem);
  border-top:1px solid var(--line);
}
.finale-klein h2{font-size:clamp(1.7rem,4.4vw,3.2rem);margin-bottom:1.4rem}
.finale h2{font-size:clamp(2.6rem,10vw,8rem);margin-bottom:1.6rem}
.finale h2 .gold{color:var(--gold)}
.finale p{margin:0 auto 2.4rem}

/* Fußzeile */
.fuss{border-top:1px solid var(--line);padding:clamp(3rem,8vh,5rem) var(--px) 0}
.fuss .drei{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
@media(max-width:56rem){.fuss .drei{grid-template-columns:1fr}}
.fuss a{color:var(--ink-2);text-decoration:none}
.fuss a:hover{color:var(--gold)}
.marke-gross{font-family:"Anton",Impact,sans-serif;text-transform:uppercase;
  font-size:clamp(3rem,17vw,15rem);line-height:.82;margin:clamp(2.5rem,7vh,4.5rem) 0 -.12em;
  color:var(--ink);opacity:.1;letter-spacing:-.01em;overflow:hidden}
.hinweis{font-size:.8rem;color:var(--dim);max-width:64ch;margin-top:1rem}

/* Prototyp-Hinweis am Seitenende (ersetzt das Band im Kopf, 31.07.2026) */
.prototyp-fuss{
  display:flex;gap:1rem 2rem;justify-content:space-between;align-items:center;flex-wrap:wrap;
  padding:1.1rem clamp(1.25rem,5vw,5.5rem);font-size:.82rem;line-height:1.6
}
.prototyp-fuss b{font-weight:600}
.prototyp-fuss{background:#E8DCC8;color:#101A2E;}
.prototyp-fuss a{color:#101A2E}

/* ======================================================================
   R1 · Sichtbares Vierspaltenraster (11.08.2026)
   Vorbild: Longbow zitiert mit einem sichtbaren Raster die technische
   Zeichnung. Hier fuenf Haarlinien, die vier Spalten aufspannen und beim
   Scrollen von oben nach unten mitwachsen. Reines CSS, ein einziger Wert
   (--wuchs) kommt aus dem Scrollfortschritt. Kosten: 0 KB Bild, ~14 Zeilen JS.
   ====================================================================== */
.raster{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  padding:0 var(--px);
  display:grid;grid-template-columns:repeat(4,1fr);
  --wuchs:0;
}
.raster i{
  position:relative;display:block;width:1px;
  /* die Linie sitzt jeweils am linken Rand ihrer Spalte */
  grid-row:1;
}
.raster i:nth-child(1){grid-column:1}
.raster i:nth-child(2){grid-column:2}
.raster i:nth-child(3){grid-column:3}
.raster i:nth-child(4){grid-column:4}
.raster i:nth-child(5){grid-column:4;justify-self:end}
.raster i::before{
  content:"";position:absolute;top:0;left:0;width:1px;
  height:calc(var(--wuchs) * 100vh);
  background:linear-gradient(180deg,rgba(242,238,230,.02),rgba(242,238,230,.09) 22%,rgba(242,238,230,.09) 78%,rgba(242,238,230,.02));
  transition:height .35s linear;
}
/* Der Kopf der Linie glimmt, solange sie waechst */
.raster i::after{
  content:"";position:absolute;left:-3px;width:7px;height:7px;
  top:calc(var(--wuchs) * 100vh - 3px);
  background:radial-gradient(circle,var(--gold),transparent 65%);
  opacity:calc((1 - var(--wuchs)) * .85);
  transition:top .35s linear,opacity .5s ease;
}
/* :where() hält diese Regel auf Spezifität 0 — sie stach vorher
   .kopf{position:sticky} bei gleicher Spezifität aus, weil sie später im
   Stylesheet steht (derselbe Fundtyp wie bei röststube neun, 01.09.2026). */
:where(main,.kopf,.fuss,.prototyp-fuss){position:relative;z-index:1}
@media(max-width:52rem){
  .raster{grid-template-columns:repeat(2,1fr)}
  .raster i:nth-child(3),.raster i:nth-child(4){display:none}
  .raster i:nth-child(5){grid-column:2;justify-self:end}
}
@media(prefers-reduced-motion:reduce){
  .raster{--wuchs:1}
  .raster i::before,.raster i::after{transition:none}
  .raster i::after{display:none}
}

/* ======================================================================
   Ihr Team · vier Rollen mit festem Ansprechpartner (11.08.2026)
   Ersetzt das frühere Exklusivitäts-Argument „nur sechs Kunden".
   ====================================================================== */
.team{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.6rem);
  margin-top:clamp(2.4rem,6vh,4rem);perspective:1300px;
}
.teamkarte{
  background:var(--bg-2);border-radius:20px;padding:clamp(1.4rem,2.4vw,2rem);
  display:flex;flex-direction:column;gap:.7rem;transform-style:preserve-3d;
  transition:transform .45s cubic-bezier(.16,.8,.3,1),background .3s;
}
.teamkarte:hover{background:#1E2B45}
.teamkarte .rolle{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.teamkarte b{font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(1.15rem,1.9vw,1.6rem);line-height:1.1;letter-spacing:.01em}
.teamkarte p{font-size:.94rem;line-height:1.6;color:var(--ink-2);margin:0}
.teamkarte .zusage{
  margin-top:auto;padding-top:.9rem;border-top:1px solid var(--line);
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
}
@media(max-width:72rem){.team{grid-template-columns:repeat(2,1fr)}}
@media(max-width:44rem){.team{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.teamkarte{transition:none;transform:none!important}}

/* ======================================================================
   P1–P3 · Aufwendige Effekte (11.08.2026)
   Diese Seite trägt kein Tempo-Versprechen, deshalb darf hier mehr laufen
   als auf der VALO-Startseite. Alles bleibt auf transform und opacity.
   ====================================================================== */

/* P1 · Zerfallende Schlagzeile beim Wegscrollen */
.auftakt h1{--zerfall:0}
.auftakt h1 .zeile{overflow:visible}          /* Buchstaben dürfen austreten */
.auftakt h1 .letter{
  display:inline-block;will-change:transform,opacity;
  transform:translate(calc(var(--dx,0px) * var(--zerfall)),
                      calc(var(--dy,0px) * var(--zerfall)))
            rotate(calc(var(--r,0deg) * var(--zerfall)));
  opacity:calc(1 - var(--zerfall) * .85);
}
/* Solange die Zeile noch einfährt, gilt die Zeilenblende, danach der Zerfall */
.auftakt h1 .zeile > span{will-change:transform}

/* P2 · Zeigerspur in der Team-Sektion */
.spurfeld{position:relative}
.spurfeld > *:not(.spur){position:relative;z-index:1}
.spur{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.marke-spur{
  position:absolute;top:0;left:0;width:90px;height:116px;border-radius:12px;
  background:linear-gradient(150deg,rgba(232,220,200,.22),rgba(232,220,200,.04) 60%),var(--bg-2);
  border:1px solid var(--line);opacity:0;will-change:transform,opacity;
}
.marke-spur.an{animation:spurAuf 1.5s cubic-bezier(.19,1,.22,1) forwards}
@keyframes spurAuf{
  0%{opacity:0;scale:.72}
  18%{opacity:.85;scale:1}
  60%{opacity:.6}
  100%{opacity:0;scale:1.04}
}

/* P3 · Magnetische Kacheln mit Verzerrung */
.karten .leistung,.teamkarte{
  will-change:transform;transform-origin:50% 50%;
  transition:transform .5s cubic-bezier(.16,.8,.3,1),background .3s;
}
.karten{perspective:1200px}

@media(prefers-reduced-motion:reduce){
  .auftakt h1 .letter{transform:none!important;opacity:1!important}
  .marke-spur{display:none}
  .karten .leistung,.teamkarte{transition:none;transform:none!important}
}
@media (prefers-reduced-data: reduce){
  .auftakt h1 .letter{transform:none;opacity:1}
  .marke-spur{display:none}
}