.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single,
.search .site-content article,
.archive .site-content article,
.blog .site-content article {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(var(--fv-grid-overlay) 1px, transparent 1px),
    linear-gradient(90deg, var(--fv-grid-overlay) 1px, transparent 1px),
    color-mix(in srgb, var(--color-surface) 96%, transparent);
  background-size: 28px 28px, 28px 28px, auto;
  box-shadow: var(--shadow-sm);
}

.ast-separate-container .ast-article-post,
.search .site-content article,
.archive .site-content article,
.blog .site-content article {
  overflow: hidden;
}

.ast-separate-container .ast-article-post:hover,
.search .site-content article:hover,
.archive .site-content article:hover,
.blog .site-content article:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow var(--transition-fast),
    border-color var(--transition-fast);
}

.widget,
.wp-block-group.is-style-default,
.wp-block-latest-comments,
.wp-block-calendar,
.wp-block-rss,
.wp-block-archives-dropdown,
.wp-block-categories-dropdown {
  border: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent);
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  box-shadow: var(--shadow-sm);
  padding: 1rem 1.1rem;
}

.widget,
.calendar_wrap,
.wp-block-search,
.wp-block-latest-posts,
.wp-block-categories,
.wp-block-tag-cloud {
  border-radius: var(--radius-md);
}

.wp-block-cover,
.wp-block-media-text,
.wp-block-columns.is-style-default {
  overflow: hidden;
}

.wp-block-cover,
.wp-block-group.has-background,
.wp-block-media-text.has-background {
  border-radius: var(--radius-lg);
}

.wp-block-cover__inner-container > * + *,
.wp-block-media-text__content > * + * {
  margin-top: 0.9rem;
}

.wp-block-latest-posts li,
.wp-block-latest-comments li,
.wp-block-rss li {
  padding-bottom: 0.8rem;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 78%, transparent);
}

.wp-block-latest-posts li:last-child,
.wp-block-latest-comments li:last-child,
.wp-block-rss li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

/* ============================================================================
 * Phase 3.1 — Basis-Komponentenklassen für das Card-System
 * ----------------------------------------------------------------------------
 * Additive, rückwärtskompatible Einführung der Zielkomponenten
 *   .fv-section-card   (Gruppen-Container: Hero, Inquiry-Shell, Booking, …)
 *   .fv-item-card      (Einzel-Kachel im Grid: Feature, Problem, Trust, …)
 *
 * Die Selector-Listen binden bestehende BEM-Klassen als Alias ein, sodass
 * neue Seiten nur noch `.fv-section-card` / `.fv-item-card` setzen müssen
 * und Bestandsseiten unverändert bleiben. Die seitenspezifischen Regeln
 * unter `.fv-<page> .fv-<page>__…` haben höhere Spezifität (0,2,0) und
 * überschreiben diese Baseline — heute sichtbarer Effekt daher: keiner.
 *
 * `:hover` ist bewusst nur auf die kanonische Klasse `.fv-item-card`
 * geschrieben, nicht auf die Aliase, um bestehende Page-Level-Hover-Regeln
 * nicht zu beeinflussen.
 * ========================================================================== */

/* .fv-section-card — Gruppen-Container
 * Hinweis: Smart-Home wurde in Phase 3.2 auf die kanonische `.fv-section-card`
 * migriert (Template: page-smart-home.php). Die Aliase
 *   .fv-smart-home__status-panel, __solution-panel, __integration-panel,
 *   __booking-card, __inquiry-shell
 * sind daher hier entfernt. */
/* Produktseiten */
/* Netzwerk & WLAN: Phase 3.9 — auf kanonische `.fv-section-card` migriert
 * (Template: page-netzwerk-wlan.php). Aliase __status-panel, __solution-panel,
 * __security-panel, __booking-card entfernt. */
/* IT-Sicherheit: Phase 3.8 — auf kanonische `.fv-section-card` migriert
 * (Template: page-it-sicherheit.php). Aliase __status-panel, __solution-panel,
 * __context-panel, __booking-card entfernt. */
/* Individuelle Integration: Phase 3.10 — auf kanonische `.fv-section-card` migriert
 * (Template: page-individuelle-integration.php). Aliase __status-panel, __solution-panel,
 * __cad-panel, __system-panel, __booking-card entfernt. */
/* Smart Building: Phase 3.11 — auf kanonische `.fv-section-card` migriert
 * (Template: page-smart-building.php). Aliase __status-panel, __solution-panel,
 * __system-panel, __integration-panel, __booking-card entfernt. */
/* Homepage: in Phase 3.7 auf kanonische `.fv-section-card` migriert
 * (Template: front-page.php). Aliase __system-layer, __overview-panel,
 * __custom-panel, __booking-card, __inquiry-shell daher hier entfernt. */
/* Demo-Seiten */
/* Home-Assistant-Demo: Phase 3.13 — auf kanonische `.fv-section-card` migriert
 * (Template: page-smart-home-vorschau.php). Aliase __hero-panels, __dashboard,
 * __side-panel, __booking-card entfernt. */
/* Netzwerk-Demo: Phase 3.12 — auf kanonische `.fv-section-card` migriert
 * (Template: page-netzwerk-demo.php). Aliase __hero-panels, __map-shell,
 * __live-panel entfernt. */
/* Smarthome-Beta: Phase 3.14 — auf kanonische `.fv-section-card`
 * migriert (Template: page-smarthome-beta.php). Aliase __hero-copy,
 * __hero-card, __panel, __account-card, __contact-copy, __contact-card,
 * __contact-form-shell entfernt. */
.fv-section-card {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-surface) 95%, transparent);
  box-shadow: none;
  transition:
    border-color var(--transition-base),
    background var(--transition-base),
    box-shadow var(--transition-base),
    backdrop-filter var(--transition-base);
}

.fv-card--elevated {
  background: var(--fv-surface-vibrant);
  box-shadow: var(--shadow-sm);
  backdrop-filter: var(--fv-card-blur);
  -webkit-backdrop-filter: var(--fv-card-blur);
}

.fv-card--elevated:hover {
  border-color: color-mix(in srgb, var(--color-accent) 22%, var(--color-border));
  background: color-mix(in srgb, var(--fv-surface-vibrant) 98%, var(--color-accent));
  box-shadow: var(--shadow-md);
}

.fv-card--glass {
  background: color-mix(in srgb, var(--fv-surface-vibrant) 72%, transparent);
  box-shadow: inset 0 1px 0 var(--fv-highlight-inset);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
}

.fv-card--glass:hover {
  border-color: color-mix(in srgb, var(--color-accent) 22%, var(--color-border));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 24%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--color-accent) 22%, transparent);
}

.fv-note-card {
  border: 0;
  border-left: 2px solid var(--color-accent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.fv-note-card:hover {
  border-color: var(--color-accent-strong);
  background: transparent;
  box-shadow: none;
}

.fv-contact-fallback {
  display: grid;
  gap: 1rem;
  justify-items: center;
  text-align: center;
}

.fv-contact-fallback__eyebrow {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.fv-contact-fallback h3,
.fv-contact-fallback p {
  margin: 0;
}

.fv-contact-fallback__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.fv-booking-card {
  display: grid;
  gap: 1rem;
}

.fv-booking-card__eyebrow,
.fv-booking-card h3,
.fv-booking-card__list {
  margin: 0;
}

.fv-booking-card__list {
  display: grid;
  gap: 0.7rem;
  padding: 0;
  list-style: none;
}

.fv-booking-card__list li {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--color-text-muted);
}

.fv-booking-card__list li svg {
  color: var(--color-accent);
}

.fv-pillar-trust__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}

.fv-pillar-trust__signal,
.fv-pillar-trust__card {
  height: 100%;
}

.fv-pillar-trust__signal {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.75rem;
  padding: clamp(1rem, 2vw, 1.35rem);
}

.fv-pillar-trust__signal h3,
.fv-pillar-trust__card h3,
.fv-pillar-trust__card p {
  margin: 0;
}

.fv-pillar-trust__signal h3 {
  font-size: clamp(0.93rem, 0.86rem + 0.28vw, 1.04rem);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0;
}

.fv-pillar-trust__card {
  display: grid;
  gap: 0.85rem;
}

.fv-pillar-trust__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.875rem;
  border: 1px solid var(--color-border-strong);
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  color: var(--color-accent);
}

.fv-pillar-trust__icon--accent-strong {
  color: var(--color-accent-strong);
}

.fv-pillar-trust__icon--success {
  color: var(--color-success);
}

.fv-pillar-trust__icon--warm {
  color: var(--color-warm);
}

.fv-service-trust__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.fv-service-trust__card {
  display: grid;
  gap: 0.85rem;
  height: 100%;
}

.fv-service-trust__card h3,
.fv-service-trust__card p {
  margin: 0;
}

.fv-service-trust__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.875rem;
  border: 1px solid var(--color-border-strong);
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  color: var(--color-accent);
}

.fv-service-trust__icon--accent-strong {
  color: var(--color-accent-strong);
}

.fv-service-trust__icon--success {
  color: var(--color-success);
}

@media (max-width: 640px) {
  .fv-contact-fallback__actions {
    display: grid;
  }

  .fv-contact-fallback__actions .fv-btn {
    width: 100%;
  }

  .fv-booking-card .fv-btn {
    width: 100%;
  }

  .fv-pillar-trust__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .fv-service-trust__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* .fv-item-card — Einzel-Kachel (Phase 3.5)
 * ---------------------------------------------------------------------------
 * Die Baseline entspricht jetzt der in allen Produktseiten tatsächlich
 * verwendeten Card-Optik: radius-lg + 0.1rem, Surface-Gradient, shadow-sm,
 * Grid-Innenlayout mit gap 0.95rem, padding 1.4rem und ein Hover-Lift
 * (translateY -4px + shadow-md).
 *
 * Alle bestehenden Alias-Selektoren bleiben erhalten. Produkt- und Demo-
 * Seiten behalten ihre Page-Level-Regeln (Spezifität 0,0,2,0) und gewinnen
 * gegenüber dieser Baseline (0,0,1,0) bei allen von ihnen gesetzten
 * Properties. Konkret blieben sichtbar unverändert: position, border,
 * border-radius, background, box-shadow. Neu aus der Baseline ziehen Seiten
 * ohne eigene Grid/Hover-Regel für die jeweilige BEM-Klasse (z. B.
 * `__problem-card`) `display: grid; gap: 0.95rem` — siehe Hinweis in der
 * Migrationsnotiz am Ende dieses Blocks.
 *
 * Smart-Home ist seit Phase 3.2 auf die kanonische `.fv-item-card`
 * migriert; die Aliase `.fv-smart-home__*-card` sind daher hier entfernt.
 *
 * Modifier:
 *   .fv-item-card--flat   → frühere Phase-3.1-Optik (radius-md, solide,
 *                            Inset-Highlight, stiller Hover-Tint).
 *   .fv-item-card--tight  → engere Variante für Dashboards/Demos
 *                            (radius-lg - 0.1rem, padding 1.35rem).
 */
/* Produktseiten */
/* Netzwerk & WLAN: Phase 3.9 — auf kanonische `.fv-item-card` migriert
 * (Template: page-netzwerk-wlan.php). Aliase __problem-card, __service-card,
 * __component-card, __process-card, __trust-card entfernt. */
/* IT-Sicherheit: Phase 3.8 — auf kanonische `.fv-item-card` migriert
 * (Template: page-it-sicherheit.php). Aliase __problem-card, __service-card,
 * __context-note, __audience-card, __process-card, __trust-card entfernt. */
/* Individuelle Integration: Phase 3.10 — auf kanonische `.fv-item-card` migriert
 * (Template: page-individuelle-integration.php). Aliase __problem-card, __service-card,
 * __cad-note, __example-card, __process-card, __trust-card entfernt. */
/* Smart Building: Phase 3.11 — auf kanonische `.fv-item-card` migriert
 * (Template: page-smart-building.php). Aliase __problem-card, __service-card,
 * __object-card, __integration-note, __process-card, __trust-card entfernt. */
/* Homepage: in Phase 3.7 auf kanonische `.fv-item-card` migriert
 * (Template: front-page.php). Aliase __service-card, __process-card,
 * __trust-card daher hier entfernt. */
/* Demo-Seiten */
/* Home-Assistant-Demo: Phase 3.13 — auf kanonische `.fv-item-card` migriert
 * (Template: page-smart-home-vorschau.php). Aliase __tile, __automation-card,
 * __control-card, __formavis-card entfernt. */
/* Netzwerk-Demo: Phase 3.12 — auf kanonische `.fv-item-card` migriert
 * (Template: page-netzwerk-demo.php). Aliase __info-card, __compare-card,
 * __status-card entfernt. */
/* Smarthome-Beta: Phase 3.14 — auf kanonische `.fv-item-card`
 * migriert (Template: page-smarthome-beta.php). Alias __feature-card
 * entfernt. */
.fv-item-card {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-surface) 95%, transparent);
  box-shadow: none;
  display: grid;
  gap: 0.85rem;
  padding: 1.75rem;
  transition:
    border-color var(--transition-base),
    background var(--transition-base),
    box-shadow var(--transition-base);
}

.fv-item-card:hover {
  transform: none;
  border-color: color-mix(in srgb, var(--color-accent) 20%, var(--color-border));
  background: color-mix(in srgb, var(--color-surface) 96%, var(--color-accent));
  box-shadow: none;
}

/* .fv-item-card--flat
 * Restauriert die Phase-3.1-Optik: kleinere Ecken, solides Surface-Soft,
 * Inset-Highlight, stiller Hover-Tint, kein Lift. Eignet sich für UI-
 * Bereiche wie Widgets, Sidebar-Karten oder inline-Tiles, wo die
 * "elevated"-Baseline zu prominent wäre. */
.fv-item-card--flat {
  border-radius: var(--radius-md);
  background:
    color-mix(in srgb, var(--color-surface-soft) 96%, transparent);
  box-shadow:
    inset 0 1px 0 var(--fv-highlight-inset),
    var(--shadow-sm);
  transition:
    background-color var(--transition-base),
    background-image var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.fv-item-card--flat:hover {
  transform: none;
  border-color: color-mix(in srgb, var(--color-border-strong) 70%, var(--color-border));
  background-image: linear-gradient(var(--fv-hover-overlay), var(--fv-hover-overlay));
  box-shadow:
    inset 0 1px 0 var(--fv-highlight-inset),
    var(--shadow-sm);
}

/* .fv-item-card--tight
 * Engere Kachel-Variante für dichte Layouts (Dashboards, Demo-Tiles).
 * Lässt den Hover-Lift und den Surface-Gradient der Baseline intakt. */
.fv-item-card--tight {
  padding: 1.35rem;
}

/* ── Globale Process-Step-Karte ──────────────────────────────────────────────
 * .fv-step → offenes Counter-Pill-Pattern für Prozess-Sections.
 * Bringt position:relative + overflow:hidden als Basis für die
 * BG-Zahl und das Icon. Wird von allen Seiten-Templates genutzt.
 * ──────────────────────────────────────────────────────────────────────────── */
.fv-step {
  position: relative;
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 0.7rem;
  row-gap: 0.75rem;
  align-items: start;
  padding: 0.35rem 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  min-height: 0;
  transition: none;
}

.fv-step:hover {
  transform: none;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.fv-step > :is(.fv-step-head, p) {
  grid-column: 1 / -1;
}

:is(
  .fv-front-page,
  .fv-business,
  .fv-protect,
  .fv-leistungen,
  .fv-so-arbeiten-wir,
  .fv-ueber-uns,
  .fv-smart-home,
  .fv-netzwerk-wlan,
  .fv-it-sicherheit,
  .fv-individuelle-integration,
  .fv-smart-building
) .fv-step {
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.8rem;
  row-gap: 0.55rem;
}

:is(
  .fv-front-page,
  .fv-business,
  .fv-protect,
  .fv-leistungen,
  .fv-so-arbeiten-wir,
  .fv-ueber-uns,
  .fv-smart-home,
  .fv-netzwerk-wlan,
  .fv-it-sicherheit,
  .fv-individuelle-integration,
  .fv-smart-building
) :is(.fv-step-bg-num, [class*="__process-bg-num"], .fv-homepage__step-bg-num, .fv-business__step-bg-num, .fv-protect__step-bg-num) {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: center;
  margin-bottom: 0.2rem;
  align-self: center;
}

:is(
  .fv-front-page,
  .fv-business,
  .fv-protect,
  .fv-leistungen,
  .fv-so-arbeiten-wir,
  .fv-ueber-uns,
  .fv-smart-home,
  .fv-netzwerk-wlan,
  .fv-it-sicherheit,
  .fv-individuelle-integration,
  .fv-smart-building
) :is(.fv-step-icon, [class*="__process-icon"], .fv-homepage__step-icon, .fv-business__step-icon, .fv-protect__step-icon) {
  grid-column: 1;
  grid-row: 2;
  width: 2rem;
  height: 2rem;
  margin-top: 0;
  align-self: center;
  justify-self: start;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  background: color-mix(in srgb, currentColor 10%, transparent);
}

:is(
  .fv-front-page,
  .fv-business,
  .fv-protect,
  .fv-leistungen,
  .fv-so-arbeiten-wir,
  .fv-ueber-uns,
  .fv-smart-home,
  .fv-netzwerk-wlan,
  .fv-it-sicherheit,
  .fv-individuelle-integration,
  .fv-smart-building
) :is(.fv-step-icon, [class*="__process-icon"], .fv-homepage__step-icon, .fv-business__step-icon, .fv-protect__step-icon) > svg {
  width: 1.05rem;
  height: 1.05rem;
}

:is(
  .fv-front-page,
  .fv-business,
  .fv-protect,
  .fv-leistungen,
  .fv-so-arbeiten-wir,
  .fv-ueber-uns,
  .fv-smart-home,
  .fv-netzwerk-wlan,
  .fv-it-sicherheit,
  .fv-individuelle-integration,
  .fv-smart-building
) .fv-step > .fv-step-head {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  align-self: center;
  margin: 0;
  min-height: 2rem;
}

:is(
  .fv-front-page,
  .fv-business,
  .fv-protect,
  .fv-leistungen,
  .fv-so-arbeiten-wir,
  .fv-ueber-uns,
  .fv-smart-home,
  .fv-netzwerk-wlan,
  .fv-it-sicherheit,
  .fv-individuelle-integration,
  .fv-smart-building
) .fv-step > .fv-step-head > :is(.fv-step-icon, [class*="__process-icon"], .fv-homepage__step-icon, .fv-business__step-icon, .fv-protect__step-icon) {
  flex-shrink: 0;
}

:is(
  .fv-front-page,
  .fv-business,
  .fv-protect,
  .fv-leistungen,
  .fv-so-arbeiten-wir,
  .fv-ueber-uns,
  .fv-smart-home,
  .fv-netzwerk-wlan,
  .fv-it-sicherheit,
  .fv-individuelle-integration,
  .fv-smart-building
) .fv-step > .fv-step-head > :is(h3, h4) {
  margin: 0;
  font-size: clamp(1.05rem, 0.98rem + 0.22vw, 1.3rem);
  font-weight: 600;
  line-height: 1.18;
  text-align: center;
}

:is(
  .fv-front-page,
  .fv-business,
  .fv-protect,
  .fv-leistungen,
  .fv-so-arbeiten-wir,
  .fv-ueber-uns,
  .fv-smart-home,
  .fv-netzwerk-wlan,
  .fv-it-sicherheit,
  .fv-individuelle-integration,
  .fv-smart-building
) .fv-step > p {
  grid-row: 3;
  align-self: start;
  margin: 0.1rem 0 0;
  line-height: 1.65;
  text-align: center;
}

/* Step-Counter statt Hintergrundzahl */
:is(.fv-step-bg-num, [class*="__process-bg-num"], .fv-homepage__step-bg-num, .fv-business__step-bg-num, .fv-protect__step-bg-num) {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-self: center;
  min-height: 1.8rem;
  padding: 0.12rem 0.72rem;
  border: 1px solid color-mix(in srgb, var(--color-accent) 24%, var(--color-border));
  border-radius: 999px;
  background: transparent;
  color: var(--color-accent);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1;
  opacity: 1;
  pointer-events: none;
  user-select: none;
}

/* Step-Icon */
:is(.fv-step-icon, [class*="__process-icon"], .fv-homepage__step-icon, .fv-business__step-icon, .fv-protect__step-icon) {
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  color: var(--color-text-muted);
}

:is(.fv-step-icon--accent, [class*="__process-icon--accent"], .fv-homepage__step-icon--accent, .fv-business__step-icon--accent, .fv-protect__step-icon--accent) {
  color: var(--color-accent);
}

:is(.fv-step-icon--accent-strong, [class*="__process-icon--accent-strong"], .fv-homepage__step-icon--accent-strong, .fv-business__step-icon--accent-strong, .fv-protect__step-icon--accent-strong) {
  color: var(--color-accent-strong);
}

:is(.fv-step-icon--success, [class*="__process-icon--success"], .fv-homepage__step-icon--success, .fv-business__step-icon--success, .fv-protect__step-icon--success) {
  color: var(--color-success);
}

:is(.fv-step-icon--warm, [class*="__process-icon--warm"], .fv-homepage__step-icon--warm, .fv-business__step-icon--warm, .fv-protect__step-icon--warm) {
  color: var(--color-warm);
}