/* Live Liquid Glass overlay for opura.app.
   Glass is the control layer only (header, buttons, app windows).
   Text without an image stays Satzspiegel. Smoke sits behind glass. */

:root {
  --glass-blur: blur(40px) saturate(1.85) brightness(1.08);
  --glass-fill:
    linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .05) 38%, rgba(12, 10, 9, .16)),
    rgba(16, 14, 13, .18);
  --glass-line: rgba(255, 255, 255, .22);
  --glass-shadow:
    0 10px 32px rgba(0, 0, 0, .34),
    inset 0 1px 0 rgba(255, 255, 255, .42),
    inset 0 -1px 0 rgba(0, 0, 0, .2);
  --hair: rgba(240, 237, 230, .14);
}

html.live-glass { overflow-x: clip; background: #0c0b09; }

html.live-glass body { background: transparent !important; }

html.live-glass main { position: relative; z-index: 1; background: transparent !important; }

/* Farbiger Rauch hinter den Glas-Controls, auf jeder Seite über die volle Höhe. */
.glass-smoke {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.glass-smoke__plume {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: .9;
  will-change: transform;
}

.glass-smoke__plume--a {
  width: 58vmax;
  height: 42vmax;
  top: -22%;
  left: -14%;
  background: radial-gradient(circle at 40% 40%, rgba(226, 181, 106, .62), transparent 68%);
  animation: glass-smoke-a 26s ease-in-out infinite;
  animation-delay: -8s;
}

.glass-smoke__plume--b {
  width: 48vmax;
  height: 36vmax;
  top: -18%;
  right: -12%;
  background: radial-gradient(circle at 60% 45%, rgba(143, 191, 151, .5), transparent 70%);
  animation: glass-smoke-b 32s ease-in-out infinite;
  animation-delay: -14s;
}

.glass-smoke__plume--c {
  width: 40vmax;
  height: 48vmax;
  top: 8%;
  left: 28%;
  background: radial-gradient(circle at 50% 50%, rgba(195, 154, 202, .42), transparent 66%);
  animation: glass-smoke-c 22s ease-in-out infinite;
  animation-delay: -5s;
}

.glass-smoke__plume--d {
  width: 36vmax;
  height: 28vmax;
  top: -8%;
  left: 46%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 244, 220, .28), transparent 72%);
  animation: glass-smoke-d 18s ease-in-out infinite;
  animation-delay: -9s;
}

.glass-smoke__plume--e {
  width: 52vmax;
  height: 38vmax;
  top: 42%;
  left: 8%;
  background: radial-gradient(circle at 45% 55%, rgba(200, 134, 43, .38), transparent 70%);
  animation: glass-smoke-e 29s ease-in-out infinite;
  animation-delay: -18s;
}

.glass-smoke__plume--f {
  width: 46vmax;
  height: 40vmax;
  top: 58%;
  right: -16%;
  background: radial-gradient(circle at 40% 50%, rgba(143, 191, 151, .36), transparent 68%);
  animation: glass-smoke-b 34s ease-in-out infinite;
  animation-delay: -11s;
}

.glass-smoke__plume--g {
  width: 50vmax;
  height: 36vmax;
  top: 72%;
  left: 18%;
  background: radial-gradient(circle at 55% 40%, rgba(195, 154, 202, .34), transparent 70%);
  animation: glass-smoke-c 27s ease-in-out infinite;
  animation-delay: -16s;
}

@keyframes glass-smoke-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  35% { transform: translate3d(14%, 16%, 0) scale(1.16) rotate(10deg); }
  68% { transform: translate3d(-9%, 8%, 0) scale(.9) rotate(-7deg); }
}

@keyframes glass-smoke-b {
  0%, 100% { transform: translate3d(0, 4%, 0) scale(1.05) rotate(-4deg); }
  45% { transform: translate3d(-16%, 12%, 0) scale(1.2) rotate(8deg); }
  75% { transform: translate3d(8%, -6%, 0) scale(.88) rotate(-11deg); }
}

@keyframes glass-smoke-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(.96) rotate(6deg); }
  50% { transform: translate3d(-12%, -10%, 0) scale(1.22) rotate(-9deg); }
}

@keyframes glass-smoke-d {
  0%, 100% { transform: translate3d(0, 6%, 0) scale(1) rotate(0deg); }
  40% { transform: translate3d(10%, -8%, 0) scale(1.14) rotate(14deg); }
  80% { transform: translate3d(-14%, 4%, 0) scale(.86) rotate(-6deg); }
}

@keyframes glass-smoke-e {
  0%, 100% { transform: translate3d(4%, 0, 0) scale(1.08) rotate(-8deg); }
  55% { transform: translate3d(18%, 14%, 0) scale(.9) rotate(7deg); }
}

html.live-glass .hero.hero-pep,
html.live-glass .product-hero,
html.live-glass .pricing-hero,
html.live-glass .comparison-section,
html.live-glass .quality-section,
html.live-glass .suite-cta-section,
html.live-glass .workflow-section,
html.live-glass .can-do-section,
html.live-glass .capability-section,
html.live-glass .how-section,
html.live-glass .interlude,
html.live-glass .deep-dive,
html.live-glass .landing-footer,
html.live-glass .pricing-page,
html.live-glass .plans-section,
html.live-glass .suite-copy,
html.live-glass .suite-section,
html.live-glass .single-section,
html.live-glass .faq-section,
html.live-glass .next-product-section {
  background-color: transparent !important;
  background-image: none !important;
}

html.live-glass .pricing-hero::before,
html.live-glass .pricing-hero::after {
  display: none !important;
}

/* Reservierte Leerflächen der Live-Seite: im Lab nicht als «Karten» zeigen. */
.screenshot-refresh,
.social-proof[data-social-proof-status="awaiting-evidence"] {
  display: none !important;
}

/* —— Steuerung: Header — */
.site-header {
  position: fixed !important;
  top: 12px !important;
  right: clamp(.9rem, 2.4vw, 2.2rem) !important;
  left: clamp(.9rem, 2.4vw, 2.2rem) !important;
  z-index: 60 !important;
  width: calc(100% - 2 * clamp(.9rem, 2.4vw, 2.2rem)) !important;
  max-width: none !important;
  min-height: 3.45rem !important;
  padding: .28rem .4rem .28rem 1.05rem !important;
  border-radius: 999px !important;
  border: .5px solid var(--glass-line) !important;
  background: var(--glass-fill) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  box-shadow: var(--glass-shadow) !important;
}

.site-header:has(.mobile-nav.is-open) { border-radius: 1.5rem !important; }

.desktop-nav a {
  padding: .42rem .78rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(247, 242, 234, .88);
}

.desktop-nav a:hover {
  color: #f7f2ea !important;
  background: rgba(255, 255, 255, .08) !important;
}

.desktop-nav a.is-active,
.desktop-nav a[aria-current="page"] {
  color: #f7f2ea !important;
  background: rgba(255, 255, 255, .14) !important;
}

.desktop-nav a.is-active::after,
.desktop-nav a[aria-current="page"]::after { display: none !important; }

.quiet-action {
  padding: .42rem .9rem !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: rgba(255, 255, 255, .1) !important;
  backdrop-filter: blur(18px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.5) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

.hero.hero-pep { padding-top: 7.4rem !important; }
.product-hero.product-hero-stack,
.pricing-hero { padding-top: 7.6rem !important; }

/* —— Buttons — */
.hero.hero-pep .hero-actions {
  width: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  gap: .6rem !important;
}

.hero.hero-pep .hero-actions .button-text,
.product-hero-stack .button-outline,
.pricing-hero .button-text {
  border-radius: 999px !important;
  border-bottom: 0 !important;
}

.button-primary,
.hero.hero-pep .hero-actions .button-text:first-child,
.product-hero-stack .button-primary,
.pricing-hero .button-primary,
.suite-copy .button-primary {
  min-height: 2.55rem !important;
  padding: .62rem 1.15rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #e4bc78 !important;
  color: #1a1408 !important;
  font-weight: 650 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    0 8px 22px rgba(226, 181, 106, .28) !important;
}

.hero.hero-pep .hero-actions .button-text:last-child,
.product-hero-stack .button-outline,
.pricing-hero .button-text {
  min-height: 2.55rem !important;
  padding: .62rem 1.15rem !important;
  border: .5px solid rgba(255, 255, 255, .2) !important;
  background: rgba(255, 255, 255, .07) !important;
  color: #f3eee6 !important;
  backdrop-filter: blur(22px) saturate(1.55) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.55) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}

/* —— Downloads: Zeile, keine Kapsel — */
.hero-downloads {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: .35rem 1.35rem !important;
  width: auto !important;
  margin: 1.15rem 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

.hero-downloads a,
.hero-downloads a + a {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  color: #9a9286 !important;
  font-size: .68rem !important;
}

.hero-downloads a:hover { color: #e8e0d4 !important; }

/* —— Rollen: Inhaltsverzeichnis, keine drei leeren Karten — */
.hero-roles {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: min(100%, 28rem) !important;
  margin-top: 1.25rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--hair) !important;
  border-radius: 0 !important;
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

.hero-roles li { border: 0 !important; border-bottom: 1px solid var(--hair) !important; }

.hero-roles a {
  display: flex !important;
  align-items: baseline !important;
  gap: 1.1rem !important;
  min-height: 0 !important;
  padding: .7rem 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

.hero-roles a:hover {
  transform: none !important;
  background: none !important;
}

.hero-roles strong {
  min-width: 5.2rem;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.hero-roles li:nth-child(1) strong { color: #9ed7a8 !important; }
.hero-roles li:nth-child(2) strong { color: #e2b56a !important; }
.hero-roles li:nth-child(3) strong { color: #cbb0d4 !important; }

.hero-roles span { color: #9a9286 !important; font-size: .78rem !important; }

/* —— Textblöcke: Frost der Vorstufen zurücknehmen — */
.app-feature-grid,
.quality-grid,
.can-do-grid,
.feature-grid,
.how-grid,
.trust-grid,
.license-grid,
.suite-cta-products {
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--hair) !important;
  border-radius: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

.license-grid,
.trust-grid {
  display: grid !important;
  gap: 1px !important;
  border: 1px solid var(--hair) !important;
  background: var(--hair) !important;
}

.app-feature-card,
.quality-card,
.can-do-card,
.feature-card,
.how-grid article,
.suite-cta-product,
.handoff-proof,
.deep-dive,
.detail-facts,
.system-requirements,
.product-facts {
  border-radius: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

.app-feature-card,
.quality-card,
.can-do-card,
.feature-card,
.how-grid article,
.suite-cta-product {
  border: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid var(--hair) !important;
}

.app-feature-card {
  border-bottom: 0 !important;
  border-right: 1px solid var(--hair) !important;
}

.app-feature-card:last-child { border-right: 0 !important; }

.app-feature-card:hover,
.quality-card:hover,
.can-do-card:hover,
.feature-card:hover,
.how-grid article:hover,
.suite-cta-product:hover {
  background: transparent !important;
  transform: none !important;
}

.can-do-card {
  min-height: 0 !important;
  padding: 1.05rem 1rem 1.1rem 0 !important;
}

.can-do-card::before { display: none !important; }

body:has(.product-screen-selra) .can-do-card,
body:has(.product-screen-luce) .can-do-card,
body:has(.product-screen-incisa) .can-do-card,
body:has(.product-screen-selra) .feature-card,
body:has(.product-screen-luce) .feature-card,
body:has(.product-screen-incisa) .feature-card {
  background: transparent !important;
}

.license-card,
.trust-card,
.suite-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

.license-card:hover,
.trust-card:hover { transform: none !important; }

.capability-chip {
  border-radius: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

.capability-section {
  width: min(100% - 2.5rem, 75rem);
  margin: clamp(4rem, 8vw, 7rem) auto 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

.capability-header {
  display: grid !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  max-width: 36rem;
  margin: 0 0 2.2rem !important;
  background: none !important;
}

.capability-header > div { display: contents; }

.capability-header .clarity-kicker {
  margin: 0 0 .7rem !important;
  color: #e2b56a !important;
  font-size: .61rem !important;
  letter-spacing: .13em !important;
}

.capability-header h2 {
  max-width: 14ch !important;
  margin: 0 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(2.4rem, 4.4vw, 4.2rem) !important;
  font-weight: 400 !important;
  letter-spacing: -.055em !important;
  line-height: .94 !important;
  text-transform: none !important;
  color: #f1ede4 !important;
}

.capability-header > p {
  max-width: 32rem !important;
  margin: 1rem 0 0 !important;
  color: #9a9286 !important;
  font-size: .84rem !important;
  line-height: 1.5 !important;
}

.capability-groups { display: none !important; }

.capability-brands {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 2rem;
  max-width: 48rem;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
  background: none;
}

.capability-brands li {
  margin: 0;
  padding: 1rem 0 1.05rem;
  border-bottom: 1px solid var(--hair);
}

.capability-brands strong {
  display: block;
  margin: 0 0 .3rem;
  color: #cfc6b8;
  font-size: .68rem;
  font-weight: 650;
  letter-spacing: .04em;
}

.capability-brands span {
  color: #ece7dd;
  font-family: "Azeret Mono", ui-monospace, monospace;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .03em;
  line-height: 1.4;
}

.capability-sheet {
  display: grid !important;
  max-width: 42rem;
  margin: 0 !important;
  padding: 0 !important;
  border-top: 1px solid var(--hair);
}

.capability-brands + .capability-sheet,
.capability-sheet + .capability-sheet { margin-top: 2.4rem !important; }

.capability-sheet > div {
  display: grid !important;
  grid-template-columns: minmax(7.5rem, 11rem) minmax(0, 1fr);
  gap: .8rem 1.5rem;
  align-items: baseline;
  margin: 0;
  padding: .85rem 0;
  border-bottom: 1px solid var(--hair);
}

.capability-sheet dt {
  margin: 0;
  color: #cfc6b8;
  font-size: .68rem;
  font-weight: 650;
  letter-spacing: .04em;
}

.capability-sheet dd {
  margin: 0;
  color: #ece7dd;
  font-family: "Azeret Mono", ui-monospace, monospace;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.45;
}

.product-facts {
  border-radius: 0 !important;
  border-color: var(--hair) !important;
  overflow: visible;
}

.feature-link,
.card-link {
  border-radius: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

.next-product-section {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Vergleich: drei Produktspalten. Apple Creator Studio / Affinity — gleiche Spalten, Liste mit Titel + Satz. */
.comparison-section .comparison-wrap {
  width: min(100% - 2.5rem, 73rem) !important;
}

.comparison-section .app-feature-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 2.6rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--hair) !important;
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

.comparison-section .app-feature-card {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  min-width: 0 !important;
  padding: 1.7rem .4rem 0 1.7rem !important;
  overflow: visible !important;
  border: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

.comparison-section .app-feature-card:last-child { border-right: 0 !important; }

.comparison-section .app-feature-card header {
  padding: 0 0 1.15rem !important;
  border: 0 !important;
  border-bottom: 1px solid var(--hair) !important;
}

.comparison-section .app-feature-kicker {
  display: block !important;
  margin-bottom: .7rem !important;
  color: #9a9286 !important;
  font-size: .57rem !important;
  font-weight: 700 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
}

.comparison-section .app-feature-card h3 {
  margin: 0 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(2.1rem, 3.4vw, 3.1rem) !important;
  font-weight: 400 !important;
  letter-spacing: -.05em !important;
  line-height: .92 !important;
  color: #f1ede4 !important;
}

.comparison-section .app-feature-card header p {
  max-width: 22rem;
  margin: .65rem 0 0 !important;
  color: #9a9286 !important;
  font-size: .78rem !important;
  line-height: 1.45 !important;
}

.comparison-section .app-feature-card ul {
  display: grid !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.comparison-section .app-feature-card li {
  display: grid !important;
  grid-template-columns: 2.15rem minmax(0, 1fr) !important;
  gap: .85rem !important;
  padding: .8rem 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--hair) !important;
}

.comparison-section .app-feature-card li > span {
  display: block !important;
  padding-top: .12rem;
  color: #8c8578 !important;
  font-size: .58rem !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
}

.comparison-section .app-feature-card li strong {
  display: block !important;
  color: #ece7dd !important;
  font-size: .78rem !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
}

.comparison-section .app-feature-card li small {
  display: block !important;
  margin-top: .22rem !important;
  color: #9a9286 !important;
  font-size: .65rem !important;
  line-height: 1.4 !important;
}

.comparison-section .app-feature-card > a {
  display: inline-flex !important;
  align-self: flex-start !important;
  margin-top: auto !important;
  padding: 1.05rem 0 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--hair) !important;
  background: none !important;
  box-shadow: none !important;
  color: #e2b56a !important;
  font-size: .76rem !important;
  font-weight: 650 !important;
}

.comparison-section .app-feature-selra .app-feature-kicker,
.comparison-section .app-feature-selra li > span { color: #8fbf97 !important; }
.comparison-section .app-feature-luce .app-feature-kicker,
.comparison-section .app-feature-luce li > span { color: #e2b56a !important; }
.comparison-section .app-feature-incisa .app-feature-kicker,
.comparison-section .app-feature-incisa li > span { color: #c39aca !important; }

/* Ablauf: nummerierte Schritte, keine leeren Karten. */
.how-section .how-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  border: 0 !important;
  background: none !important;
}

.how-section .how-grid article {
  position: relative;
  display: grid !important;
  grid-template-columns: 2.5rem minmax(0, 1fr) !important;
  column-gap: 1rem !important;
  min-height: 0 !important;
  padding: 0 0 1.7rem !important;
  border: 0 !important;
  background: none !important;
}

.how-section .how-grid article:last-child { padding-bottom: 0 !important; }

.how-section .how-grid article:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1.35rem;
  bottom: .15rem;
  left: .55rem;
  width: 1px;
  background: var(--hair);
}

.how-section .how-grid article > span {
  grid-row: 1 / span 2;
  padding-top: .15rem;
  color: #e2b56a !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
}

.how-section .how-grid h3 {
  margin: 0 !important;
  font-size: clamp(1.35rem, 2.1vw, 1.75rem) !important;
  line-height: 1.15 !important;
}

.how-section .how-grid p {
  max-width: 28rem;
  margin: .4rem 0 0 !important;
}

/* Feature-Karten: CSS-Attrappen weg. Text ohne Bild = Nummer, Linie, Typo. */
.feature-grid {
  counter-reset: merkmal;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 2.5rem !important;
  row-gap: 0 !important;
}

.feature-card {
  counter-increment: merkmal;
  display: grid !important;
  grid-template-columns: 2.35rem minmax(0, 1fr) !important;
  column-gap: .95rem !important;
  align-items: start !important;
  min-height: 0 !important;
  padding: 1.35rem 0 1.5rem !important;
  overflow: visible !important;
  isolation: auto !important;
  background: transparent !important;
}

.feature-card::before {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  width: 0 !important;
  height: 0 !important;
  inset: auto !important;
  transform: none !important;
}

.feature-card::after {
  content: counter(merkmal, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1 / span 2;
  padding-top: .42rem;
  color: #e2b56a;
  font-family: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1;
}

body:has(.product-screen-selra) .feature-card::after { color: #8fbf97; }
body:has(.product-screen-luce) .feature-card::after { color: #e2b56a; }
body:has(.product-screen-incisa) .feature-card::after { color: #c39aca; }

.card-icon {
  display: none !important;
}

.feature-card h3 {
  grid-column: 2;
  max-width: 16ch !important;
}

.feature-card p {
  grid-column: 2;
  max-width: 28rem !important;
  margin-top: .5rem !important;
}

.quality-card {
  min-height: 0 !important;
  padding: 1.35rem 0 1.5rem !important;
}

.quality-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 2.5rem !important;
}

/* Next-Product: kein Orbit, keine CSS-Vorschau-Karte. */
.next-product-orbit,
.next-product-preview {
  display: none !important;
}

.next-product-section {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 1.5rem 2rem !important;
  min-height: 0 !important;
  margin-top: clamp(3.5rem, 7vw, 6rem) !important;
  margin-bottom: clamp(2.2rem, 4vw, 3.5rem) !important;
  padding: clamp(1.35rem, 3vw, 1.9rem) clamp(1.4rem, 3.2vw, 2.1rem) !important;
  overflow: visible !important;
  border: .5px solid var(--glass-line) !important;
  border-radius: 1.25rem !important;
  background: transparent !important;
  box-shadow:
    0 0 0 .5px rgba(255, 255, 255, .16),
    inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

.next-product-copy h2 {
  margin: .2rem 0 .45rem !important;
  font-size: clamp(2.6rem, 5vw, 4.4rem) !important;
  line-height: .92 !important;
}

.next-product-copy > p:last-child {
  color: #9a9286 !important;
}

.next-product-cta {
  justify-self: end;
  min-height: 2.55rem !important;
  padding: .62rem 1.15rem !important;
  border: .5px solid var(--glass-line) !important;
  border-radius: 999px !important;
  background: var(--glass-fill) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  box-shadow: var(--glass-shadow) !important;
  color: #f7f2ea !important;
}

.next-product-cta:hover {
  background: rgba(255, 255, 255, .12) !important;
}

/* Text-only Interlude / Deep-Dive: keine leere Bildfläche. */
.interlude-visual.detail-facts,
.detail-facts {
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.detail-facts::after {
  display: none !important;
}

/* Deep-Dive: wie «Von der Karte zur Auswahl» — Titel links, Schritte mit Linie rechts. */
.deep-dive {
  display: grid !important;
  grid-template-columns: minmax(17rem, .88fr) minmax(0, 1.12fr) !important;
  align-items: start !important;
  column-gap: clamp(2.2rem, 6vw, 5.5rem) !important;
  row-gap: 1.5rem !important;
  width: min(100% - 2.5rem, 75rem) !important;
  margin: clamp(6rem, 12vw, 11rem) auto 0 !important;
  padding: clamp(3rem, 6vw, 5rem) 0 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--hair) !important;
  background: none !important;
  box-shadow: none !important;
}

.deep-copy {
  display: contents;
}

.deep-dive h2,
.deep-copy h2 {
  grid-column: 1;
  grid-row: 1;
  max-width: none !important;
  margin: 0 !important;
  font-size: clamp(2.7rem, 4.5vw, 4.6rem) !important;
}

.deep-list {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

.deep-list article {
  position: relative;
  display: grid !important;
  grid-template-columns: 2.5rem minmax(0, 1fr) !important;
  column-gap: 1rem !important;
  align-items: start !important;
  margin: 0 !important;
  padding: 0 0 1.7rem !important;
  border: 0 !important;
  background: none !important;
}

.deep-list article:last-child { padding-bottom: 0 !important; }

.deep-list article:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1.35rem;
  bottom: .15rem;
  left: .55rem;
  width: 1px;
  background: var(--hair);
}

.deep-list article > span {
  grid-row: 1 / span 2;
  padding-top: .15rem;
  color: #e2b56a;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
}

body:has(.product-screen-selra) .deep-list article > span { color: #8fbf97; }
body:has(.product-screen-luce) .deep-list article > span { color: #e2b56a; }
body:has(.product-screen-incisa) .deep-list article > span { color: #c39aca; }

.deep-list h3 {
  margin: 0 !important;
  font-size: clamp(1.35rem, 2.1vw, 1.75rem) !important;
  line-height: 1.15 !important;
}

.deep-list article > div { min-width: 0; }

.deep-list p {
  max-width: 28rem;
  margin: .4rem 0 0 !important;
}

.handoff-proof,
.recipe-proof,
.export-proof {
  grid-column: 1;
  grid-row: 2;
  max-width: 24rem;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 1.3rem 0 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.handoff-proof > p,
.recipe-proof > p,
.export-proof > p {
  margin: 0 !important;
  color: #9a9286 !important;
  font-size: .82rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.58 !important;
  text-transform: none !important;
}

.handoff-proof dl,
.recipe-proof dl,
.export-proof dl {
  display: none !important;
}

.handoff-proof small,
.recipe-proof small,
.export-proof small {
  display: block;
  margin: .7rem 0 0 !important;
  color: #8d877d !important;
  font-size: .72rem !important;
  line-height: 1.5 !important;
}

.landing-footer {
  margin: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

/* —— Fenster: nur die Kante, Foto bleibt Foto — */
.hero-stack__shot,
.hero-shot__frame,
.app-shot,
.ui-detail-shot,
.evidence-shot {
  overflow: hidden;
  border: 0 !important;
  border-radius: 1.25rem !important;
  background: #0a0a09 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow:
    0 0 0 .5px rgba(255, 255, 255, .26),
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 22px 48px rgba(0, 0, 0, .46) !important;
}

.hero-stack__shot::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), transparent 26%) !important;
  mix-blend-mode: soft-light;
}

.hero-shot figcaption { margin-top: .5rem; color: #9a9286; }

.glass-spec-layer { display: none !important; }

@media (max-width: 760px) {
  .site-header {
    top: 8px !important;
    right: 10px !important;
    left: 10px !important;
    width: auto !important;
    min-width: 0 !important;
    grid-template-columns: 1fr auto !important;
    overflow: visible !important;
    border-radius: 1.4rem !important;
    padding: .28rem .32rem .28rem .95rem !important;
  }

  .header-actions,
  .document-header-actions {
    display: flex !important;
    align-items: center !important;
    justify-self: end;
  }

  html.live-glass .site-header .menu-toggle,
  html.live-glass .site-header .document-menu-toggle,
  .site-header button.menu-toggle {
    display: grid !important;
    place-items: center !important;
    width: 2.6rem !important;
    height: 2.6rem !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: .5px solid rgba(255, 255, 255, .28) !important;
    background: rgba(255, 255, 255, .1) !important;
    color: #f4efe6 !important;
  }

  html.live-glass .site-header .menu-toggle span,
  html.live-glass .site-header .document-menu-toggle span {
    display: block !important;
    width: 1.05rem !important;
    height: 1.5px !important;
    background: #f4efe6 !important;
  }

  .hero.hero-pep,
  .product-hero.product-hero-stack,
  .pricing-hero {
    padding-top: 6.3rem !important;
    padding-inline: 1.15rem !important;
    box-sizing: border-box !important;
  }

  .hero-content,
  .hero.hero-pep .hero-copy,
  .product-hero .hero-copy,
  .pricing-hero .hero-copy {
    max-width: min(36rem, calc(100vw - 2.4rem)) !important;
  }

  .hero-roles { width: 100% !important; }

  .hero-downloads {
    flex-direction: column;
    gap: .45rem !important;
  }

  .app-feature-card {
    border-right: 0 !important;
    border-bottom: 1px solid var(--hair) !important;
  }

  .license-grid,
  .trust-grid,
  .feature-grid,
  .can-do-grid,
  .quality-grid,
  .next-product-section {
    grid-template-columns: 1fr !important;
  }

  .next-product-cta { justify-self: start; }

  .next-product-section {
    padding: 1.25rem 1.15rem !important;
  }

  .deep-dive {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .deep-copy h2,
  .deep-list,
  .handoff-proof,
  .recipe-proof,
  .export-proof {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  .deep-copy h2 { order: 1; }
  .handoff-proof,
  .recipe-proof,
  .export-proof { order: 2; }
  .deep-list { order: 3; }

  .comparison-section .app-feature-grid {
    grid-template-columns: 1fr !important;
    gap: 2.2rem 0 !important;
  }

  .comparison-section .app-feature-card {
    padding: 1.5rem 0 0 1.25rem !important;
  }

  .capability-sheet > div {
    grid-template-columns: 1fr !important;
    gap: .2rem !important;
  }

  .capability-brands {
    grid-template-columns: 1fr 1fr;
    gap: 0 1.4rem;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header {
    background: rgba(18, 16, 14, .94) !important;
    backdrop-filter: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .glass-smoke__plume { animation: none !important; }
  .hero-stack__shot::after { display: none; }
}

/* —— Document / legal / releases / auth header (same capsule as marketing) —— */
html.live-glass .public-document-page,
html.live-glass .legal-page,
html.live-glass .notfound-page {
  background: transparent !important;
  color: #f1ede4 !important;
}

html.live-glass .public-document-page main {
  position: relative;
  z-index: 1;
  padding-top: 5.6rem;
}

html.live-glass .document-desktop-nav a {
  padding: .42rem .78rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(247, 242, 234, .88);
  text-decoration: none;
}

html.live-glass .document-desktop-nav a:hover,
html.live-glass .document-desktop-nav a:focus-visible {
  color: #f7f2ea !important;
  background: rgba(255, 255, 255, .08) !important;
}

html.live-glass .document-quiet-action {
  padding: .42rem .9rem !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: rgba(255, 255, 255, .1) !important;
  backdrop-filter: blur(18px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.5) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18) !important;
  color: #f7f2ea !important;
}

html.live-glass .document-menu-toggle,
html.live-glass .document-mobile-nav {
  display: none !important;
}

html.live-glass .document-wordmark {
  color: #f7f2ea !important;
}

html.live-glass .legal-hero,
html.live-glass .legal-hero--doc,
html.live-glass .legal-prose,
html.live-glass .document-footer,
html.live-glass .landing-footer.document-footer {
  background: transparent !important;
  color: #ece7dd !important;
}

html.live-glass .overline,
html.live-glass .overline-dark {
  color: #9a9286 !important;
}

html.live-glass .legal-hero h1,
html.live-glass .legal-prose h1,
html.live-glass .legal-prose h2,
html.live-glass .legal-prose h3 {
  color: #f1ede4 !important;
}

html.live-glass .legal-prose p,
html.live-glass .legal-prose li,
html.live-glass .legal-prose dd {
  color: #cfc6b8 !important;
}

html.live-glass .notfound-page .hero,
html.live-glass .notfound-page main,
html.live-glass .releases-page,
html.live-glass .release-hero {
  background: transparent !important;
}

html.live-glass .release-history__intro,
html.live-glass .release-ledger {
  min-width: 0;
}

html.live-glass .release-history__intro h2 {
  max-width: 100%;
  overflow-wrap: anywhere;
}

html.live-glass .notfound-page .hero {
  padding-top: 7.4rem !important;
}

/* —— Login / register (Variante-48 auth-page) —— */
html.live-glass body.account-auth.public-document-page,
html.live-glass .auth-page {
  background: transparent !important;
}

html.live-glass .auth-page h1,
html.live-glass .auth-page h1 em {
  color: inherit;
}

html.live-glass .auth-button-primary {
  border: 0 !important;
  border-radius: 999px !important;
  background: #e4bc78 !important;
  color: #1a1408 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    0 8px 22px rgba(226, 181, 106, .28) !important;
}

html.live-glass .auth-button-quiet,
html.live-glass .auth-alternate {
  border-radius: 999px !important;
  border: .5px solid rgba(255, 255, 255, .2) !important;
  background: rgba(255, 255, 255, .07) !important;
  color: #f3eee6 !important;
  backdrop-filter: blur(22px) saturate(1.55) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.55) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}

html.live-glass .auth-page .form-field input[type="email"],
html.live-glass .auth-page .form-field input[type="password"],
html.live-glass .auth-page .form-field input[type="text"] {
  border-radius: .85rem !important;
  border-color: rgba(255, 255, 255, .16) !important;
  background: rgba(16, 14, 13, .28) !important;
  backdrop-filter: blur(18px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.4) !important;
}

/* —— Split auth (buy / confirm / update-password) —— */
html.live-glass body.account-auth::before {
  display: none !important;
}

html.live-glass .auth-shell,
html.live-glass .auth-panel {
  background: transparent !important;
}

html.live-glass .auth-visual {
  background: transparent !important;
}

html.live-glass .auth-visual::before {
  border-radius: 1.25rem;
  inset: 1.1rem !important;
  box-shadow:
    0 0 0 .5px rgba(255, 255, 255, .26),
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 22px 48px rgba(0, 0, 0, .46);
}

html.live-glass .auth-panel__inner {
  padding: 1.4rem 1.35rem 1.5rem;
  border: .5px solid var(--glass-line);
  border-radius: 1.35rem;
  background: var(--glass-fill);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  color: #f1ede4;
}

html.live-glass .auth-heading h1,
html.live-glass .auth-heading h1 em,
html.live-glass .auth-panel__inner h1 {
  color: #f1ede4 !important;
}

html.live-glass .auth-heading p:not(.eyebrow),
html.live-glass .auth-panel__inner p {
  color: #9a9286 !important;
}

html.live-glass .auth-form input,
html.live-glass .auth-panel input {
  border-radius: .85rem !important;
  border-color: rgba(255, 255, 255, .16) !important;
  background: rgba(16, 14, 13, .34) !important;
  color: #f1ede4 !important;
}

html.live-glass .account-button-primary {
  border: 0 !important;
  border-radius: 999px !important;
  background: #e4bc78 !important;
  color: #1a1408 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    0 8px 22px rgba(226, 181, 106, .28) !important;
}

html.live-glass .account-button,
html.live-glass .account-button-quiet,
html.live-glass .account-button-dark {
  border-radius: 999px !important;
  border: .5px solid rgba(255, 255, 255, .2) !important;
  background: rgba(255, 255, 255, .07) !important;
  color: #f3eee6 !important;
  backdrop-filter: blur(22px) saturate(1.55) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.55) !important;
}

html.live-glass .account-button-primary.account-button {
  background: #e4bc78 !important;
  color: #1a1408 !important;
  border: 0 !important;
}

html.live-glass .account-button-danger {
  border-radius: 999px !important;
}

/* —— Account dashboard —— */
html.live-glass body.account-dashboard::before {
  display: none !important;
}

html.live-glass body.account-dashboard,
html.live-glass .account-shell,
html.live-glass .account-main {
  background: transparent !important;
  color: #f1ede4 !important;
}

html.live-glass .account-sidebar {
  margin: 12px 0 12px 12px;
  height: calc(100vh - 24px);
  border: .5px solid var(--glass-line) !important;
  border-radius: 1.5rem;
  background: var(--glass-fill) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  box-shadow: var(--glass-shadow) !important;
  color: #f1ede4 !important;
}

html.live-glass .account-nav a {
  border-radius: 999px;
  color: rgba(247, 242, 234, .72) !important;
}

html.live-glass .account-nav a:hover,
html.live-glass .account-nav a.is-active {
  background: rgba(255, 255, 255, .1) !important;
  color: #f7f2ea !important;
}

html.live-glass .account-topbar,
html.live-glass .account-summary,
html.live-glass .account-renewals,
html.live-glass .license-list,
html.live-glass .device-list,
html.live-glass .download-list,
html.live-glass .license-row,
html.live-glass .account-empty {
  border-color: var(--hair) !important;
}

html.live-glass .account-topbar h1,
html.live-glass .section-heading h2,
html.live-glass .summary-cell strong,
html.live-glass .license-product strong,
html.live-glass .account-renewals__copy strong {
  color: #f1ede4 !important;
}

html.live-glass .account-topbar p:not(.eyebrow),
html.live-glass .section-heading > p,
html.live-glass .summary-cell p,
html.live-glass .summary-cell__label,
html.live-glass .account-renewals__copy,
html.live-glass .account-empty {
  color: #9a9286 !important;
}

html.live-glass .summary-cell {
  border-color: var(--hair) !important;
}

html.live-glass .license-product__mark {
  border-color: var(--hair) !important;
  border-radius: .7rem;
  background: rgba(255, 255, 255, .06);
}

html.live-glass .account-wordmark,
html.live-glass .account-wordmark span,
html.live-glass .account-wordmark small {
  color: #f7f2ea !important;
}

@media (max-width: 760px) {
  html.live-glass .account-sidebar {
    margin: 8px 10px 0;
    height: auto;
    border-radius: 1.4rem;
  }

  html.live-glass .auth-visual::before {
    inset: .7rem !important;
  }

  html.live-glass .public-document-page main {
    padding-top: 5.2rem;
  }
}

@media (prefers-reduced-transparency: reduce) {
  html.live-glass .account-sidebar,
  html.live-glass .auth-panel__inner,
  html.live-glass .auth-button-quiet,
  html.live-glass .account-button {
    background: rgba(18, 16, 14, .94) !important;
    backdrop-filter: none !important;
  }
}