/* ============================================================
   werbespots.ai 2026 — Sub-Page-Overlay (08.08.2026)
   Wirkung NUR unter body.ws26-sub (Preview-Unterseiten).
   Liegt NACH der alten style.css und hebt den alten Seiten-
   inhalt auf die 2026-Optik der neuen Startseite:
   Gewichtsduo 300/700, EINE Kartensignatur, Pill-CTAs,
   Farb-Rollen (Pink=CTA/Akzent, Mint=Beweis), weiche Verläufe
   statt Farbflächen. Vorbild: ansagen.ai style2026.css
   (dort teilen Alt+Neu die Klassennamen — hier auch:
   .section / .cto / .contentbox_text / .faq__wrapper).
   ============================================================ */

body.ws26-sub{
  /* Tokens — identisch zur 2026-Startseite (index2026.php) */
  --ws-navy:#161c70;
  --ws-ink-2:#565b8e;
  --ws-pink:#ff006a;
  --ws-pink-deep:#e0005d;
  --ws-mint:#2dd28d;
  --ws-mint-ink:#127a52;
  --ws-line:rgba(22,28,112,.10);
  --ws-line-soft:rgba(22,28,112,.07);
  --ws-card-grad:linear-gradient(180deg,#ffffff 0%,#fafbfe 100%);
  --ws-zone-grad:linear-gradient(180deg,#ffffff 0%,#f6f7fc 100%);
  --ws-navy-grad:linear-gradient(135deg,#141a66 0%,#1d2489 55%,#232b9e 100%);
  --ws-cta-grad:linear-gradient(180deg,#ff2e82 0%,#ff006a 55%,#e0005d 100%);
  --ws-shadow-card:0 6px 24px rgba(22,28,112,.06);
  --ws-shadow-card-hover:0 12px 32px rgba(22,28,112,.11);
  --ws-radius:16px;
  --ws-ease:cubic-bezier(.4,0,.2,1);
  font-size:16.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Typografie: Gewichtsduo ---------- */
body.ws26-sub h1,
body.ws26-sub h2{
  font-weight:300 !important;
  line-height:1.22;
  letter-spacing:-.01em;
  text-wrap:balance;
}
body.ws26-sub h1{font-size:clamp(1.9rem,3.6vw,2.7rem);}
body.ws26-sub h2{font-size:clamp(1.5rem,2.6vw,2.05rem);}
body.ws26-sub h1 strong,
body.ws26-sub h2 strong{font-weight:700 !important;color:var(--ws-pink) !important;}
body.ws26-sub h3{font-size:1.08rem;font-weight:600 !important;line-height:1.35;}
body.ws26-sub .section[role=content] p,
body.ws26-sub .section[role=content] li{line-height:1.62;}

/* ---------- Zonen: weiche Verläufe statt Farbflächen ---------- */
body.ws26-sub .section.bg-gray100,
body.ws26-sub .bg-gray100{background:var(--ws-zone-grad) !important;}

/* ---------- CTAs: Pill mit Verlauf (bleibt beim Hover gefüllt) ---------- */
body.ws26-sub a.cto,
body.ws26-sub button.cto,
body.ws26-sub .section a.cto,
body.ws26-sub .section button.cto{
  border:0 !important;
  border-radius:999px !important;
  text-transform:none !important;
  letter-spacing:.01em !important;
  font-size:.95rem !important;
  font-weight:600 !important;
  padding:.78rem 1.7rem !important;
  color:#fff !important;
  background:var(--ws-cta-grad) !important;
  box-shadow:0 8px 22px rgba(255,0,106,.28) !important;
  transition:transform .18s var(--ws-ease),box-shadow .18s var(--ws-ease) !important;
}
body.ws26-sub a.cto:hover,
body.ws26-sub button.cto:hover,
body.ws26-sub .section a.cto:hover,
body.ws26-sub .section button.cto:hover{
  color:#fff !important;
  background:var(--ws-cta-grad) !important;
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(255,0,106,.36) !important;
}
body.ws26-sub a.cto:active,
body.ws26-sub button.cto:active{transform:scale(.985);}
/* Sekundär als Ghost (2026-Farb-Rolle: Pink nur für den Primär-CTA) */
body.ws26-sub a.cto.secondary,
body.ws26-sub button.cto.secondary,
body.ws26-sub .section a.cto.secondary,
body.ws26-sub .section button.cto.secondary{
  color:var(--ws-navy) !important;
  background:linear-gradient(180deg,#ffffff,#f6f7fc) !important;
  border:1px solid var(--ws-line) !important;
  box-shadow:none !important;
}
body.ws26-sub a.cto.secondary:hover,
body.ws26-sub button.cto.secondary:hover,
body.ws26-sub .section a.cto.secondary:hover,
body.ws26-sub .section button.cto.secondary:hover{
  color:var(--ws-navy) !important;
  background:linear-gradient(180deg,#ffffff,#f6f7fc) !important;
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(22,28,112,.10) !important;
}

/* ---------- Kartensignatur (EINE) ---------- */
body.ws26-sub .contentbox_text{
  background:var(--ws-card-grad);
  border:1px solid var(--ws-line);
  border-radius:var(--ws-radius);
  box-shadow:var(--ws-shadow-card);
  transition:transform .2s var(--ws-ease),box-shadow .2s var(--ws-ease);
}
body.ws26-sub .contentbox_text:hover{
  transform:translateY(-2px);
  box-shadow:var(--ws-shadow-card-hover);
}

/* ---------- Preis-Karten (Vue: .contentbox_text.preis) ---------- */
body.ws26-sub .contentbox_text.preis.highlight{
  border-color:rgba(255,0,106,.35);
  box-shadow:0 10px 32px rgba(255,0,106,.10);
}
/* Rabatt-Badge: Mint = Beweis-Rolle (statt Cyan-Farbfläche) */
body.ws26-sub .contentbox_text.preis .rabatt{
  color:var(--ws-mint-ink) !important;
  background:linear-gradient(180deg,#e7fbf2,#d5f5e7) !important;
  border:1px solid rgba(45,210,141,.35);
  border-top:0;
  border-radius:0 0 10px 10px;
  font-weight:600;
}
body.ws26-sub .contentbox_text.preis .rabatt strong{color:var(--ws-mint-ink);}

/* ---------- FAQ ---------- */
body.ws26-sub .faq__wrapper .faq__wrapper--frage{
  background:var(--ws-card-grad);
  border:1px solid var(--ws-line);
  border-radius:12px;
  box-shadow:0 3px 12px rgba(22,28,112,.05);
}
body.ws26-sub .faq__wrapper .faq__wrapper--frage:hover{
  background:var(--ws-card-grad);
  border-color:rgba(22,28,112,.18);
  box-shadow:var(--ws-shadow-card);
}
body.ws26-sub .faq__wrapper .faq__wrapper--frage.active{
  background:#fff;
  border-color:rgba(255,0,106,.35);
}
body.ws26-sub .faq__wrapper .faq__wrapper--frage p.faq-frage{font-weight:600 !important;}

/* ---------- Statische Preistabelle (/werbespot-kosten, Art 5) ---------- */
body.ws26-sub .preis-table th,
body.ws26-sub .preis-table td{border-bottom:1px solid var(--ws-line);}
body.ws26-sub .preis-table thead th{color:var(--ws-ink-2);font-weight:600;letter-spacing:.04em;}
body.ws26-sub .preis-table tbody tr:hover{background:#f7f8fd;}

/* ---------- Vorlagen-Links: ruhig statt VERSAL ---------- */
body.ws26-sub .wrapper__mustertexte ul li a.vorlage-link{
  text-transform:none;
  letter-spacing:.01em;
  font-weight:500;
  border-bottom:0;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:rgba(255,0,106,.35);
  transition:color .18s var(--ws-ease),text-decoration-color .18s var(--ws-ease);
}
body.ws26-sub .wrapper__mustertexte ul li a.vorlage-link:hover{
  color:var(--ws-pink-deep);
  text-decoration-color:var(--ws-pink-deep);
}

/* ---------- Links im Content: Pink nur als Hover-Akzent ---------- */
body.ws26-sub .section[role=content] a:not(.cto):not(.vorlage-link):hover{color:var(--ws-pink);}

/* ---------- Kundenkonto ---------- */
/* Sub-Nav-Pills: Alt-CSS setzt beim Hover/Active den Pink-Hintergrund,
   die generische Content-Link-Hover-Regel oben färbte die Schrift gleichzeitig
   pink → unsichtbar. Schrift auf Pink-Grund bleibt weiß. */
body.ws26-sub .contentbox_text.mein-konto:hover a,
body.ws26-sub .contentbox_text.mein-konto.active a,
body.ws26-sub .contentbox_text.mein-konto a:hover{color:#fff !important;}
/* Aufladen-Button: Alt-CSS gibt dem Wrapper einen dunkelblauen Kasten (#00477e),
   die 2026-Pill braucht keinen Kasten dahinter */
body.ws26-sub .wrapper__mein-konto--dashboard .wrapper-button{background:transparent !important;justify-content:center !important;align-items:center !important;}

/* ---------- Scrollbar: ruhig statt Pink (Alt-CSS färbt den Daumen
   in --main-light; die 2026-Startseite hat die neutrale Scrollbar).
   Datei lädt nur auf Preview-Unterseiten → globale Regel ist safe. */
::-webkit-scrollbar-thumb:vertical,
::-webkit-scrollbar-thumb:horizontal{background-color:rgba(22,28,112,.30) !important;}
::-webkit-scrollbar-thumb:hover{background-color:rgba(22,28,112,.45) !important;}

/* ---------- Preis-Karten: farbige Top-Balken (Cyan/Lila) raus,
   EINE Kartensignatur; Highlight trägt Pink über border-color ---------- */
body.ws26-sub .contentbox_text.preis{
  border:1px solid var(--ws-line) !important;
  border-radius:var(--ws-radius) !important;
}
body.ws26-sub .contentbox_text.preis.highlight{
  border-color:rgba(255,0,106,.35) !important;
  box-shadow:0 10px 32px rgba(255,0,106,.10);
}

/* ---------- Preisangaben wie auf der 2026-Startseite ----------
   Wert = Navy 700 (Pink bleibt CTA/Headline vorbehalten),
   Streichpreis = ruhiges line-through statt Pink-Schrägstrich-SVG,
   Lila-Balken der Unlimited-Karte raus (EINE Kartensignatur). */
body.ws26-sub .contentbox_text.preis em.preis-neu{color:var(--ws-navy) !important;font-weight:700;}
body.ws26-sub .contentbox_text.preis em.preis-neu+em.preis{
  font-size:1.05rem;
  font-weight:400;
  color:var(--ws-ink-2);
  text-decoration:line-through;
  height:auto;
  margin-top:.3rem;
}
body.ws26-sub .contentbox_text.preis em.preis-neu+em.preis:before{content:none;}
body.ws26-sub .contentbox_text.preis .unlimited{display:none;}
body.ws26-sub .preisangabe-headline.action-purple{color:var(--ws-navy) !important;}

/* ---------- Listen-Marker: Farb-Rollen ----------
   Beweis-Listen (Karten, liste-plus) → Mint; generische
   Chevron-Listen → ruhiges Sekundär-Navy statt Pink. */
body.ws26-sub .section[role=content] ul li:before{color:var(--ws-ink-2);}
body.ws26-sub .contentbox_text ul li:before,
body.ws26-sub .section[role=content] ul.liste-plus li:before{color:var(--ws-mint);}

/* ---------- /vorlagen: Kategorie-Label statt Riesen-H2
   (20 %-Spalte — die H2-Clamp bricht dort mitten im Wort) ---------- */
body.ws26-sub .wrapper__mustertexte h2{
  font-size:.82rem !important;
  font-weight:600 !important;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ws-ink-2) !important;
  line-height:1.5;
  text-wrap:initial;
  padding-top:.35rem;
}
/* Zeilentrenner: gestricheltes Pink → weiche Linie */
body.ws26-sub .wrapper__mustertexte ul li{border-bottom:1px solid var(--ws-line);}
body.ws26-sub .wrapper__mustertexte ul li:last-child{border-bottom:0;}

/* ---------- /vorlagen: Kategorie-Chips als Pills ---------- */
body.ws26-sub .wrapper__mustertexte-navigation a{
  color:var(--ws-navy);
  font-weight:500;
  border:1px solid var(--ws-line);
  border-radius:999px;
  background:var(--ws-card-grad);
  padding:.42rem 1rem;
  box-shadow:0 3px 12px rgba(22,28,112,.05);
  transition:transform .18s var(--ws-ease),box-shadow .18s var(--ws-ease),
    border-color .18s var(--ws-ease),color .18s var(--ws-ease);
}
body.ws26-sub .wrapper__mustertexte-navigation a:hover{
  color:var(--ws-pink);
  background:var(--ws-card-grad);
  border:1px solid rgba(255,0,106,.35);
  transform:translateY(-1px);
  box-shadow:var(--ws-shadow-card);
}

/* ---------- Preisseite: 2026-Preiskarten (2026-08-08) ----------
   Statisches Karten-Markup kommt aus _content/preise.php und ersetzt
   die alte price-packages-Vue-Tabelle (die läuft nur noch im
   ?relaunch2026=off-QA-Pfad). Design = Startseiten-Preiskarten. */
body.ws26-sub .ws26p-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;align-items:stretch;margin-top:2.2rem;}
body.ws26-sub .ws26p-card{position:relative;display:flex;flex-direction:column;background:var(--ws-card-grad);
  border:1px solid var(--ws-line);border-radius:var(--ws-radius);box-shadow:var(--ws-shadow-card);
  padding:1.7rem 1.4rem 1.4rem;transition:box-shadow .2s var(--ws-ease),transform .2s var(--ws-ease);}
body.ws26-sub .ws26p-card:hover{box-shadow:var(--ws-shadow-card-hover);transform:translateY(-2px);}
body.ws26-sub .ws26p-card.highlight{border-color:rgba(255,0,106,.35);box-shadow:0 10px 32px rgba(255,0,106,.10);}
body.ws26-sub .ws26p-badge{position:absolute;top:-.7rem;right:1rem;font-size:.72rem;font-weight:600;letter-spacing:.02em;
  color:var(--ws-mint-ink);background:linear-gradient(180deg,#e7fbf2,#d5f5e7);border:1px solid rgba(45,210,141,.35);
  border-radius:999px;padding:.18rem .7rem;}
body.ws26-sub .ws26p-card h3{font-size:1.02rem;margin:0 0 .9rem;}
body.ws26-sub .ws26p-val{font-size:2.15rem;font-weight:700;line-height:1;letter-spacing:-.01em;color:var(--ws-navy);}
body.ws26-sub .ws26p-val small{font-size:.95rem;font-weight:400;color:var(--ws-ink-2);letter-spacing:0;}
body.ws26-sub .ws26p-was{font-size:.8rem;color:var(--ws-ink-2);text-decoration:line-through;margin-top:.25rem;}
body.ws26-sub .ws26p-total{font-size:.84rem;color:var(--ws-ink-2);margin:.35rem 0 1rem;min-height:2.55em;}
body.ws26-sub .ws26p-card ul{list-style:none;display:grid;gap:.4rem;margin:0 0 1.4rem;padding:1rem 0 0;border-top:1px solid var(--ws-line-soft);}
body.ws26-sub .ws26p-card ul li{display:flex;gap:.5rem;font-size:.85rem;color:var(--ws-ink-2);line-height:1.45;margin:0;padding:0;}
body.ws26-sub .ws26p-card ul li:before{content:none !important;}
body.ws26-sub .ws26p-card ul svg{flex:none;margin-top:.2rem;}
body.ws26-sub .ws26p-card .cto{margin-top:auto;text-align:center;}
body.ws26-sub .ws26p-unlimited{margin-top:1.6rem;display:flex;gap:2rem;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:var(--ws-card-grad);border:1px solid var(--ws-line);border-radius:var(--ws-radius);box-shadow:var(--ws-shadow-card);
  padding:1.4rem 1.6rem;}
body.ws26-sub .ws26p-unlimited h3{margin:0 0 .35rem;}
body.ws26-sub .ws26p-unlimited p{font-size:.92rem;color:var(--ws-ink-2);max-width:62ch;margin:0;}
body.ws26-sub .ws26p-note{font-size:.84rem;color:var(--ws-ink-2);margin-top:1.3rem;}
@media (max-width:1100px){body.ws26-sub .ws26p-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){body.ws26-sub .ws26p-grid{grid-template-columns:1fr;}}

/* ---------- Motion-Budget: reduced motion respektieren ---------- */
@media (prefers-reduced-motion:reduce){
  body.ws26-sub .contentbox_text,
  body.ws26-sub a.cto,
  body.ws26-sub button.cto,
  body.ws26-sub .ws26p-card{transition:none !important;transform:none !important;}
}

/* ---------- 2026-08-08: Generator-Hinweis entschaerft ----------
   Der Glow-Kasten (rotierender conic-gradient-Rahmen aus der alten
   style.css) war zu dominant. Jetzt: ruhige Notiz in Kartensignatur.
   Die NEU-Badges (.hinweis-neu-inline) bleiben unveraendert. */
body.ws26-sub .hinweis-generator{padding:0;box-shadow:none;}
body.ws26-sub .hinweis-generator::before{display:none;animation:none;}
body.ws26-sub .hinweis-generator-inner{
  background:var(--ws-card-grad);
  border:1px solid var(--ws-line);
  border-radius:14px;
  padding:.8rem 1.15rem;
}
body.ws26-sub .hinweis-generator-lead{font-size:.93rem;line-height:1.55;color:var(--ws-ink-2);}
body.ws26-sub .hinweis-generator-lead strong{color:var(--ws-navy);}

/* ---------- 2026-08-08: Mobile-Overflow-Fix (Auftrag 1.1) ----------
   Grid-Items haben min-width:auto -> Track waechst auf min-content und
   sprengt bei <=360px den Layout-Viewport (Kontakt-Boxen auf /generator:
   320px-Geraet renderte 337px breit). min-width:0 laesst die Boxen
   schrumpfen, Innentext bricht normal um. */
body.ws26-sub .grid-2 > *,
body.ws26-sub .grid-3 > *,
body.ws26-sub .grid-4 > *{min-width:0}

/* ---------- 2026-08-08: Live-Tool-Karte (.gen-live, analog ansagen.ai) ----
   Generator auf /generator in einer weissen Karte mit Navy-Kopfleiste
   (Live-Punkt + Hinweis). Portiert von ansagen.ai style2026.css,
   Farben auf ws-Tokens umgezogen. Der Shadow-DOM des Generators bringt
   ~4.5rem eigenes padding-bottom mit (wrapper 2rem + konfigurator 2.5rem
   in styles_flow) - von aussen nicht stylbar, daher den Host hochziehen;
   .gen-live hat overflow:hidden und schneidet sauber. Desktop-only:
   mobil (<=767px) hat die Flow-CSS andere Paddings. */
body.ws26-sub .gen-live{
  scroll-margin-top:5.5rem;background:#fff;
  border:1px solid var(--ws-line);border-radius:var(--ws-radius);
  box-shadow:0 18px 50px -14px rgba(22,28,112,.32),var(--ws-shadow-card);
  overflow:hidden;
}
body.ws26-sub .gen-live-bar{
  display:flex;justify-content:space-between;align-items:center;gap:.75rem 1.5rem;flex-wrap:wrap;
  background:var(--ws-navy-grad);
  color:#fff;padding:.7rem 1.4rem;
}
/* color mit !important: das Overlay zwingt Spans in [role=content] sonst
   auf Navy — auf dem Navy-Balken unsichtbar. Kein MQ-Override betroffen. */
body.ws26-sub .gen-live-live{
  display:inline-flex;align-items:center;gap:.6rem;color:#fff !important;
  font-size:.8rem;font-weight:500;text-transform:uppercase;letter-spacing:.07em;
}
body.ws26-sub .gen-live-dot{
  width:.55rem;height:.55rem;border-radius:50%;background:var(--ws-mint);
  box-shadow:0 0 0 0 rgba(45,210,141,.6);animation:ws-gen-pulse 2s infinite;
}
@keyframes ws-gen-pulse{
  0%{box-shadow:0 0 0 0 rgba(45,210,141,.6);}
  70%{box-shadow:0 0 0 .55rem rgba(45,210,141,0);}
  100%{box-shadow:0 0 0 0 rgba(45,210,141,0);}
}
body.ws26-sub .gen-live-hint{color:rgba(255,255,255,.85) !important;font-size:.8rem;}
body.ws26-sub .gen-live-body{padding:1.25rem 1.5rem 1.5rem;}
@media(min-width:768px){
  body.ws26-sub .gen-live-body ai-generator{display:block;margin-bottom:-3.5rem;}
}
@media(max-width:767px){
  body.ws26-sub .gen-live-body{padding:.75rem;}
  body.ws26-sub .gen-live-hint{display:none;}
}
@media(prefers-reduced-motion:reduce){body.ws26-sub .gen-live-dot{animation:none;}}

/* ---------- 2026-08-08 (4.2): Vergleichstabelle /preise ----------
   Muster der 2026-Startseite (.cmp-table), auf ws-Tokens und Subpage-
   Scope uebertragen. Ohne nowrap-Spalte (Mobile), Wrapper scrollt. */
body.ws26-sub .ws26-tablewrap{overflow-x:auto;margin:1.2rem 0;}
body.ws26-sub .cmp-table{width:100%;border-collapse:collapse;font-size:.94rem;}
body.ws26-sub .cmp-table th,body.ws26-sub .cmp-table td{padding:.7rem .9rem;text-align:left;border-bottom:1px solid var(--ws-line);vertical-align:top;}
body.ws26-sub .cmp-table thead th{font-weight:600;color:var(--ws-navy);font-size:.86rem;}
body.ws26-sub .cmp-table td:first-child{font-weight:600;color:var(--ws-navy);}
body.ws26-sub .cmp-table tbody tr:last-child td{border-bottom:0;}