:root{
  --shot-radius: 14px;
}

/* HORIZONTALES SCROLLEN VERMEIDEN */
html, body { overflow-x: clip; }

/* HERO */
.hero{
  position:relative;
  border-radius:28px;
  padding:78px 54px;
  overflow:hidden;
  color:#fff;
  box-shadow:var(--shadow-lg);
  background:var(--pn-primary);
  background-image: url(../images/header-centra.png);
}
.hero h1{
  margin:0 0 10px;
  font-size:clamp(30px,5.4vw,48px);
  line-height:1.08;
  font-weight: 100;
}
.hero p{
  margin:0 0 24px;
  opacity:.98;
  font-size:clamp(16px,2.4vw,19px);
  color: #f5a9c9;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);
  padding:7px 12px;
  border-radius:999px;
  font-size:12px;
  margin-bottom:14px;
}
.badge:before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:#fff;
  opacity:.9;
}
.hcontainer {
  max-width:1180px;
  margin-inline:auto;
  padding: 28px 28px 0px 28px;
}

/* Hero-Deko */
.hero .bg-shapes span{
  position:absolute; border-radius:999px; filter: blur(40px); opacity:.25;
}
.hero-actions{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:12px;
}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.14); color:#fff; font-size:14px;
  transition: transform .15s ease;
}
.chip:hover{ transform: translateY(-2px); }

/* TOC: fixiert rechts, aber direkt neben dem Content */
.toc{
  position: sticky; /* Fallback für mittlere Viewports */
  top: calc((var(--nav-height, 95px)) + 10px);
  max-width: 260px;
  background: #ffffffcc;
  backdrop-filter: blur(6px);
  border:1px solid var(--pn-border);
  border-radius: 14px;
  padding:12px 14px;
  display:none;
}
.toc h3{ margin:6px 0 10px; font-size:14px; color: var(--pn-muted); }
.toc ol{ list-style:none; padding:0; margin:0; display:grid; gap:6px; }
.toc a{
  display:flex; align-items:center; gap:8px; padding:6px 8px;
  border-radius: 10px; border:1px solid transparent;
  font-size:14px; color: var(--pn-ink);
}
.toc a.active{ border-color: var(--pn-primary); background:#f3fbff; }

/* Ab 1300px: TOC fixiert und linksbündig, direkt neben dem Content */
@media (min-width: 1300px){
  .toc{
    position: fixed;
    left: calc((105vw - 1180px) / 2 + 1180px + 24px);
    top: calc((var(--nav-height, 95px)) + 14px);
    max-height: calc(100vh - (var(--nav-height, 95px) + 40px));
    overflow:auto;
    display:block;
  }
}
/* Ab 1100px: sichtbar als sticky (falls schmaler) */
@media (min-width: 1100px) and (max-width: 1299.98px){
  .toc{ display:block; }
}

/* Intro */
.ticks{ margin:8px 0 12px; padding-left:18px; }
.ticks li{ margin:6px 0; }
.intro .notice{
  margin-top:8px; padding:10px 12px; background:#eefbff;
  border:1px solid var(--pn-border); border-radius:10px;
}

/* Feature Rows – Basis */
.feature-row{
  --col-gap: 18px;
  display:grid; gap:var(--col-gap); align-items:center; margin: 20px 0;
  grid-template-columns: 1fr;
}
.feature-row .content{ order:2; }
.feature-row .shot{ order:1; }
@media (min-width: 900px){
  .feature-row{ grid-template-columns: 1.1fr .9fr; }
}

/* Full-bleed Band (ohne horizontales Scrollen) */
.feature-row.band{ position: relative; }
.feature-row.band::before{
  content:"";
  position:absolute; inset:0;
  left: 50%;
  transform: translateX(-50%);
  background:
    radial-gradient(1200px 300px at 10% -20%, rgba(64,156,255,.08), transparent 60%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
  z-index:-1;
  border-top: 1px solid var(--pn-border);
  border-bottom: 1px solid var(--pn-border);
  width: 100vw; /* Fallback */
}
@supports (width: 100svw){
  .feature-row.band::before{ width: 100svw; }
}

/* Varianten: Look & Feel je Abschnitt */
.feature-row.accent .content{
  border-left: 4px solid var(--pn-primary);
  background: #fff;
  border:1px solid var(--pn-border);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: var(--shadow);
}
.feature-row.soft{
  background: #fafafa;
  border:1px solid var(--pn-border);
  border-radius: 30px;
  padding: 14px;
}

/* ===== Layout-Varianten ===== */

/* 1) Overlap: Bild schwebt leicht über der Karte */
.layout-overlap{
  --col-gap: 24px;
}
@media (min-width: 900px){
  .layout-overlap .shot{
    margin-top: -10px;
    transform: translateY(6px);
  }
  .layout-overlap .shot img{
    box-shadow: 0 18px 40px rgba(0,0,0,.12);
  }
}

/* 2) Media-Top: Bild oben über die gesamte Zeile */
.layout-media-top{
  grid-template-columns: 1fr;
}
.layout-media-top .shot{
  order: 0;
}
.layout-media-top .content{
  order: 1;
}
@media (min-width: 900px){
  .layout-media-top{
    grid-template-columns: 1fr;
  }
  .layout-media-top .shot img{
    border-radius: 18px;
  }
}

/* 3) Split-Left: Bild links, Text rechts (fix, nicht alternierend) */
.layout-split-left .content{ order:2; }
.layout-split-left .shot{ order:1; }
@media (min-width: 900px){
  .layout-split-left{
    grid-template-columns: .95fr 1.05fr;
  }
}
/* 5) Timeline: Steps als vertikale Timeline */
.steps.timeline{
  list-style: none;
  padding: 0;
  margin: 10px 0 12px;
  counter-reset: step;
  position: relative;
}
.steps.timeline li{
  counter-increment: step;
  position: relative;
  padding-left: 36px;
  margin: 12px 0;
}
.steps.timeline li::before{
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 24px; height: 24px; line-height: 24px;
  text-align: center; font-weight: 700;
  background: #fff;
  border: 2px solid var(--pn-primary);
  color: var(--pn-primary);
  border-radius: 999px;
}
.steps.timeline li + li{
  margin-top: 14px;
}
.steps.timeline{
  border-left: 2px dashed #dbe7ff;
  padding-left: 24px;
  margin-left: 12px;
}

/* Typografie / Details */
.kicker{
  display:inline-block; font-size:12px; text-transform:uppercase;
  letter-spacing:.08em; color:#6b7280; margin-bottom:4px;
}
.steps{ padding-left:18px; margin:8px 0 12px; }
.steps li{ margin:6px 0; }
.steps li span{ color: var(--pn-ink); font-weight: 600; }

/* Screenshots */
.shot{ margin: 0; }
.shot img{
  width: 100%; height: auto; border-radius: var(--shot-radius);
  border:1px solid var(--pn-border); box-shadow: var(--shadow);
  cursor: zoom-in;
}
.shot figcaption{ font-size:12px; color: var(--pn-muted); margin-top:6px; }

/* Details + Pro Tipp */
details.mini{
  background:#fafafa; border:1px solid var(--pn-border);
  border-radius:10px; padding:8px 10px; margin-top:6px;
}
details.mini summary{ cursor:pointer; font-weight:600; }
details.mini[open]{ background:#fff; }

.pro{
  margin-top: 10px; font-size: 14px;
  background: #fff7ed; border: 1px solid #fed7aa;
  border-radius: 10px; padding: 10px 12px;
}

/* Support card */
.support .actions{ display:flex; gap:12px; margin-top:10px; }
@media (max-width: 520px){ .support .actions{ flex-direction: column; } }

/* Reveal on scroll */
[data-reveal]{ opacity:0; transform: translateY(12px); transition: opacity .4s ease, transform .4s ease; }
[data-reveal].visible{ opacity:1; transform: none; }

/* Pill styles beibehalten */
.pill-nav a{ border:1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.14); color:#fff; }
.pill-nav a.active{ background:#fff; color:#111; }
/* --- Layout breiter + Bild größer, Text gleich lassen --- */

/* Gesamtbreite der Haupt-Container etwas erhöhen */
.wbx-main,
.hcontainer {
  max-width: 1350px; /* vorher ~1180px */
}

/* Textspalten auf fixe angenehme Breite limitieren */
.feature-row .content {
  max-width: 520px; /* vorher flexibel, jetzt konstant */
}

/* Ab Desktop: Bild bekommt mehr Platz */
@media (min-width: 900px) {
  .feature-row {
    grid-template-columns: 1.4fr 0.8fr; /* Bild / Text Verhältnis (vorher ~1.1 / 0.9) */
  }

  /* Für die 'Split-Left' Sections (Vidcast, Präsenz, Whiteboards etc.) */
  .layout-split-left {
    grid-template-columns: 1.5fr 0.7fr;
  }
}
/* --- Abwechselnde Bild/Text-Ausrichtung (Desktop) --- */
@media (min-width: 900px) {

  /* Für alle feature-rows, die NICHT das Bild oben haben (media-top) */
  .feature-row:not(.layout-media-top):nth-of-type(even) .shot {
    order: 2;
  }
  .feature-row:not(.layout-media-top):nth-of-type(even) .content {
    order: 1;
  }
}
/* Bilder bei geteiltem Layout auf Höhe der Textbox strecken */
@media (min-width: 900px) {
  .feature-row .shot {
    height: 100%;
    display: flex;
  }

  .feature-row .shot img {
    height: 100%;
    width: 100%;
    object-fit: cover;    /* Füllt den Bereich ästhetisch */
    object-position: center;
    border-radius: var(--shot-radius);
  }
}
/* Speziell für "Allgemeine Einstellungen": Bild nicht beschneiden */
#einstellungen .shot img {
  object-fit: contain !important;
  width: 100%;
  height: auto !important;
  max-height: none;
}
#einstellungen.feature-row {
  --col-gap: 24px; /* vorher deutlich größer */
}
/* --- Zick-Zack korrekt: unterschiedliche Spaltenbreiten je Ausrichtung --- */
@media (min-width: 900px) {

  /* Basis: Bild links (breiter), Text rechts (fix) */
  .feature-row:not(.layout-media-top){
    display: grid;
    align-items: center;
    gap: var(--col-gap, 24px);
    grid-template-columns: 1.4fr min(520px, 42vw); /* Bild | Text */
  }
  .feature-row:not(.layout-media-top) .shot   { grid-column: 1; }
  .feature-row:not(.layout-media-top) .content{ grid-column: 2; max-width: 520px; }

  /* Wechsel: Text links (fix), Bild rechts (breiter) */
  .feature-row:not(.layout-media-top):nth-of-type(even){
    grid-template-columns: min(520px, 42vw) 1.4fr; /* Text | Bild */
  }
  .feature-row:not(.layout-media-top):nth-of-type(even) .content{ grid-column: 1; }
  .feature-row:not(.layout-media-top):nth-of-type(even) .shot   { grid-column: 2; }
}
/* Whiteboards: Textbox gleich hoch wie das Bild */
#whiteboards.feature-row {
  align-items: stretch; /* Beide Spalten gleich hoch */
}

#whiteboards .content.card {
  height: 100%;            /* Füllt volle Höhe der Zeile */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Text bleibt mittig in der Box */
}
/* Whiteboards: Bild leicht nach unten korrigieren */
#whiteboards .shot {
  align-self: center;  /* sorgt für mittige Ausrichtung */
}
/* === Lightbox === */
body.lb-open { overflow: hidden; }

.lb{
  position: fixed; inset: 0;
  display: none;
  z-index: 9999;
}
.lb[aria-hidden="false"]{ display: block; }

.lb-backdrop{
  position: absolute; inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .18s ease;
}
.lb[aria-hidden="false"] .lb-backdrop{ opacity: 1; }

.lb-figure{
  position: absolute; inset: 0;
  margin: 0; display: grid; place-items: center;
  padding: 4vh 4vw;
}

.lb-img{
  max-width: 92vw; max-height: 92vh;
  border-radius: var(--shot-radius, 14px);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  border: 1px solid var(--pn-border, rgba(0,0,0,.12));
  transform: scale(.985); opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
  background: #fff; /* für transparente PNGs */
}
.lb[aria-hidden="false"] .lb-img{ transform: none; opacity: 1; }

.lb-cap{
  margin-top: 10px; color: #fff; text-align: center;
  font-size: 14px; opacity: .9; text-shadow: 0 1px 2px rgba(0,0,0,.35);
  max-width: 92vw;
}

/* Controls */
.lb-close, .lb-prev, .lb-next{
  position: absolute; top: 12px;
  appearance: none; border: 0; background: rgba(0,0,0,.55);
  color: #fff; width: 40px; height: 40px; line-height: 40px;
  border-radius: 999px; cursor: pointer; font-size: 22px;
  display: grid; place-items: center;
}
.lb-close{ right: 12px; }
.lb-prev, .lb-next{ top: 50%; transform: translateY(-50%); font-size: 30px; }
.lb-prev{ left: 14px; }
.lb-next{ right: 14px; }

.lb-close:hover, .lb-prev:hover, .lb-next:hover{ background: rgba(0,0,0,.75); }

/* Optional: auf kleinen Screens Captions kleiner Abstand */
@media (max-width: 480px){
  .lb-figure{ padding: 3vh 3vw; }
  .lb-cap{ font-size: 13px; }
}
/* Lightbox: Figure wieder viewportfüllend + wirklich zentriert */
.lb-figure{
  position: absolute;   /* zurück auf absolute */
  inset: 0;             /* füllt den gesamten Viewport */
  margin: 0;
  display: flex;        /* flex statt grid -> Gruppe (Bild+Caption) zentriert */
  align-items: center;  /* vertikal zentriert */
  justify-content: center; /* horizontal zentriert */
  flex-direction: column;
  gap: 10px;            /* Abstand zwischen Bild und Caption */
  padding: 4vh 4vw;
}

/* Stacking bleibt erhalten: Bild unter Buttons */
.lb-img{ position: relative; z-index: 1; }
.lb-close, .lb-prev, .lb-next{ z-index: 2; }

/* Optional: Wenn sehr hohe/wide Bilder die Mitte "springen" lassen, sicherstellen: */
.lb-img{
  max-width: 92vw;
  max-height: 92vh;
  object-fit: contain;
}