/* ============================================================
   RufKi Flagship — pages.css
   Seitenspezifische Ergänzungen für die Unterseiten.
   Lädt NACH app.css. Erbt alle Tokens, Nav, Footer, Buttons.
   "Living Blueprint" · EIN Akzent: Teal · kein Glow, kein Lenis.
   ============================================================ */

:root {
  --fs-phero: clamp(2.6rem, 1.2rem + 6vw, 6.4rem);
  --fs-case: clamp(1.8rem, 1.2rem + 2.6vw, 3.4rem);
}

/* ============================================================ PAGE-HERO (gemeinsame Basis) */
.phero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-top: clamp(6rem, 12vh, 8rem);
  padding-bottom: clamp(3rem, 6vh, 5rem);
  background: transparent;
  overflow: hidden;
}
.phero__mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.phero__mesh::before {
  content: "";
  position: absolute;
  width: 70vw;
  height: 70vw;
  max-width: 820px;
  max-height: 820px;
  top: -22%;
  left: 58%;
  border-radius: 50%;
  filter: blur(120px);
  background: radial-gradient(
    circle,
    rgba(138, 41, 226, 0.16),
    transparent 62%
  );
}
.phero__mesh::after {
  content: "";
  position: absolute;
  width: 50vw;
  height: 50vw;
  max-width: 560px;
  max-height: 560px;
  bottom: -26%;
  left: -10%;
  border-radius: 50%;
  filter: blur(120px);
  background: radial-gradient(circle, rgba(79, 70, 229, 0.22), transparent 64%);
}
.phero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.phero--split .phero__inner {
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  gap: var(--space-xl);
  align-items: center;
}
.phero__eyebrow {
  margin-bottom: var(--space-m);
}
.phero__title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 640;
  font-size: var(--fs-phero);
  line-height: 0.94;
  letter-spacing: -0.035em;
  color: var(--text);
  max-width: 16ch;
}
.phero--center .phero__title {
  margin-inline: auto;
  max-width: 18ch;
}
.phero__title .accent {
  color: var(--violet-bright);
}
.phero__title em {
  font-style: normal;
  color: var(--violet-bright);
}
.phero__lead {
  margin: var(--space-m) 0 var(--space-l);
}
.phero--center .phero__lead {
  margin-inline: auto;
}
.phero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
}
.phero--center .phero__cta {
  justify-content: center;
}
.phero--center {
  text-align: center;
}

/* Signal-Unterstreichung (zeichnet sich, CSS-only, kein Plugin nötig) */
.uline {
  width: clamp(160px, 24vw, 300px);
  height: 14px;
  margin-top: var(--space-m);
  overflow: visible;
}
.phero--center .uline {
  margin-inline: auto;
}
.uline__path {
  fill: none;
  stroke: var(--violet);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
}
.uline__node {
  fill: var(--violet);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .uline__path {
    animation: ulineDraw 1.1s 0.45s var(--ease-draw) forwards;
  }
  .uline__node {
    animation: ulineNode 0.3s 1.45s var(--ease-micro) forwards;
  }
}
@media (prefers-reduced-motion: reduce) {
  .uline__path {
    stroke-dashoffset: 0;
  }
  .uline__node {
    opacity: 1;
  }
}
@keyframes ulineDraw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes ulineNode {
  from {
    opacity: 0;
    transform: scale(0.2);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Hero-Reveal (Eyebrow/Lead/CTA) — H1 bleibt statisch (LCP) */
@media (prefers-reduced-motion: no-preference) {
  .phero__eyebrow {
    animation: heroRise 0.7s 0.05s var(--ease-entrance) both;
  }
  .phero__lead {
    animation: heroRise 0.7s 0.22s var(--ease-entrance) both;
  }
  .phero__cta {
    animation: heroRise 0.7s 0.34s var(--ease-entrance) both;
  }
}

@media (max-width: 880px) {
  .phero--split .phero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }
  .phero--split .phero__inner > * {
    min-width: 0;
  }
  .phero__title {
    max-width: 18ch;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .phero {
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
  }
}

/* ============================================================ HERO-VISUAL · BUILD-LOOP (webdesign) */
.bld {
  position: relative;
}
.bld__device {
  border-radius: var(--r-frame);
  background: var(--raised);
  border: 1px solid var(--line);
  padding: 8px;
  box-shadow:
    inset 0 1px 0 rgb(var(--rgb-kante) / 0.06),
    0 36px 80px -38px rgb(var(--rgb-schatten) / calc(0.9 * var(--f-schatten)));
}
.bld__bar {
  display: flex;
  gap: 5px;
  padding: 0.2rem 0.5rem 0.55rem;
}
.bld__bar span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line-strong);
}
.bld__view {
  position: relative;
  border-radius: var(--r-inner);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 11;
  background: var(--surface);
}
.bld__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.bld__layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.bld__layer--live {
  opacity: 1;
}
.bld__cap {
  margin-top: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.bld__phase {
  color: var(--violet-soft);
}
@media (prefers-reduced-motion: no-preference) {
  .bld__layer {
    animation: bldCycle 11.6s var(--ease-entrance) infinite;
  }
  .bld__layer:nth-child(1) {
    animation-delay: 0s;
  }
  .bld__layer:nth-child(2) {
    animation-delay: 2.9s;
  }
  .bld__layer:nth-child(3) {
    animation-delay: 5.8s;
  }
  .bld__layer:nth-child(4) {
    animation-delay: 8.7s;
  }
  .bld__layer--live {
    opacity: 0;
  }
}
@keyframes bldCycle {
  0% {
    opacity: 0;
  }
  3% {
    opacity: 1;
  }
  22% {
    opacity: 1;
  }
  27% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* ============================================================ LEISTUNGEN · WAS DRIN IST (webdesign) */
.incl {
  background: transparent;
}
.incl__head {
  max-width: 60ch;
  margin-bottom: var(--space-xl);
}
.incl__head h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h2);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-top: var(--space-s);
}
.incl__head p {
  color: var(--muted);
  margin-top: var(--space-m);
  font-size: var(--fs-lead);
  line-height: 1.5;
}
.incl__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--space-xl);
  row-gap: 0;
}
.incl__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  padding: var(--space-m) 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.incl__i {
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 0.74rem;
  color: var(--violet-soft);
  letter-spacing: 0.06em;
  padding-top: 0.35rem;
}
.incl__t {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h4);
  letter-spacing: -0.01em;
}
.incl__d {
  display: block;
  color: var(--muted);
  font-size: 0.96rem;
  margin-top: 0.3rem;
  max-width: 38ch;
}
@media (max-width: 760px) {
  .incl__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================ KÖNNEN-GRID (webdesign) */
.caps {
  background: transparent;
}
.caps__head {
  max-width: 60ch;
  margin-bottom: var(--space-l);
}
.caps__head h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h2);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-top: var(--space-s);
}
.caps__head p {
  color: var(--muted);
  margin-top: var(--space-m);
  font-size: var(--fs-lead);
  line-height: 1.5;
}
.caps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-m);
}
.cap {
  border: 1px solid var(--line);
  border-radius: var(--r-frame);
  padding: clamp(1.2rem, 2.2vw, 1.7rem);
  background: rgb(var(--rgb-erhoben) / 0.4);
  transition:
    border-color var(--d-ui) var(--ease-entrance),
    transform var(--d-ui) var(--ease-entrance);
}
@media (hover: hover) {
  .cap:hover {
    border-color: rgba(138, 41, 226, 0.5);
    transform: translateY(-3px);
  }
}
.cap__ic {
  width: 42px;
  height: 42px;
  border-radius: var(--r-inner);
  display: grid;
  place-items: center;
  color: var(--violet-soft);
  background: rgba(138, 41, 226, 0.14);
  margin-bottom: var(--space-s);
}
.cap__ic svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cap h3 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h4);
  margin-bottom: 0.35rem;
}
.cap p {
  color: var(--muted);
  font-size: 0.94rem;
  max-width: 36ch;
}
.cap__tag {
  display: inline-block;
  margin-top: var(--space-s);
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--violet-soft);
  border: 1px solid rgba(138, 41, 226, 0.4);
  border-radius: var(--r-chip);
  padding: 0.25rem 0.55rem;
}
@media (max-width: 880px) {
  .caps__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .caps__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================ BASIC/PREMIUM-VERGLEICH (webdesign) */
.cmp {
  background: rgb(var(--rgb-flaeche) / 0.55);
}
.cmp__head {
  max-width: 60ch;
  margin-bottom: var(--space-l);
}
.cmp__head h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h2);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-top: var(--space-s);
}
.cmp__head p {
  color: var(--muted);
  margin-top: var(--space-m);
  font-size: var(--fs-lead);
  line-height: 1.5;
}
.cmp__scroll {
  overflow-x: auto;
}
.cmp table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}
.cmp th,
.cmp td {
  text-align: left;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.cmp thead th {
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  border-bottom: 1px solid var(--line-strong);
}
.cmp thead th.cmp__prem {
  color: var(--violet-soft);
}
.cmp td:first-child {
  color: var(--text);
  font-weight: 600;
  width: 34%;
}
.cmp td:first-child small {
  display: block;
  color: var(--muted);
  font-weight: 400;
  font-size: 0.85rem;
  margin-top: 0.15rem;
}
.cmp td {
  color: var(--muted);
  font-size: 0.95rem;
}
.cmp col.cmp__premcol,
.cmp td.cmp__prem {
  background: rgba(138, 41, 226, 0.07);
}
.cmp td.cmp__prem {
  color: var(--text);
}
.cmp .yes {
  color: var(--violet-soft);
  font-weight: 700;
  margin-right: 0.45rem;
}
.cmp .no {
  color: var(--faint);
  margin-right: 0.45rem;
}
.cmp__note {
  margin-top: var(--space-m);
  color: var(--faint);
}

/* ============================================================ VERBINDUNGS-ICONS (webdesign) */
.conn {
  background: transparent;
}
.conn__head {
  max-width: 62ch;
  margin-bottom: var(--space-l);
}
.conn__head h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h2);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-top: var(--space-s);
}
.conn__head p {
  color: var(--muted);
  margin-top: var(--space-m);
  font-size: var(--fs-lead);
  line-height: 1.5;
}
.conn__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-m);
}
.conn__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: start;
  padding: var(--space-s) 0;
  border-top: 1px solid var(--line);
}
.conn__ic {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  color: var(--violet-soft);
  flex: none;
  background: rgba(138, 41, 226, 0.08);
}
.conn__ic svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.conn__item b {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  display: block;
}
.conn__item span {
  color: var(--muted);
  font-size: 0.88rem;
  display: block;
  margin-top: 0.15rem;
  max-width: 24ch;
}
@media (max-width: 1080px) {
  .conn__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .conn__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================ BAU-PROZESS · STICKY (webdesign) */
.process {
  background: transparent;
}
.process__sticky {
  padding-block: var(--space-2xl);
}
.process__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
  width: 100%;
}
.process__copy h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h2);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: var(--space-l);
}
.psteps {
  display: flex;
  flex-direction: column;
}
.pstep {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem;
  align-items: baseline;
  padding: var(--space-s) 0;
  border-top: 1px solid var(--line);
  transition: opacity var(--d-ui) var(--ease-entrance);
}
.pstep:last-child {
  border-bottom: 1px solid var(--line);
}
.pstep__i {
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--violet-soft);
  letter-spacing: 0.08em;
}
.pstep__t {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h4);
}
.pstep__d {
  display: block;
  color: var(--muted);
  font-size: 0.94rem;
  margin-top: 0.2rem;
  max-width: 42ch;
}
.process__stage {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.pstage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.pstage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.pstage--last {
  opacity: 1;
}
@media (max-width: 880px) {
  .process__grid {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }
}

/* Sticky nur mit JS + ohne reduce. Ohne JS = finaler Render statisch.
   NUR ab 881px (2-spaltiges Grid) - darunter stapelt .process__grid auf 1
   Spalte (siehe @media max-width:880px), dann sprengt Schritte+Mockup
   gestapelt die 100svh-Pin-Box (gleicher Bug wie .method, siehe app.css). */
@media (min-width: 881px) {
  .js:not(.reduce) .process {
    min-height: 480vh;
  }
  .js:not(.reduce) .process__sticky {
    position: sticky;
    top: 0;
    min-height: 100svh;
    display: flex;
    align-items: center;
  }
}
.js:not(.reduce) .pstage {
  transition: opacity 0.45s var(--ease-entrance);
}
.js:not(.reduce) .pstage--last {
  opacity: 0;
}
.js:not(.reduce) .pstage.is-on {
  opacity: 1;
}
.js:not(.reduce) .pstep {
  opacity: 0.75; /* AA: gedimmt, aber ≥4,5:1 */
}
.js:not(.reduce) .pstep.is-on {
  opacity: 1;
}

/* ============================================================ AUDIENCE · FÜR WEN (webdesign) */
.audience {
  background: rgb(var(--rgb-flaeche) / 0.55);
}
.audience__head h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h2);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-top: var(--space-s);
  margin-bottom: var(--space-l);
  max-width: 18ch;
}
.audience__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}
.atag {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.1rem;
  min-height: 44px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--night);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 500;
}
.atag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--violet);
  flex: none;
}
.audience__note {
  margin-top: var(--space-l);
  color: var(--muted);
  max-width: 52ch;
}

/* ============================================================ WERK · CASE-MIKROSTORYS */
.werk-intro {
  background: transparent;
}
.cases {
  background: transparent;
  padding-bottom: var(--space-2xl);
}
.case {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: var(--space-xl);
  align-items: center;
  padding-block: var(--space-xl);
  border-top: 1px solid var(--line);
}
.case:first-child {
  border-top: 0;
}
.case--rev .case__media {
  order: -1;
}
.case__num {
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.case__num b {
  color: var(--violet-soft);
  font-weight: 500;
}
.case__name {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-case);
  letter-spacing: -0.03em;
  line-height: 1;
  margin: var(--space-s) 0 var(--space-m);
}
.cstory {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-m);
}
.cstory__step {
  padding: 0.85rem 0 0.85rem var(--space-m);
  border-left: 1px solid var(--line);
  position: relative;
}
.cstory__step::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 1.25rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--night);
  border: 2px solid var(--violet-deep);
}
.cstory__step:last-child::before {
  border-color: var(--violet-soft);
  background: var(--violet);
}
.cstory__k {
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--violet-soft);
}
.cstory__step p {
  margin-top: 0.3rem;
  color: var(--muted);
  font-size: 0.98rem;
  max-width: 44ch;
}
.case__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: var(--space-m);
}
.case__tags span {
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
}
.case__soon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.case__soon .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--violet);
}
@media (prefers-reduced-motion: no-preference) {
  .case__soon .dot {
    animation: soonPulse 2.2s var(--ease-entrance) infinite;
  }
}
@keyframes soonPulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.8);
  }
}
.case__media {
  position: relative;
}
.cframe {
  position: relative;
  padding: 8px;
  border-radius: var(--r-frame);
  background: var(--raised);
  border: 1px solid var(--line);
  box-shadow:
    inset 0 1px 0 rgb(var(--rgb-kante) / 0.06),
    0 34px 76px -38px rgb(var(--rgb-schatten) / calc(0.9 * var(--f-schatten)));
}
.cframe__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.15rem 0.5rem 0.6rem;
}
.cframe__bar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line-strong);
  display: inline-block;
}
.cframe__url {
  margin-left: 0.4rem;
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  color: var(--faint);
}
.cframe__shot {
  position: relative;
  border-radius: var(--r-inner);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 10;
  background: var(--surface);
}
.cframe__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.case__corner {
  position: absolute;
  width: 11px;
  height: 11px;
  border: 1px solid var(--line-strong);
  opacity: 0.7;
}
.case__corner--tl {
  top: -1px;
  left: -1px;
  border-right: 0;
  border-bottom: 0;
}
.case__corner--br {
  bottom: -1px;
  right: -1px;
  border-left: 0;
  border-top: 0;
}
@media (max-width: 880px) {
  .case {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }
  .case--rev .case__media {
    order: 0;
  }
}

/* Case-Media: Masken-Reveal mit JS (clip-path). Ohne JS sichtbar. */
.js:not(.reduce) .case__media {
  clip-path: inset(0 0 100% 0);
}

/* ============================================================ PREISE · PLANS */
.plans {
  background: transparent;
}
.plans__axiswrap {
  margin-bottom: var(--space-l);
}
.plans__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-m);
  align-items: stretch;
  max-width: 1180px;
  margin-inline: auto;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 7px;
  border-radius: var(--r-frame);
  background: var(--raised);
  border: 1px solid var(--line);
  box-shadow:
    inset 0 1px 0 rgb(var(--rgb-kante) / 0.06),
    0 26px 60px -34px rgb(var(--rgb-schatten) / calc(0.85 * var(--f-schatten)));
}
.plan__core {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  border-radius: var(--r-inner);
  border: 1px solid var(--line);
  background: linear-gradient(
    180deg,
    rgb(var(--rgb-flaeche) / 0.6),
    rgb(var(--rgb-nacht) / 0.4)
  );
}
.plan--featured {
  border-color: var(--violet-deep);
}
.plan--featured .plan__core {
  border-color: rgba(138, 41, 226, 0.45);
  background: linear-gradient(
    180deg,
    rgba(138, 41, 226, 0.09),
    rgb(var(--rgb-nacht) / 0.3)
  );
}
.plan--featured {
  box-shadow:
    inset 0 1px 0 rgb(var(--rgb-kante) / 0.06),
    var(--glow-violet-strong);
}
.plan__flag {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--violet);
  padding: 0.3rem 0.75rem;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.plan__name {
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--violet-soft);
}
.plan__price {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 640;
  font-size: var(--fs-price);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-top: 0.6rem;
  color: var(--text);
}
.plan__unit {
  color: var(--faint);
  font-size: 0.78rem;
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  margin-top: 0.4rem;
  letter-spacing: 0.04em;
}
.plan__d {
  color: var(--muted);
  font-size: 0.95rem;
  margin-top: var(--space-s);
  padding-bottom: var(--space-m);
  border-bottom: 1px solid var(--line);
  max-width: 32ch;
}
.plan__feat {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: var(--space-m);
  flex: 1;
}
.plan__feat li {
  /* Haken absolut statt Flex-Item: sonst wird jeder Inline-Link im
     Leistungstext ("Demo ansehen") zu einer eigenen Flex-Spalte und
     bricht aus der Zeile heraus. 12.09.2026 */
  display: block;
  position: relative;
  padding-left: calc(18px + 0.7rem);
  font-size: 0.93rem;
  color: var(--text);
  line-height: 1.4;
}
.plan__feat .ck {
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(138, 41, 226, 0.16);
  color: var(--violet-soft);
  display: grid;
  place-items: center;
}
.plan__feat .ck svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.plan__cta {
  margin-top: var(--space-l);
}
.plan__cta .btn {
  width: 100%;
  justify-content: space-between;
}
.plan--featured .plan__cta .btn--ghost {
  border-color: var(--violet-soft);
  color: var(--text);
}
@media (max-width: 1040px) {
  .plans__grid {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }
  .plan--featured {
    order: -1;
  }
}

/* ========== Preis-Jump + Website head ========== */
/* Nav: Dashboard leicht hervorgehoben */
.nav__link[href="dashboard.html"] {
  color: var(--violet-soft, #c4a0ff);
}
.nav__link[href="dashboard.html"].is-active,
.nav__link[href="dashboard.html"]:hover {
  color: var(--text);
}

/* ========== Dashboard-Landing: stark & verkaufend ========== */
/* Label UNTER dem Logo/Hero-Visual — nie drüber (Hamada 27.07.) */
.dash-hero .phero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dash-hero__under {
  margin: 1.1rem 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, rgb(var(--rgb-kante) / 0.55));
  text-align: center;
}
.dash-hero .phero__lead strong {
  color: var(--violet-soft, #c084fc);
}
.ptier__list li.ptier__extra {
  margin-top: 0.35rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(168, 85, 247, 0.28);
  color: var(--violet-soft, #c4a0ff);
}
.ptier__list li.ptier__extra::before {
  content: "✦";
  color: var(--violet-bright, #a855f7);
}

/* Circuit-Chip sitzt unter dem Hero (main.js: hero+~92px, Chip ~136px).
   Erste Content-Sektion MUSS darunter starten — sonst liegt Text auf dem Logo
   (wie auf anderen Unterseiten: Jump-Leiste + space-2xl schafft die Luft). */
.dash-sell {
  padding-top: clamp(11rem, 22vw, 16rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  position: relative;
  z-index: 1;
}
.dash-sell .container {
  position: relative;
  z-index: 2;
}
.dash-features,
.dash-erechnung {
  padding-block: clamp(3.5rem, 7vw, 6rem);
  position: relative;
  z-index: 1;
}
/* Karten/Head: lesbar über Adern (wie proof/faq auf anderen Seiten) */
.dash-sell__head,
.dash-sell__card,
.dash-features .dash-sell__head,
.dash-matrix__col,
.dash-erechnung .container > div,
.dash-erechnung__panel {
  background: rgb(var(--rgb-nacht) / 0.55);
  box-shadow: 0 0 34px 26px rgb(var(--rgb-nacht) / 0.55);
  border-radius: 1rem;
}
.dash-sell__head,
.dash-features .dash-sell__head {
  padding: 0.85rem 1rem;
}
.dash-sell__head {
  max-width: 40rem;
  margin: 0 auto 2.25rem;
  text-align: center;
}
.dash-sell__head h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 640;
  font-size: clamp(1.9rem, 1.2rem + 2.5vw, 3.2rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0.4rem 0 0.85rem;
}
.dash-sell__head h2 em {
  font-style: normal;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.dash-sell__head .lead {
  color: var(--muted);
  margin: 0;
  font-size: 1.05rem;
}

.dash-sell__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.dash-sell__card {
  padding: 1.35rem 1.25rem;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: linear-gradient(
    165deg,
    rgb(var(--rgb-linie) / 0.75) 0%,
    rgb(var(--rgb-nacht) / 0.95) 100%
  );
  transition:
    border-color 0.2s ease,
    transform 0.2s ease;
}
.dash-sell__card:hover {
  border-color: rgba(138, 41, 226, 0.45);
  transform: translateY(-3px);
}
.dash-sell__card--xl {
  grid-column: 1 / -1;
  padding: 1.75rem 1.6rem;
  border-color: rgba(138, 41, 226, 0.4);
  background: linear-gradient(
    120deg,
    rgba(138, 41, 226, 0.18) 0%,
    rgb(var(--rgb-flaeche) / 0.95) 55%
  );
  box-shadow: var(--glow-violet);
}
.dash-sell__tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--violet-soft);
  margin-bottom: 0.65rem;
}
.dash-sell__card h3 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.2rem;
  font-weight: 640;
  margin: 0 0 0.55rem;
  line-height: 1.25;
}
.dash-sell__card--xl h3 {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
}
.dash-sell__card p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--muted);
}
.dash-sell__card p strong {
  color: var(--text);
}

.dash-features {
  background: rgb(var(--rgb-nacht) / 0.7);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.dash-matrix {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.dash-matrix__col {
  padding: 1.5rem 1.35rem;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgb(var(--rgb-erhoben) / 0.85);
}
.dash-matrix__col--hot {
  border-color: rgba(138, 41, 226, 0.5);
  background: linear-gradient(
    180deg,
    rgba(138, 41, 226, 0.16) 0%,
    rgb(var(--rgb-flaeche) / 0.95) 100%
  );
  box-shadow: 0 0 40px rgba(138, 41, 226, 0.12);
}
.dash-matrix__col h3 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.15rem;
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}
.dash-matrix__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dash-matrix__col li {
  position: relative;
  padding: 0.45rem 0 0.45rem 1.1rem;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--text);
  border-top: 1px solid rgb(var(--rgb-kante) / 0.04);
}
.dash-matrix__col li:first-child {
  border-top: 0;
}
.dash-matrix__col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--violet);
}
.dash-matrix__col li strong {
  color: var(--violet-soft);
}

.dash-erechnung {
  background:
    radial-gradient(
      ellipse 70% 60% at 80% 40%,
      rgba(138, 41, 226, 0.2),
      transparent 60%
    ),
    rgb(var(--rgb-nacht) / 0.95);
}
.dash-erechnung__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.dash-erechnung h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 640;
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0.4rem 0 1rem;
}
.dash-erechnung h2 em {
  font-style: normal;
  color: var(--violet-soft);
}
.dash-erechnung .lead {
  color: var(--muted);
  margin: 0 0 1.25rem;
}
.dash-erechnung__list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}
.dash-erechnung__list li {
  padding: 0.5rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.98rem;
  color: var(--text);
}
.dash-erechnung__list li:first-child {
  border-top: 0;
}
.dash-erechnung__list strong {
  color: var(--violet-soft);
}
.dash-erechnung__panel {
  position: relative;
  padding: 2rem 1.75rem;
  border-radius: 20px;
  border: 1px solid rgba(138, 41, 226, 0.45);
  background: linear-gradient(
    155deg,
    rgb(var(--rgb-linie) / 0.6) 0%,
    rgb(var(--rgb-nacht) / 0.98) 100%
  );
  box-shadow: var(--glow-violet-strong);
  text-align: center;
}
.dash-erechnung__badge {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(138, 41, 226, 0.35);
  color: #fff;
}
.dash-erechnung__big {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(2.4rem, 1.5rem + 3vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 0.35rem;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.dash-erechnung__sub {
  margin: 0 0 1.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
}
.dash-erechnung__copy {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--muted);
}

@media (max-width: 1024px) {
  .dash-sell__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .dash-sell__card--xl {
    grid-column: 1 / -1;
  }
  .dash-matrix {
    grid-template-columns: 1fr;
  }
  .dash-erechnung__grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .dash-sell__grid {
    grid-template-columns: 1fr;
  }
}

.price-jump {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 0.65rem 0;
  background: rgb(var(--rgb-nacht) / 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.price-jump__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  justify-content: center;
  align-items: center;
}
.price-jump__chip {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}
.price-jump__chip:hover {
  color: var(--text);
  border-color: rgba(138, 41, 226, 0.45);
}
.price-jump__chip--hot {
  color: var(--text);
  border-color: rgba(138, 41, 226, 0.55);
  background: rgba(138, 41, 226, 0.12);
}
.plans__head {
  text-align: center;
  max-width: 36rem;
  margin: 0 auto var(--space-xl);
}
.plans__head .lead {
  margin-top: var(--space-s);
  color: var(--muted);
}
.phero__cta--split {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* ========== Portal / Dashboard Preise ========== */
.portal-price {
  position: relative;
  background:
    radial-gradient(
      ellipse 80% 50% at 50% 0%,
      rgba(138, 41, 226, 0.14),
      transparent 55%
    ),
    rgb(var(--rgb-nacht) / 0.92);
  border-top: 1px solid rgba(138, 41, 226, 0.2);
  border-bottom: 1px solid var(--line);
}

/* A · Rechnungskarten (nur Geld-Positionen) */
.dash-bills {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  position: relative;
  z-index: 2;
}
@media (max-width: 900px) {
  .dash-bills {
    grid-template-columns: 1fr;
  }
}
.dash-bill {
  position: relative;
  background: rgb(var(--rgb-flaeche) / 0.92);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.2rem 1.25rem 1.3rem;
}
.dash-bill--hot {
  border-color: rgba(168, 85, 247, 0.55);
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.12);
}
.dash-bill__badge {
  position: absolute;
  top: -0.55rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--violet, #a855f7);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
}
.dash-bill__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px dashed var(--line);
}
.dash-bill__name {
  margin: 0;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.15rem;
  font-weight: 640;
}
.dash-bill__flag {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--violet-soft, #c4a0ff);
}
.dash-bill__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.dash-bill__table td {
  padding: 0.32rem 0;
  vertical-align: top;
  color: var(--muted);
}
.dash-bill__table td:first-child {
  color: var(--text);
  padding-right: 0.75rem;
}
.dash-bill__table td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dash-bill__sum {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}
.dash-bill__agency {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: var(--muted);
}
/* W8: 0.38 ergab gemessen 2,39:1 — ein durchgestrichener Preis darf leiser
   sein, aber nicht unlesbar (GESETZ Kap. 11, Regel 38b). */
.dash-bill__agency s {
  color: rgb(var(--rgb-kante) / 0.62);
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  text-decoration-thickness: 1.5px;
}
.dash-bill__paket {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 0.4rem;
  font-weight: 640;
  font-size: 1.05rem;
}
.dash-bill__paket strong {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.55rem;
  color: var(--violet-soft, #c4a0ff);
  font-variant-numeric: tabular-nums;
}
.dash-bill__listen {
  margin: 0.45rem 0 0;
  font-size: 0.78rem;
  color: rgb(var(--rgb-kante) / 0.4);
}
.dash-bill__save {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: var(--gruen);
}
.dash-bill .ptier__cta {
  margin-top: 0.95rem;
  width: 100%;
  text-align: center;
}
.dash-bills__hint {
  margin: 1.25rem auto 0;
  max-width: 36rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
}

/* C · Feature-Matrix (alle Features + Gadgets) */
.dash-compare {
  position: relative;
  z-index: 1;
  padding-block: clamp(3.5rem, 7vw, 6rem);
}
.dash-compare__scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgb(var(--rgb-flaeche) / 0.75);
  -webkit-overflow-scrolling: touch;
}
.dash-compare__table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}
.dash-compare__table th,
.dash-compare__table td {
  padding: 0.55rem 0.75rem;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.dash-compare__table th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: rgb(var(--rgb-toenung) / calc(0.28 * var(--f-toenung)));
  font-weight: 600;
}
.dash-compare__table th span {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.95rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  font-weight: 700;
}
.dash-compare__table th.is-hot {
  color: var(--violet-soft, #c4a0ff);
  background: rgba(168, 85, 247, 0.12);
}
.dash-compare__table th.is-hot span {
  color: var(--violet-soft, #c4a0ff);
}
.dash-compare__table td:first-child,
.dash-compare__table th:first-child {
  text-align: left;
  color: var(--muted);
  font-weight: 500;
  min-width: 11.5rem;
}
.dash-compare__table td {
  color: var(--text);
}
.dash-compare__table td.is-no {
  color: rgb(var(--rgb-kante) / 0.18);
}
.dash-compare__table td.is-soft {
  color: var(--violet-soft, #c4a0ff);
  font-size: 0.8rem;
}
.dash-compare__sec td {
  background: rgba(168, 85, 247, 0.07);
  color: var(--violet-soft, #c4a0ff) !important;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: left !important;
  padding-top: 0.8rem;
  font-weight: 600;
}
.dash-compare__foot td {
  border-bottom: 0;
  background: rgb(var(--rgb-toenung) / calc(0.28 * var(--f-toenung)));
  font-weight: 640;
  vertical-align: middle;
}
.dash-compare__foot s {
  display: block;
  color: rgb(var(--rgb-kante) / 0.3);
  font-size: 0.8rem;
  font-weight: 500;
}
.dash-compare__foot strong {
  color: var(--violet-soft, #c4a0ff);
  font-size: 1.05rem;
}
.dash-compare__note {
  margin: 1rem 0 0;
  font-size: 0.88rem;
  color: var(--muted);
  text-align: center;
}
.portal-price__intro {
  max-width: 40rem;
  margin: 0 auto var(--space-xl);
  text-align: center;
}
.portal-price__intro h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 640;
  font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0.4rem 0 1rem;
}
.portal-price__intro h2 em {
  font-style: normal;
  color: var(--violet-soft, #c4a0ff);
}
.portal-price__intro .lead {
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.55;
}
.portal-price__intro a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.portal-trial-badge {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.5rem;
  margin: 1.25rem auto 0;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(52, 231, 197, 0.35);
  background: rgba(52, 231, 197, 0.1);
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.35;
}
.portal-trial-badge strong {
  color: var(--mint);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.portal-price__intro .portal-trial-badge {
  display: inline-flex;
}

/* Große Gratiswochen-Box */
.portal-trial-hero {
  position: relative;
  overflow: hidden;
  max-width: 52rem;
  margin: 0 auto var(--space-xl);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2rem);
  text-align: center;
  border-radius: 20px;
  border: 1px solid rgba(52, 231, 197, 0.45);
  background: linear-gradient(
    155deg,
    rgba(52, 231, 197, 0.16) 0%,
    rgba(138, 41, 226, 0.12) 45%,
    rgb(var(--rgb-nacht) / 0.95) 100%
  );
  box-shadow:
    0 0 0 1px rgba(52, 231, 197, 0.12),
    0 20px 50px rgb(var(--rgb-schatten) / calc(0.35 * var(--f-schatten)));
}
.portal-trial-hero__glow {
  position: absolute;
  inset: -40% -20% auto;
  height: 80%;
  background: radial-gradient(
    ellipse at center,
    rgba(52, 231, 197, 0.22),
    transparent 65%
  );
  pointer-events: none;
}
.portal-trial-hero__kicker {
  position: relative;
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mint);
}
.portal-trial-hero__title {
  position: relative;
  margin: 0 0 0.75rem;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(2rem, 1.2rem + 3.5vw, 3.2rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
}
.portal-trial-hero__title em {
  font-style: normal;
  color: var(--mint);
}
.portal-trial-hero__sub {
  position: relative;
  margin: 0 auto 1.15rem;
  max-width: 36rem;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--muted);
}
.portal-trial-hero__sub strong {
  color: var(--text);
}
.portal-trial-hero__points {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0.65rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.portal-trial-hero__points li {
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(52, 231, 197, 0.35);
  background: rgb(var(--rgb-toenung) / calc(0.28 * var(--f-toenung)));
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
}

/* Trial-Pill auf jeder Preiskarte */
.ptier__trial {
  display: inline-block;
  margin-top: 0.55rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mint-text);
  background: linear-gradient(90deg, var(--mint), var(--mint-tief));
  box-shadow: 0 0 18px rgba(52, 231, 197, 0.35);
}

/* Schmerz / Nutzen */
.portal-pain {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: var(--space-l);
}
.portal-pain__col {
  padding: 1.35rem 1.3rem 1.2rem;
  border-radius: 16px;
  border: 1px solid var(--line);
}
.portal-pain__col--bad {
  background: rgb(var(--rgb-warn-flaeche) / 0.55);
  border-color: rgba(255, 90, 100, 0.22);
}
.portal-pain__col--good {
  background: rgb(var(--rgb-gut-flaeche) / 0.55);
  border-color: rgba(52, 231, 197, 0.28);
}
.portal-pain__label {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
  color: var(--muted);
}
.portal-pain__col--good .portal-pain__label {
  color: var(--mint);
}
.portal-pain__col--bad .portal-pain__label {
  color: var(--rot);
}
.portal-pain ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.portal-pain li {
  position: relative;
  padding: 0.4rem 0 0.4rem 1.15rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text);
  border-top: 1px solid rgb(var(--rgb-kante) / 0.05);
}
.portal-pain li:first-child {
  border-top: 0;
}
.portal-pain__col--bad li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--rot);
  font-weight: 700;
}
.portal-pain__col--good li::before {
  content: "+";
  position: absolute;
  left: 0;
  color: var(--mint);
  font-weight: 700;
}

/* Verkaufs-Hooks */
.portal-hooks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem;
  margin-bottom: var(--space-xl);
}
.portal-hook {
  padding: 1.15rem 1.1rem;
  border-radius: 14px;
  border: 1px solid rgba(138, 41, 226, 0.28);
  background: linear-gradient(
    160deg,
    rgba(138, 41, 226, 0.12) 0%,
    rgb(var(--rgb-nacht) / 0.9) 70%
  );
}
.portal-hook strong {
  display: block;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.02rem;
  font-weight: 640;
  line-height: 1.25;
  margin-bottom: 0.45rem;
  color: var(--text);
}
.portal-hook p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--muted);
}

.portal-pitch {
  text-align: center;
  max-width: 38rem;
  margin: 0 auto var(--space-xl);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--muted);
}
.portal-pitch strong {
  color: var(--text);
}
.portal-pitch a {
  color: var(--violet-soft, #c4a0ff);
}

.portal-feat {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: var(--space-xl);
}
.portal-feat__card {
  padding: 1.25rem 1.15rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgb(var(--rgb-erhoben) / 0.65);
  transition:
    border-color 0.2s ease,
    transform 0.2s ease;
}
.portal-feat__card:hover {
  border-color: rgba(138, 41, 226, 0.4);
  transform: translateY(-2px);
}
.portal-feat__num {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--violet-soft, #c4a0ff);
  margin-bottom: 0.65rem;
}
.portal-feat__card h3 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.15rem;
  font-weight: 640;
  margin: 0 0 0.5rem;
}
.portal-feat__card p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--muted);
}

.portal-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.15rem;
  align-items: stretch;
  margin-bottom: var(--space-xl);
}
.portal-tiers--4 {
  grid-template-columns: repeat(4, 1fr);
  gap: 0.9rem;
}
.ptier {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.35rem 1.35rem;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(
    165deg,
    rgb(var(--rgb-erhoben) / 0.95) 0%,
    rgb(var(--rgb-nacht) / 0.98) 100%
  );
  box-shadow: 0 12px 40px rgb(var(--rgb-schatten) / calc(0.25 * var(--f-schatten)));
}
.portal-tiers--4 .ptier {
  padding: 1.35rem 1.1rem 1.2rem;
}
.portal-tiers--4 .ptier__price strong {
  font-size: clamp(2.1rem, 1.5rem + 1.4vw, 2.75rem);
}
.portal-tiers--4 .ptier__d {
  min-height: 4.2em;
  font-size: 0.88rem;
}
.portal-tiers--4 .ptier__list li {
  font-size: 0.84rem;
  padding: 0.38rem 0 0.38rem 1.2rem;
}
.ptier--featured {
  border-color: rgba(138, 41, 226, 0.55);
  background: linear-gradient(
    165deg,
    rgba(40, 28, 70, 0.55) 0%,
    rgb(var(--rgb-flaeche) / 0.98) 55%
  );
  box-shadow:
    0 0 0 1px rgba(138, 41, 226, 0.25),
    0 24px 60px rgba(80, 40, 160, 0.22);
  transform: scale(1.02);
  z-index: 1;
}
.portal-tiers--4 .ptier--featured {
  transform: scale(1.03);
}
.ptier__flag {
  position: absolute;
  top: -0.65rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  background: var(--violet, #8a29e2);
  color: #fff;
  white-space: nowrap;
}
.ptier__head {
  margin-bottom: 0.75rem;
}
.ptier__name {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.ptier__price {
  display: flex;
  align-items: baseline;
  gap: 0.15rem;
  font-family: "Bricolage Grotesque", sans-serif;
  line-height: 1;
}
.ptier__price strong {
  font-size: clamp(2.6rem, 2rem + 2vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
}
.ptier__price span {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--muted);
}
.ptier__unit {
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.ptier__d {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 1.1rem;
  min-height: 3.2em;
}
.ptier__list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  flex: 1;
}
.ptier__list li {
  position: relative;
  padding: 0.45rem 0 0.45rem 1.35rem;
  font-size: 0.9rem;
  line-height: 1.4;
  border-top: 1px solid rgb(var(--rgb-kante) / 0.05);
  color: var(--text);
}
.ptier__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--violet, #8a29e2);
  box-shadow: 0 0 10px rgba(138, 41, 226, 0.5);
}
.ptier__list li strong {
  color: var(--violet-soft, #c4a0ff);
}
.ptier__out {
  font-size: 0.8rem;
  color: var(--muted);
  opacity: 0.85;
  margin: 0 0 1rem;
  font-style: italic;
}
.ptier__cta {
  width: 100%;
  justify-content: center;
  margin-top: auto;
}
.ptier__cta-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: auto;
}
.ptier__cta-row .ptier__cta {
  margin-top: 0;
}
.ptier__cancel {
  margin: 0.55rem 0 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.plan__cta--dual {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.plan__cta--dual .btn {
  width: 100%;
  justify-content: center;
}

.portal-price__note {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.portal-price__note-card {
  padding: 1.15rem 1.2rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgb(var(--rgb-toenung) / calc(0.25 * var(--f-toenung)));
}
.portal-price__note-card b {
  display: block;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1rem;
  margin-bottom: 0.4rem;
}
.portal-price__note-card p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
}
.portal-price__note-card a {
  color: var(--text);
}

@media (max-width: 1200px) {
  .portal-tiers--4 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 720px;
    margin-inline: auto;
  }
  .portal-tiers--4 .ptier--featured {
    transform: none;
  }
}
@media (max-width: 1024px) {
  .portal-feat {
    grid-template-columns: repeat(2, 1fr);
  }
  .portal-hooks {
    grid-template-columns: repeat(2, 1fr);
  }
  .portal-tiers:not(.portal-tiers--4) {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-inline: auto;
  }
  .ptier--featured {
    transform: none;
    order: -1;
  }
  .portal-tiers--4 .ptier--featured {
    order: -1;
  }
  .portal-price__note {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .portal-tiers--4 {
    grid-template-columns: 1fr;
    max-width: 400px;
  }
}
@media (max-width: 720px) {
  .portal-pain {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .portal-feat,
  .portal-hooks {
    grid-template-columns: 1fr;
  }
  .price-jump__chip {
    font-size: 0.68rem;
    padding: 0.4rem 0.65rem;
  }
}

/* Zahlung + Garantie */
.pay {
  background: rgb(var(--rgb-flaeche) / 0.55);
}
.pay__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}
.pay__steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--space-m);
}
.pay__step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  padding: var(--space-m) 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.pay__pct {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 640;
  font-size: 1.5rem;
  color: var(--violet-soft);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.pay__step b {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h4);
  display: block;
}
.pay__step span {
  color: var(--muted);
  font-size: 0.94rem;
}
.pay__copy h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h2);
  letter-spacing: -0.03em;
  line-height: 1;
}
@media (max-width: 880px) {
  .pay__grid {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }
}

/* FAQ (Answer-First, native details) */
.faq {
  background: transparent;
}
.faq__head {
  margin-bottom: var(--space-l);
}
.faq__head h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h2);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-top: var(--space-s);
}
.faq__list {
  max-width: 760px;
}
.qa {
  border-top: 1px solid var(--line);
}
.qa:last-child {
  border-bottom: 1px solid var(--line);
}
.qa > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: var(--space-m) 0;
  min-height: 44px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h4);
  letter-spacing: -0.01em;
  color: var(--text);
}
.qa > summary::-webkit-details-marker {
  display: none;
}
.qa__plus {
  flex: none;
  width: 26px;
  height: 26px;
  position: relative;
}
.qa__plus::before,
.qa__plus::after {
  content: "";
  position: absolute;
  background: var(--violet);
  top: 50%;
  left: 50%;
}
.qa__plus::before {
  width: 13px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}
.qa__plus::after {
  width: 1.5px;
  height: 13px;
  transform: translate(-50%, -50%);
  transition: transform var(--d-ui) var(--ease-entrance);
}
.qa[open] .qa__plus::after {
  transform: translate(-50%, -50%) scaleY(0);
}
.qa__a {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 64ch;
  padding-bottom: var(--space-m);
}
.qa__a strong {
  color: var(--text);
  font-weight: 600;
}
@media (prefers-reduced-motion: no-preference) {
  .qa[open] .qa__a {
    animation: heroRise 0.45s var(--ease-entrance) both;
  }
}

/* ============================================================ ÜBER */
.about {
  background: transparent;
}
.about__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-xl);
  align-items: start;
}
.about__lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--text);
}
.about__body {
  color: var(--muted);
  margin-top: var(--space-m);
  font-size: 1.02rem;
  line-height: 1.7;
}
.about__body p + p {
  margin-top: var(--space-m);
}
.about__sign {
  margin-top: var(--space-l);
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.about__sign .spec {
  color: var(--muted);
}
.portrait {
  position: relative;
  padding: 8px;
  border-radius: var(--r-frame);
  background: var(--raised);
  border: 1px solid var(--line);
  box-shadow:
    inset 0 1px 0 rgb(var(--rgb-kante) / 0.06),
    0 34px 76px -38px rgb(var(--rgb-schatten) / calc(0.9 * var(--f-schatten)));
}
.portrait img {
  width: 100%;
  border-radius: var(--r-inner);
  border: 1px solid var(--line);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(0.12) contrast(1.02);
}
.portrait figcaption {
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 0.6rem 0.3rem 0.15rem;
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
}
.values {
  background: rgb(var(--rgb-flaeche) / 0.55);
}
.values__kopfzeile h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h2);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-top: var(--space-s);
  margin-bottom: var(--space-l);
  max-width: 16ch;
}
.values__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.value-col {
  padding: var(--space-m) var(--space-m) 0 0;
  border-top: 1px solid var(--line);
}
.value-col:not(:last-child) {
  border-right: 1px solid var(--line);
}
.value-col h3 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h4);
  margin-bottom: 0.4rem;
}
.value-col p {
  color: var(--muted);
  font-size: 0.95rem;
  max-width: 30ch;
}
.value-col .spec {
  display: block;
  margin-bottom: var(--space-s);
  color: var(--violet-soft);
}
@media (max-width: 760px) {
  .about__grid {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }
  .values__grid {
    grid-template-columns: 1fr;
  }
  .value-col {
    padding-right: 0;
  }
  .value-col:not(:last-child) {
    border-right: 0;
  }
}

/* ============================================================ TEAM (ueber-uns) */
.team {
  background: transparent;
}
.team__kopfzeile {
  max-width: 60ch;
  margin-bottom: var(--space-l);
}
.team__kopfzeile h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h2);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-top: var(--space-s);
}
.team__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-m);
}
.tmember {
  padding: 8px;
  border-radius: var(--r-frame);
  background: var(--raised);
  border: 1px solid var(--line);
  box-shadow:
    inset 0 1px 0 rgb(var(--rgb-kante) / 0.06),
    0 30px 70px -34px rgb(var(--rgb-schatten) / calc(0.9 * var(--f-schatten)));
  transition:
    transform var(--d-ui) var(--ease-entrance),
    border-color var(--d-ui) var(--ease-entrance);
}
@media (hover: hover) {
  .tmember:hover {
    transform: translateY(-4px);
    border-color: rgba(138, 41, 226, 0.45);
  }
}
.tmember img {
  width: 100%;
  border-radius: var(--r-inner);
  border: 1px solid var(--line);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 30%;
  filter: grayscale(0.12) contrast(1.02);
}
.tmember figcaption {
  padding: 0.9rem 0.5rem 0.5rem;
}
.tmember b {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  display: block;
}
.tmember .role {
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--violet-soft);
  display: block;
  margin-top: 0.3rem;
}
.tmember p {
  color: var(--muted);
  font-size: 0.9rem;
  margin-top: 0.5rem;
  max-width: 30ch;
}
@media (max-width: 880px) {
  .team__grid {
    grid-template-columns: 1fr;
    max-width: 420px;
  }
}

/* ============================================================ KI-ASSISTENT · VOICE */
.voice-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-top: clamp(6rem, 12vh, 8rem);
  padding-bottom: clamp(3rem, 6vh, 5rem);
  background: transparent;
  overflow: hidden;
  text-align: center;
}
.voice-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.voice-hero__title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 640;
  font-size: clamp(2.4rem, 1.2rem + 5vw, 5.2rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
  max-width: 16ch;
  margin: var(--space-l) auto var(--space-m);
}
.voice-hero__title em {
  font-style: normal;
  color: var(--violet-bright);
}
.voice-hero__lead {
  margin: 0 auto var(--space-l);
  max-width: 50ch;
}
.wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: clamp(90px, 16vh, 150px);
  margin-inline: auto;
}
.wave span {
  width: 5px;
  border-radius: var(--r-pill);
  background: var(--violet);
  height: var(--h, 30%);
  transform-origin: center;
  opacity: 0.85;
}
@media (prefers-reduced-motion: no-preference) {
  .wave span {
    animation: eq 1.15s var(--ease-entrance) var(--d, 0s) infinite alternate;
  }
}
@keyframes eq {
  from {
    transform: scaleY(0.28);
    opacity: 0.55;
  }
  to {
    transform: scaleY(1);
    opacity: 0.9;
  }
}
.voice-note {
  background: transparent;
}
.voice-note__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-xl);
  align-items: center;
}
.voice-note__grid h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h2);
  letter-spacing: -0.03em;
  line-height: 1;
}
.voice-note__grid p {
  color: var(--muted);
  margin-top: var(--space-m);
  font-size: 1.02rem;
  line-height: 1.7;
}
.voice-pts {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.voice-pt {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  padding: var(--space-m) 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.voice-pt:last-child {
  border-bottom: 1px solid var(--line);
}
.voice-pt .spec {
  color: var(--violet-soft);
}
.voice-pt b {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h4);
  display: block;
}
.voice-pt span.t {
  color: var(--muted);
  font-size: 0.94rem;
  display: block;
  margin-top: 0.2rem;
}
@media (max-width: 880px) {
  .voice-note__grid {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }
}

/* ============================================================ KI-TEASER (Home) */
.ki-teaser {
  background: transparent;
}
.ki-teaser__card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: var(--space-l);
  align-items: center;
  padding: clamp(2rem, 5vw, 3.6rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-frame);
  background: linear-gradient(
    135deg,
    rgba(138, 41, 226, 0.14),
    rgb(var(--rgb-nacht) / 0.5) 60%
  );
}
.ki-teaser__card::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  top: -55%;
  right: -8%;
  border-radius: 50%;
  filter: blur(90px);
  background: radial-gradient(
    circle,
    rgba(138, 41, 226, 0.28),
    transparent 65%
  );
  pointer-events: none;
}
.ki-teaser__h {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h3);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-top: var(--space-s);
  max-width: 20ch;
}
.ki-teaser__p {
  color: var(--muted);
  margin: var(--space-s) 0 var(--space-m);
  max-width: 52ch;
}
.wave--teaser {
  height: clamp(80px, 12vw, 130px);
}
@media (max-width: 760px) {
  .ki-teaser__card {
    grid-template-columns: 1fr;
  }
  .wave--teaser {
    order: -1;
    height: 64px;
  }
}

/* ============================================================ AUDIO-DEMOS (ki-assistent) */
.ademos {
  background: transparent;
}
.ademos__note {
  color: var(--muted);
  max-width: 56ch;
  margin-bottom: var(--space-l);
}
.ademo {
  display: grid;
  grid-template-columns: auto 1fr minmax(160px, 0.5fr);
  gap: 1.1rem;
  align-items: center;
  padding: var(--space-s) 0;
  border-top: 1px solid var(--line);
}
.ademos__list .ademo:last-child {
  border-bottom: 1px solid var(--line);
}
.ademo--start {
  border: 1px solid rgba(138, 41, 226, 0.45);
  border-radius: var(--r-frame);
  padding: var(--space-m);
  margin-bottom: var(--space-l);
  background: linear-gradient(
    135deg,
    rgba(138, 41, 226, 0.12),
    rgb(var(--rgb-nacht) / 0.5) 65%
  );
  box-shadow: var(--glow-violet);
}
.ademo__btn {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 50%;
  background: var(--violet);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: var(--glow-violet);
  transition:
    transform var(--d-hover) var(--ease-entrance),
    background-color var(--d-hover) var(--ease-entrance),
    box-shadow var(--d-hover) var(--ease-entrance);
}
.ademo__btn svg {
  width: 18px;
  height: 18px;
}
.ademo__pause {
  display: none;
}
.ademo.is-playing .ademo__play {
  display: none;
}
.ademo.is-playing .ademo__pause {
  display: block;
}
@media (hover: hover) {
  .ademo__btn:hover {
    background: var(--violet-bright);
    transform: scale(1.06);
    box-shadow: var(--glow-violet-strong);
  }
}
.ademo__btn:active {
  transform: scale(0.96);
}
.ademo__txt b {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h4);
  display: block;
}
.ademo__txt span {
  color: var(--muted);
  font-size: 0.92rem;
  display: block;
  margin-top: 0.15rem;
}
.ademo__meta {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.ademo__time {
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  color: var(--faint);
  min-width: 3.2ch;

}
.ademo__bar {
  position: relative;
  flex: 1;
  height: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.ademo__bar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--line-strong);
}
.ademo__fill {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  border-radius: var(--r-pill);
  background: linear-gradient(
    90deg,
    var(--blue-violet),
    var(--violet),
    var(--magenta)
  );
  transform: scaleX(0);
  transform-origin: left center;
}
@media (max-width: 640px) {
  .ademo {
    grid-template-columns: auto 1fr;
  }
  .ademo__meta {
    grid-column: 1 / -1;
  }
}

/* ============================================================ KONTAKT · FORM + MAP */
.contact-main {
  background: transparent;
}
.contact-main__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-xl);
  align-items: start;
}
.cinfo h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h2);
  letter-spacing: -0.03em;
  line-height: 1;
}
.cinfo__lead {
  color: var(--muted);
  margin: var(--space-m) 0 var(--space-l);
  font-size: var(--fs-lead);
  line-height: 1.5;
  max-width: 42ch;
}
.cways {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: var(--space-l);
}
.cway {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: var(--space-m) 0;
  border-top: 1px solid var(--line);
  min-height: 56px;
  transition: border-color var(--d-ui) var(--ease-entrance);
}
.cway:last-child {
  border-bottom: 1px solid var(--line);
}
.cway__ic {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  color: var(--violet-soft);
  flex: none;
}
.cway__ic svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cway__k {
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  display: block;
}
.cway__v {
  font-size: 1rem;
  color: var(--text);
  font-weight: 500;
}
.cway__go {
  color: var(--faint);
  transition:
    color var(--d-hover) var(--ease-entrance),
    transform var(--d-hover) var(--ease-entrance);
}
.cway__go svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (hover: hover) {
  .cway:hover {
    border-color: var(--line-strong);
  }
  .cway:hover .cway__go {
    color: var(--violet-soft);
    transform: translate(2px, -2px);
  }
}
.cmap {
  border-radius: var(--r-frame);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: clamp(0.8rem, 2vw, 1.4rem);
}
.cmap__cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.8rem;
}
.berlin__district {
  fill: rgb(var(--rgb-flaeche) / 0.5);
  stroke: var(--line);
  stroke-width: 1;
}
.berlin__road {
  stroke: var(--line-strong);
  stroke-width: 1;
  fill: none;
  opacity: 0.7;
}
.berlin__ring {
  fill: none;
  stroke: var(--faint);
  stroke-width: 1;
  stroke-dasharray: 3 5;
  opacity: 0.5;
}

/* Formular */
.form-wrap {
  background: rgb(var(--rgb-flaeche) / 0.55);
}
.form-card {
  max-width: 720px;
}
.form-card h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h3);
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.form-card__sub {
  color: var(--muted);
  margin: var(--space-s) 0 var(--space-l);
}
.aform {
  display: grid;
  gap: var(--space-m);
}
.frow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-m);
}
.field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.field--full {
  grid-column: 1 / -1;
}
.label {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text);
}
.label .opt {
  color: var(--faint);
  font-weight: 400;
  font-family: "Manrope", sans-serif;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  margin-left: 0.4rem;
}
.input,
.textarea,
.select {
  width: 100%;
  min-height: 50px;
  padding: 0.8rem 1rem;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--night);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-inner);
  transition:
    border-color var(--d-hover) var(--ease-entrance),
    box-shadow var(--d-hover) var(--ease-entrance);
}
.textarea {
  min-height: 130px;
  resize: vertical;
  line-height: 1.5;
}
.input::placeholder,
.textarea::placeholder {
  color: var(--placeholder);
}
.input:focus-visible,
.textarea:focus-visible,
.select:focus-visible {
  outline: none;
  border-color: var(--violet-soft);
  box-shadow: 0 0 0 3px rgba(138, 41, 226, 0.24);
}
.help {
  font-size: 0.8rem;
  color: var(--faint);
}
.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8rem;
  align-items: start;
  padding: var(--space-s) 0;
}
.consent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--night);
  display: grid;
  place-items: center;
  flex: none;
  cursor: pointer;
  transition: border-color var(--d-hover) var(--ease-entrance);
}
.consent input[type="checkbox"]::after {
  content: "";
  width: 11px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(0);
  transition: transform var(--d-hover) var(--ease-micro);
}
.consent input[type="checkbox"]:checked {
  background: var(--violet);
  border-color: var(--violet-soft);
}
.consent input[type="checkbox"]:checked::after {
  transform: rotate(-45deg) scale(1);
}
.consent input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}
.consent label {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.5;
}
.consent label a {
  color: var(--violet-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.turnstile-slot {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-inner);
  padding: 0.9rem 1rem;
  color: var(--faint);
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  background: rgb(var(--rgb-flaeche) / 0.4);
}
.form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s) var(--space-m);
  margin-top: var(--space-s);
}
.form-secure {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}
.form-secure svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--violet);
  stroke-width: 1.7;
}
.form-state {
  display: none;
  border-radius: var(--r-inner);
  padding: var(--space-m);
  margin-top: var(--space-m);
  font-size: 0.96rem;
  line-height: 1.5;
}
.form-state.is-on {
  display: block;
}
.form-state--ok {
  background: rgba(138, 41, 226, 0.1);
  border: 1px solid rgba(138, 41, 226, 0.4);
  color: var(--text);
}
.form-state--ok b {
  color: var(--violet-soft);
}
.form-state--err {
  background: rgba(231, 90, 72, 0.08);
  border: 1px solid rgba(231, 90, 72, 0.35);
  color: var(--text);
}
.is-submitting .aform__submit {
  opacity: 0.6;
  pointer-events: none;
}
@media (max-width: 880px) {
  .contact-main__grid {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }
}
@media (max-width: 560px) {
  .frow {
    grid-template-columns: 1fr;
  }
}

/* ============================================================ BONE-CTA (Tonwechsel auf jeder Seite) */
.bone-cta {
  background: var(--bone);
  color: var(--ink-on-bone);
  text-align: center;
}
.bone-cta h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 640;
  font-size: var(--fs-statement);
  line-height: 0.96;
  letter-spacing: -0.038em;
  max-width: 18ch;
  margin-inline: auto;
}
.bone-cta h2 em {
  font-style: normal;
  color: var(--violet-soft);
}
.bone-cta p {
  margin: var(--space-m) auto var(--space-l);
  max-width: 48ch;
  color: var(--muted);
  font-size: var(--fs-lead);
  line-height: 1.5;
}
.bone-cta__btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  justify-content: center;
}
.bone-cta .btn--ghost {
  --btn-fg: var(--ink-on-bone);
  border-color: var(--line-strong);
}
.bone-cta .btn--ghost .btn__icon {
  background: rgb(var(--rgb-kante) / 0.06);
}
@media (hover: hover) {
  .bone-cta .btn--ghost:hover {
    border-color: var(--violet-soft);
    background: rgba(138, 41, 226, 0.1);
  }
}
.bone-micro {
  margin-top: var(--space-m);
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: var(--fs-spec);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

/* Bone-Trust-Variante (helle Statistik-Reihe) */
.bone-cta--stats .stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: var(--space-xl);
  text-align: left;
}
.bone-cta--stats .stat {
  padding: var(--space-m) var(--space-m) 0 0;
  border-top: 1px solid var(--line);
}
.bone-cta--stats .stat:not(:last-child) {
  border-right: 1px solid var(--line);
}
.bone-cta--stats .stat b {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 640;
  font-size: var(--fs-count);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink-on-bone);
  display: block;
}
.bone-cta--stats .stat b .count {
  color: var(--violet-soft);
}
.bone-cta--stats .stat span {
  display: block;
  margin-top: var(--space-s);
  color: var(--muted);
  font-size: 0.95rem;
  max-width: 26ch;
}
@media (max-width: 760px) {
  .bone-cta--stats .stat-row {
    grid-template-columns: 1fr;
  }
  .bone-cta--stats .stat:not(:last-child) {
    border-right: 0;
  }
}

/* ============================================================ LEGAL */
.legal {
  background: transparent;
  padding-top: clamp(8rem, 16vh, 11rem);
}
.legal__wrap {
  max-width: 760px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.legal h1 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 640;
  font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4rem);
  letter-spacing: -0.035em;
  line-height: 1;
  margin: var(--space-s) 0 var(--space-l);
}
.legal h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h3);
  letter-spacing: -0.02em;
  margin: var(--space-l) 0 var(--space-s);
}
.legal h3 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h4);
  margin: var(--space-m) 0 var(--space-2xs);
}
.legal p {
  color: var(--muted);
  margin-bottom: var(--space-s);
  max-width: 70ch;
  line-height: 1.7;
}
.legal a:not(.btn):not(.legal-back) {
  color: var(--violet-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-inner);
  padding: var(--space-m);
  color: var(--text);
  line-height: 1.8;
  margin: var(--space-s) 0 var(--space-m);
}
.legal-box a {
  color: var(--violet-soft);
}
.legal-note {
  border-radius: var(--r-inner);
  padding: var(--space-m);
  margin-bottom: var(--space-l);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text);
}
.legal-note b {
  color: var(--violet-soft);
}
.legal-note--violet {
  background: rgba(138, 41, 226, 0.09);
  border: 1px solid rgba(138, 41, 226, 0.35);
}
.legal-note--amber {
  background: rgba(231, 160, 72, 0.07);
  border: 1px solid rgba(231, 160, 72, 0.3);
}
.legal-note--amber b {
  color: var(--amber);
}
.legal__todo {
  color: var(--faint);
  font-size: 0.86rem;
  font-style: italic;
}
.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  margin-top: var(--space-xl);
  color: var(--violet-soft);
  font-weight: 600;
}

/* ============================================================ SHARED REVEAL HELPERS */
.js:not(.reduce) [data-reveal] {
  opacity: 0;
  transform: translateY(40px);
}
.js:not(.reduce) [data-reveal-child] > * {
  opacity: 0;
  transform: translateY(28px);
}

/* ============================================================
   W6 · Startseite + Werk — Neubau 17.09.2026 (bau-brief §2–§5)
   Nur Blöcke für die W6-Sektionen. Keine globalen Rhythmus-Umbauten.
   ============================================================ */

:root {
  /* §2.2 themenfeste Tokens (GESETZ Kap. 11) */
  --dunkel-fest: #0a0716;
  --kalk-fest: #f6f2ff;
  --meta-fest: #cbc3e6;
  --snap: cubic-bezier(0.22, 1, 0.24, 1);
  --fs-h1-satz: clamp(2.1rem, 1.2rem + 3.2vw, 3.4rem);
  --fs-zahl: clamp(2.6rem, 1.8rem + 4.4vw, 5.2rem);
}

/* Rhythmus-Karte §2.5 — Abstand OBEN je Block, mobil halbiert */
.wb {
  position: relative;
  padding-top: var(--rh, 5rem);
}
@media (max-width: 760px) {
  .wb {
    padding-top: var(--rh-m, 3rem);
  }
}
.wb__in {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.wb__in--weit {
  max-width: 1440px;
}

/* Bühne = themenfest, in beiden Themen identisch (R10) */
.buehne-fest {
  --text: var(--kalk-fest);
  --muted: var(--meta-fest);
  --faint: var(--meta-fest);
  background: var(--dunkel-fest);
  color: var(--kalk-fest);
}

/* ---------- Sektionsköpfe ---------- */
.wkopf2 {
  max-width: 24ch;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
  text-wrap: balance;
}
.wkopf2 i {
  font-style: normal;
  color: var(--violet-bright);
}
.wlead {
  font-size: var(--fs-lead);
  line-height: 1.58;
  color: var(--muted);
  max-width: 56ch;
  margin: 0;
}

/* ============ BLOCK 2 · KOPF — Produkt-Bühne (Skizze A2) ============ */
.wkopf {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 44% 52%;
  gap: 4%;
  align-items: center;
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(7.5rem, 8vw, 9.5rem) var(--gutter) clamp(2.5rem, 4vw, 4rem);
  min-height: min(82svh, 760px);
}
.wkopf__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--meta-fest);
  margin: 0 0 1.3rem;
}
.wkopf__eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--violet-bright);
  flex: none;
}
.wkopf__h1 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: var(--fs-h1-satz);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
  max-width: 15ch;
  color: var(--kalk-fest);
  overflow-wrap: break-word;
}
.wkopf__h1 i {
  font-style: normal;
  color: var(--violet-bright);
}
.wkopf__beweis {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--meta-fest);
  margin: 0 0 2rem;
  max-width: 36ch;
}
.wkopf__beweis b {
  color: var(--kalk-fest);
  font-weight: 600;
}
.wkopf__unter {
  margin: 1.5rem 0 0;
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--meta-fest);
  opacity: 0.85;
}

/* Fenster — 16:10, groesser als die Skizze (Fable-Korrektur 2) */
.wfenster {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--dunkel-fest);
  border: 1px solid var(--line-strong);
  box-shadow:
    0 40px 120px rgb(138 41 226 / 0.22),
    0 2px 0 rgb(255 255 255 / 0.04) inset;
  animation: wfenster-auf 520ms var(--snap) both;
}
@keyframes wfenster-auf {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.wfenster__leiste {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem;
  background: rgb(255 255 255 / 0.035);
  border-bottom: 1px solid var(--line);
}
.wfenster__punkt {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2f2a55;
  flex: none;
}
.wfenster__adresse {
  margin-left: 0.5rem;
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  color: var(--meta-fest);
  letter-spacing: 0.03em;
}
.kopf__medium {
  display: block;
}
.wfenster video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  background: var(--dunkel-fest);
}
.wfenster .wfenster__bild--klein {
  display: none;
}
.wfenster__marke {
  margin-left: auto;
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--meta-fest);
  white-space: nowrap;
}
@media (max-width: 560px) {
  .wfenster__marke {
    display: none;
  }
}
@media (max-width: 900px) {
  .wkopf {
    grid-template-columns: 1fr;
    gap: 2.2rem;
    min-height: 0;
    padding-top: clamp(9.5rem, 27vw, 11.5rem);
  }
  .wkopf__h1 {
    font-size: clamp(1.95rem, 1.2rem + 3vw, 2.6rem);
  }
}

/* ============ BLOCK 3 · FAKTEN-LEISTE (0 px unter dem Kopf) ============ */
.wfakten {
  position: relative;
  z-index: 2;
  margin-top: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgb(var(--rgb-flaeche) / 0.6);
}
.wfakten__in {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.wfakt {
  padding: clamp(1.5rem, 2.4vw, 2.4rem) var(--gutter);
  border-left: 1px solid var(--line);
}
.wfakt:first-child {
  border-left: 0;
}
.wfakt b {
  display: block;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: var(--fs-zahl);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: normal;
  white-space: nowrap; /* AUGEN 11.09.: Zaehler zittert = Umbruch */
}
.wfakt b em {
  font-style: normal;
  color: var(--violet-bright);
}
.wfakt span {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  line-height: 1.5;
}
@media (max-width: 900px) {
  .wfakten__in {
    grid-template-columns: 1fr 1fr;
  }
  .wfakt {
    border-top: 1px solid var(--line);
  }
  .wfakt:nth-child(-n + 2) {
    border-top: 0;
  }
  .wfakt:nth-child(odd) {
    border-left: 0;
  }
}

/* ============ BLOCK 4 · MANIFEST + BRANCHEN-WEICHE ============ */
.wmanifest {
  max-width: 62ch;
  margin: 0 auto clamp(2.5rem, 5vw, 4.5rem);
  text-align: center;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: clamp(1.45rem, 1.05rem + 1.7vw, 2.35rem);
  line-height: 1.26;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.wmanifest i {
  font-style: normal;
  color: var(--violet-bright);
}
.wweiche__reiter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.6rem 0 1.8rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1rem;
}
.wreiter {
  appearance: none;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 999px;
  padding: 0.6rem 1.15rem;
  cursor: pointer;
  transition:
    color 240ms var(--snap),
    border-color 240ms var(--snap),
    background-color 240ms var(--snap),
    transform 160ms var(--snap);
}
.wreiter[aria-selected="true"] {
  color: var(--auf-akzent);
  background: var(--violet);
  border-color: var(--violet);
}
.wreiter:active {
  transform: scale(0.97);
}
@media (hover: hover) and (pointer: fine) {
  .wreiter:hover[aria-selected="false"] {
    color: var(--text);
    border-color: var(--violet-soft);
  }
}
.wweiche__buehne {
  display: grid;
  grid-template-columns: 60% 40%;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: stretch;
  min-height: 420px;
}
.wweiche__blatt {
  display: none;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.wweiche__blatt[data-aktiv="ja"] {
  display: grid;
  animation: wblende 320ms var(--snap) both;
}
@keyframes wblende {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.wweiche__bild {
  position: relative;
  border-radius: var(--r-frame);
  overflow: hidden;
  border: 1px solid var(--line);
  min-height: 420px;
}
.wweiche__bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wweiche__schild {
  position: absolute;
  left: 16px;
  bottom: 14px;
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kalk-fest);
  background: rgb(10 7 22 / 0.78);
  padding: 0.32rem 0.6rem;
  border-radius: 4px;
}
.wweiche__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.9rem;
  padding: clamp(1.25rem, 2vw, 2rem) 0;
}
.wweiche__text h3 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.12;
  margin: 0;
}
.wweiche__text p {
  margin: 0;
  color: var(--muted);
}
.wweiche__liste {
  list-style: none;
  margin: 0.3rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.wweiche__liste li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.98rem;
  line-height: 1.45;
}
.wpunkt {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mint);
  margin-top: 0.55rem;
  flex: none;
}
.wpunkt--amber {
  background: var(--amber);
}
@media (max-width: 860px) {
  .wweiche__buehne,
  .wweiche__blatt[data-aktiv="ja"] {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .wweiche__bild {
    min-height: 240px;
  }
}

/* ============ BLOCK 5 · DIE ZAHLSPUR (Sticky-Media) ============ */
.wspur {
  position: relative;
  z-index: 2;
}
.wspur__raster {
  display: grid;
  grid-template-columns: 38% 58%;
  gap: 4%;
  align-items: start;
  margin-top: clamp(2rem, 4vw, 3.5rem);
}
.wspur__stufen {
  display: grid;
}
.wstufe {
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.7rem;
  padding-block: 1rem;
  opacity: 0.55;
  transition:
    opacity 320ms var(--snap),
    transform 320ms var(--snap);
}
.wstufe[data-aktiv="ja"] {
  opacity: 1;
}
.wstufe__nr {
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  color: var(--violet-soft);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.wstufe__nr::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, var(--violet) 0%, transparent 100%);
  opacity: 0.35;
  transition: opacity 320ms var(--snap);
}
.wstufe[data-aktiv="ja"] .wstufe__nr::after {
  opacity: 1;
}
.wstufe h3 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.3rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
}
.wstufe p {
  margin: 0;
  color: var(--muted);
  max-width: 40ch;
}
.wspur__fenster {
  position: sticky;
  top: 12vh;
  border-radius: var(--r-frame);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--dunkel-fest);
  box-shadow: 0 40px 120px rgb(138 41 226 / 0.2);
  /* Layout-Bruch 1: ragt 120 px in den naechsten Block */
  margin-bottom: -120px;
}
.wspur__bild {
  position: relative;
  aspect-ratio: 1208 / 1010;
  background: var(--dunkel-fest);
}
.wspur__bild img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity 320ms var(--snap);
}
.wspur__bild img[data-aktiv="ja"] {
  opacity: 1;
}
.wspur__karte {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  background:
    radial-gradient(
      600px 420px at 30% 30%,
      rgb(138 41 226 / 0.22),
      transparent 70%
    ),
    var(--dunkel-fest);
  opacity: 0;
  transition: opacity 320ms var(--snap);
}
.wspur__karte[data-aktiv="ja"] {
  opacity: 1;
}
.wspur__karte p {
  margin: 0;
  color: var(--meta-fest);
  max-width: 34ch;
}
.wspur__karte strong {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem);
  line-height: 1.1;
  color: var(--kalk-fest);
  letter-spacing: -0.02em;
}
.wspur__hinweis {
  width: 100%;
  max-width: none;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  border-top: 1px solid var(--line);
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  background: rgb(255 255 255 / 0.03);
}
.wspur__fuss {
  margin-top: 170px;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}
@media (max-width: 900px) {
  .wspur__raster {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .wspur__fenster {
    position: sticky;
    top: 8vh;
    margin-bottom: 1.5rem;
    order: -1;
  }
  .wstufe {
    min-height: 0;
    opacity: 1;
    padding-block: 1.5rem;
    border-top: 1px solid var(--line);
  }
  .wspur__fuss {
    margin-top: 2rem;
  }
}

/* ============ BLOCK 6 · WERK-INDEX 01-03 ============ */
.windex {
  overflow: clip;
}
.windex__liste {
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}
.wzeile {
  display: grid;
  grid-template-columns: 5.5rem 1fr 44%;
  gap: clamp(1rem, 2vw, 2rem);
  align-items: center;
  padding: clamp(1.25rem, 2.2vw, 2rem) 0;
  border-bottom: 1px solid var(--line);
  /* Layout-Bruch 2: bricht rechts ueber die Viewport-Kante */
  margin-right: calc(-1 * var(--gutter) - 3vw);
  text-decoration: none;
  color: inherit;
}
.wzeile__nr {
  display: block;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: var(--fs-count);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-strong);
  transition: color 320ms var(--snap);
}
.wzeile__kopf {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.wzeile__name {
  display: block;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.wzeile__meta {
  display: block;
  font-size: 0.92rem;
  color: var(--muted);
}
.wzeile__ergebnis {
  display: block;
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--violet-soft);
}
.wzeile__schirm {
  display: block;
  position: relative;
  background-size: cover;
  background-position: top center;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--dunkel-fest);
  aspect-ratio: 16 / 10;
  transform: scale(0.94);
  opacity: 0.62;
  transition:
    transform 420ms var(--snap),
    opacity 420ms var(--snap),
    border-color 420ms var(--snap);
}
.wzeile__schirm video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wzeile[data-aktiv="ja"] .wzeile__schirm,
.wzeile:focus-visible .wzeile__schirm {
  transform: scale(1);
  opacity: 1;
  border-color: var(--violet-deep);
}
.wzeile[data-aktiv="ja"] .wzeile__nr {
  color: var(--violet-bright);
  -webkit-text-stroke: 0;
}
@media (hover: hover) and (pointer: fine) {
  .wzeile:hover .wzeile__schirm {
    transform: scale(1);
    opacity: 1;
    border-color: var(--violet-deep);
  }
  .wzeile:hover .wzeile__nr {
    color: var(--violet-bright);
    -webkit-text-stroke: 0;
  }
}
@media (max-width: 860px) {
  .wzeile {
    grid-template-columns: 3.5rem 1fr;
    margin-right: 0;
  }
  .wzeile__schirm {
    grid-column: 1 / -1;
    transform: none;
    opacity: 1;
  }
}

/* ============ BLOCK 7 · BEWERTEN-AUFRUF (SEH-Aufbau) ============ */
.wbewerten {
  position: relative;
  overflow: clip;
  padding-block: clamp(4rem, 8vw, 7rem);
}
.wbewerten__grund {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.wbewerten__grund img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}
.wbewerten__grund::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(10 7 22 / 0.92) 0%,
    rgb(10 7 22 / 0.7) 40%,
    rgb(10 7 22 / 0.55) 100%
  );
}
.wbewerten__karte {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  background: var(--dunkel-fest);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-frame);
  padding: clamp(2rem, 4vw, 3rem);
  box-shadow: 0 30px 90px rgb(4 6 13 / 0.6);
}
.wbewerten__karte h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 1.2rem;
  color: var(--kalk-fest);
}
.wsterne {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin: 0 0 1.5rem;
}
.wsterne svg {
  width: 38px;
  height: 38px;
  fill: var(--violet-bright);
}

/* ============ BLOCK 8 · STATEMENT + RECHNER-TEASER ============ */
.weigentum {
  position: relative;
  overflow: clip;
}
.weigentum__raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
.weigentum__wort {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin: 0 0 0 -96px;
  color: var(--kalk-fest);
  overflow-wrap: break-word;
}
.weigentum__rechnung {
  display: grid;
  gap: 0;
}
.wrz {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}
.wrz:last-of-type {
  border-bottom: 1px solid var(--line);
}
.wrz span {
  color: var(--meta-fest);
  font-size: 0.98rem;
}
.wrz b {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.wrz--wir b {
  color: var(--mint);
}
.weigentum__fuss {
  margin-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}
.wquelle {
  font-size: 0.82rem;
  color: var(--faint);
  margin: 0.9rem 0 0;
  line-height: 1.5;
}
@media (max-width: 860px) {
  .weigentum__raster {
    grid-template-columns: 1fr;
  }
  .weigentum__wort {
    margin-left: -0.06em;
  }
}

/* ============ BLOCK 9 · BFSG ============ */
.wbfsg__raster {
  display: grid;
  grid-template-columns: 55% 45%;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.wbfsg__fenster {
  border-radius: var(--r-frame);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--dunkel-fest);
  box-shadow: 0 30px 90px rgb(138 41 226 / 0.16);
}
.wbfsg__fenster img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1208 / 1010;
  object-fit: cover;
  object-position: top center;
}
.wliste {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.wliste li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  line-height: 1.5;
}
@media (max-width: 860px) {
  .wbfsg__raster {
    grid-template-columns: 1fr;
  }
}

/* ============ BLOCK 11 · BEWERBER ============ */
.wbewerber__raster {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}
.wbewerber__bild {
  border-radius: var(--r-frame);
  overflow: hidden;
  border: 1px solid var(--line);
}
.wbewerber__bild img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.wbewerber__zahl {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: var(--fs-zahl);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 1.2rem 0 0.4rem;
  white-space: nowrap;
}

/* ============ BLOCK 13 · ANFRAGE + KARTE ============ */
.wanfrage__raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.wkarte {
  border-radius: var(--r-frame);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
}
.wkarte iframe {
  display: block;
  width: 100%;
  height: 340px;
  border: 0;
  filter: saturate(0.85);
}
.wkarte__fuss {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.15rem;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
  color: var(--muted);
}
.wpause {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  appearance: none;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.85rem;
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  transition:
    color 240ms var(--snap),
    border-color 240ms var(--snap),
    transform 160ms var(--snap);
}
.wpause:active {
  transform: scale(0.97);
}
@media (hover: hover) and (pointer: fine) {
  .wpause:hover {
    color: var(--text);
    border-color: var(--violet-soft);
  }
}
@media (max-width: 860px) {
  .wanfrage__raster,
  .wbewerber__raster {
    grid-template-columns: 1fr;
  }
}

/* Bewegung pausieren (Fusszeilen-Schalter, BFSG-Argument) */
html[data-bewegung="aus"] *,
html[data-bewegung="aus"] *::before,
html[data-bewegung="aus"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  .wfenster,
  .wweiche__blatt[data-aktiv="ja"] {
    animation: none;
  }
  .wstufe {
    opacity: 1;
  }
}

/* ============ WERK.HTML — Kopf + Vorzeige-Seiten ============ */
.wwerk__kopf {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 4rem) var(--gutter) clamp(2rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: 44% 52%;
  gap: 4%;
  align-items: center;
}
.wwerk__zahl {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin: 0;
  color: var(--kalk-fest);
  white-space: nowrap;
}
.wgross {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.wgross__stueck {
  display: grid;
  grid-template-columns: 58% 42%;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}
.wgross__stueck:nth-child(even) {
  grid-template-columns: 42% 58%;
}
.wgross__stueck:nth-child(even) .wgross__schirm {
  order: 2;
}
.wgross__schirm {
  position: relative;
  border-radius: var(--r-frame);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--dunkel-fest);
  aspect-ratio: 16 / 10;
  box-shadow: 0 30px 90px rgb(138 41 226 / 0.18);
}
.wgross__schirm video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wregister {
  list-style: none;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.wregister li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.98rem;
}
@media (max-width: 900px) {
  .wwerk__kopf,
  .wgross__stueck,
  .wgross__stueck:nth-child(even) {
    grid-template-columns: 1fr;
  }
  .wgross__stueck:nth-child(even) .wgross__schirm {
    order: 0;
  }
}

/* Werk-Kopf: das Video zeigt eine Website mit eigener Schlagzeile — der Kopf-Text
   braucht deshalb einen kraeftigeren gerichteten Scrim (GESETZ Kap. 11). */
.werk-kopf .hero__video {
  filter: brightness(0.5) saturate(0.9) blur(5px);
  transform: scale(1.03);
}
.werk-kopf .hero__scrim {
  background: radial-gradient(
    130% 95% at 50% 58%,
    rgb(10 7 22 / 0.88) 0%,
    rgb(10 7 22 / 0.74) 42%,
    rgb(10 7 22 / 0.52) 100%
  );
}

.buehne-fest .wquelle {
  color: var(--meta-fest);
}

/* Mobil-Aufnahme (390px Quelle) erst unter 640px — darueber wuerde sie
   hochskaliert und unscharf (qa-layout-check UNSCHARF). */
@media (max-width: 899px) {
  .wfenster .wfenster__video--gross {
    display: none;
  }
  .wfenster .wfenster__bild--klein {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: top center;
    background: var(--dunkel-fest);
  }
}

/* ============================================================
   W7 · Produkt & Preis — Neubau 17.09.2026 (bau-brief §4.2–4.7)
   dashboard.html · kunden-portal.html · preise.html · zahlung.html
   kontakt.html · webdesign.html · 404.html
   Nur ANGEHAENGT. Keine W6-Regel wird geaendert.
   ============================================================ */

/* ---------- Kopf (R4: Video als src, gerichteter Scrim) ---------- */
.w7kopf {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  min-height: min(72svh, 620px);
  overflow: hidden;
  isolation: isolate;
}
.w7kopf__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.w7kopf__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* gerichtet, nie eine harte Kante (R10). Traegt die Schrift in BEIDEN Themen. */
  background:
    linear-gradient(
      to top,
      rgb(10 7 22 / 0.94) 0%,
      rgb(10 7 22 / 0.78) 30%,
      rgb(10 7 22 / 0.34) 58%,
      rgb(10 7 22 / 0.1) 100%
    ),
    linear-gradient(
      to right,
      rgb(10 7 22 / 0.72) 0%,
      rgb(10 7 22 / 0.32) 46%,
      rgb(10 7 22 / 0) 78%
    );
}
.w7kopf__in {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(9rem, 12vw, 12rem) var(--gutter) clamp(2.5rem, 4vw, 3.5rem);
}
.w7kopf__eyebrow {
  margin: 0 0 0.9rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--meta-fest);
}
.w7kopf__h1 {
  margin: 0;
  max-width: 18ch;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: var(--fs-h1-satz);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--kalk-fest);
  text-wrap: balance;
}
.w7kopf__h1 i {
  font-style: normal;
  color: var(--violet-soft);
}
.w7kopf__beweis {
  margin: 1rem 0 1.7rem;
  max-width: 52ch;
  font-size: var(--fs-lead);
  line-height: 1.56;
  color: var(--meta-fest);
}
@media (max-width: 900px) {
  .w7kopf {
    min-height: min(78svh, 600px);
  }
  .w7kopf__in {
    padding-top: clamp(10rem, 24vw, 12rem);
  }
  /* Handy: das Marken-Logo im Video lief genau durch die H1 (AUGEN 11.09.) */
  .w7kopf__scrim {
    background: linear-gradient(
      to top,
      rgb(10 7 22 / 0.96) 0%,
      rgb(10 7 22 / 0.88) 46%,
      rgb(10 7 22 / 0.6) 78%,
      rgb(10 7 22 / 0.3) 100%
    );
  }
}

/* ---------- Fakten-Leiste mit drei Werten ---------- */
.wfakten__in--drei {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 760px) {
  .wfakten__in--drei {
    grid-template-columns: 1fr 1fr;
  }
  .wfakten__in--drei .wfakt:last-child {
    grid-column: 1 / -1;
  }
}

/* ---------- Eyebrow (max. 2 je Seite) ---------- */
.w7eyebrow {
  margin: 0 0 0.7rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---------- Fenster: echter Screenshot hinter 1-px-Kante ---------- */
.w7fenster {
  margin: 0;
  border-radius: var(--r-frame);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--dunkel-fest);
  box-shadow: 0 34px 100px rgb(138 41 226 / 0.2);
}
.w7fenster__leiste {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--line);
  background: rgb(255 255 255 / 0.03);
}
.w7fenster__punkt {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
}
.w7fenster__adresse {
  margin-left: 0.6rem;
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--meta-fest);
}
.w7fenster img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1208 / 1010;
  object-fit: cover;
  object-position: top center;
}
.w7fenster__fuss {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0.7rem 0.95rem;
  border-top: 1px solid var(--line);
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--meta-fest);
}

/* ---------- Kapitel-Fenster 01–06 (Attio-Muster) ---------- */
.w7kap__liste {
  margin-top: clamp(2rem, 4vw, 3.5rem);
}
.w7kapitel {
  padding-top: var(--kh, 4rem);
}
.w7kapitel__in {
  display: grid;
  grid-template-columns: 42% 54%;
  gap: 4%;
  align-items: center;
}
.w7kapitel:nth-child(even) .w7kapitel__text {
  order: 2;
}
.w7kapitel:nth-child(even) .w7fenster {
  order: 1;
}
.w7kapitel__nr {
  display: block;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--violet-bright);
  opacity: 0.72;
}
.w7kapitel__titel {
  margin: 0.5rem 0 0.8rem;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.95rem);
  line-height: 1.12;
  letter-spacing: -0.012em;
}
.w7kapitel__satz {
  margin: 0;
  font-size: var(--fs-lead);
  line-height: 1.56;
  color: var(--muted);
  max-width: 46ch;
}
@media (max-width: 900px) {
  .w7kapitel {
    padding-top: var(--kh-m, 2.5rem);
  }
  .w7kapitel__in {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  .w7kapitel:nth-child(even) .w7kapitel__text,
  .w7kapitel:nth-child(even) .w7fenster {
    order: 0;
  }
}

/* ---------- Simulator ---------- */
.w7sim__raster {
  display: none;
  margin-top: clamp(1.8rem, 3.5vw, 3rem);
  grid-template-columns: 30% 66%;
  gap: 4%;
  align-items: start;
}
html.js .w7sim__raster {
  display: grid;
}
.w7sim__schritte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}
.w7sim__knopf {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  width: 100%;
  min-width: 0;
  text-align: left;
  appearance: none;
  border: 1px solid var(--line);
  border-left: 2px solid transparent;
  background: transparent;
  color: var(--meta-fest);
  font: inherit;
  font-size: 0.98rem;
  border-radius: 10px;
  padding: 0.75rem 0.95rem;
  cursor: pointer;
  transition:
    color 240ms var(--snap),
    border-color 240ms var(--snap),
    background-color 240ms var(--snap),
    transform 160ms var(--snap);
}
.w7sim__knopf b {
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--violet-soft);
}
.w7sim__knopf:active {
  transform: scale(0.98);
}
.w7sim__knopf[aria-current="true"] {
  color: var(--kalk-fest);
  border-color: var(--line-strong);
  border-left-color: var(--violet-bright);
  background: rgb(138 41 226 / 0.12);
}
@media (hover: hover) and (pointer: fine) {
  .w7sim__knopf:hover {
    color: var(--kalk-fest);
    border-color: var(--violet-soft);
  }
}
.w7sim__buehne {
  min-width: 0;
}
.w7sim__bilder {
  position: relative;
  aspect-ratio: 1208 / 1010;
}
.w7sim__bilder img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  opacity: 0;
  transform: scale(1.012);
  transition:
    opacity 320ms var(--snap),
    transform 320ms var(--snap);
}
.w7sim__bilder img[data-aktiv="ja"] {
  opacity: 1;
  transform: none;
}
.w7sim__links {
  min-width: 0;
}
.w7sim__untertitel {
  margin: 1.2rem 0 0;
  min-height: 7em;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--meta-fest);
  max-width: 62ch;
}
.w7sim__untertitel b {
  color: var(--kalk-fest);
}
.w7fenster__fuss--sim {
  border-top: 0;
  padding-left: 0;
  padding-top: 0.35rem;
}
.w7sim__alle {
  display: grid;
  gap: 2rem;
  margin-top: 2rem;
}
.w7sim__alle img {
  width: 100%;
  height: auto;
  border-radius: var(--r-frame);
  border: 1px solid var(--line-strong);
}
.w7sim__alle figcaption {
  margin-top: 0.6rem;
  color: var(--meta-fest);
  font-size: 0.92rem;
}
@media (max-width: 900px) {
  .w7sim__raster {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  .w7sim__schritte {
    grid-template-columns: 1fr 1fr;
  }
  .w7sim__untertitel {
    min-height: 0;
  }
}

/* ---------- Grenzen-Liste (kein Card-Grid) ---------- */
.w7grenzen__liste {
  list-style: none;
  margin: clamp(1.8rem, 3vw, 2.6rem) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.w7grenzen__liste li {
  display: grid;
  grid-template-columns: 22% 1fr auto;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line);
}
.w7grenzen__sache {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: 1.08rem;
  text-decoration: line-through;
  text-decoration-color: var(--violet-bright);
  text-decoration-thickness: 1.5px;
  min-width: 0;
}
.w7grenzen__grund {
  color: var(--muted);
  line-height: 1.55;
  min-width: 0;
}
.w7grenzen__ziel {
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--violet-bright);
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
@media (max-width: 760px) {
  .w7grenzen__liste li {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
}

/* ---------- Trennung (Display-Moment) ---------- */
.w7trennung__raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 2rem);
  align-items: start;
}
.w7trennung__wort {
  margin: 0 0 0 clamp(-96px, -5vw, -24px);
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--kalk-fest);
}
.w7trennung__text {
  max-width: 62ch;
  margin-left: auto;
}
.w7trennung__text p {
  color: var(--meta-fest);
  line-height: 1.62;
}
@media (max-width: 900px) {
  .w7trennung__wort {
    margin-left: -8px;
  }
  .w7trennung__text {
    margin-left: 0;
  }
}

/* ---------- Zwei Produkte (kunden-portal) ---------- */
.w7zwei__raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 2.5vw, 2.2rem);
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
}
.w7zwei__spalte {
  min-width: 0;
  border: 1px solid var(--line);
  border-top: 2px solid var(--line-strong);
  border-radius: var(--r-frame);
  background: var(--surface);
  padding: clamp(1.25rem, 2.5vw, 2rem);
}
.w7zwei__spalte--portal {
  border-top-color: var(--violet-bright);
}
.w7zwei__marke {
  margin: 0;
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}
.w7zwei__titel {
  margin: 0.5rem 0 0.9rem;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 1.15rem + 1vw, 2rem);
  letter-spacing: -0.015em;
}
.w7zwei__preis {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0 0 0.4rem;
}
.w7zwei__preis b {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.8rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.w7zwei__preis span {
  color: var(--muted);
  font-size: 0.95rem;
}
.w7zwei__fuss {
  margin: 1.3rem 0 0;
}
.w7zwei__satz {
  margin: clamp(1.5rem, 3vw, 2.4rem) 0 0;
  max-width: 62ch;
  font-size: var(--fs-lead);
  line-height: 1.56;
  color: var(--muted);
}
.wpunkt--violett {
  background: var(--violet-bright);
}
@media (max-width: 860px) {
  .w7zwei__raster {
    grid-template-columns: 1fr;
  }
}

/* ---------- Portal-Vorschauen ---------- */
.w7vorschau {
  list-style: none;
  margin: clamp(1.6rem, 3vw, 2.4rem) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.w7vorschau li {
  border-bottom: 1px solid var(--line);
}
.w7vorschau a {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 1.2rem;
  align-items: baseline;
  padding: 1.05rem 0;
  text-decoration: none;
  color: inherit;
  transition: padding-left 240ms var(--snap);
}
.w7vorschau b {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
}
.w7vorschau span {
  color: var(--meta-fest);
}
@media (hover: hover) and (pointer: fine) {
  .w7vorschau a:hover {
    padding-left: 0.65rem;
  }
  .w7vorschau a:hover b {
    color: var(--violet-soft);
  }
}
.w7oeffnen__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.4rem;
  margin: clamp(1.6rem, 3vw, 2.4rem) 0 0;
}
@media (max-width: 620px) {
  .w7vorschau a {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
}

/* ---------- Anfrage-Kurzform ---------- */
.w7kurz {
  margin-top: clamp(1.5rem, 3vw, 2.4rem);
  max-width: 760px;
}

/* ---------- Rechner „Abo vs. Eigentum“ (preise.html) ---------- */
.w7rechner {
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
  border: 1px solid var(--line);
  border-radius: var(--r-frame);
  background: var(--surface);
  padding: clamp(1.4rem, 3vw, 2.4rem);
}
.w7rechner__kopf {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: flex-end;
  justify-content: space-between;
}
.w7rechner__laufzeit {
  display: flex;
  gap: 0.5rem;
}
.w7rechner__jahr {
  appearance: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.95rem;
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  cursor: pointer;
  transition:
    color 240ms var(--snap),
    border-color 240ms var(--snap),
    background-color 240ms var(--snap),
    transform 160ms var(--snap);
}
.w7rechner__jahr:active {
  transform: scale(0.97);
}
.w7rechner__jahr[aria-pressed="true"] {
  color: var(--text);
  border-color: var(--violet-bright);
  background: rgb(138 41 226 / 0.14);
}
.w7rechner__balken {
  display: grid;
  gap: 1.5rem;
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
}
.w7balken__kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem 1.2rem;
  margin-bottom: 0.5rem;
}
.w7balken__name {
  font-weight: 600;
}
.w7balken__wert {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.4rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.w7balken__spur {
  position: relative;
  height: 16px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.06);
  border: 1px solid var(--line);
  overflow: hidden;
}
.w7balken__fuell {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--violet-deep),
    var(--violet-bright)
  );
  transition: width 420ms var(--snap);
}
.w7balken--abo .w7balken__fuell {
  background: linear-gradient(90deg, #4a4560, #8d86ad);
}
.w7balken__unter {
  margin: 0.45rem 0 0;
  font-size: 0.92rem;
  color: var(--faint);
}
.w7rechner__fazit {
  margin: clamp(1.4rem, 3vw, 2rem) 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-lead);
  line-height: 1.55;
}
.w7rechner__fazit b {
  color: var(--violet-bright);
}
.w7rechner__tab {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.4rem;
}
.w7rechner__tab th,
.w7rechner__tab td {
  text-align: left;
  padding: 0.7rem 0.6rem;
  border-bottom: 1px solid var(--line);
}

/* ---------- Vergleichstabelle (preise.html) ---------- */
.w7tabelle {
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
  overflow-x: auto;
}
.w7tabelle table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
}
.w7tabelle caption {
  text-align: left;
  color: var(--faint);
  font-size: 0.9rem;
  padding-bottom: 0.8rem;
}
.w7tabelle th,
.w7tabelle td {
  text-align: left;
  padding: 0.85rem 0.8rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.w7tabelle thead th {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  border-bottom-color: var(--line-strong);
}
.w7tabelle tbody th {
  font-weight: 500;
  color: var(--muted);
}
.w7tabelle td {
  font-variant-numeric: tabular-nums;
}
.w7ja {
  color: var(--mint);
  font-weight: 600;
}
.w7nein {
  color: var(--faint);
}

/* ---------- Risikoumkehr-Zeile ---------- */
.w7risiko {
  margin: 0;
  padding: clamp(1.4rem, 3vw, 2.2rem) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: clamp(1.4rem, 1.05rem + 1.4vw, 2.2rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.w7risiko i {
  font-style: normal;
  color: var(--violet-bright);
}

/* ---------- Portal-Teaser auf preise.html ---------- */
.w7teaser__raster {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem 2.5rem;
  align-items: center;
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border: 1px solid var(--line);
  border-left: 2px solid var(--violet-bright);
  border-radius: var(--r-frame);
  background: var(--surface);
}
@media (max-width: 760px) {
  .w7teaser__raster {
    grid-template-columns: 1fr;
  }
}

/* ---------- ruhender Knopf (zahlung.html, kein toter Kauf-Link) ---------- */
.knopf--ruhend,
.btn--ruhend {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px dashed var(--line-strong);
  border-radius: 999px;
  padding: 0.8rem 1.4rem;
  color: var(--muted);
  background: transparent;
  font-weight: 600;
  cursor: default;
}

/* ---------- Kontakt: Ansprechpartner ---------- */
.w7person {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
  padding: clamp(1rem, 2vw, 1.5rem) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.w7person__name {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.8rem);
  letter-spacing: -0.015em;
  margin: 0;
}
.w7person__rolle {
  margin: 0.15rem 0 0;
  color: var(--muted);
}
.w7person__wege {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  margin-left: auto;
}

/* ---------- 404 ---------- */
.w7vier {
  display: grid;
  place-items: center;
  min-height: 62svh;
  text-align: center;
}
.w7vier__zahl {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin: 0;
}
.w7vier__wege {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.2rem;
  justify-content: center;
  margin-top: 1.8rem;
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .w7sim__bilder img,
  .w7balken__fuell {
    transition-duration: 0.001ms;
  }
}

/* ---------- W7 · Rhythmus-Bremsen fuer Bestandssektionen (LEER-Regel Kap. 11) ---------- */
.section.w7-eng {
  padding-top: clamp(2.5rem, 5vw, 4rem);
}
.section.w7-eng-unten {
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* ---------- W7 · Bau-Buehne: echter Screenshot ab Frame 0 (bau-brief §4.6) ----------
   Vorher lasen sich zwei Bildschirme lang graue Balken wie „nicht geladen".
   Der echte Screenshot liegt jetzt darunter, die Drahtgitter-Stufen werden
   transparent und lesen sich als Entwurf UEBER der echten Seite. */
.bld__view.w7bld {
  --mock-grund: transparent;
}
.bld__view .w7bldgrund {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: grayscale(0.12) contrast(1.02) brightness(0.72);
  z-index: 0;
}
.bld__view .pstage,
.bld__view .bld__layer {
  z-index: 1;
}

/* ---------- W7 · Rechtsseiten: lange Einzelwoerter brechen statt zu clippen ----------
   „Datenschutzerklaerung" / „Allgemeine Geschaeftsbedingungen" liefen ueber die
   760-px-Spalte hinaus (qa-layout-check TEXT-CLIP, 5 Befunde auf drei Seiten). */
.legal h1 {
  font-size: clamp(2rem, 1.1rem + 2.6vw, 3.1rem);
  overflow-wrap: break-word;
  hyphens: auto;
}


/* ============================================================
   W8 · Hygiene 17.09.2026 — nur Ergaenzungen, keine Umbauten
   ============================================================ */

/* Kap. 11 (Baumgaertner 14.09.2026): jedes Raster-/Flex-Kind mit Formularfeldern
   oder langem Text bekommt min-width: 0 — min-width: auto sprengt bei 390px
   die Spalte. */
.frow > .field,
.field,
.form-wrap .container > *,
.wanfrage__raster > *,
.w7raster > *,
.wspur__raster > *,
.kann__block > * {
  min-width: 0;
}

/* Die Rechnung im Eigentum-Block: Zeile mit Zusatzzeile (W8, A5) */
.wrz span em {
  display: block;
  margin-top: 0.18rem;
  font-style: normal;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--meta-fest);
  opacity: 0.78;
}

/* Werk-Aufnahmen unter 900px: das Standbild traegt, nicht ein zweites Video
   (GESETZ Kap. 5 — Bildband statt Video; zugleich Hebel 5 aus bau-brief 3.3b). */
@media (max-width: 899px) {
  .wzeile__schirm video,
  .wgross__schirm video {
    display: none;
  }
  .wzeile__schirm,
  .wgross__schirm {
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
  }
}

/* W8 (GESETZ Kap. 2, bau-brief §11): Auf kunden-portal.html bleibt das
   Pakete-Raster das EINE Card-Grid. Die Funktionsliste wird ein Register:
   EIN Traeger, drei Zeilen mit Hairline, Titel links, Liste rechts.
   Inhalt unveraendert. */
.dash-matrix {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--r-frame);
  background: rgb(var(--rgb-erhoben) / 0.85);
  padding-inline: clamp(1.1rem, 2.4vw, 2.2rem);
}
.dash-matrix__col {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: clamp(0.5rem, 3vw, 2.6rem);
  align-items: start;
  padding: clamp(1.3rem, 2.4vw, 2rem) 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
}
.dash-matrix__col:last-child {
  border-bottom: 0;
}
.dash-matrix__col--hot {
  background: none;
  border-color: var(--line);
}
.dash-matrix__col--hot h3 {
  color: var(--violet-soft);
}
.dash-matrix__col > ul {
  min-width: 0;
}
@media (min-width: 1000px) {
  .dash-matrix__col > ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem 2.2rem;
  }
}
@media (max-width: 760px) {
  .dash-matrix__col {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
}

.dash-matrix__col h3 {
  margin: 0;
  padding-bottom: 0;
  border-bottom: 0;
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.5rem);
  letter-spacing: -0.015em;
}

/* ============================================================
   W8 · Akzent auf themenfesten Buehnen (GESETZ Kap. 11)
   Eine Buehne ist in BEIDEN Themen dunkel — dann muss auch der Akzent
   der dunkle-Thema-Ton bleiben. Sonst stand im Hell-Thema das dunkle
   Violett (#6d28d9) auf dem dunklen Grund: gemessen 2,2-2,8:1.
   ============================================================ */
.buehne-fest,
.wspur__fenster,
.wspur__karte,
.w7fenster,
.wfenster,
.wzeile__schirm,
.wgross__schirm {
  --violet: #8a29e2;
  --violet-bright: #a855f7;
  --violet-deep: #532ea3;
  --violet-soft: #c084fc;
  --text: var(--kalk-fest);
  --muted: var(--meta-fest);
  --faint: var(--meta-fest);
}

/* Der Rahmenfuss sitzt auf --dunkel-fest, nicht auf dem Seitengrund. */
.wspur__hinweis,
.w7fenster__fuss {
  color: var(--meta-fest);
}

/* Video-Koepfe ohne .buehne-fest (phero/voice-hero/hero/werk-kopf): sie liegen
   genauso auf einem dunklen Scrim und brauchen darum denselben festen Akzent —
   im Hell-Thema stand sonst #6d28d9 auf dem dunklen Kopf (gemessen 1,8-2,4:1). */
.phero,
.voice-hero,
.hero,
.werk-kopf {
  /* color MUSS mit: body traegt color: var(--text) und vererbt den bereits
     aufgeloesten Wert nach unten — eine blosse Token-Umdefinition erreicht
     die Ueberschrift nicht (GESETZ Kap. 11, ki-assistent H1 gemessen 1,08:1). */
  color: var(--kalk-fest);
  --violet: #8a29e2;
  --violet-bright: #a855f7;
  --violet-deep: #532ea3;
  --violet-soft: #c084fc;
  --text: var(--kalk-fest);
  --muted: var(--meta-fest);
  --faint: var(--meta-fest);
}

/* ============================================================
   W8 · Video-Koepfe sind themenfest (bau-brief §2.2/§2.3, GESETZ Kap. 11)
   Bis heute trug der Kopf im Hell-Thema einen HELLEN Schleier und dunkle
   Schrift — auf den zentrierten Koepfen (phero--center, voice-hero) lag die
   Schlagzeile damit im hellen Nebel (gemessen 1,8-2,4:1, angesehen
   c4-ueberuns-hell-1440.png). Jetzt gilt in BEIDEN Themen derselbe
   gerichtete --dunkel-fest-Scrim: Video voll gesaettigt, Schrift auf Kalk.
   .werk-kopf behaelt seinen eigenen, kraeftigeren Scrim (W6).
   ============================================================ */
:root .hero__scrim,
:root[data-theme="light"] .hero__scrim {
  background:
    radial-gradient(
      125% 95% at 50% 60%,
      rgb(10 7 22 / 0.84) 0%,
      rgb(10 7 22 / 0.6) 46%,
      rgb(10 7 22 / 0.22) 80%
    ),
    linear-gradient(
      to top,
      rgb(10 7 22 / 0.9) 0%,
      rgb(10 7 22 / 0.5) 38%,
      rgb(10 7 22 / 0.22) 68%,
      rgb(10 7 22 / 0.42) 100%
    );
}
:root .werk-kopf .hero__scrim,
:root[data-theme="light"] .werk-kopf .hero__scrim {
  background: radial-gradient(
    130% 95% at 50% 58%,
    rgb(10 7 22 / 0.88) 0%,
    rgb(10 7 22 / 0.74) 42%,
    rgb(10 7 22 / 0.52) 100%
  );
}
/* Der Halo-Textschatten war die Kruecke zum hellen Schleier — er faellt weg. */
:root[data-theme="light"] .hero__title,
:root[data-theme="light"] .hero__lead,
:root[data-theme="light"] .hero__eyebrow,
:root[data-theme="light"] .hero__meta,
:root[data-theme="light"] .phero__inner *,
:root[data-theme="light"] .voice-hero__inner * {
  text-shadow: none;
}

/* Durchgestrichener Alt-Preis: volle Deckung statt Alpha — mit Alpha kam der
   gemessene Wert nie ueber 2,4:1 (Regel 38b, W8). */
.dash-bill__agency s {
  color: var(--muted);
  opacity: 1;
}
/* Badge auf hellem Flieder: weisse Schrift trug dort 1,8:1 (W8). */
.dash-erechnung__badge {
  background: #8a29e2;
  color: #fff;
}
/* Paket-Name auf der hervorgehobenen Karte: --muted verschwand im Flieder. */
.ptier__name {
  color: var(--text);
}
.ptier--hot .ptier__name {
  color: var(--violet-soft);
}

/* Derselbe Alt-Preis in der Vergleichstabelle stand bei 0,3 Deckung
   (gemessen 1,95-2,39:1) — auch hier volle Deckung. */
.dash-compare__foot s {
  color: var(--muted);
  opacity: 1;
}

/* Standbild im Werk-Rahmen: ueber 900px liegt es unter dem laufenden Video,
   darunter traegt es allein (GESETZ Kap. 5 Bildband). Als echtes <img> mit
   Maßen — ein CSS-Hintergrund zaehlt fuer qa-layout-check nicht als Inhalt
   und machte den Rahmen bei 768px zu einem 585-px-Leerband (W8 gemessen). */
.schirm__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
@media (max-width: 899px) {
  .schirm__still {
    position: static;
    height: auto;
    aspect-ratio: 16 / 10;
  }
}

/* ============================================================
   W11 · R2 — die Wortmarke im Kopf-Video liegt nicht mehr unter der H1
   Befund qa/w10/fremd-blick.md R2 (preise · dashboard · ueber-uns ·
   webdesign · kontakt · kunden-portal · ki-assistent): der Clip traegt
   selbst gross „rufki / WEBSEITEN & KI ASSISTENT" — zwei Ueberschriften
   uebereinander. Rezept wie .werk-kopf (W6, sehen-log Nr. 9): Ausschnitt
   verschieben + gerichteter --dunkel-fest-Scrim ueber der Textzone.
   Die Vervielfaeltigung des Clips selbst (R1) bleibt offen — Medienplan.
   ============================================================ */
video[src*="hero-home-105"] {
  /* Ruhe im Bild: der Clip traegt nicht nur die Wortmarke, sondern auch
     KI-Buchstabensalat („Webdesign-Pakee"). Ohne Weichzeichner liest der
     Besucher Fantasie-Text (Augen-Tor 17.09., zahlung/bewerten @390).
     Der Safari-Befund haengt NICHT daran — mit und ohne blur dieselben
     readyState-Ausfaelle, zwei Laeufe gemessen (qa/w11/webkit*.txt). */
  filter: brightness(0.5) saturate(0.92) blur(2.6px);
  transform: scale(1.09);
  transform-origin: center;
}
/* Linksbuendige Koepfe: die Wortmarke wandert aus der Textspalte nach rechts */
.w7kopf video[src*="hero-home-105"] {
  transform: scale(1.18) translateX(11%);
}
.w7kopf:has(video[src*="hero-home-105"]) .w7kopf__scrim {
  background:
    linear-gradient(
      to top,
      rgb(10 7 22 / 0.95) 0%,
      rgb(10 7 22 / 0.8) 32%,
      rgb(10 7 22 / 0.36) 60%,
      rgb(10 7 22 / 0.12) 100%
    ),
    linear-gradient(
      to right,
      rgb(10 7 22 / 0.9) 0%,
      rgb(10 7 22 / 0.78) 30%,
      rgb(10 7 22 / 0.42) 58%,
      rgb(10 7 22 / 0.06) 88%
    );
}
/* Zentrierte Koepfe (phero--center, voice-hero): horizontal gibt es keinen
   Ausweg, also wandert der Ausschnitt nach OBEN — die Wortmarke sitzt danach
   ueber der Eyebrow-Zeile, nicht mehr hinter der H1. Der Scrim traegt nur
   noch die Textzone; er darf das Video nicht totschlagen (GESETZ Kap. 5). */
.phero video[src*="hero-home-105"],
.voice-hero video[src*="hero-home-105"] {
  transform: scale(1.44) translateY(-25%);
}
.phero:has(video[src*="hero-home-105"]) .hero__scrim,
.voice-hero:has(video[src*="hero-home-105"]) .hero__scrim {
  background:
    radial-gradient(
      70% 36% at 50% 64%,
      rgb(10 7 22 / 0.86) 0%,
      rgb(10 7 22 / 0.7) 54%,
      rgb(10 7 22 / 0.24) 100%
    ),
    linear-gradient(
      to top,
      rgb(10 7 22 / 0.88) 0%,
      rgb(10 7 22 / 0.52) 42%,
      rgb(10 7 22 / 0.26) 72%,
      rgb(10 7 22 / 0.46) 100%
    );
}
@media (max-width: 900px) {
  /* Handy: Ausschnitt enger, die Wortmarke faellt aus dem Bild */
  .w7kopf video[src*="hero-home-105"] {
    transform: scale(1.5) translateX(15%);
  }
  .phero video[src*="hero-home-105"],
  .voice-hero video[src*="hero-home-105"] {
    transform: scale(1.45) translateY(-13%);
  }
}

/* ============================================================
   W11 · R8 — Bewertungs-Weiche (bewerten.html) + Aufruf-Block
   GESETZ Kap. 9 / bau-brief §4.1 Sektion 7: dunkle Karte mittig ueber
   Buehne, DREI Zeilen und nichts sonst (Versal-Titel · 5 Sterne · EIN
   breiter Knopf). Farben aus den Build-Tokens, nie SEHs Gelb.
   ============================================================ */
.bewerten__inner {
  max-width: 44rem;
  text-align: center;
}
.bewerten__frage {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: var(--fs-h2);
  letter-spacing: -0.02em;
  margin: 0 0 1.4rem;
}
.sterne {
  border: 0;
  padding: 0;
  margin: 1.6rem 0 0;
}
.sterne__legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.sterne__reihe {
  display: flex;
  gap: 0.35rem;
  justify-content: center;
}
.stern {
  background: none;
  border: 0;
  cursor: pointer;
  font-size: clamp(2.4rem, 9vw, 3.4rem);
  line-height: 1;
  color: var(--line-strong);
  padding: 0.15rem 0.3rem;
  transition:
    color 160ms var(--ease-entrance),
    transform 160ms var(--ease-entrance);
}
.stern.an {
  color: var(--violet-bright);
}
@media (hover: hover) and (pointer: fine) {
  .stern:hover {
    color: var(--violet-bright);
    transform: translateY(-2px);
  }
}
.stern:active {
  transform: scale(0.97);
}
.stern:focus-visible {
  outline: 2px solid var(--violet-bright);
  outline-offset: 3px;
  border-radius: 0.35rem;
}
.sterne__hinweis {
  margin-top: 0.9rem;
  font-size: 0.9rem;
  color: var(--muted);
}
.bewerten__fein {
  margin-top: 1.25rem;
  font-size: 0.9rem;
  color: var(--muted);
}
.bewerten__stufe h3 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: var(--fs-h3);
  margin: 0 0 0.6rem;
}
.bewerten__form {
  display: grid;
  gap: 0.5rem;
  text-align: left;
  margin: 1.5rem 0 0;
}
.bewerten__form label {
  font-size: 0.9rem;
  font-weight: 600;
}
.bewerten__form textarea,
.bewerten__form input[type="text"] {
  width: 100%;
  padding: 0.75rem;
  border-radius: var(--r-inner);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: inherit;
  font: inherit;
}
.bewerten__form .btn {
  justify-self: start;
  margin-top: 0.6rem;
}
.hp {
  position: absolute !important;
  left: -9999px;
}
@media (prefers-reduced-motion: reduce) {
  .stern {
    transition: none;
  }
}

/* ---------- Aufruf-Block auf der Startseite ---------- */
.bewerten-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3rem, 7vw, 5rem);
}
.bewerten-cta__buehne {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.bewerten-cta__buehne img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bewerten-cta__buehne img {
  /* Stockfoto zurueck in die Hausfarbe holen — es ist Untergrund, nicht Motiv */
  filter: saturate(0.35) brightness(0.55);
}
.bewerten-cta__buehne::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      85% 70% at 50% 50%,
      rgb(83 46 163 / 0.45) 0%,
      rgb(10 7 22 / 0.2) 60%,
      rgb(10 7 22 / 0.55) 100%
    ),
    linear-gradient(180deg, rgb(10 7 22 / 0.82), rgb(10 7 22 / 0.94));
}
.bewerten-cta__karte {
  max-width: 36rem;
  margin-inline: auto;
  text-align: center;
  padding: clamp(2rem, 5vw, 3.25rem) clamp(1.5rem, 4vw, 3rem);
  background: rgb(10 7 22 / 0.94);
  border: 1px solid rgb(246 242 255 / 0.14);
  border-radius: var(--r-frame);
  box-shadow: 0 30px 80px -30px rgb(0 0 0 / 0.7);
  /* themenfest: die Karte steht in BEIDEN Themen auf dunklem Grund */
  color: var(--kalk-fest);
  --text: var(--kalk-fest);
  --muted: var(--meta-fest);
}
.bewerten-cta__titel {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 1.1rem + 1.7vw, 2.5rem);
  letter-spacing: -0.015em;
  line-height: 1.06;
  margin: 0;
  color: var(--kalk-fest);
}
.bewerten-cta__titel em {
  font-style: normal;
  /* themenfest: die Karte ist in BEIDEN Themen dunkel — der Hell-Token
     #6b21b6 kam darauf auf 2,37:1 (Regel 38b, gemessen W11). */
  color: #c084fc;
}
.bewerten-cta__eyebrow {
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--meta-fest);
  margin: 0 0 0.9rem;
}
.bewerten-cta__sterne {
  display: flex;
  gap: 0.45rem;
  justify-content: center;
  margin: 1.5rem 0 1.8rem;
}
.bewerten-cta__sterne svg {
  width: clamp(1.8rem, 4.4vw, 2.5rem);
  height: auto;
  fill: #a855f7;
  flex: 0 0 auto;
}
.bewerten-cta__knopf {
  display: block;
  width: 100%;
  padding: 1rem 1.4rem;
  border-radius: var(--r-pill);
  background: #8a29e2;
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  text-align: center;
  text-decoration: none;
  transition: transform 160ms var(--ease-entrance);
}
.bewerten-cta__knopf:active {
  transform: scale(0.97);
}
@media (hover: hover) and (pointer: fine) {
  .bewerten-cta__knopf:hover {
    transform: translateY(-2px);
  }
}

/* ============================================================
   W11 · webdesign.html — die zwei uniformen Raster werden Register
   Befund Fremd-Blick §4: „10 Icon-Kacheln + 10 Verbindungs-Kacheln"
   (GESETZ Kap. 2: max. EIN Card-Grid je Seite — das eine ist der
   Paket-Vergleich). Kein HTML-Umbau: Nummern kommen aus CSS-Zaehlern,
   die Kachel verliert Rahmen und Fuellung und wird eine Zeile auf Hairline.
   ============================================================ */
.caps__grid {
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(2rem, 4vw, 4rem);
  row-gap: 0;
  counter-reset: kap;
}
.caps__grid .cap {
  counter-increment: kap;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: start;
  column-gap: 1.1rem;
  row-gap: 0.25rem;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  padding: var(--space-m) 0;
}
.caps__grid .cap::before {
  content: counter(kap, decimal-leading-zero);
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--violet-soft);
  padding-top: 0.9rem;
  grid-row: span 3;
}
.caps__grid .cap__ic {
  grid-row: span 3;
  margin-bottom: 0;
  width: 38px;
  height: 38px;
}
.caps__grid .cap h3 {
  margin-bottom: 0;
  align-self: center;
}
.caps__grid .cap p {
  grid-column: 3;
  max-width: 40ch;
}
.caps__grid .cap__tag {
  grid-column: 3;
  justify-self: start;
}
@media (hover: hover) and (pointer: fine) {
  .caps__grid .cap:hover {
    border-color: var(--line);
    border-top-color: rgba(138, 41, 226, 0.55);
    transform: none;
  }
}
@media (max-width: 760px) {
  .caps__grid {
    grid-template-columns: 1fr;
  }
}

/* Verbindungs-Register: aus dem 4er-Kachelfeld werden zwei Spalten Zeilen */
.conn__grid {
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(2rem, 4vw, 4rem);
  row-gap: 0;
  counter-reset: verb;
}
.conn__grid .conn__item {
  counter-increment: verb;
  grid-template-columns: auto auto 1fr;
  column-gap: 1.1rem;
}
.conn__grid .conn__item::before {
  content: counter(verb, decimal-leading-zero);
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--violet-soft);
  padding-top: 0.95rem;
}
.conn__grid .conn__item span[class$="__ic"] {
  width: 38px;
  height: 38px;
}
.conn__grid .conn__item span {
  max-width: 44ch;
}
@media (max-width: 760px) {
  .conn__grid {
    grid-template-columns: 1fr;
  }
}

/* Leerband vor „KOENNEN" schliessen (Fremd-Blick G3: rund 410 px ohne Inhalt).
   Das Register schliesst direkt an die Bau-Buehne an — kompressiver Takt
   3 rem statt zweimal voller Sektionsabstand (bau-brief §2.5). */
.section.incl {
  padding-bottom: clamp(2rem, 3.2vw, 3rem);
}
.section.caps {
  padding-top: clamp(2rem, 3.4vw, 3rem);
}

/* W11 · bewerten.html: unter den Sternen stand ein halber Bildschirm Leere
   (Augen-Tor 17.09.). Die zwei Wege stehen jetzt dort — Text statt Loch. */
.bewerten__wege {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(2.2rem, 5vw, 3.4rem);
  text-align: left;
}
.bewerten__wege > div {
  border-top: 1px solid var(--line);
  padding-top: 0.9rem;
}
.bewerten__wege b {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: 1.02rem;
  display: block;
  margin-bottom: 0.25rem;
}
.bewerten__wege span {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
  display: block;
}
@media (max-width: 620px) {
  .bewerten__wege {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
}
.section.bewerten {
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* ============================================================
   W11 · Augen-Tor-Maschine: die zwei index-Befunde + ueber-uns
   ============================================================ */
/* index @390: die rechte Spalte der Fakten-Leiste stand 3,5 px ueber der
   Viewport-Kante — `white-space: nowrap` auf „100/100" erzwingt eine
   Mindestbreite von 200 px, `1fr` kann nicht darunter (min-content).
   Gemessen: Zelle 192,2 → 393,5 bei 390 px Viewport. */
@media (max-width: 900px) {
  .wfakten__in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .wfakt b {
    font-size: clamp(1.9rem, 9.4vw, 2.7rem);
  }
}
/* ueber-uns: die Team-Aufnahmen sind 1280×720 (quer) und standen in einem
   4:5-Rahmen — der Zuschnitt warf 64 % der Bildbreite weg (Augen-Tor
   „Bild gekippt", 4 Befunde). Quadrat zeigt mehr vom Bild und haelt die
   Reihenfamilie im selben Format. */
.tmember img {
  aspect-ratio: 1 / 1;
}

/* W11 · Augen-Tor: en/preise + en/werk (Strukturfehler, nicht Inhalt)
   - en/preise @1440: die vierte Portal-Karte „Pro" stand bei x=1573 statt 1440,
     weil `repeat(4, 1fr)` an der Mindestbreite der langen englischen Zeilen
     haengenblieb (1fr = minmax(auto,1fr)). 6 Befunde.
   - en/werk: das Laufband (.marquee, width:100vw) hat keine Schiene — jedes
     Kachel-Element ragte ueber die Kante (12 Befunde). Die Maske blendet nur
     aus, sie schneidet nicht. */
/* NUR die Spuren duerfen nicht unter ihre Mindestbreite gehen — die Spalten-
   ZAHL bleibt bei den bestehenden Media-Queries (sonst standen am Handy vier
   90-px-Saeulen nebeneinander, Augen-Tor 17.09.). Deshalb `min-width: 0` am
   Kind statt `minmax(0,1fr)` an der Spur. */
.portal-tiers > * {
  min-width: 0;
}
.ptier__list li,
.ptier__d {
  overflow-wrap: break-word;
}
.marquee {
  overflow-x: clip;
}


/* W11 · Augen-Tor-Nachlese (Lauf 2) */
/* Der Fahrzeugbestand-Ausschnitt ist 1208x596; .w7fenster img erzwingt aber
   1208/1010 mit object-fit:cover — der Bildschirm wurde links und rechts
   mitten im Wort abgesaegt. Das Fenster bekommt hier sein eigenes Format. */
.w7fenster img[src*="kapitel-06b"] {
  aspect-ratio: 1208 / 596;
}
/* Die vier ruhenden Simulator-Bilder liegen nur auf opacity:0. Schaltet ein
   Pruefwerkzeug alles Unsichtbare sichtbar (augen-tor.mjs), gewinnt das
   letzte Bild — Schritt 01 zeigte dann den Barrierefreiheits-Bildschirm.
   clip-path bleibt davon unberuehrt und ist genauso weich. */
.w7sim__bilder img {
  clip-path: inset(0 0 100% 0);
  transition:
    opacity 320ms var(--snap),
    transform 320ms var(--snap),
    clip-path 320ms var(--snap);
}
.w7sim__bilder img[data-aktiv="ja"] {
  clip-path: inset(0);
}

/* W11 · bewerten.html: der schwebende Anruf-Knopf lag auf dem fuenften Stern —
   genau dem Klick, um den es auf dieser Seite geht (GESETZ Kap. 10: ein fixes
   Overlay verdeckt nie Inhalt). Auf DIESER Seite gibt es keinen Anruf-Knopf. */
body:has(.bewerten) .callfab {
  display: none;
}

/* ---------- Start-Kopf ueber der Produkt-Buehne (Hamada 18.09.2026: vorhandene
   Head-Videos behalten, den jetzigen Kopf etwas runter, darueber das Video) ---------- */
.w7kopf--start {
  min-height: 100svh;
}
.w7kopf--start .w7kopf__in {
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}
.w7kopf__unter {
  margin: 1.1rem 0 0;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--meta-fest);
}
/* Produkt-Buehne auf Platz 2: kein Nav-Abstand mehr, ruhigere Hoehe */
.wkopf {
  padding-top: clamp(3.5rem, 6vw, 6rem);
  min-height: min(70svh, 700px);
}
@media (max-width: 900px) {
  .w7kopf--start {
    min-height: 100svh;
  }
  .wkopf {
    padding-top: 3rem;
  }
}