/* =============================================================================
   xilox.de – UI-Relaunch 2026 · css/v2/pages/index.css (Phase 1)
   -----------------------------------------------------------------------------
   Seiten-spezifische Styles für die Public-Seiten Phase 1:
     index.php    – Hero-BG/Overlay, Portfolio-/Vergleichs-/CTA-Sektionen
     about.php    – About-Hero, Prozess-/Zielgruppen-/Why-/FAQ-/CTA-Blöcke
     formate.php  – Format-Cards (Media-Vorschau, Spezifikations-Box)
     impressum.php– Fließtext (Gast) + .imprint-card (eingeloggte App-Variante)
     news.php     – News-Feed-Karten

   Lade-Reihenfolge: nach components.css (siehe incl/layout/head.php).
   Alle Werte greifen auf die Design-Tokens in css/v2/tokens.css zu.
   ============================================================================= */

/* --- 1. index.php · Hero ------------------------------------------------------ */
/* Hero-Hintergrund als Variable: User tauscht später NUR die Datei aus
   (designdir/bg.jpg) – Dateiname bleibt austauschbar, Pfad hier zentral. */
.hero {
  --hero-bg: url('../../../designdir/bg.jpg');
}

/* Dark-Overlay/Gradient liegt in layout-public.css (.hero-bg::after);
   die BG-Bilder-Ebene erhält zusätzlich einen leichten Vignette-Farbverlauf,
   damit der Text auch bei hellem Asset lesbar bleibt. */
.hero .hero-bg {
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center right;
}

/* --- 2. index.php · Sektions-Layout (Portfolio / Vergleich) ------------------- */
.v2-section {
  max-width: var(--content-maxwidth);
  margin: 0 auto;
  padding: var(--space-8) var(--space-5);
}

.section-head {
  max-width: 760px;
  margin-bottom: var(--space-6);
}
.section-head .section-title {
  margin-bottom: var(--space-3);
}
.section-head .subline {
  font-size: 1.0625rem;
}

/* Zwei-Spalten-Sektion „Für alle, die mehr erreichen wollen.“ (Text links, Cards rechts) */
.network-split {
  display: grid;
  grid-template-columns: minmax(320px, 5fr) 7fr;
  gap: var(--space-8);
  align-items: center;
}
@media (max-width: 991.98px) {
  .network-split {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

/* Zielgruppen-/Vergleichs-Cards (.card-basiert, Inhalte 1:1 aus $ts) */
.v2-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}
@media (max-width: 991.98px) {
  .v2-card-grid {
    grid-template-columns: 1fr;
  }
}

.v2-item-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5); /* .card hat kein Padding (liegt bei .card-body) – hier direkt im Artikel */
}
.v2-item-card .card-label {
  color: var(--text-muted);
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
}
.v2-item-card h3 {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 600;
}
.v2-item-card .card-price {
  color: var(--accent-text);
  font-size: 1.25rem;
  font-weight: 600;
}
.v2-item-card .card-price small {
  display: block;
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: .8125rem;
  font-weight: 400;
}

/* Medien-Vorschau (Video/Bild) mit Overlay-Label */
.v2-showcase {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--radius-card) - 4px);
  border: 1px solid var(--border);
  aspect-ratio: 16 / 9;
  background-color: var(--bg-inset);
}
.v2-showcase video,
.v2-showcase img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.v2-showcase .showcase-label {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  max-width: calc(100% - 2 * var(--space-4));
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-input);
  background-color: rgba(14, 20, 32, .78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--text-primary);
  font-size: .8125rem;
  line-height: 1.45;
}

/* Feature-Listen (mit Akzent-Dash, wie im Zieldesign) */
.v2-feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.v2-feature-list li {
  position: relative;
  padding: var(--space-2) 0 var(--space-2) calc(var(--space-3) + 14px);
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: .9375rem;
}
.v2-feature-list li:last-child {
  border-bottom: none;
}
.v2-feature-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--accent-text);
}

/* Vergleichs-Card „xilox Digital Signage“ (Akzent-Rahmen) */
.v2-item-card.is-highlight {
  border-color: rgba(143, 227, 136, .35);
  box-shadow: var(--shadow-card);
}

/* --- 3. index.php · CTA-Sektion ------------------------------------------------- */
.cta-block {
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
  padding: var(--space-7) var(--space-5);
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}
.cta-block .section-title {
  margin-bottom: var(--space-4);
}
.cta-block .subline {
  max-width: 600px;
  margin: 0 auto var(--space-5);
  font-size: 1.0625rem;
}
.cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.cta-note {
  color: var(--text-muted);
  font-size: .875rem;
}

/* ============================================================================= */
/* --- 4. about.php (Dual-Mode) ---------------------------------------------------- */
/* ============================================================================= */

.about-hero {
  max-width: 860px;
  margin: 0 auto;
  /* Fixed Navbar (min-height 76px, transparent über Hero) freihalten + Luft nach unten */
  padding: calc(76px + var(--space-8)) var(--space-5) var(--space-7);
  text-align: center;
}
.about-hero .section-title {
  margin-bottom: var(--space-4);
}
.about-hero .subline {
  font-size: 1.0625rem;
}

/* Prozess-Schritte (4er-Grid) */
.process-grid-v2 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (max-width: 991.98px) {
  .process-grid-v2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575.98px) {
  .process-grid-v2 {
    grid-template-columns: 1fr;
  }
}
.process-step-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5); /* .card hat kein Padding (liegt bei .card-body) – hier direkt im Artikel */
}
/* Zielgruppen-Cards (vollflächig, Feature-Listen optional zweispaltig) */
.target-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.tg-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}
@media (max-width: 767.98px) {
  .tg-plan-grid {
    grid-template-columns: 1fr;
  }
}
.tg-plan h4 {
  margin-bottom: var(--space-3);
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent-text);
}

/* „Warum xilox“ – Why-Kacheln als .card-Grid */
.why-grid-v2 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (max-width: 991.98px) {
  .why-grid-v2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575.98px) {
  .why-grid-v2 {
    grid-template-columns: 1fr;
  }
}
.why-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5); /* .card hat kein Padding (liegt bei .card-body) – hier direkt im Artikel */
}
.why-card h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}
.why-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: .875rem;
  line-height: 1.55;
}

/* FAQ */
.faq-list-v2 {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.faq-card h3 {
  margin-bottom: var(--space-2);
  font-size: 1rem;
  font-weight: 600;
}
.faq-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: .9375rem;
  line-height: 1.65;
}

/* About-CTA */
.about-cta-note {
  margin-top: var(--space-5);
  color: var(--text-muted);
  font-size: .875rem;
}

/* ============================================================================= */
/* --- 5. formate.php (Dual-Mode) ---------------------------------------------------- */
/* ============================================================================= */

.format-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.format-card .card-header .format-label {
  color: var(--text-muted);
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
}
.format-media {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--radius-card) - 4px);
  border: 1px solid var(--border);
  aspect-ratio: 16 / 9;
  background-color: var(--bg-inset);
}
.format-media video,
.format-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.format-media .showcase-label {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-input);
  background-color: rgba(14, 20, 32, .78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--text-primary);
  font-size: .8125rem;
}

/* Spezifikations-Box (Format/Auflösung/Dauer) */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-input);
  background-color: var(--bg-inset);
  border: 1px solid var(--border);
}
.spec-grid .spec-item {
  text-align: center;
}
.spec-grid .spec-label {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--accent-text);
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.spec-grid .spec-value {
  display: block;
  color: var(--text-secondary);
  font-size: .9375rem;
}

/* ============================================================================= */
/* --- 6. impressum.php (Dual-Mode) ---------------------------------------------------- */
/* ============================================================================= */

/* Gast-Variante: Fließtext in max-width-Spalte */
.imprint-prose {
  max-width: 820px;
  margin: 0 auto;
}
.imprint-prose h1 {
  font-size: var(--text-page-h1-size);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.imprint-prose .imprint-company-lines {
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: var(--space-5);
}
.imprint-prose h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}
.imprint-prose h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}
.imprint-prose p {
  color: var(--text-secondary);
  line-height: 1.7;
}

/* App-Variante: zwei .imprint-cards nebeneinander (Firma / Kontakt) */
.imprint-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}
@media (max-width: 991.98px) {
  .imprint-card-grid {
    grid-template-columns: 1fr;
  }
}
.imprint-card h3 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
}
.imprint-card .imprint-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}
.imprint-card .imprint-row:last-child {
  border-bottom: none;
}
.imprint-card .imprint-row .lucide {
  margin-top: 2px;
  color: var(--accent-text);
}
.imprint-card .imprint-label {
  display: block;
  margin-bottom: 2px;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
}
.imprint-card .imprint-value {
  display: block;
  color: var(--text-primary);
  font-size: .9375rem;
  line-height: 1.5;
}

/* ============================================================================= */
/* --- 7. news.php (Public) ------------------------------------------------------------- */
/* ============================================================================= */

.news-feed {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.news-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}
.news-item-head h2 {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 600;
}
.news-date {
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: .8125rem;
  white-space: nowrap;
}