/* ══ DIE LEISTUNGSSEITEN ═══════════════════════════════════════════════════════════════
   /social und /editing. Liegt AUF recht.css (die liefert Kopf, Fuss, Farben und
   Formular) und bringt nur das dazu, was diese beiden Seiten brauchen. Die Rechtsseiten
   laden es nicht — ein Impressum braucht kein Telefon-Modell.

   ── DIE IDEE HINTER /social ────────────────────────────────────────────────────────────
   Ty 17.09.2026, mit der Bad-&-Boujee-Seite als Vorbild: „GENAU SOWAS WILL ICH AUCH FÜR
   YOUSEF."
   Was diese Seite stark macht, ist nicht Deko, sondern dass sie EINE Idee zu Ende denkt:
   „dieser Laden hat noch nie ein Querformat gedreht, also bauen wir die Seite hochkant."
   Die Idee hier ist genauso einfach: was Yousef verkauft, ist ein Feed, der sich fuellt.
   Also zeigt die Seite genau das — ein Telefon, dessen Raster sich fuellt, wenn man das
   Paket wechselt. Und weil wir keine Kundeninhalte erfinden duerfen, steht auf jeder
   Kachel, WAS fuer ein Beitrag das waere. Damit ist das Schaustueck zugleich der
   Redaktionsplan: man sieht die Menge UND die Sorte.
   ══════════════════════════════════════════════════════════════════════════════════════ */

:root{
  --social:#f472b6;        /* der Akzent dieser Seite — nicht Instagram-Lila, aber aus
                              derselben Familie; Gold bleibt der Knopf, wie ueberall */
  --social-2:#c084fc;
  --schnitt:#38bdf8;       /* /editing bekommt seinen eigenen, damit die beiden Seiten
                              nicht wie dieselbe aussehen */
}

/* ── KOPFBEREICH ────────────────────────────────────────────────────────────────────── */
.lhero{display:grid;gap:clamp(30px,5vw,56px);align-items:center;
  padding:clamp(34px,6vw,62px) 0 clamp(20px,3vw,30px)}
@media(min-width:900px){ .lhero{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)} }
.lhero h1{font-size:clamp(34px,5.6vw,60px);line-height:1.03;letter-spacing:-1.4px;margin:0 0 16px}
.lhero .gross{margin:0 0 24px}
.lmarke{display:inline-flex;align-items:center;gap:9px;margin:0 0 16px;
  font-size:11.5px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--social)}
.lmarke::before{content:"";width:26px;height:1px;background:currentColor;opacity:.6}
.lreihe{display:flex;flex-wrap:wrap;gap:11px;margin-bottom:18px}
.lfakten{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;font-size:12.5px;color:var(--tx3)}
.lfakten span{display:inline-flex;align-items:center;gap:7px}
.lfakten span::before{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--social);flex-shrink:0}

/* ── DAS TELEFON ────────────────────────────────────────────────────────────────────
   Kein Bild, sondern gebaut: ein Bild waere eine Datei mehr, wuerde bei jeder Aenderung
   veralten und koennte sich nicht fuellen. */
.fonfeld{display:flex;flex-direction:column;align-items:center;gap:16px}
.fon{position:relative;width:min(300px,86vw);flex-shrink:0}
.fon::after{content:"";position:absolute;inset:-14% -18% -8%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(244,114,182,.20),transparent 72%);
  filter:blur(6px);pointer-events:none}
.fon__rahmen{position:relative;border-radius:34px;padding:9px;
  background:linear-gradient(160deg,#2b2440,#15111f 42%,#241d33);
  box-shadow:0 30px 70px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.14)}
.fon__schirm{position:relative;border-radius:26px;overflow:hidden;background:#0d0a15;
  border:1px solid rgba(255,255,255,.07)}
.fon__kerbe{position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:78px;height:19px;border-radius:99px;background:#0b0810;z-index:3}
.fon__kopf{display:flex;align-items:center;gap:10px;padding:34px 13px 12px}
.fon__ava{width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:conic-gradient(from 210deg,var(--social),var(--social-2),var(--gold),var(--social));
  box-shadow:inset 0 0 0 3px #0d0a15}
.fon__wer{min-width:0;line-height:1.3}
.fon__wer b{display:block;font-size:12.5px;color:var(--tx)}
.fon__wer span{display:block;font-size:10.5px;color:var(--tx3)}
.fon__raster{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:0 3px 3px}
.kachel{position:relative;aspect-ratio:3/4;border-radius:5px;overflow:hidden;
  display:flex;align-items:flex-end;padding:6px 6px 7px;
  background:linear-gradient(150deg,rgba(244,114,182,.30),rgba(192,132,252,.16));
  animation:kachelRein .34s var(--weich) both}
.kachel:nth-child(3n+2){background:linear-gradient(150deg,rgba(224,168,60,.28),rgba(244,114,182,.14))}
.kachel:nth-child(3n+3){background:linear-gradient(150deg,rgba(139,92,246,.30),rgba(56,189,248,.14))}
.kachel i{font-style:normal;font-size:8.5px;font-weight:700;line-height:1.25;
  color:rgba(255,255,255,.92);text-shadow:0 1px 3px rgba(0,0,0,.6)}
.kachel::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.45),transparent 58%)}
.kachel i{position:relative;z-index:2}
/* Die leeren Wochen davor — dieselbe Form, nur nichts drin. Sie stehen fuer den Zustand,
   aus dem der Kunde kommt, und machen den Unterschied ohne ein Wort sichtbar. */
.kachel--leer{background:rgba(255,255,255,.028);border:1px dashed rgba(255,255,255,.07);
  animation:none}
.kachel--leer::after{display:none}
@keyframes kachelRein{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){ .kachel{animation:none} }

/* ── DER SCHALTER ───────────────────────────────────────────────────────────────────── */
.schalter{display:inline-flex;padding:4px;border-radius:99px;
  background:rgba(255,255,255,.04);border:1px solid var(--bd2)}
.schalter button{border:none;background:none;cursor:pointer;font-family:inherit;
  padding:9px 16px;border-radius:99px;font-size:12.5px;font-weight:800;color:var(--tx3);
  transition:background .18s,color .18s;white-space:nowrap}
.schalter button[aria-pressed="true"]{background:var(--social);color:#1a0d14}
.schalter button:hover{color:var(--tx)}
.schalter button[aria-pressed="true"]:hover{color:#1a0d14}

/* ── DER TAKT: EIN MONAT ALS RASTER ──────────────────────────────────────────────────
   Die Frage hinter „6 oder 12" ist nicht die Zahl, sondern: wie oft sieht mich jemand?
   Dreissig Kaestchen beantworten das in einer halben Sekunde. */
.takt{margin:6px 0 0}
.takt__gitter{display:grid;grid-template-columns:repeat(15,1fr);gap:4px;margin:12px 0 10px}
.takt__tag{aspect-ratio:1;border-radius:3px;background:rgba(255,255,255,.045)}
.takt__tag--post{background:var(--social);box-shadow:0 0 10px rgba(244,114,182,.45)}
.takt__unter{margin:0;font-size:12.5px;color:var(--tx3)}

/* ── PAKETE ─────────────────────────────────────────────────────────────────────────── */
.pakreihe{display:grid;gap:16px;margin-top:22px}
@media(min-width:760px){ .pakreihe{grid-template-columns:1fr 1fr} }
.pak{position:relative;display:flex;flex-direction:column;padding:24px;border-radius:18px;
  background:var(--karte);border:1px solid var(--bd2);transition:border-color .2s,transform .2s var(--weich)}
.pak[data-an="true"]{border-color:var(--social);transform:translateY(-3px);
  box-shadow:0 18px 44px rgba(244,114,182,.10)}
.pak__name{margin:0;font-size:18px;font-weight:800;color:var(--tx)}
.pak__preis{display:flex;align-items:baseline;gap:7px;margin:8px 0 3px}
.pak__preis b{font-size:34px;font-weight:800;letter-spacing:-1px;color:var(--tx);line-height:1}
.pak__preis span{font-size:13px;color:var(--tx3)}
.pak__menge{margin:0 0 16px;font-size:12.5px;font-weight:800;letter-spacing:.4px;color:var(--social)}
.pak ul{margin:0 0 18px;padding-left:18px}
.pak li{font-size:13.5px;margin-bottom:6px}
.pak .knopf{margin-top:auto}

/* ── ZWEI WEGE, EIN KASTENPAAR ──────────────────────────────────────────────────────── */
.zweiweg{display:grid;gap:14px;margin:16px 0 0}
@media(min-width:700px){ .zweiweg{grid-template-columns:1fr 1fr} }
.weg{padding:20px 22px;border-radius:16px;background:var(--karte);border:1px solid var(--bd2)}
.weg h3{margin:0 0 6px;font-size:15.5px;color:var(--tx)}
.weg p{margin:0;font-size:13.5px}
.weg__preis{display:inline-block;margin-top:12px;padding:5px 11px;border-radius:99px;
  font-size:11.5px;font-weight:800;color:var(--social);
  background:rgba(244,114,182,.10);border:1px solid rgba(244,114,182,.30)}

/* ── /editing: derselbe Aufbau, andere Farbe ────────────────────────────────────────── */
.schnitt .lmarke,.schnitt .kachel i{color:var(--schnitt)}
.schnitt .lfakten span::before,.schnitt .takt__tag--post{background:var(--schnitt)}
.schnitt .fon::after{background:radial-gradient(closest-side,rgba(56,189,248,.18),transparent 72%)}
.schnitt .schalter button[aria-pressed="true"]{background:var(--schnitt);color:#06222f}
.schnitt .pak[data-an="true"]{border-color:var(--schnitt);box-shadow:0 18px 44px rgba(56,189,248,.10)}
.schnitt .pak__menge,.schnitt .weg__preis{color:var(--schnitt)}
.schnitt .weg__preis{background:rgba(56,189,248,.10);border-color:rgba(56,189,248,.30)}