/* nur.studio Zusatzsektionen · artifact_id: studio-sections · version: 6.4.1 · updated_at: 2026-10-16 · status: REVIEW
   source: studio-v2/sections.css · supersedes: 6.4.0
   V2-Sektion „Laufender Betrieb“ – nur /studio-v2/. Nutzt Tokens aus /assets/css/styles.css.
   (Die frühere Sektion „Gemeinsame Grundlagen“ ist seit Phase 4.5 eine kleine Erklärung im Finder-Ergebnis.) */

/* ---------- Sichtbarkeit: ruhiger Plattformwechsel in der bestehenden Lösungsdarstellung ---------- */
.visibility-showcase {
  --visibility-glow: rgba(217, 164, 65, .18);
  position: relative; isolation: isolate; overflow: hidden;
  scroll-margin-top: 92px;
  margin: clamp(44px, 5vw, 72px) 0 clamp(52px, 6vw, 84px);
  padding: clamp(30px, 3.8vw, 52px); border: 1px solid rgba(255, 255, 255, .14); border-radius: clamp(24px, 3vw, 38px);
  color: var(--td);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .018) 34%, rgba(255, 255, 255, .04)),
    radial-gradient(circle at 86% 4%, var(--visibility-glow), transparent 39%),
    rgba(7, 8, 11, .94);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 -1px 0 rgba(255, 255, 255, .035),
    0 32px 80px -48px rgba(10, 10, 12, .9),
    0 10px 28px -18px rgba(10, 10, 12, .65);
  -webkit-backdrop-filter: blur(24px) saturate(125%);
  backdrop-filter: blur(24px) saturate(125%);
  transition: background .48s ease, border-color .48s ease, box-shadow .48s ease;
}
.visibility-showcase::before {
  content: ""; position: absolute; z-index: -1; width: min(54vw, 700px); aspect-ratio: 1; right: -18%; top: -54%; border-radius: 50%;
  background: radial-gradient(circle, var(--visibility-glow), transparent 68%); filter: blur(10px); opacity: .85; pointer-events: none;
  transition: background .48s ease, opacity .48s ease;
}
.visibility-showcase::after {
  content: ""; position: absolute; z-index: 2; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 19%) top left / 52% 1px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, .055), transparent 18%) top / 100% 42% no-repeat;
  opacity: .82;
}
.visibility-showcase[data-visibility-index="1"] { --visibility-glow: rgba(66, 133, 244, .18); }
.visibility-showcase[data-visibility-index="2"] { --visibility-glow: rgba(116, 211, 190, .13); }
.visibility-showcase[data-visibility-index="3"] { --visibility-glow: rgba(217, 164, 65, .16); }
.visibility-showcase[data-visibility-index="4"],
.visibility-showcase[data-visibility-index="6"] { --visibility-glow: rgba(24, 119, 242, .2); }
.visibility-showcase[data-visibility-index="5"] { --visibility-glow: rgba(193, 53, 132, .2); }
.visibility-showcase[data-visibility-index="7"] { --visibility-glow: rgba(10, 102, 194, .2); }
.visibility-eyebrow { color: var(--gold); font: var(--w-semi) var(--fs--1)/1.2 "Outfit", sans-serif; letter-spacing: var(--ls-caps); text-transform: uppercase; }
.visibility-layout { display: grid; grid-template-columns: minmax(0, .92fr) minmax(380px, 1.08fr); align-items: center; gap: clamp(40px, 6vw, 84px); margin-top: clamp(28px, 3.2vw, 42px); }
.visibility-message { align-self: center; }
.visibility-title { color: var(--td); font-family: "DM Serif Display", Georgia, serif; font-weight: 400; }
.visibility-title__line { display: block; max-width: 12ch; font-size: clamp(2.75rem, 4.25vw, 4.5rem); line-height: .98; letter-spacing: -.025em; }
.visibility-focus { display: grid; align-content: center; justify-items: center; min-width: 0; padding: clamp(24px, 3vw, 38px) 0; }
.visibility-platform {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; width: 100%; gap: 16px 28px; min-height: 1.08em;
  font: var(--w-bold) clamp(2.65rem, 4.8vw, 5rem)/1 "Outfit", sans-serif; letter-spacing: -.055em;
}
.visibility-brand { display: inline-flex; align-items: center; justify-content: center; gap: .22em; white-space: nowrap; }
.visibility-brand__asset { display: block; width: auto; height: .78em; max-width: min(46vw, 8.5em); object-fit: contain; object-position: center; }
.visibility-brand__asset--icon { height: .88em; }
.visibility-brand__asset--wordmark { height: .72em; }
.visibility-brand--claude .visibility-brand__asset { height: .86em; }
.visibility-brand--meta .visibility-brand__asset { height: 1.85em; margin-block: -.56em; }
.visibility-brand__label { color: #fff; font-weight: var(--w-semi); letter-spacing: -.045em; }
.visibility-showcase.is-animated .visibility-platform { position: relative; isolation: isolate; display: grid; place-items: center; min-height: 1em; }
.visibility-showcase.is-animated .visibility-platform::before,
.visibility-showcase.is-animated .visibility-platform::after {
  content: ""; position: absolute; z-index: -1; left: 6%; width: 88%; height: 1px; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(217, 164, 65, .78), transparent); box-shadow: 0 0 24px rgba(217, 164, 65, .22); transition: opacity .28s ease;
}
.visibility-showcase.is-animated .visibility-platform::before { top: -.12em; }
.visibility-showcase.is-animated .visibility-platform::after { bottom: -.12em; }
.visibility-showcase.is-brand-light .visibility-platform::before,
.visibility-showcase.is-brand-light .visibility-platform::after { opacity: .72; }
.visibility-showcase.is-animated .visibility-brand { grid-area: 1 / 1; visibility: hidden; opacity: 0; transform: translateY(.22em); transition: opacity .17s ease, transform .17s var(--ease), visibility 0s .17s; }
.visibility-showcase.is-animated .visibility-brand.is-active { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.visibility-showcase.is-animated .visibility-brand.is-out { opacity: 0; transform: translateY(-.22em); }
.visibility-showcase.is-animated .visibility-brand.is-in { opacity: 0; transform: translateY(.22em); transition: none; }
.visibility-platforms {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.visibility-copy { max-width: 43ch; margin-top: clamp(22px, 2.6vw, 32px); color: var(--td-mut); font-size: var(--fs-0); line-height: 1.58; }
.visibility-actions { display: grid; justify-items: center; gap: 10px; margin-top: clamp(30px, 3.4vw, 42px); }
.visibility-cta { white-space: nowrap; background: var(--paper); color: var(--tl); }
.visibility-cta:hover { background: #fff; color: var(--tl); }
.visibility-control {
  min-height: 44px; padding: 7px 0; border: 0; border-bottom: 1px solid rgba(247, 245, 240, .3); color: var(--td-mut); background: transparent;
  font: var(--w-semi) .82rem/1.2 "Outfit", sans-serif; cursor: pointer;
}
.visibility-control:hover { color: var(--td); border-color: var(--gold); }
.visibility-boundary { margin-top: clamp(28px, 3vw, 38px); padding-top: 16px; border-top: 1px solid var(--td-line); color: var(--td-mut); font-size: .78rem; line-height: 1.5; }

@media (max-width: 767px) {
  .visibility-showcase { margin-inline: 0; padding: 28px 18px 30px; border-radius: 24px; -webkit-backdrop-filter: blur(18px) saturate(120%); backdrop-filter: blur(18px) saturate(120%); }
  .visibility-layout { grid-template-columns: minmax(0, 1fr); gap: 30px; margin-top: 26px; }
  .visibility-title__line { max-width: 12ch; font-size: clamp(2.2rem, 11.2vw, 3.1rem); line-height: 1; }
  .visibility-focus { padding: 14px 0 0; }
  .visibility-platform { min-height: 1.12em; gap: 14px 20px; font-size: clamp(2.2rem, 11.4vw, 3.45rem); line-height: 1.12; }
  .visibility-brand__asset { max-width: min(76vw, 8.5em); }
  .visibility-copy { font-size: .98rem; line-height: 1.58; }
  .visibility-actions { width: 100%; margin-top: 30px; }
  .visibility-cta { width: 100%; justify-content: center; white-space: normal; }
  .visibility-boundary { margin-top: 28px; font-size: .74rem; }
}

@media (max-width: 340px) {
  .visibility-platform { font-size: 2rem; }
  .visibility-title__line { font-size: 1.92rem; }
}

@media (prefers-reduced-motion: reduce) { .visibility-brand { transition: none; } }

/* ---------- Laufender Betrieb (Struktur der früheren Preisfläche; Beträge je Monat aus der Public-Datei, Gate: betrieb_freigabe) ---------- */
.studio-operations .label,
.studio-operations .section-sub { color: var(--td-mut); }
.ops-grid .ops-fit { margin-top: 22px; color: var(--td); font: var(--w-semi) var(--fs--1)/1.45 "Outfit", sans-serif; }
.ops-grid strong small { margin-left: .35em; font: var(--w-semi) .4em/1 "Outfit", sans-serif; letter-spacing: 0; color: var(--td-mut); white-space: nowrap; }
.ops-note { margin-top: 22px; color: var(--td-mut); font-size: var(--fs--1); line-height: 1.55; }

@media (max-width: 767px) {
  .ops-grid .ops-fit { margin-top: 8px; font-size: .78rem; }
  .ops-note { margin-top: 16px; font-size: .78rem; line-height: 1.45; }
}

/* ===================== Phase 5.0 · Mobile Experience: sekundäre Sektionen verdichten =====================
   Bausteine werden von mobile-sections.js einmal aufgebaut; hier sind sie nur bis 767 px sichtbar. Desktop unverändert. */
.step-rail, .step-panel, .ops-seg, .contact-start { display: none; }

@media (max-width: 767px) {
  /* ---------- Wie ich arbeite: Step-Rail ---------- */
  .studio-process { padding-block: 48px 52px; }
  .studio-process .process-headline { margin-bottom: 22px; }
  .studio-process .section-head h2 { font-size: clamp(1.95rem, 8.6vw, 2.45rem); line-height: 1.04; }
  .studio-process .process-headline .section-sub { margin-top: 10px; font-size: .94rem; line-height: 1.45; }
  .js .process-block-head { display: block; }
  .js .process-block-head h3 { max-width: none; margin-top: 0; font-size: clamp(1.5rem, 7vw, 1.9rem); line-height: 1.1; }
  .process-stage { gap: 14px; }
  .js .process-flow.is-steps .method-list { display: none; }
  .js .process-flow.is-steps .process-block-head { margin-bottom: 14px; }
  .step-rail {
    display: flex; gap: 8px; margin-inline: -20px; padding: 2px 20px 6px; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .step-rail::-webkit-scrollbar { display: none; }
  .step-chip {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 10px; border: 1px solid var(--tl-line); border-radius: 999px;
    background: none; color: var(--tl-mut); font: var(--w-semi) .92rem/1 "Outfit", sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  }
  .step-chip__nr { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--paper-2); color: var(--tl); font-size: .74rem; }
  .step-chip.is-active { background: var(--tl); border-color: var(--tl); color: var(--paper, #f3f1ec); }
  .step-chip.is-active .step-chip__nr { background: var(--gold); color: #17161a; }
  .step-panel { display: block; margin-top: 14px; padding: 18px 0 4px; border-top: 1px solid var(--tl-line); }
  .step-panel:focus-visible { outline-offset: 6px; }
  .step-panel__titel { display: block; font: var(--w-bold) 1.25rem/1.2 "Outfit", sans-serif; color: var(--tl); }
  .step-panel__text { margin-top: 8px; color: var(--tl-mut); font-size: 1rem; line-height: 1.55; }
  /* Prinzipien und Zusatzhinweise: nach Bedarf, nicht als eigener großer Block */
  .js .process-principles { padding-block: 18px 6px; }
  .js .process-principles:not(.is-mobile-expanded) .method-list { display: none; }
  .js .process-principles .process-block-head { margin-bottom: 8px; }
  .js .process-principles .process-block-head > span, .js .process-principles .process-block-head > p,
  .js .process-flow .process-block-head > span, .js .process-flow .process-block-head > p { display: none; }
  .js .process-flow.is-steps .process-disclosure { margin-top: 10px; }

  /* ---------- Laufender Betrieb: Segmented Control ---------- */
  .studio-operations { padding-block: 52px 56px; }
  .ops-seg {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin: 0 0 14px; padding: 4px;
    border: 1px solid var(--td-line, rgba(255, 255, 255, .16)); border-radius: 14px;
  }
  .ops-seg__btn {
    min-height: 44px; padding: 0 6px; border: 0; border-radius: 10px; background: none; color: var(--td-mut);
    font: var(--w-semi) .86rem/1.1 "Outfit", sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background-color .2s var(--ease), color .2s var(--ease);
  }
  .ops-seg__btn.is-active { background: var(--td, #f3f1ec); color: #17161a; }
  .ops-grid.is-tabs { display: block; }
  .ops-grid.is-tabs > article { display: none; }
  .ops-grid.is-tabs > article.is-active { display: block; animation: opsIn .22s var(--ease) both; }
  .ops-grid .ops-fit { margin-top: 12px; }

  /* ---------- FAQ ---------- */
  .studio-faq { padding-block: 48px 52px; }
  .faq-list summary { min-height: 52px; }

  /* ---------- Anfrage: erst kompakter Abschluss, Formular nach Tipp ---------- */
  .studio-contact { padding-block: 52px 56px; }
  .js .studio-contact:not(.is-expanded) .contact-quiz { display: none; }
  .js .studio-contact .contact-start { display: block; margin: 6px 0 0; width: 100%; }
  .js .studio-contact.is-expanded .contact-start { display: none; }
  .contact-start__btn { width: 100%; justify-content: center; }
  .js .studio-contact:not(.is-expanded) .contact-intro { gap: 14px; }
  .js .studio-contact:not(.is-expanded) .contact-direct { margin-top: 18px; }
}
@keyframes opsIn { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .ops-grid.is-tabs > article.is-active { animation: none; } .step-chip, .ops-seg__btn { transition: none; } }

/* Sticky CTA weicht lokalen Aktionen (mobile-sections.js → initStickyYield): nur opacity + kleine Verschiebung, kein Filter */
@media (max-width: 767px) {
  .js .studio-mobile-rail.is-yield,
  .js .studio-mobile-rail.is-visible.is-yield { opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .22s ease, transform .22s ease; }
}
@media (prefers-reduced-motion: reduce) { .js .studio-mobile-rail.is-yield { transition: none; } }