@charset "UTF-8";

/* =========================================================
  Camtalk24 – FINAL CSS (basierend auf Bianca-Cams)
  Hellblau/Dunkelblau, ruhige Abstände, mobile-optimiert
  Nur .ct-* Klassen – zerstört nichts bestehendes
  ========================================================= */

/* ---------- Farb- & Typo-Variablen ---------- */

:root {
  --ct-text:        #1e2742;  /* Fließtext dunkelblau-grau */
  --ct-text-soft:    #31426b;  /* etwas heller */
  --ct-head:        #2f5fa7;  /* Überschriften (Mittelblau) */
  --ct-title:        #6b8eff;  /* Sektionstitel/Highlights */
  --ct-card:        #d2dbf2;  /* Karten-Hintergrund (hellblau) */
  --ct-card-strong:  #b9ccff;  /* kräftigeres Hellblau (Badges) */
  --ct-border:      #c7d6ea;  /* feine Umrandung */
  --ct-shadow:      rgba(0,0,0,.08);
  --ct-check:        #43c97d;  /* Haken/Success */
  --ct-strong-text:  #2e3850;  /* dezente Hervorhebung */
}

/* =========================================================
  HERO (H1, Benefit-Badges, H2, Sub)
  ========================================================= */

.ct-hero {
  background: var(--ct-card);
  border-radius: 10px;
  padding: 20px;
  margin: 0;
  text-align: center;
  color: var(--ct-text);
  border: 1px solid #c6cfe5;
}

.ct-h1 {
  color: var(--ct-head);
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 14px;
}

.ct-benefits {
  list-style: none;
  padding: 0;
  margin: 12px 0 16px;
}

.ct-benefits li {
  display: inline-block;
  background: var(--ct-card-strong);
  color: var(--ct-text);
  border-radius: 6px;
  padding: 6px 10px;
  margin: 4px;
  font-size: .9rem;
  line-height: 1.2;
}

.ct-h2 {
  color: var(--ct-head);
  font-size: 1.05rem;
  margin: 14px 0 8px;
  font-weight: 600;
}

.ct-sub {
  font-size: .95rem;
  line-height: 1.5;
  color: var(--ct-text-soft);
  margin: 8px auto 0;
  max-width: 920px;
}

/* Mobile Feinschliff */

@media (max-width: 768px) {
  .ct-hero { margin: 0; padding: 16px; }
  .ct-h1  { font-size: 1.08rem; margin-bottom: 12px; }
  .ct-h2  { font-size: .96rem; }
  .ct-benefits li { font-size: .88rem; }
  .ct-sub  { font-size: .9rem; }
}

/* =========================================================
  PROFIL-LISTE (Bild links, Text rechts)
  ========================================================= */

.ct-wrap {
  max-width: 980px;
  margin: 26px auto 40px;
  padding: 0 10px;
}

.ct-title {
  text-align: center;
  color: var(--ct-title);
  font-size: 1.32rem;
  font-weight: 600;
  margin: 0 0 18px;
}

.ct-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.ct-profile {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--ct-card);
  border: 1px solid var(--ct-border);
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 3px 10px var(--ct-shadow);
}

.ct-profile > img {
  width: 180px;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.ct-content {
  flex: 1;
}

.ct-content h3 {
  margin: 2px 0 8px;
  color: var(--ct-head);
  font-size: 1.02rem;
  font-weight: 600;
}

.ct-content p {
  margin: 0;
  line-height: 1.45;
  color: var(--ct-text);
  font-size: .95rem;
}

/* Mobile Layout */

@media (max-width: 768px) {
  .ct-profile {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .ct-profile > img {
    width: 88%;
    max-width: 320px;
  }

  .ct-content p {
    text-align: center;
  }
}

/* Engeres Layout + 6-Zeilen-Kürzung mobil (wie Bianca-Cams) */

.ct-content br {
  display: none !important;
}

.ct-content p {
  margin: 0 !important;
  line-height: 1.45 !important;
}

.ct-content p + p {
  margin-top: 6px !important;
}

@media (max-width: 768px) {
  .ct-content p {
    display: -webkit-box;
    -webkit-line-clamp: 6;    /* Anzahl der sichtbaren Zeilen */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* =========================================================
  SEO-/INFO-BOX UNTEN (gleiches Look&Feel wie Hero)
  ========================================================= */

.ct-textbox {
  background: var(--ct-card);
  border: 1px solid #c6cfe5;
  border-radius: 8px;
  padding: 18px 22px;
  margin: 22px 0;
  line-height: 1.6;
  color: var(--ct-text);
  font-size: .97rem;
  box-shadow: 0 3px 10px var(--ct-shadow);
}

.ct-textbox h2 {
  color: var(--ct-head);
  font-size: 1.06rem;
  margin: 0 0 12px;
  text-align: center;
}

.ct-textbox p {
  margin: 0 0 12px;
}

.ct-textbox p:last-child {
  margin-bottom: 0;
}

.ct-textbox a {
  color: var(--ct-head);
  text-decoration: underline;
  font-weight: 600;
}

.ct-textbox a:hover {
  color: var(--ct-title);
  text-decoration: none;
}

/* =========================================================
  OPTIONALE MINI-BADGES (Hakenliste – dunkler Stil)
  ========================================================= */

.ct-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 10px;
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
}

.ct-badges li {
  position: relative;
  padding-left: 18px;
  font-size: .92rem;
  color: var(--ct-text);
}

.ct-badges li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(1px);
  color: var(--ct-check);
  font-weight: 800;
}

/* =========================
  Menüfarben Camtalk24 (oberer Balken)
  ========================= */

nav,
.mainmenu,
.ct-menu {
  background: #2e2fa3 !important;
  border-top: 2px solid #6b74ff;
  border-bottom: 2px solid #6b74ff;
  text-align: center;
}

nav a,
.mainmenu a,
.ct-menu a {
  color: #ffffff !important;
  text-decoration: none;
  padding: 10px 28px;
  font-weight: 600;
  font-size: 0.94rem;
  border-right: 1px solid #3d3dad;
  transition: all 0.2s ease;
}

nav a:last-child,
.mainmenu a:last-child,
.ct-menu a:last-child {
  border-right: none;
}

nav a:hover,
.mainmenu a:hover,
.ct-menu a:hover {
  background: #5457d3 !important;
}

nav a.active,
.mainmenu a.active,
.ct-menu a.active {
  background: #1f3fb8 !important;
  color: #fff !important;
}

/* =========================
   Dezente Fettschrift – universell für CamTalk24
   Gilt für Hero, Textboxen und Profiltexte
   Menü, Buttons und Navigation bleiben unberührt
   ========================= */

.ct-hero strong,
.ct-hero b,
.ct-textbox strong,
.ct-textbox b,
.ct-content strong,
.ct-content b {
  font-weight: 600;
  color: var(--ct-strong-text);
}

/* Sicherheit: Navigation & Buttons nicht beeinflussen */

nav a strong,
nav a b,
button strong,
button b,
.btn strong,
.btn b,
.badge strong,
.badge b {
  color: inherit !important;
  font-weight: inherit !important;
}

/* Überschrift über Profil-Listen oder SEO-Textboxen */

.ct-textbox h3 {
  color: #405c8e;
  font-size: 1.08rem;
  font-weight: 600;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 24px;
}

/* Abstand zwischen Überschrift und Profil-Listen */

.ct-desc {
  margin-top: 24px !important;
}

/* SEO-Textboxen insgesamt etwas enger halten */

.ct-wrap .ct-textbox {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

/* Mehrere Textboxen direkt untereinander noch kompakter */

.ct-wrap .ct-textbox + .ct-textbox {
  margin-top: 4px !important;
}

/* In der Flex-Liste regelt gap die Abstaende zwischen den Boxen. */

.ct-wrap .ct-list > .ct-textbox {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Plattform-Leerzeile nur vor dem eigentlichen Profil ausgleichen */

.kit > .l-container.h-center:has(> .webmasterSeo > .ct-hero) + .l-container.h-center > .c-profile-page{
  margin-top: -16px;
}

/* Zusaetzlichen Aussenabstand direkt nach dem Chat-Hero entfernen */

.webmasterSeo:has(> .ct-hero) + .payment-hint{
  margin-top: 0;
}