/*
Theme Name: PowerSmartCoat v2
Theme URI: https://powersmartcoat.de
Author: PowerSmartCoat
Author URI: https://powersmartcoat.de
Description: Partnerseite für die Nanosphären-Dämmbeschichtung PowerSmartCoat. Dunkle Fläche, fünf im Code gezeichnete technische Grafiken, Ersparnisrechner, technisches Merkblatt, natives Partnerformular mit Leads-Tabelle. Schrift, Skripte und Grafiken liegen im Theme; externe Anfragen gibt es nur nach ausdrücklicher Zustimmung — die Partnerkarte und das Whop-Pixel für die Anzeigenmessung.
Version: 3.34.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: powersmartcoat
Domain Path: /languages
*/

/* Inter is served locally to avoid a pre-consent request to Google Fonts. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --psc-bg:            #06101a;
  --psc-bg-elev:       #0a1724;
  --psc-bg-card:       #0f2031;
  --psc-bg-raised:     #142a3f;
  --psc-border:        rgba(173, 205, 229, 0.18);
  --psc-border-strong: rgba(173, 205, 229, 0.32);
  --psc-text:          #eef5fb;
  --psc-text-muted:    #a9b8c7;
  --psc-text-dim:      #8397aa;
  /* Aktionsfarbe. Exakt das Cyan aus dem Logo (#04b7d5), gemessen aus
     assets/images/logo.png. Kontrast auf --psc-bg: 7,97:1 (AAA). */
  --psc-accent:        #04b7d5;
  --psc-accent-soft:   rgba(4, 183, 213, 0.12);
  --psc-accent-glow:   rgba(4, 183, 213, 0.32);

  /* Markenfarbe aus dem Logo. Traegt Bauteile und Waende in den Zeichnungen. */
  --psc-navy:          #2f375e;
  --psc-navy-light:    #4a5488;

  /* Thermalpole. Farbe kodiert auf dieser Seite Physik, nicht Hierarchie:
     warm heisst immer "vorher / Waermeverlust", kalt heisst "nachher / Zielzustand".
     Deshalb ist Orange KEINE Interaktionsfarbe - dafuer ist --psc-accent da.
     Die beiden Pole sind bewusst auch in der HELLIGKEIT getrennt (Kontrast 2,83:1
     zueinander, unter simulierter Deuteranopie noch 2,42:1). Ein Paar, das sich nur
     im Farbton unterscheidet, verschwimmt im Graustufendruck und bei Rotgruenschwaeche.
     Zusaetzlich gilt: keine Aussage wird allein ueber Farbe kodiert. */
  --psc-warm:          #d1571d;
  --psc-warm-soft:     rgba(209, 87, 29, 0.14);
  --psc-cold:          #8ae3f7;
  --psc-cold-soft:     rgba(138, 227, 247, 0.14);
  --psc-neutral:       #8ea6b8;

  /* Belegstatus. Nie allein als Farbe eingesetzt, immer mit Textlabel. */
  --psc-proven:        #73e5c2;
  --psc-proven-soft:   rgba(115, 229, 194, 0.12);
  --psc-claimed:       #f1b768;
  --psc-claimed-soft:  rgba(241, 183, 104, 0.12);

  /* Rasterlinien und Flaechen fuer die technischen Zeichnungen. */
  --psc-line:          rgba(173, 205, 229, 0.22);
  --psc-paper:         #0f2031;

  /* Aliasse aus der nestnode-Basis, damit bestehende Regeln weiter greifen. */
  --psc-local:         #73e5c2;
  --psc-local-soft:    rgba(115, 229, 194, 0.12);
  --psc-home:          #f1b768;
  --psc-home-soft:     rgba(241, 183, 104, 0.12);
  --psc-white:         #ffffff;
  --psc-max:           clamp(1180px, 86vw, 1984px);
  --psc-nav-h:         72px;
  --psc-radius:        18px;
  --psc-radius-lg:     28px;
  --psc-shadow:        0 30px 80px -42px rgba(0, 0, 0, 0.86);
  --psc-step-0:        clamp(1rem, 0.94rem + 0.18vw, 1.18rem);
  --psc-step-1:        clamp(1.25rem, 1.08rem + 0.48vw, 1.72rem);
  --psc-step-2:        clamp(1.7rem, 1.38rem + 0.9vw, 2.55rem);
  --psc-step-3:        clamp(2.25rem, 1.7rem + 1.65vw, 4rem);
  --psc-step-4:        clamp(3rem, 2.05rem + 2.8vw, 6.2rem);
  --psc-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--psc-nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--psc-bg);
  color: var(--psc-text);
  font-family: var(--psc-font);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--psc-accent); text-decoration: none; transition: color .2s ease, opacity .2s ease; }
a:hover { color: var(--psc-white); }

.psc-skip-link {
  position: fixed;
  top: 10px;
  left: 12px;
  z-index: 2000;
  padding: 10px 15px;
  border: 2px solid var(--psc-accent);
  border-radius: 8px;
  background: var(--psc-bg);
  color: var(--psc-white);
  font-weight: 700;
  transform: translateY(calc(-100% - 18px));
  transition: transform .18s ease;
}

.psc-skip-link:focus {
  color: var(--psc-white);
  transform: translateY(0);
}

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--psc-white);
}

p { margin: 0 0 1rem; }

.psc-container {
  width: 100%;
  max-width: var(--psc-max);
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

.psc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--psc-accent);
}
.psc-eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--psc-accent);
  box-shadow: 0 0 10px 2px var(--psc-accent-glow);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.psc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 22px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .25s ease, background .2s ease, border-color .2s ease, color .2s ease;
  white-space: nowrap;
}
.psc-btn:active { transform: translateY(1px); }

.psc-btn--primary {
  background: var(--psc-accent);
  color: #04141a;
  box-shadow: 0 6px 24px -6px var(--psc-accent-glow);
}
.psc-btn--primary:hover {
  color: #04141a;
  transform: translateY(-2px);
  box-shadow: 0 10px 34px -6px var(--psc-accent-glow), 0 0 0 1px var(--psc-accent);
}

.psc-btn--ghost {
  background: transparent;
  color: var(--psc-text);
  border-color: var(--psc-border);
}
.psc-btn--ghost:hover {
  color: var(--psc-white);
  border-color: var(--psc-accent);
  background: var(--psc-accent-soft);
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.psc-nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--psc-nav-h);
  z-index: 1000;
  display: flex;
  align-items: center;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease;
}
.psc-nav.is-scrolled {
  background: rgba(10, 10, 10, 0.85);
  border-bottom-color: var(--psc-border);
}
.psc-nav__inner {
  width: 100%;
  max-width: var(--psc-max);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.psc-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--psc-white);
}
.psc-logo:hover { color: var(--psc-white); }
.psc-logo__mark {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: linear-gradient(150deg, var(--psc-white), var(--psc-accent) 62%);
  box-shadow: 0 0 16px -2px var(--psc-accent-glow);
  position: relative;
  flex: none;
}
.psc-logo__mark::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 3px;
  background: var(--psc-bg);
}
.psc-logo b { color: var(--psc-accent); font-weight: 800; }

.psc-nav__links {
  display: flex;
  align-items: center;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.psc-nav__links a {
  color: var(--psc-text-muted);
  font-size: 14px;
  font-weight: 500;
  position: relative;
  white-space: nowrap;
}
.psc-nav__links a:hover { color: var(--psc-white); }
.psc-nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 0; height: 2px;
  background: var(--psc-accent);
  border-radius: 2px;
  transition: width .25s ease;
}
.psc-nav__links a:hover::after { width: 100%; }

.psc-nav__cta { display: flex; align-items: center; gap: 16px; }
.psc-nav__cta .psc-btn { padding: 8px 16px; font-size: 13px; }

.psc-lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--psc-border);
  border-radius: 9px;
  background: var(--psc-bg-elev);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
}
.psc-lang__opt {
  display: inline-flex;
  align-items: center;
  color: var(--psc-text-muted);
  text-decoration: none;
  padding: 5px 9px;
  border-radius: 6px;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.psc-lang__opt:hover {
  color: var(--psc-white);
}
.psc-lang__opt.is-active {
  color: var(--psc-bg);
  background: var(--psc-accent);
}

.psc-burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--psc-border);
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
}
.psc-burger span {
  display: block;
  position: relative;
  width: 20px; height: 2px;
  background: var(--psc-text);
  transition: background .2s ease;
}
.psc-burger span::before, .psc-burger span::after {
  content: "";
  position: absolute; left: 0;
  width: 20px; height: 2px;
  background: var(--psc-text);
  transition: transform .25s ease, top .25s ease;
}
.psc-burger span::before { top: -6px; }
.psc-burger span::after { top: 6px; }
.psc-nav.is-open .psc-burger span { background: transparent; }
.psc-nav.is-open .psc-burger span::before { top: 0; transform: rotate(45deg); }
.psc-nav.is-open .psc-burger span::after  { top: 0; transform: rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.psc-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: calc(var(--psc-nav-h) + 60px) 0 90px;
  overflow: hidden;
  isolation: isolate;
}
/* layered background: grid + radial glow + gradient */
.psc-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(900px 600px at 70% 12%, rgba(0,212,255,0.16), transparent 60%),
    radial-gradient(700px 500px at 10% 90%, rgba(0,212,255,0.08), transparent 60%),
    var(--psc-bg);
}
.psc-hero__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, #000 30%, transparent 80%);
}

/* split layout: text column + product visual (mobile-first → stacked) */
.psc-hero__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: center;
  width: 100%;
}
.psc-hero__col { max-width: 640px; }

.psc-hero h1 {
  font-size: clamp(26px, 2.25vw, 32px);
  font-weight: 800;
  letter-spacing: -0.045em;
  margin: 22px 0 0;
}
.psc-hero h1 .psc-grad {
  background: linear-gradient(110deg, var(--psc-white) 0%, var(--psc-accent) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.psc-hero__sub {
  margin: 26px 0 0;
  max-width: 620px;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  line-height: 1.6;
  color: var(--psc-text-muted);
  font-weight: 400;
}
.psc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
}
.psc-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
  margin-top: 44px;
  padding-top: 30px;
  border-top: 1px solid var(--psc-border);
  color: var(--psc-text-dim);
  font-size: 14px;
}
.psc-hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.psc-hero__meta span::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--psc-accent);
  box-shadow: 0 0 8px 1px var(--psc-accent-glow);
}

/* scroll hint */
.psc-hero__scroll {
  position: absolute;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  color: var(--psc-text-dim);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: psc-float 2.4s ease-in-out infinite;
}
.psc-hero__scroll::after {
  content: "";
  width: 1px; height: 26px;
  background: linear-gradient(var(--psc-accent), transparent);
}
@keyframes psc-float {
  0%,100% { transform: translate(-50%, 0); opacity: .7; }
  50%     { transform: translate(-50%, 6px); opacity: 1; }
}

/* ============================================================
   HERO PRODUCT VISUAL — CSS-rendered PowerSmartCoat device
   ============================================================ */
.psc-hero__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1100px;
}
.psc-device {
  position: relative;
  width: min(330px, 82vw);
  transform-style: preserve-3d;
  transform: rotateX(7deg) rotateY(-20deg);
  animation: psc-device-float 7s ease-in-out infinite;
}
@keyframes psc-device-float {
  0%,100% { transform: rotateX(7deg) rotateY(-20deg) translateY(0); }
  50%     { transform: rotateX(7deg) rotateY(-20deg) translateY(-14px); }
}
.psc-device__glow {
  position: absolute;
  inset: -16% -16% -24%;
  z-index: -1;
  background: radial-gradient(58% 58% at 50% 42%, var(--psc-accent-soft), transparent 72%);
  filter: blur(26px);
}
.psc-device__body {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(158deg, #1b1d22 0%, #0d0e11 58%, #0a0b0d 100%);
  border: 1px solid var(--psc-border);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    inset 0 0 46px rgba(0,0,0,0.55),
    -26px 34px 64px -22px rgba(0,0,0,0.85),
    0 36px 90px -32px var(--psc-accent-glow);
}
/* accent light bar down the left edge of the box */
.psc-device__bar {
  position: absolute;
  top: 26px; left: 0;
  width: 4px; height: 68px;
  border-radius: 0 4px 4px 0;
  background: var(--psc-accent);
  box-shadow: 0 0 18px 2px var(--psc-accent-glow);
}
.psc-device__brand {
  margin-top: auto;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.045em;
  color: var(--psc-white);
  line-height: 1;
}
.psc-device__brand b { color: var(--psc-accent); font-weight: 800; }
.psc-device__sub {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--psc-text-dim);
}
.psc-device__status {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--psc-text-muted);
}
.psc-device__led {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--psc-accent);
  box-shadow: 0 0 10px 2px var(--psc-accent-glow);
  animation: psc-device-pulse 1.8s ease-in-out infinite;
}
@keyframes psc-device-pulse {
  0%,100% { opacity: 1; }
  50%     { opacity: .35; }
}
.psc-device__vents {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 22px;
}
.psc-device__vents i {
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--psc-border), transparent);
}
.psc-device__vents i:nth-child(1) { width: 82%; }
.psc-device__vents i:nth-child(2) { width: 64%; }
.psc-device__vents i:nth-child(3) { width: 72%; }
.psc-device__vents i:nth-child(4) { width: 48%; }
.psc-device__floor {
  position: absolute;
  left: 50%; bottom: -30px;
  transform: translateX(-50%);
  width: 72%; height: 26px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,0.6), transparent);
  filter: blur(5px);
  z-index: -1;
}

/* ============================================================
   GENERIC SECTIONS / PLACEHOLDERS
   ============================================================ */
.psc-section {
  position: relative;
  padding: 96px 0;
  border-top: 1px solid var(--psc-border);
}
.psc-section--compact { padding: 42px 0; }
.psc-section__head { max-width: 680px; margin-bottom: 14px; }
.psc-section h2 {
  font-size: clamp(23px, 2.05vw, 31px);
  margin-top: 14px;
}
.psc-section__lead { color: var(--psc-text-muted); font-size: 1.1rem; max-width: 620px; }

.psc-soon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 8px 16px;
  border: 1px solid var(--psc-border);
  border-radius: 999px;
  background: var(--psc-bg-card);
  color: var(--psc-text-muted);
  font-size: 14px;
  font-weight: 500;
}
.psc-soon::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--psc-accent);
  box-shadow: 0 0 10px 2px var(--psc-accent-glow);
}

/* ============================================================
   FOOTER
   ============================================================ */
.psc-footer {
  border-top: 1px solid var(--psc-border);
  padding: 64px 0 36px;
  background: var(--psc-bg-elev);
}
.psc-footer__inner {
  display: grid;
  grid-template-columns: minmax(220px, 1.05fr) minmax(0, 2.4fr);
  gap: 44px;
  align-items: start;
}
.psc-footer__brand {
  display: grid;
  gap: 18px;
  align-content: start;
}
.psc-footer__brand p {
  max-width: 320px;
  margin: 0;
  color: var(--psc-text-muted);
  font-size: 15px;
  line-height: 1.6;
}
.psc-footer__nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 28px;
}
.psc-footer__group h2 {
  margin: 0 0 14px;
  color: var(--psc-white);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
.psc-footer__group ul {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.psc-footer__group a,
.psc-footer__bottom a {
  color: var(--psc-text-muted);
  font-size: 14px;
}
.psc-footer__group a:hover,
.psc-footer__bottom a:hover { color: var(--psc-white); }
.psc-footer__bottom {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding-top: 26px;
  border-top: 1px solid var(--psc-border);
}
.psc-footer__copy { margin: 0; color: var(--psc-text-dim); font-size: 14px; }

/* ============================================================
   SOCIAL LINKS (footer) & POST SHARING
   ============================================================ */
.psc-socials { display: flex; align-items: center; gap: 12px; list-style: none; margin: 0; padding: 0; }
.psc-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--psc-text-muted);
  border: 1px solid var(--psc-border);
  border-radius: 50%;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.psc-socials a:hover {
  color: var(--psc-accent);
  border-color: var(--psc-accent);
  background: var(--psc-accent-soft);
}
.psc-socials svg { width: 17px; height: 17px; fill: currentColor; display: block; }

/* header variant: smaller, sits next to the CTA button */
.psc-footer__socials { margin-top: 2px; }

/* post share buttons (single.php) */
.psc-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--psc-border);
}
.psc-share__label { color: var(--psc-text-dim); font-size: 14px; }
.psc-share__btn {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid var(--psc-accent);
  border-radius: 8px;
  color: var(--psc-accent);
  font-size: 14px;
  font-weight: 600;
}
.psc-share__btn:hover { background: var(--psc-accent); color: #000; }

/* ============================================================
   RESPONSIVE / MOBILE-FIRST
   ============================================================ */
/* desktop: headline column + product visual side by side */
@media (min-width: 980px) {
  .psc-hero__layout {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
  }
}

@media (max-width: 979px) {
  .psc-nav__links {
    position: fixed;
    inset: var(--psc-nav-h) 0 auto 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 18px 24px 26px;
    background: rgba(10,10,10,0.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--psc-border);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
  }
  .psc-nav.is-open .psc-nav__links {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .psc-nav__links a { width: 100%; padding: 12px 0; font-size: 17px; }
  .psc-nav__links a::after { display: none; }
  .psc-nav__cta .psc-btn { padding: 9px 14px; font-size: 14px; }
  .psc-nav__cta { gap: 10px; }
  .psc-lang { padding: 5px 6px; font-size: 12px; }
  .psc-burger { display: inline-flex; }
  .psc-footer__inner { grid-template-columns: 1fr; gap: 34px; }
  .psc-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .psc-logo { font-size: 19px; }
  .psc-logo__mark { width: 24px; height: 24px; }
  .psc-nav__inner { padding: 0 14px; }
  .psc-nav__cta .psc-btn { padding: 8px 10px; font-size: 13px; }
  .psc-hero { min-height: auto; padding: calc(var(--psc-nav-h) + 48px) 0 64px; }
  .psc-hero__actions { gap: 12px; }
  .psc-hero__actions .psc-btn { width: 100%; }
  .psc-section { padding: 64px 0; }
  .psc-hero__scroll { display: none; }
  .psc-footer { padding: 48px 0 30px; }
  .psc-footer__nav { grid-template-columns: 1fr; gap: 24px; }
  .psc-footer__bottom { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 430px) {
  .psc-nav__inner { padding: 0 10px; gap: 8px; }
  .psc-logo > span:last-child { display: none; }
  .psc-nav__cta { gap: 7px; }
  .psc-nav__cta .psc-btn { padding: 8px 9px; font-size: 12px; }
  .psc-lang { gap: 4px; padding: 5px; }
  .psc-burger { width: 40px; height: 40px; border-radius: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .psc-hero__scroll,
  .psc-device,
  .psc-device__led { animation: none !important; }
  * { transition-duration: .001ms !important; }
}

/* ============================================================
   BLOG — archive list & single-post meta
   ============================================================ */
.psc-article__meta {
  color: var(--psc-text-muted);
  font-size: 14px;
  letter-spacing: 0.02em;
  margin-top: 10px;
}

.psc-bloglist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  max-width: none;
  margin-top: 8px;
}

.psc-postcard {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 22px;
  border: 1px solid var(--psc-border);
  border-radius: 14px;
  background: var(--psc-bg-card);
  transition: border-color .2s ease, transform .2s ease, box-shadow .25s ease;
}
.psc-postcard:hover {
  border-color: var(--psc-accent);
  transform: translateY(-2px);
  box-shadow: 0 12px 34px -16px var(--psc-accent-glow);
}
.psc-postcard__title {
  font-size: 21px;
  line-height: 1.28;
  margin: 0 0 8px;
}
.psc-blog .psc-bloglist .psc-postcard .psc-postcard__title {
  font-size: 21px !important;
  line-height: 1.28 !important;
}
.psc-postcard__title a { color: var(--psc-white); }
.psc-postcard__title a:hover { color: var(--psc-accent); }
.psc-postcard__meta {
  color: var(--psc-text-muted);
  font-size: 12px;
  letter-spacing: 0.02em;
  margin: 0 0 10px;
}
.psc-postcard__excerpt {
  color: var(--psc-text-muted);
  font-size: .94rem;
  line-height: 1.55;
  margin-bottom: 16px;
}
.psc-postcard__excerpt p { margin: 0; }
.psc-postcard .psc-link {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 14px;
}

.psc-bloglist + .pagination,
.nav-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 32px;
}
.nav-links .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 8px 14px;
  border: 1px solid var(--psc-border);
  border-radius: 10px;
  color: var(--psc-text);
}
.nav-links .page-numbers.current,
.nav-links .page-numbers:hover {
  border-color: var(--psc-accent);
  color: var(--psc-accent);
}

/* ============================================================
   PAGE CONTENT — prose, cards, pricing, team, stats, CTA, forms
   ============================================================ */
.psc-container--narrow { max-width: 780px; }
.psc-page .psc-section__head,
.psc-single .psc-section__head { margin-bottom: 28px; }
.psc-page h1, .psc-single h1, .psc-blog h1 {
  font-size: clamp(25px, 2.15vw, 31px);
  margin-top: 12px;
}

.psc-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: .92rem;
  color: var(--psc-accent);
}
.psc-link:hover { color: var(--psc-white); }
.psc-single__back { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--psc-border); }

/* Prose typography for editor / page content */
.psc-prose {
  font-size: 1rem;
  color: var(--psc-text);
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}
.psc-prose--wide {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.psc-page .psc-prose, .psc-single .psc-prose { margin-top: 4px; }
.psc-prose > :first-child { margin-top: 0; }
.psc-prose h2 {
  font-size: clamp(22px, 1.9vw, 29px);
  margin: 2.2em 0 .6em;
  scroll-margin-top: calc(var(--psc-nav-h) + 20px);
}
.psc-prose h3 {
  font-size: clamp(19px, 1.6vw, 23px);
  margin: 1.8em 0 .5em;
  color: var(--psc-white);
}
.psc-prose p { margin: 0 0 1.15rem; color: var(--psc-text); }
.psc-prose strong { color: var(--psc-white); font-weight: 700; }
.psc-prose a { text-decoration: underline; text-underline-offset: 3px; }
.psc-prose ul, .psc-prose ol { margin: 0 0 1.3rem; padding-left: 1.3rem; color: var(--psc-text); }
.psc-prose li { margin: 0 0 .55rem; }
.psc-prose ul li::marker { color: var(--psc-accent); }
.psc-prose blockquote {
  margin: 1.6rem 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--psc-accent);
  color: var(--psc-text-muted);
  font-style: italic;
}
.psc-prose hr { border: none; border-top: 1px solid var(--psc-border); margin: 2.4rem 0; }
.psc-prose code {
  background: var(--psc-bg-card);
  border: 1px solid var(--psc-border);
  border-radius: 6px;
  padding: 2px 7px;
  font-size: .92em;
}
.psc-prose img { border-radius: var(--psc-radius); margin: 1.6rem 0; }
.psc-prose table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  margin: 1.6rem 0;
  font-size: .98rem;
}
.psc-prose th, .psc-prose td {
  text-align: left;
  padding: 13px 16px;
  border: 1px solid var(--psc-border);
  overflow-wrap: anywhere;
  word-break: normal;
}
.psc-prose thead th { background: var(--psc-bg-card); color: var(--psc-white); }
.psc-prose tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }

@media (max-width: 640px) {
  .psc-prose table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .psc-prose thead,
  .psc-prose tbody,
  .psc-prose tr,
  .psc-prose th,
  .psc-prose td {
    display: block;
    width: 100%;
  }

  .psc-prose tr {
    border: 1px solid var(--psc-border);
    margin-bottom: 12px;
  }

  .psc-prose th,
  .psc-prose td {
    min-width: 0;
    padding: 11px 12px;
  }

  .psc-prose th + th,
  .psc-prose td + td {
    border-top: 0;
  }
}

/* Card grid (features, hermes, generic) */
.psc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin: 1.8rem 0 2.2rem;
}
@media (min-width: 720px) { .psc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .psc-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.psc-card {
  padding: 26px;
  border: 1px solid var(--psc-border);
  border-radius: var(--psc-radius);
  background: var(--psc-bg-card);
  transition: border-color .2s ease, transform .2s ease, box-shadow .25s ease;
}
.psc-card:hover {
  border-color: var(--psc-accent);
  transform: translateY(-2px);
  box-shadow: 0 14px 38px -18px var(--psc-accent-glow);
}
.psc-card h3 { margin-top: 0; }
.psc-card p:last-child { margin-bottom: 0; }
.psc-card--quiet { background: linear-gradient(180deg, rgba(20,21,24,0.96), rgba(13,14,17,0.96)); }
.psc-card__icon {
  display: inline-flex;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--psc-accent-soft);
  color: var(--psc-accent);
  font-size: 22px;
  margin-bottom: 16px;
}

.psc-home-beta {
  display: grid;
  gap: 20px;
  align-items: center;
}
.psc-home-beta h2 {
  font-size: clamp(1.45rem, 2.8vw, 2rem);
  margin-top: 10px;
}
.psc-home-beta p {
  color: var(--psc-text-muted);
  margin-bottom: 0;
}
@media (min-width: 800px) {
  .psc-home-beta { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (max-width: 560px) {
  .psc-home-beta .psc-btn {
    width: 100%;
    white-space: normal;
  }
}

/* Room-by-room use cases */
.psc-usecases {
  margin: 2.4rem 0 3rem;
}
.psc-usecases__intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
  padding: 26px;
  border: 1px solid var(--psc-border);
  border-radius: var(--psc-radius);
  background: linear-gradient(180deg, rgba(20,21,24,0.96), rgba(13,14,17,0.96));
}
.psc-usecases__intro h2 { margin-top: 10px; }
.psc-usecases__intro p:last-child { color: var(--psc-text-muted); margin-bottom: 0; }
.psc-usecases__signal,
.psc-usecases__note {
  padding: 16px;
  border: 1px solid rgba(0,212,255,0.28);
  border-radius: 12px;
  background: var(--psc-accent-soft);
}
.psc-usecases__signal strong {
  display: block;
  color: var(--psc-accent);
}
.psc-usecases__signal span,
.psc-usecases__note p {
  display: block;
  color: var(--psc-text-muted);
  margin: 6px 0 0;
}
.psc-usecases__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 22px;
}
.psc-usecase-card {
  display: grid;
  gap: 12px;
  padding: 22px;
  border: 1px solid var(--psc-border);
  border-radius: var(--psc-radius);
  background: var(--psc-bg-card);
}
.psc-usecase-card:hover {
  border-color: var(--psc-accent);
}
.psc-usecase-card__room {
  margin: 0 !important;
  color: var(--psc-accent) !important;
  font-size: .82rem;
  font-weight: 800;
  text-transform: uppercase;
}
.psc-usecase-card h3 {
  margin: 0;
}
.psc-usecase-card p {
  margin: 0;
}
.psc-usecase-card dl {
  display: grid;
  gap: 8px;
  margin: 4px 0 0;
}
.psc-usecase-card dt {
  color: var(--psc-white);
  font-weight: 800;
}
.psc-usecase-card dd {
  margin: 0;
  color: var(--psc-text-muted);
}
.psc-usecases__note {
  margin: 1.8rem 0 2.2rem;
}
.psc-usecases__cta {
  margin: 2.4rem 0;
  padding: 26px;
  border: 1px solid var(--psc-border);
  border-radius: var(--psc-radius);
  background: linear-gradient(135deg, rgba(0,212,255,0.10), rgba(255,255,255,0.03));
}
.psc-usecases__cta h2 {
  margin-top: 0;
}
.psc-usecases__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
@media (min-width: 760px) {
  .psc-usecases__intro { grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); }
  .psc-usecases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1080px) {
  .psc-usecases__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .psc-usecases__intro,
  .psc-usecases__cta {
    padding: 18px;
  }
  .psc-usecase-card {
    padding: 18px;
  }
  .psc-usecases__actions .psc-btn {
    width: 100%;
    white-space: normal;
  }
}

/* TCO calculator */
.psc-page-lead {
  max-width: 820px;
  color: var(--psc-text-muted) !important;
  font-size: 1.12rem;
}
.psc-tco {
  margin: 2.4rem 0 3rem;
  padding: 28px;
  border: 1px solid var(--psc-border);
  border-radius: var(--psc-radius);
  background: linear-gradient(180deg, rgba(20,21,24,0.96), rgba(13,14,17,0.96));
}
.psc-tco__intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
  margin-bottom: 26px;
}
.psc-tco__intro h2 { margin-top: 10px; }
.psc-tco__intro p:last-child { color: var(--psc-text-muted); margin-bottom: 0; }
.psc-tco__note {
  display: grid;
  gap: 6px;
  padding: 16px;
  border: 1px solid rgba(0,212,255,0.28);
  border-radius: 12px;
  background: var(--psc-accent-soft);
  color: var(--psc-text-muted);
  font-size: .92rem;
}
.psc-tco__note strong { color: var(--psc-accent); }
.psc-tco__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
}
.psc-tco__form,
.psc-tco__results {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--psc-border);
  border-radius: 12px;
  background: rgba(10,10,10,0.58);
}
.psc-tco__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 14px;
}
.psc-tco__group {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.psc-tco__group label,
.psc-tco__toggle {
  color: var(--psc-text-muted);
  font-size: .88rem;
  font-weight: 700;
}
.psc-tco__group input,
.psc-tco__group select {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  border: 1px solid var(--psc-border);
  border-radius: 10px;
  background: var(--psc-bg);
  color: var(--psc-white);
  font: inherit;
  font-size: 1rem;
}
.psc-tco__group select {
  padding: 0 42px 0 14px;
}
.psc-tco__input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--psc-border);
  border-radius: 10px;
  background: var(--psc-bg);
  overflow: hidden;
}
.psc-tco__input input {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 12px 0 14px;
}
.psc-tco__input span {
  padding: 0 12px;
  color: var(--psc-text-dim);
  font-size: .9rem;
  white-space: nowrap;
}
.psc-tco__group input:focus,
.psc-tco__group select:focus {
  outline: none;
  border-color: var(--psc-accent);
  box-shadow: 0 0 0 3px var(--psc-accent-soft);
}
.psc-tco__input:focus-within {
  border-color: var(--psc-accent);
  box-shadow: 0 0 0 3px var(--psc-accent-soft);
}
.psc-tco__input:focus-within input { box-shadow: none; }
.psc-tco__time {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--psc-border);
}
.psc-tco__toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}
.psc-tco__toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--psc-accent);
}
.psc-tco__kicker {
  margin: 0 0 10px !important;
  color: var(--psc-accent) !important;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}
.psc-tco__total {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--psc-border);
}
.psc-tco__total span,
.psc-tco__rows span,
.psc-tco__compare span {
  display: block;
  color: var(--psc-text-muted);
  font-size: .9rem;
}
.psc-tco__total strong {
  display: block;
  color: var(--psc-white);
  font-size: clamp(2rem, 6vw, 3.1rem);
  line-height: 1;
  margin-top: 6px;
}
.psc-tco__rows,
.psc-tco__compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 18px;
}
.psc-tco__rows div,
.psc-tco__compare div {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--psc-border);
  border-radius: 10px;
  background: var(--psc-bg-card);
}
.psc-tco__rows strong,
.psc-tco__compare strong {
  display: block;
  margin-top: 4px;
  color: var(--psc-white);
  font-size: 1.08rem;
  line-height: 1.25;
}
.psc-tco__compare {
  padding-top: 18px;
  border-top: 1px solid var(--psc-border);
}
.psc-tco__verdict {
  margin: 18px 0 18px !important;
  color: var(--psc-text) !important;
}
.psc-tco__formula,
.psc-tco-next {
  margin-top: 24px;
  padding: 22px;
  border: 1px solid var(--psc-border);
  border-radius: 12px;
  background: var(--psc-bg-card);
}
.psc-tco__formula h3,
.psc-tco-next h2 { margin-top: 0; }
.psc-tco__formula p:last-child,
.psc-tco-next p:last-child { margin-bottom: 0; }
.psc-tco-next .psc-btn {
  margin: 8px 10px 0 0;
  text-decoration: none;
}

@media (min-width: 720px) {
  .psc-tco__intro { grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); }
  .psc-tco__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .psc-tco__time { grid-template-columns: minmax(0, 1fr) minmax(180px, 240px); align-items: end; }
  .psc-tco__rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1060px) {
  .psc-tco__layout { grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); }
  .psc-tco__results { position: sticky; top: calc(var(--psc-nav-h) + 18px); }
}

@media (max-width: 560px) {
  .psc-tco {
    padding: 18px;
    margin-left: -6px;
    margin-right: -6px;
  }
  .psc-tco__form,
  .psc-tco__results,
  .psc-tco__formula,
  .psc-tco-next { padding: 18px; }
  .psc-tco .psc-btn,
  .psc-tco-next .psc-btn {
    width: 100%;
    white-space: normal;
  }
  .psc-tco-next .psc-btn { margin-right: 0; }
}

/* Buyer advisor */
.psc-advisor {
  margin: 2.4rem 0 3rem;
  padding: 28px;
  border: 1px solid var(--psc-border);
  border-radius: var(--psc-radius);
  background: linear-gradient(180deg, rgba(20,21,24,0.96), rgba(13,14,17,0.96));
}
.psc-advisor__intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
  margin-bottom: 26px;
}
.psc-advisor__intro h2 { margin-top: 10px; }
.psc-advisor__intro p:last-child { color: var(--psc-text-muted); margin-bottom: 0; }
.psc-advisor__privacy {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(0,212,255,0.28);
  border-radius: 12px;
  background: var(--psc-accent-soft);
  color: var(--psc-text-muted);
  font-size: .92rem;
}
.psc-advisor__privacy strong { color: var(--psc-accent); }
.psc-advisor__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
}
.psc-advisor__form,
.psc-advisor__result {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--psc-border);
  border-radius: 12px;
  background: rgba(10,10,10,0.58);
}
.psc-advisor__form {
  display: grid;
  gap: 16px;
}
.psc-advisor__question {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.psc-advisor__question label,
.psc-advisor__question legend {
  padding: 0;
  color: var(--psc-text-muted);
  font-size: .88rem;
  font-weight: 800;
}
.psc-advisor__number {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--psc-border);
  border-radius: 10px;
  background: var(--psc-bg);
  overflow: hidden;
}
.psc-advisor__number input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0 12px 0 14px;
  border: 0;
  background: transparent;
  color: var(--psc-white);
  font: inherit;
  font-size: 1rem;
}
.psc-advisor__number span {
  padding: 0 12px;
  color: var(--psc-text-dim);
  font-size: .9rem;
  white-space: nowrap;
}
.psc-advisor__number:focus-within {
  border-color: var(--psc-accent);
  box-shadow: 0 0 0 3px var(--psc-accent-soft);
}
.psc-advisor__number input:focus { outline: none; }
.psc-advisor__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.psc-advisor__options button {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 9px 10px;
  border: 1px solid var(--psc-border);
  border-radius: 10px;
  background: var(--psc-bg-card);
  color: var(--psc-text-muted);
  font: inherit;
  font-size: .9rem;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
  overflow-wrap: anywhere;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.psc-advisor__options button:hover,
.psc-advisor__options button[aria-pressed="true"] {
  border-color: var(--psc-accent);
  background: var(--psc-accent-soft);
  color: var(--psc-white);
}
.psc-advisor__options button:focus-visible {
  outline: 3px solid var(--psc-accent-soft);
  outline-offset: 2px;
  border-color: var(--psc-accent);
}
.psc-advisor__kicker {
  margin: 0 0 10px !important;
  color: var(--psc-accent) !important;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}
.psc-advisor__result h3 {
  margin-top: 0;
  color: var(--psc-white);
  font-size: clamp(1.6rem, 4vw, 2.35rem);
  line-height: 1.08;
}
.psc-advisor__result p {
  color: var(--psc-text-muted);
}
.psc-advisor__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.psc-advisor__actions .psc-btn {
  text-decoration: none;
}
.psc-advisor__note {
  margin-top: 16px !important;
  color: var(--psc-text-dim) !important;
  font-size: .9rem;
}
.psc-advisor-links {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 1.4rem 0 2rem;
}
.psc-advisor-links a {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--psc-border);
  border-radius: 12px;
  background: var(--psc-bg-card);
  text-decoration: none;
}
.psc-advisor-links strong {
  display: block;
  color: var(--psc-white);
}
.psc-advisor-links span {
  display: block;
  margin-top: 5px;
  color: var(--psc-text-muted);
  font-size: .94rem;
}
.psc-advisor-links a:hover {
  border-color: rgba(0,212,255,0.35);
}

@media (min-width: 760px) {
  .psc-advisor__intro { grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); }
  .psc-advisor-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1060px) {
  .psc-advisor__layout { grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr); }
  .psc-advisor__result { position: sticky; top: calc(var(--psc-nav-h) + 18px); }
  .psc-advisor-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .psc-advisor {
    padding: 18px;
    margin-left: -6px;
    margin-right: -6px;
  }
  .psc-advisor__form,
  .psc-advisor__result { padding: 18px; }
  .psc-advisor__options { grid-template-columns: 1fr; }
  .psc-advisor__actions .psc-btn {
    width: 100%;
    white-space: normal;
  }
}

/* Energy planner */
.psc-energy {
  margin: 2.4rem 0 3rem;
  padding: 28px;
  border: 1px solid var(--psc-border);
  border-radius: var(--psc-radius);
  background: linear-gradient(180deg, rgba(20,21,24,0.96), rgba(13,14,17,0.96));
}
.psc-energy__intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
  margin-bottom: 26px;
}
.psc-energy__intro h2 { margin-top: 10px; }
.psc-energy__intro p:last-child { color: var(--psc-text-muted); margin-bottom: 0; }
.psc-energy__privacy {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(0,212,255,0.28);
  border-radius: 12px;
  background: var(--psc-accent-soft);
  color: var(--psc-text-muted);
  font-size: .92rem;
}
.psc-energy__privacy strong { color: var(--psc-accent); }
.psc-energy__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
}
.psc-energy__form,
.psc-energy__result {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--psc-border);
  border-radius: 12px;
  background: rgba(10,10,10,0.58);
}
.psc-energy__form {
  display: grid;
  gap: 18px;
}
.psc-energy__group {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.psc-energy__group legend {
  margin-bottom: 2px;
  padding: 0;
  color: var(--psc-white);
  font-size: .95rem;
  font-weight: 800;
}
.psc-energy__group label {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--psc-border);
  border-radius: 10px;
  background: var(--psc-bg-card);
  color: var(--psc-text-muted);
  font-size: .92rem;
  line-height: 1.35;
  cursor: pointer;
}
.psc-energy__group input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--psc-accent);
}
.psc-energy__group label:has(input:checked) {
  border-color: rgba(0,212,255,0.56);
  background: var(--psc-accent-soft);
  color: var(--psc-white);
}
.psc-energy__group label:focus-within {
  outline: 3px solid var(--psc-accent-soft);
  outline-offset: 2px;
  border-color: var(--psc-accent);
}
.psc-energy__hint {
  margin: 0 !important;
  color: var(--psc-text-dim) !important;
  font-size: .9rem;
}
.psc-energy__kicker {
  margin: 0 0 10px !important;
  color: var(--psc-accent) !important;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}
.psc-energy__result h3 {
  margin-top: 0;
  color: var(--psc-white);
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  line-height: 1.08;
}
.psc-energy__result p { color: var(--psc-text-muted); }
.psc-energy__bullets {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.psc-energy__bullets li {
  position: relative;
  padding-left: 18px;
  color: var(--psc-text-muted);
}
.psc-energy__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--psc-accent);
  box-shadow: 0 0 12px rgba(0,212,255,0.45);
}
.psc-energy__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.psc-energy__actions .psc-btn { text-decoration: none; }
.psc-energy__note {
  margin-top: 16px !important;
  color: var(--psc-text-dim) !important;
  font-size: .9rem;
}

@media (min-width: 760px) {
  .psc-energy__intro { grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); }
}

@media (min-width: 1060px) {
  .psc-energy__layout { grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr); }
  .psc-energy__result { position: sticky; top: calc(var(--psc-nav-h) + 18px); }
}

@media (max-width: 560px) {
  .psc-energy {
    padding: 18px;
    margin-left: -6px;
    margin-right: -6px;
  }
  .psc-energy__form,
  .psc-energy__result { padding: 18px; }
  .psc-energy__actions .psc-btn,
  .psc-energy__form > .psc-btn {
    width: 100%;
    white-space: normal;
  }
}

/* Compatibility checker */
.psc-compat {
  margin: 2.4rem 0 3rem;
  padding: 28px;
  border: 1px solid var(--psc-border);
  border-radius: var(--psc-radius);
  background: linear-gradient(180deg, rgba(20,21,24,0.96), rgba(13,14,17,0.96));
}
.psc-compat__intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: end;
  margin-bottom: 24px;
}
.psc-compat__intro h2 { margin-top: 10px; }
.psc-compat__intro p:last-child { color: var(--psc-text-muted); margin-bottom: 0; }
.psc-compat__summary {
  min-width: 168px;
  padding: 18px;
  border: 1px solid rgba(0,212,255,0.28);
  border-radius: 12px;
  background: var(--psc-accent-soft);
}
.psc-compat__summary strong {
  display: block;
  color: var(--psc-accent);
  font-size: 2rem;
  line-height: 1;
}
.psc-compat__summary span {
  display: block;
  color: var(--psc-text-muted);
  font-size: .9rem;
  margin-top: 6px;
}
.psc-compat__controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.psc-compat__search {
  display: grid;
  gap: 8px;
  color: var(--psc-text-muted);
  font-size: .88rem;
  font-weight: 600;
}
.psc-compat__search input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--psc-border);
  border-radius: 10px;
  background: var(--psc-bg);
  color: var(--psc-white);
  font: inherit;
  font-size: 1rem;
}
.psc-compat__search input:focus {
  outline: none;
  border-color: var(--psc-accent);
  box-shadow: 0 0 0 3px var(--psc-accent-soft);
}
.psc-compat__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.psc-compat__chip {
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid var(--psc-border);
  border-radius: 999px;
  background: var(--psc-bg-card);
  color: var(--psc-text-muted);
  font: inherit;
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.psc-compat__chip:hover,
.psc-compat__chip.is-active {
  border-color: var(--psc-accent);
  background: var(--psc-accent-soft);
  color: var(--psc-white);
}
.psc-compat__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.psc-compat-card {
  min-height: 230px;
  padding: 22px;
  border: 1px solid var(--psc-border);
  border-radius: 12px;
  background: rgba(10,10,10,0.58);
}
.psc-compat-card[hidden] { display: none; }
.psc-compat-card__top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}
.psc-compat-card h3 {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.25;
}
.psc-compat-card p {
  color: var(--psc-text-muted);
  font-size: .97rem;
}
.psc-compat-card__note {
  margin-top: auto;
  color: var(--psc-text-dim) !important;
  font-size: .9rem !important;
}
.psc-status {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.psc-status--direct { color: #5eead4; background: rgba(94,234,212,0.10); }
.psc-status--integration { color: var(--psc-accent); background: var(--psc-accent-soft); }
.psc-status--check { color: #f8c66b; background: rgba(248,198,107,0.10); }
.psc-status--cloud { color: #ff9f8c; background: rgba(255,159,140,0.10); }
.psc-compat__empty {
  margin: 20px 0 0;
  padding: 16px;
  border: 1px solid var(--psc-border);
  border-radius: 10px;
  color: var(--psc-text-muted);
  background: var(--psc-bg);
}
.psc-compat-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 1.6rem 0 2.4rem;
}
.psc-compat-feature {
  padding: 22px;
  border: 1px solid var(--psc-border);
  border-radius: 12px;
  background: var(--psc-bg-card);
}
.psc-compat-feature h3 { margin-top: 0; }
.psc-compat-feature p:last-child { margin-bottom: 0; color: var(--psc-text-muted); }
.psc-compat-next {
  display: grid;
  gap: 12px;
}
.psc-compat-cta {
  margin-top: 2.6rem;
  padding: 28px;
  border: 1px solid rgba(0,212,255,0.35);
  border-radius: var(--psc-radius);
  background:
    linear-gradient(135deg, rgba(0,212,255,0.13), transparent 52%),
    var(--psc-bg-card);
}
.psc-compat-cta p {
  max-width: 720px;
  color: var(--psc-text-muted);
}
.psc-compat-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 18px;
}
.psc-compat-cta__actions .psc-btn {
  text-decoration: none;
}

@media (min-width: 760px) {
  .psc-compat__intro { grid-template-columns: 1fr auto; }
  .psc-compat__controls { grid-template-columns: minmax(260px, 360px) 1fr; align-items: end; }
  .psc-compat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .psc-compat-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1080px) {
  .psc-compat__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .psc-compat { padding: 18px; margin-left: -6px; margin-right: -6px; }
  .psc-compat__filters { gap: 8px; }
  .psc-compat__chip { flex: 1 1 calc(50% - 8px); padding-left: 10px; padding-right: 10px; font-size: .86rem; }
  .psc-compat-card { min-height: 0; padding: 18px; }
  .psc-compat-card__top { flex-direction: column; align-items: flex-start; }
  .psc-status { white-space: normal; }
  .psc-compat-cta__actions .psc-btn { width: 100%; white-space: normal; }
}

/* Public product demo */
.psc-demo {
  margin: 2.4rem 0 3rem;
  padding: 28px;
  border: 1px solid var(--psc-border);
  border-radius: var(--psc-radius);
  background: linear-gradient(180deg, rgba(20,21,24,0.96), rgba(13,14,17,0.96));
}
.psc-demo br,
.psc-demo-next br {
  display: none;
}
.psc-demo__intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
  margin-bottom: 24px;
}
.psc-demo__intro h2 { margin-top: 10px; }
.psc-demo__intro p:last-child { color: var(--psc-text-muted); margin-bottom: 0; }
.psc-demo__signal {
  min-width: 220px;
  padding: 16px;
  border: 1px solid rgba(0,212,255,0.28);
  border-radius: 12px;
  background: var(--psc-accent-soft);
}
.psc-demo__signal strong {
  display: block;
  color: var(--psc-accent);
  line-height: 1.2;
}
.psc-demo__signal span {
  display: block;
  color: var(--psc-text-muted);
  font-size: .9rem;
  margin-top: 6px;
}
.psc-demo__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
}
.psc-demo__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.psc-demo__tab {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid var(--psc-border);
  border-radius: 10px;
  background: rgba(10,10,10,0.58);
  color: var(--psc-text-muted);
  font: inherit;
  font-size: .96rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.psc-demo__tab span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 28px;
  margin-right: 10px;
  border-radius: 8px;
  background: var(--psc-bg-card);
  color: var(--psc-accent);
  font-size: .78rem;
}
.psc-demo__tab:hover,
.psc-demo__tab.is-active {
  border-color: var(--psc-accent);
  background: var(--psc-accent-soft);
  color: var(--psc-white);
}
.psc-demo__viewport {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--psc-border);
  border-radius: 12px;
  background: rgba(10,10,10,0.58);
}
.psc-demo__panel {
  min-height: 430px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: stretch;
}
.psc-demo__panel[hidden] { display: none; }
.psc-demo__panel-copy {
  min-width: 0;
}
.psc-demo__kicker {
  margin: 0 0 10px !important;
  color: var(--psc-accent) !important;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.psc-demo__checks {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}
.psc-demo__checks li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  color: var(--psc-text-muted);
}
.psc-demo__checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--psc-accent);
  box-shadow: 0 0 10px var(--psc-accent-glow);
}
.psc-demo__surface {
  min-width: 0;
  min-height: 300px;
  display: grid;
  gap: 14px;
  align-content: center;
  padding: 22px;
  border: 1px solid var(--psc-border);
  border-radius: 12px;
  background:
    radial-gradient(90% 90% at 50% 0%, rgba(0,212,255,0.12), transparent 62%),
    var(--psc-bg-card);
}
.psc-demo-device {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin: 0 auto;
  padding: 26px 28px;
  border: 1px solid var(--psc-border);
  border-radius: 12px;
  background: linear-gradient(158deg, #1b1d22, #0a0b0d);
  box-shadow: 0 22px 60px -34px var(--psc-accent-glow);
}
.psc-demo-device span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--psc-accent);
  box-shadow: 0 0 14px var(--psc-accent-glow);
}
.psc-demo-device strong { color: var(--psc-white); }
.psc-demo-device small,
.psc-demo-room em,
.psc-demo-path {
  color: var(--psc-text-dim);
  font-size: .86rem;
  font-style: normal;
}
.psc-demo-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.psc-demo-flow span,
.psc-demo-room,
.psc-demo__surface--status div {
  padding: 13px 14px;
  border: 1px solid var(--psc-border);
  border-radius: 10px;
  background: rgba(10,10,10,0.58);
}
.psc-demo-flow i {
  width: 28px;
  height: 1px;
  background: var(--psc-accent);
  opacity: .65;
}
.psc-demo-room {
  display: grid;
  gap: 4px;
}
.psc-demo-room strong,
.psc-demo__surface--status strong {
  color: var(--psc-white);
}
.psc-demo-room span,
.psc-demo__surface--status span {
  color: var(--psc-accent);
  font-size: .88rem;
  font-weight: 700;
}
.psc-demo__surface--list {
  align-content: center;
}
.psc-demo-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 14px;
  border: 1px solid var(--psc-border);
  border-radius: 10px;
  background: rgba(10,10,10,0.58);
  color: var(--psc-text);
}
.psc-demo-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--psc-accent);
}
.psc-demo-chat {
  display: grid;
  gap: 12px;
}
.psc-demo-msg {
  max-width: 86%;
  margin: 0 !important;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: .95rem;
}
.psc-demo-msg--out {
  justify-self: end;
  background: var(--psc-accent);
  color: #04141a !important;
  font-weight: 600;
}
.psc-demo-msg--in {
  justify-self: start;
  border: 1px solid var(--psc-border);
  background: var(--psc-bg-elev);
}
.psc-demo-path {
  margin: 0 !important;
  padding-top: 8px;
  border-top: 1px solid var(--psc-border);
}
.psc-demo__surface--status {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.psc-demo__surface--status div {
  display: grid;
  gap: 5px;
}
.psc-demo__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 18px;
}
.psc-demo__control {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--psc-border);
  border-radius: 10px;
  background: transparent;
  color: var(--psc-text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.psc-demo__control--primary {
  border-color: var(--psc-accent);
  background: var(--psc-accent);
  color: #04141a;
}
.psc-demo__control:disabled {
  cursor: not-allowed;
  opacity: .45;
}
.psc-demo-next {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 1.5rem 0 2.4rem;
}
.psc-demo-next a {
  display: grid;
  gap: 4px;
  padding: 18px;
  border: 1px solid var(--psc-border);
  border-radius: 12px;
  background: var(--psc-bg-card);
  text-decoration: none;
}
.psc-demo-next strong {
  color: var(--psc-white);
}
.psc-demo-next span {
  color: var(--psc-text-muted);
}
.psc-demo-next a:hover {
  border-color: var(--psc-accent);
}

@media (min-width: 760px) {
  .psc-demo__intro { grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); }
  .psc-demo__layout { grid-template-columns: minmax(190px, 240px) minmax(0, 1fr); }
  .psc-demo__panel { grid-template-columns: minmax(0, .88fr) minmax(320px, 1.12fr); }
  .psc-demo-next { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .psc-demo {
    padding: 18px;
    margin-left: -6px;
    margin-right: -6px;
  }
  .psc-demo__viewport,
  .psc-demo__surface { padding: 18px; }
  .psc-demo__panel { min-height: 0; }
  .psc-demo__steps { grid-template-columns: 1fr; }
  .psc-demo__surface--status { grid-template-columns: 1fr; }
  .psc-demo-flow { justify-content: flex-start; }
  .psc-demo-flow i { width: 18px; }
  .psc-demo-msg { max-width: 94%; }
  .psc-demo__controls { justify-content: stretch; }
  .psc-demo__control { flex: 1 1 140px; }
}

/* Blog teaser cards (whole card is a link, with a topic thumbnail banner) */
.psc-card--post {
  display: flex;
  flex-direction: column;
  color: var(--psc-text);
  padding: 0;
  overflow: hidden;
}
.psc-card--post:hover { color: var(--psc-text); }
.psc-card--post__thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 132px;
  background:
    radial-gradient(120% 130% at 28% 18%, rgba(0,212,255,0.20), transparent 58%),
    linear-gradient(135deg, #14161b, #0b0c0f);
  border-bottom: 1px solid var(--psc-border);
}
.psc-card--post__glyph {
  font-size: 46px;
  line-height: 1;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.5));
  transition: transform .25s ease;
}
.psc-card--post:hover .psc-card--post__glyph { transform: scale(1.06); }
.psc-card--post__cat {
  position: absolute;
  top: 12px; left: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--psc-accent);
  background: rgba(0,212,255,0.10);
  border: 1px solid var(--psc-border);
  padding: 4px 11px;
  border-radius: 999px;
}
.psc-card--post__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 22px 24px 26px;
}
.psc-card--post__title {
  font-size: 1.18rem;
  line-height: 1.35;
  margin: 10px 0 12px;
  color: var(--psc-white);
}
.psc-card--post:hover .psc-card--post__title { color: var(--psc-accent); }
.psc-card--post__excerpt {
  color: var(--psc-text-muted);
  font-size: .98rem;
  margin: 0 0 18px;
  flex: 1 1 auto;
}
.psc-card--post .psc-link { margin-top: auto; }
.psc-card--post .psc-postcard__meta { margin: 0; }

/* Pricing tiers */
.psc-pricing {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin: 2rem 0;
}
@media (min-width: 980px) { .psc-pricing { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.psc-tier {
  padding: 30px 26px;
  border: 1px solid var(--psc-border);
  border-radius: var(--psc-radius);
  background: var(--psc-bg-card);
  display: flex;
  flex-direction: column;
}
.psc-tier--featured {
  border-color: var(--psc-accent);
  box-shadow: 0 0 0 1px var(--psc-accent), 0 20px 50px -24px var(--psc-accent-glow);
}
.psc-tier__badge {
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--psc-accent-soft);
  color: var(--psc-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.psc-tier h3 { margin: 0 0 4px; }
.psc-tier__price {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--psc-white);
  letter-spacing: -0.03em;
  margin: 10px 0 2px;
}
.psc-tier__price small { font-size: .9rem; font-weight: 500; color: var(--psc-text-dim); }
.psc-tier__note { color: var(--psc-text-dim); font-size: .9rem; margin-bottom: 18px; }
.psc-tier__features { list-style: none; margin: 0 0 24px; padding: 0; }
.psc-tier__features li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 11px;
  color: var(--psc-text-muted);
}
.psc-tier__features li::before {
  content: "✓";
  position: absolute; left: 0;
  color: var(--psc-accent);
  font-weight: 700;
}
.psc-tier .psc-btn { margin-top: auto; width: 100%; }
.psc-pricing-decision {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 1.6rem 0 2.2rem;
}
@media (min-width: 980px) { .psc-pricing-decision { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.psc-pricing-decision__item,
.psc-pricing-next {
  padding: 24px;
  border: 1px solid var(--psc-border);
  border-radius: var(--psc-radius);
  background: rgba(16,17,20,0.86);
}
.psc-pricing-decision__item h3,
.psc-pricing-next h2 {
  margin-top: 0;
}
.psc-pricing-decision__item p:last-child,
.psc-pricing-next ul:last-child {
  margin-bottom: 0;
}
.psc-pricing-decision__item {
  overflow-wrap: anywhere;
}
.psc-pricing-next {
  margin: 1.8rem 0 2.2rem;
}
.psc-pricing-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 1.8rem;
}
.psc-pricing-cta .psc-btn {
  min-width: min(100%, 220px);
}
@media (max-width: 520px) {
  .psc-pricing-decision__item,
  .psc-pricing-next {
    padding: 20px;
  }
  .psc-pricing-cta .psc-btn {
    width: 100%;
  }
}

/* Stats (investoren) */
.psc-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 2rem 0;
}
@media (min-width: 760px) { .psc-stats { grid-template-columns: repeat(4, 1fr); } }
.psc-stat {
  padding: 24px;
  border: 1px solid var(--psc-border);
  border-radius: var(--psc-radius);
  background: var(--psc-bg-card);
}
.psc-stat__num { font-size: 2rem; font-weight: 800; color: var(--psc-accent); letter-spacing: -0.03em; }
.psc-stat__label { color: var(--psc-text-muted); font-size: .92rem; margin-top: 4px; }

/* Team (ueber-uns) */
.psc-team {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin: 2rem 0;
}
@media (min-width: 720px) { .psc-team { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .psc-team { grid-template-columns: repeat(3, 1fr); } }
.psc-member {
  padding: 26px;
  border: 1px solid var(--psc-border);
  border-radius: var(--psc-radius);
  background: var(--psc-bg-card);
}
.psc-member__avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 800;
  color: #04141a;
  background: linear-gradient(150deg, var(--psc-white), var(--psc-accent) 70%);
  margin-bottom: 16px;
}
.psc-member h3 { margin: 0 0 2px; }
.psc-member__role { color: var(--psc-accent); font-size: .9rem; font-weight: 600; margin-bottom: 12px; }
.psc-member p { color: var(--psc-text-muted); margin-bottom: 0; }
.psc-member__social { margin: 14px 0 0 !important; }
.psc-member__link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .82rem; font-weight: 600; color: var(--psc-accent); opacity: .85;
}
.psc-member__link .psc-in {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 5px;
  background: var(--psc-accent); color: #04141a; font-weight: 800; font-size: .72rem;
}

/* ============================================================
   WAITLIST CTA (site-wide, bottom of every page)
   ============================================================ */
.psc-cta {
  position: relative;
  padding: 92px 0;
  border-top: 1px solid var(--psc-border);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.psc-cta__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(720px 380px at 50% 0%, rgba(0,212,255,0.14), transparent 60%),
    var(--psc-bg-elev);
}
.psc-cta__inner { max-width: 640px; }
.psc-cta .psc-eyebrow { justify-content: center; }
.psc-cta h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin-top: 14px; }
.psc-cta__lead { color: var(--psc-text-muted); font-size: 1.12rem; margin: 0 auto 28px; max-width: 520px; }
.psc-cta__fine { color: var(--psc-text-dim); font-size: 13px; margin-top: 18px; }
.psc-cta__fine a { color: var(--psc-text-muted); text-decoration: underline; }

/* ============================================================
   FORMS — Contact Form 7 (contact/investor/beta) + Newsletter
   ============================================================ */
.psc-form label { display: block; margin-bottom: 16px; color: var(--psc-text); font-size: .95rem; font-weight: 500; }
.psc-form p { margin: 0 0 4px; }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="number"],
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100%;
  margin-top: 6px;
  padding: 13px 15px;
  background: var(--psc-bg-card);
  border: 1px solid var(--psc-border);
  border-radius: 10px;
  color: var(--psc-white);
  font-family: var(--psc-font);
  font-size: 16px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.wpcf7-form textarea { min-height: 140px; resize: vertical; }
.wpcf7-form select { min-height: 50px; }
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder { color: var(--psc-text-dim); }
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
  outline: none;
  border-color: var(--psc-accent);
  box-shadow: 0 0 0 3px var(--psc-accent-soft);
}
.wpcf7-form .wpcf7-not-valid {
  border-color: #e2554f !important;
  box-shadow: 0 0 0 3px rgba(226, 85, 79, 0.12);
}
.wpcf7-form input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--psc-accent);
  color: #04141a;
  font-family: var(--psc-font);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 24px -6px var(--psc-accent-glow);
  transition: transform .18s ease, box-shadow .25s ease;
}
.wpcf7-form input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 34px -6px var(--psc-accent-glow), 0 0 0 1px var(--psc-accent);
}

/* Waitlist inline form (email + submit on one row at wider widths) */
.psc-waitlist-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  max-width: 760px;
  margin: 0 auto;
}
.psc-waitlist-form .psc-waitlist-field {
  flex: 1 1 230px;
  margin: 0;
  color: var(--psc-text-muted);
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.35;
}
.psc-waitlist-form .psc-waitlist-field label {
  display: block;
  text-align: left;
}
.psc-waitlist-form .psc-waitlist-field .wpcf7-form-control-wrap {
  flex: 1 1 240px;
  display: block;
  margin-top: 7px;
}
.psc-waitlist-form input[type="email"],
.psc-waitlist-form input[type="text"],
.psc-waitlist-form select { margin-top: 0; }
.psc-waitlist-form input[type="submit"] { margin-top: 0; flex: 0 0 auto; }

/* DSGVO opt-in consent line — full width below the inputs */
.psc-waitlist-form .psc-waitlist-consent {
  flex: 1 1 100%;
  text-align: left;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--psc-text-muted);
}
.psc-waitlist-form .psc-waitlist-consent .wpcf7-form-control-wrap,
.psc-waitlist-form .psc-waitlist-consent .wpcf7-acceptance,
.psc-waitlist-form .psc-waitlist-consent .wpcf7-list-item { display: inline; margin: 0; }
.psc-waitlist-form .psc-waitlist-consent .wpcf7-list-item-label:empty { display: none; }
.psc-waitlist-form .psc-waitlist-consent label { font-weight: 400; display: inline; }
.psc-waitlist-form .psc-waitlist-consent input[type="checkbox"] {
  width: auto;
  margin: 0 .5rem 0 0;
  accent-color: var(--psc-accent);
  vertical-align: middle;
}
.psc-waitlist-form .psc-waitlist-consent a { color: var(--psc-accent); }

/* The Newsletter Plugin waitlist. The custom shortcode output stays native
   to Newsletter so DOI, subscriber state and service messages remain intact. */
.psc-newsletter {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}
.psc-newsletter__doi-note,
.psc-newsletter__legal {
  max-width: 640px;
  margin-right: auto;
  margin-left: auto;
  color: var(--psc-text-muted);
  font-size: .88rem;
  line-height: 1.55;
}
.psc-newsletter__doi-note { margin-bottom: 18px; }
.psc-newsletter__legal {
  margin-top: 16px;
  margin-bottom: 0;
  color: var(--psc-text-dim);
  font-size: .8rem;
}
.psc-newsletter__legal a {
  color: var(--psc-text-muted);
  text-decoration: underline;
  text-underline-offset: .16em;
}
.psc-newsletter form.psc-newsletter__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
}
.psc-newsletter form.psc-newsletter__form .tnp-field {
  min-width: 0;
  margin: 0 !important;
  padding: 0;
  border: 0;
}
.psc-newsletter form.psc-newsletter__form .tnp-field-email { flex: 1 1 320px; }
.psc-newsletter form.psc-newsletter__form .tnp-field-button {
  flex: 0 0 auto;
  align-self: flex-end;
}
.psc-newsletter form.psc-newsletter__form .tnp-field-privacy {
  display: flex;
  flex: 1 1 100%;
  align-items: flex-start;
  gap: 9px;
  margin-top: 2px !important;
}
.psc-newsletter form.psc-newsletter__form label {
  display: block;
  margin: 0 0 7px;
  color: var(--psc-text-muted);
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.4;
}
.psc-newsletter form.psc-newsletter__form input.tnp-email {
  display: block;
  width: 100%;
  min-height: 50px;
  margin: 0;
  padding: 13px 15px;
  border: 1px solid var(--psc-border);
  border-radius: 10px;
  background: var(--psc-bg-card);
  color: var(--psc-white);
  font-family: var(--psc-font);
  font-size: 16px;
  line-height: 1.4;
  box-shadow: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.psc-newsletter form.psc-newsletter__form input.tnp-email::placeholder { color: var(--psc-text-dim); }
.psc-newsletter form.psc-newsletter__form input.tnp-email:focus {
  outline: none;
  border-color: var(--psc-accent);
  box-shadow: 0 0 0 3px var(--psc-accent-soft);
}
.psc-newsletter form.psc-newsletter__form input.tnp-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 50px;
  margin: 0;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--psc-accent);
  color: #04141a;
  font-family: var(--psc-font);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 6px 24px -6px var(--psc-accent-glow);
  transition: transform .18s ease, box-shadow .25s ease;
}
.psc-newsletter form.psc-newsletter__form input.tnp-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 34px -6px var(--psc-accent-glow), 0 0 0 1px var(--psc-accent);
}
.psc-newsletter form.psc-newsletter__form input.tnp-submit:focus-visible {
  outline: 3px solid var(--psc-white);
  outline-offset: 3px;
}
.psc-newsletter form.psc-newsletter__form input.tnp-submit:disabled {
  cursor: wait;
  opacity: .68;
}
.psc-newsletter form.psc-newsletter__form input.tnp-privacy {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--psc-accent);
}
.psc-newsletter form.psc-newsletter__form .tnp-field-privacy label {
  margin: 0;
  color: var(--psc-text-muted);
  font-size: .82rem;
  font-weight: 400;
  line-height: 1.5;
}
.psc-newsletter form.psc-newsletter__form > p,
.psc-newsletter form.psc-newsletter__form > div:not(.tnp-field) {
  flex: 1 1 100%;
}
.psc-newsletter__fallback {
  padding: 20px;
  border: 1px solid var(--psc-border);
  border-radius: var(--psc-radius);
  background: rgba(10,10,10,0.55);
  text-align: center;
}
.psc-newsletter__fallback p {
  max-width: 560px;
  margin: 0 auto 16px;
  color: var(--psc-text-muted);
}

/* DSGVO consent line inside the stacked contact form */
.psc-form .psc-consent { font-size: .85rem; color: var(--psc-text-muted); line-height: 1.5; }
.psc-form .psc-consent label { font-weight: 400; }
.psc-form .psc-consent input[type="checkbox"] {
  width: auto;
  margin: 0 .5rem 0 0;
  accent-color: var(--psc-accent);
  vertical-align: middle;
}

.psc-form--beta {
  margin-top: 1.4rem;
  padding: 24px;
  border: 1px solid var(--psc-border);
  border-radius: var(--psc-radius);
  background: rgba(10,10,10,0.58);
}
.psc-form--beta p:last-child { margin-bottom: 0; }

@media (max-width: 560px) {
  .psc-form--beta {
    padding: 18px;
    margin-left: -6px;
    margin-right: -6px;
  }
  .psc-form--beta input[type="submit"] {
    width: 100%;
    white-space: normal;
  }
}

/* CF7 response + validation messaging */
.wpcf7 form .wpcf7-response-output {
  margin: 18px 0 0;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--psc-border);
  color: var(--psc-text);
  font-size: .92rem;
  line-height: 1.45;
  background: var(--psc-bg-card);
}
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--psc-accent); background: var(--psc-accent-soft); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-color: #e2554f; color: #ffb4b0; }
.wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  color: #ffb4b0;
  font-size: .85rem;
  line-height: 1.35;
}
.wpcf7-spinner { margin: 0 0 0 10px; }

@media (max-width: 560px) {
  .psc-waitlist-form { align-items: stretch; }
  .psc-waitlist-form .psc-waitlist-field,
  .psc-waitlist-form input[type="submit"] {
    width: 100%;
    flex-basis: 100%;
  }
  .psc-newsletter form.psc-newsletter__form .tnp-field-email,
  .psc-newsletter form.psc-newsletter__form .tnp-field-button {
    flex: 1 1 100%;
  }
  .psc-newsletter form.psc-newsletter__form input.tnp-submit { width: 100%; }
  .psc-newsletter__doi-note,
  .psc-newsletter__legal { text-align: left; }
}

/* ============================================================
   HERO SHOWCASE — product cube + Telegram chat with Hermes
   (replaces the old CSS-box device; later rule overrides earlier)
   ============================================================ */
.psc-hero__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: none;
}
.psc-showcase {
  position: relative;
  width: min(420px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  isolation: isolate;
}
.psc-showcase__glow {
  position: absolute;
  inset: -12% -10% 8%;
  z-index: -1;
  background: radial-gradient(60% 50% at 50% 30%, var(--psc-accent-soft), transparent 72%);
  filter: blur(30px);
}

/* product cube */
.psc-cube {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: psc-cube-float 7s ease-in-out infinite;
}
@keyframes psc-cube-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.psc-cube svg { filter: drop-shadow(0 18px 40px rgba(0,0,0,0.55)) drop-shadow(0 0 22px var(--psc-accent-glow)); }
.psc-cube__led { animation: psc-cube-pulse 1.8s ease-in-out infinite; }
.psc-cube__led:nth-of-type(2) { animation-delay: .25s; }
.psc-cube__led:nth-of-type(3) { animation-delay: .5s; }
@keyframes psc-cube-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .3; }
}
.psc-cube__tag {
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--psc-text-dim);
  text-transform: uppercase;
}

/* Telegram chat mockup */
.psc-chat {
  width: 100%;
  margin: 0;
  border: 1px solid var(--psc-border);
  border-radius: 16px;
  background: linear-gradient(170deg, var(--psc-bg-card), var(--psc-bg-elev));
  box-shadow: 0 26px 60px -28px rgba(0,0,0,0.8), 0 0 0 1px rgba(0,212,255,0.05);
  overflow: hidden;
}
.psc-chat__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--psc-border);
  background: rgba(255,255,255,0.02);
}
.psc-chat__avatar {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 17px;
  color: #04141a;
  background: linear-gradient(150deg, var(--psc-white), var(--psc-accent) 70%);
}
.psc-chat__id { display: flex; flex-direction: column; line-height: 1.3; margin-right: auto; }
.psc-chat__id strong { color: var(--psc-white); font-size: 15px; }
.psc-chat__id small { color: var(--psc-accent); font-size: 12px; }
.psc-chat__tg { flex: none; opacity: .9; }
.psc-chat__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 16px 20px;
}
.psc-msg {
  position: relative;
  max-width: 84%;
  margin: 0;
  padding: 11px 14px 22px;
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--psc-text);
}
.psc-msg--out {
  align-self: flex-end;
  background: var(--psc-accent);
  color: #04141a;
  border-bottom-right-radius: 4px;
  font-weight: 500;
}
.psc-msg--in {
  align-self: flex-start;
  background: var(--psc-bg-elev);
  border: 1px solid var(--psc-border);
  border-bottom-left-radius: 4px;
}
.psc-msg--in strong { color: var(--psc-white); }
.psc-msg__path {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--psc-text-muted);
}
.psc-msg__cta {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--psc-accent-soft);
  color: var(--psc-accent);
  font-size: 12.5px;
  font-weight: 600;
}
.psc-msg__t {
  position: absolute;
  right: 12px; bottom: 7px;
  font-size: 10.5px;
  opacity: .65;
}
.psc-msg--out .psc-msg__t { color: #04141a; }
.psc-msg--in .psc-msg__t { color: var(--psc-text-dim); }

/* stat chips under the hero visual */
.psc-hero__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
}
.psc-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid var(--psc-border);
  border-radius: 999px;
  background: var(--psc-bg-card);
  font-size: 13px;
  color: var(--psc-text-muted);
}
.psc-chip b { color: var(--psc-accent); font-size: 16px; font-weight: 800; }

/* ============================================================
   FRONT-PAGE SECTIONS — split layout, checklist, notes, accent
   ============================================================ */
.psc-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  margin-top: 8px;
}
@media (min-width: 980px) {
  .psc-split { grid-template-columns: 1fr 1fr; gap: 48px; }
}
.psc-split__text { max-width: 520px; }
.psc-chat--lg { max-width: 440px; }
.psc-chat--lg .psc-msg { max-width: 88%; }

.psc-checklist { list-style: none; margin: 0 0 22px; padding: 0; }
.psc-checklist li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 14px;
  color: var(--psc-text-muted);
}
.psc-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0; top: -1px;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--psc-accent-soft);
  color: var(--psc-accent);
  font-size: 12px; font-weight: 800;
}

.psc-section__note {
  margin-top: 22px;
  color: var(--psc-text-dim);
  font-size: .95rem;
}

.psc-section--accent {
  overflow: hidden;
  isolation: isolate;
}
.psc-section--accent::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(720px 380px at 50% 0%, rgba(0,212,255,0.12), transparent 60%),
    var(--psc-bg-elev);
}
.psc-section--accent .psc-waitlist-wrap { margin-top: 26px; }

@media (max-width: 560px) {
  .psc-showcase { width: 100%; }
  .psc-msg { max-width: 90%; }
}

@media (prefers-reduced-motion: reduce) {
  .psc-cube, .psc-cube__led { animation: none !important; }
}

/* ============================================================
   2.1 POLISH — responsive shell, motion and interaction a11y
   ============================================================ */

/* A clearly visible keyboard state across links, controls and form fields. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--psc-accent) !important;
  outline-offset: 4px;
}

.psc-btn:focus-visible,
.psc-burger:focus-visible,
.psc-lang__opt:focus-visible {
  box-shadow: 0 0 0 5px rgba(0, 212, 255, 0.18);
}

/* Current-page state works with WordPress classes and the JS fallback. */
.psc-nav__links .current-menu-item > a,
.psc-nav__links .current_page_item > a,
.psc-nav__links a[aria-current="page"] {
  color: var(--psc-white);
}

.psc-nav__links .current-menu-item > a::after,
.psc-nav__links .current_page_item > a::after,
.psc-nav__links a[aria-current="page"]::after,
.psc-nav__links a:focus-visible::after {
  width: 100%;
}

.psc-hero__col {
  max-width: 720px;
}

.psc-hero h1 {
  max-width: 19ch;
  font-size: clamp(2.1rem, 4.4vw, 3.65rem);
  text-wrap: balance;
}

.psc-hero__sub {
  max-width: 64ch;
  font-size: clamp(1.05rem, 1.45vw, 1.3rem);
}

.psc-section__head h1,
.psc-section__head h2,
.psc-cta__inner h2 {
  text-wrap: balance;
}

.psc-showcase {
  width: min(clamp(340px, 34vw, 470px), 100%);
}

.psc-cube svg {
  width: clamp(148px, 11vw, 190px);
  height: auto;
}

/* Added only by JS, so content stays visible if scripting is unavailable. */
.psc-motion-ready .psc-reveal {
  opacity: 0;
  translate: 0 24px;
  will-change: opacity, translate;
}

.psc-motion-ready .psc-reveal--hero.psc-hero__visual {
  translate: 24px 0;
}

.psc-motion-ready .psc-reveal.is-visible {
  animation: psc-reveal-in 720ms cubic-bezier(.2, .72, .25, 1) forwards;
  animation-delay: var(--psc-reveal-delay, 0ms);
}

.psc-motion-ready .psc-reveal:focus-within {
  opacity: 1;
  translate: none;
  animation: none;
}

@keyframes psc-reveal-in {
  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* The header and hero switch together, removing the cramped 861–979px band. */
@media (max-width: 979px) {
  body.psc-menu-open {
    overflow: hidden;
  }

  .psc-nav__links {
    position: fixed;
    inset: var(--psc-nav-h) 0 auto 0;
    max-height: calc(100vh - var(--psc-nav-h));
    max-height: calc(100dvh - var(--psc-nav-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 22px clamp(32px, 4.4vw, 48px) 30px;
    background: rgba(10, 10, 10, 0.98);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border-bottom: 1px solid var(--psc-border);
    box-shadow: 0 24px 44px rgba(0, 0, 0, 0.38);
    visibility: hidden;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: visibility 0s linear .24s, opacity .22s ease, transform .22s ease;
  }

  .psc-nav.is-open .psc-nav__links {
    visibility: visible;
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
  }

  .psc-nav__links a {
    width: 100%;
    padding: 12px 0;
    font-size: 17px;
  }

  .psc-nav__links a::after {
    display: none;
  }

  .psc-nav__links .current-menu-item > a,
  .psc-nav__links .current_page_item > a,
  .psc-nav__links a[aria-current="page"] {
    text-decoration: underline;
    text-decoration-color: var(--psc-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 7px;
  }

  .psc-burger {
    display: inline-flex;
  }

  .psc-hero {
    min-height: auto;
    padding: calc(var(--psc-nav-h) + 58px) 0 88px;
  }

  .psc-hero__layout {
    grid-template-columns: 1fr;
    gap: 52px;
  }

  .psc-footer__inner {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .psc-footer__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Spacious, consistent tablet gutters including both iPad orientations. */
@media (min-width: 600px) and (max-width: 1199px) {
  .psc-container,
  .psc-nav__inner {
    padding-left: clamp(32px, 4.4vw, 48px);
    padding-right: clamp(32px, 4.4vw, 48px);
  }
}

/* Keep the desktop header composed immediately above its mobile breakpoint. */
@media (min-width: 980px) and (max-width: 1120px) {
  .psc-nav__links {
    gap: 11px;
  }

  .psc-nav__links a {
    font-size: 13px;
  }

  .psc-nav__cta {
    gap: 9px;
  }

  .psc-nav__cta .psc-btn {
    padding-inline: 12px;
  }

  .psc-lang__opt {
    padding-inline: 7px;
  }
}

@media (max-width: 599px) {
  .psc-container,
  .psc-nav__inner {
    padding-left: 20px;
    padding-right: 20px;
  }

  .psc-nav__links {
    padding-left: 20px;
    padding-right: 20px;
  }

  .psc-hero h1 {
    max-width: 17ch;
  }

  .psc-hero {
    padding-top: calc(var(--psc-nav-h) + 44px);
    padding-bottom: 68px;
  }

  .psc-hero__layout {
    gap: 44px;
  }

  .psc-footer__nav {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 480px) {
  .psc-logo > span:last-child { display: none; }
}

@media (max-width: 430px) {
  .psc-container,
  .psc-nav__inner {
    padding-left: 16px;
    padding-right: 16px;
  }

  .psc-nav__links {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* 4K / ultrawide: a larger shell and type scale without overlong copy lines. */
@media (min-width: 1800px) {
  body {
    font-size: 18px;
  }

  .psc-container,
  .psc-nav__inner {
    padding-left: 64px;
    padding-right: 64px;
  }

  .psc-hero {
    min-height: min(100vh, 1280px);
    padding-top: calc(var(--psc-nav-h) + 82px);
    padding-bottom: 112px;
  }

  .psc-hero__layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(440px, .95fr);
    gap: 88px;
  }

  .psc-hero__col {
    max-width: 780px;
  }

  .psc-hero h1 {
    max-width: 18ch;
    font-size: clamp(3.75rem, 2.1vw, 4.75rem);
  }

  .psc-hero__sub {
    max-width: 62ch;
    font-size: 1.3rem;
  }

  .psc-showcase {
    width: min(540px, 100%);
  }

  .psc-section {
    padding-top: 118px;
    padding-bottom: 118px;
  }

  .psc-section--compact {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .psc-section__head {
    max-width: 760px;
  }

  .psc-section h2 {
    font-size: clamp(2rem, 1.15vw, 2.5rem);
  }

  .psc-page h1,
  .psc-single h1,
  .psc-blog h1 {
    max-width: 24ch;
    font-size: clamp(2rem, 1.2vw, 2.65rem);
  }

  .psc-prose:not(.psc-prose--wide) {
    max-width: 980px;
  }

  .psc-grid,
  .psc-bloglist,
  .psc-pricing,
  .psc-team {
    gap: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .psc-motion-ready .psc-reveal,
  .psc-motion-ready .psc-reveal--hero.psc-hero__visual,
  .psc-motion-ready .psc-reveal.is-visible {
    opacity: 1 !important;
    translate: none !important;
    animation: none !important;
    will-change: auto;
  }
}

@media print {
  .psc-motion-ready .psc-reveal,
  .psc-motion-ready .psc-reveal--hero.psc-hero__visual,
  .psc-motion-ready .psc-reveal.is-visible {
    opacity: 1 !important;
    translate: none !important;
    animation: none !important;
    will-change: auto;
  }
}

/* ============================================================
   2.3 EDITORIAL SYSTEM — journal hierarchy and long-form reading
   ============================================================ */

/* The journal follows the shared stage width but stops expanding before its
   three-column composition becomes a five-column dashboard on ultrawide
   screens. The article shell is wider than the reading measure so the prose
   width never loses space to the global 4K gutter. */
.psc-journal-shell {
  width: min(100%, var(--psc-max), 1780px);
  max-width: none;
}

.psc-article-shell {
  width: min(100%, var(--psc-max), 1500px);
  max-width: none;
}

.psc-journal {
  overflow: hidden;
  padding-top: calc(var(--psc-nav-h) + clamp(50px, 6vw, 94px));
  padding-bottom: clamp(92px, 9vw, 142px);
}

.psc-journal-head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  align-items: end;
  gap: clamp(34px, 6vw, 88px);
  margin-bottom: 28px;
  padding-bottom: clamp(34px, 4vw, 56px);
  border-bottom: 1px solid var(--psc-border);
}

.psc-journal-head h1 {
  max-width: 15ch;
  margin: 18px 0 0;
  font-size: clamp(2.8rem, 5vw, 5rem);
  line-height: .98;
  letter-spacing: -.06em;
  text-wrap: balance;
}

.psc-journal-head__lead {
  max-width: 40ch;
  margin: 0;
  color: var(--psc-text-muted);
  font-size: var(--psc-step-0);
  line-height: 1.65;
}

.psc-story-topics {
  margin: 0 0 clamp(32px, 4vw, 52px);
}

.psc-story-topics ul {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.psc-story-topics a {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--psc-border);
  border-radius: 999px;
  background: rgba(15, 32, 49, .66);
  padding: 8px 14px;
  color: var(--psc-text-muted);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .015em;
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}

.psc-story-topics a:hover,
.psc-story-topics a[aria-current="page"] {
  border-color: rgba(115, 229, 194, .5);
  background: var(--psc-local-soft);
  color: var(--psc-white);
}

.psc-story-topics a:hover { transform: translateY(-2px); }

.psc-story-topics__dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--psc-accent);
  box-shadow: 0 0 10px rgba(32, 215, 242, .38);
}

.psc-story-topics__dot--server { background: var(--psc-local); box-shadow: 0 0 10px rgba(115, 229, 194, .36); }
.psc-story-topics__dot--privacy { background: var(--psc-home); box-shadow: 0 0 10px rgba(241, 183, 104, .36); }
.psc-story-topics__dot--ai { background: #b99cff; box-shadow: 0 0 10px rgba(185, 156, 255, .38); }

.psc-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 2vw, 28px);
  align-items: stretch;
}

.psc-story-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--psc-border);
  border-radius: 20px;
  background:
    linear-gradient(155deg, rgba(20, 42, 63, .84), rgba(8, 23, 36, .98));
  box-shadow: 0 24px 64px -48px rgba(0, 0, 0, .94);
  transition: border-color .25s ease, transform .25s ease, box-shadow .3s ease;
}

.psc-story-card::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0 auto 0 0;
  width: 2px;
  background: linear-gradient(transparent, var(--psc-local), transparent);
  opacity: .46;
  pointer-events: none;
}

.psc-story-card:hover,
.psc-story-card:focus-within {
  border-color: rgba(115, 229, 194, .5);
  transform: translateY(-5px);
  box-shadow: 0 34px 80px -48px rgba(32, 215, 242, .38);
}

.psc-story-card__link {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  color: var(--psc-text);
}

.psc-story-card__link:hover { color: var(--psc-text); }

.psc-story-card__link:focus-visible {
  outline-offset: -5px !important;
  border-radius: inherit;
}

.psc-story-cover {
  --psc-story-accent: var(--psc-accent);
  --psc-story-soft: rgba(32, 215, 242, .18);
  position: relative;
  isolation: isolate;
  display: block;
  min-height: 178px;
  overflow: hidden;
  border-bottom: 1px solid var(--psc-border);
  background:
    radial-gradient(circle at 72% 28%, var(--psc-story-soft), transparent 30%),
    linear-gradient(138deg, #102a40, #071522 62%, #0c2032);
}

.psc-story-cover--server { --psc-story-accent: var(--psc-local); --psc-story-soft: rgba(115, 229, 194, .2); }
.psc-story-cover--privacy { --psc-story-accent: var(--psc-home); --psc-story-soft: rgba(241, 183, 104, .2); }
.psc-story-cover--ai { --psc-story-accent: #b99cff; --psc-story-soft: rgba(185, 156, 255, .2); }

.psc-story-cover::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(115deg, rgba(6, 16, 26, .12), rgba(6, 16, 26, .52));
  pointer-events: none;
}

.psc-story-cover__image {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  object-fit: cover;
  opacity: .62;
}

.psc-story-cover__grid {
  position: absolute;
  z-index: 1;
  inset: 0;
  opacity: .45;
  background-image:
    linear-gradient(rgba(173, 205, 229, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(173, 205, 229, .08) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(115deg, #000, transparent 72%);
  -webkit-mask-image: linear-gradient(115deg, #000, transparent 72%);
}

.psc-story-cover__signal {
  position: absolute;
  z-index: 2;
  left: 24px;
  top: 28px;
  width: 46%;
  height: 2px;
  background: linear-gradient(90deg, var(--psc-story-accent), transparent);
  transform: rotate(-8deg);
  transform-origin: left;
  box-shadow: 0 0 18px var(--psc-story-soft);
}

.psc-story-cover__topic,
.psc-story-cover__index,
.psc-story-cover__glyph {
  position: absolute;
  z-index: 2;
}

.psc-story-cover__topic {
  left: 22px;
  bottom: 18px;
  color: rgba(238, 245, 251, .76);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.psc-story-cover__index {
  right: 22px;
  bottom: 15px;
  color: rgba(255, 255, 255, .9);
  font-size: clamp(2.6rem, 5vw, 5rem);
  font-weight: 800;
  line-height: .78;
  letter-spacing: -.08em;
}

.psc-story-cover__glyph {
  display: grid;
  place-items: center;
  right: 23px;
  top: 20px;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 17px;
  background: rgba(6, 16, 26, .5);
  color: var(--psc-story-accent);
  box-shadow: 0 18px 40px -24px #000;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.psc-story-cover__glyph svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.psc-story-card__body {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  padding: clamp(22px, 2.4vw, 32px);
}

.psc-story-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--psc-text-dim);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.psc-story-card__category { color: var(--psc-local); }

.psc-story-card__title {
  margin: 16px 0 12px;
  color: var(--psc-white);
  font-size: clamp(1.2rem, 1.35vw, 1.55rem);
  line-height: 1.18;
  letter-spacing: -.035em;
  text-wrap: balance;
  transition: color .2s ease;
}

.psc-story-card:hover .psc-story-card__title,
.psc-story-card:focus-within .psc-story-card__title { color: var(--psc-accent); }

.psc-story-card__excerpt {
  margin: 0;
  color: var(--psc-text-muted);
  font-size: .93rem;
  line-height: 1.62;
}

.psc-story-card__action {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 24px;
  color: var(--psc-accent);
  font-size: .82rem;
  font-weight: 800;
}

.psc-story-card.is-featured .psc-story-cover { min-height: 320px; }
.psc-story-card.is-featured .psc-story-card__body { padding: clamp(28px, 3vw, 42px); }
.psc-story-card.is-featured .psc-story-card__title { max-width: 19ch; font-size: clamp(2rem, 3vw, 3.35rem); line-height: 1.04; }
.psc-story-card.is-featured .psc-story-card__excerpt { max-width: 60ch; font-size: var(--psc-step-0); }

.psc-story-grid--home { margin-top: clamp(28px, 4vw, 48px); margin-bottom: 28px; }
.psc-story-grid--related .psc-story-cover { min-height: 144px; }
.psc-story-grid--related .psc-story-card__body { padding: 22px; }
.psc-story-grid--related .psc-story-card__title { font-size: clamp(1.08rem, 1.1vw, 1.28rem); }
.psc-story-grid--related .psc-story-card__excerpt { font-size: .86rem; }

.psc-journal-empty {
  display: grid;
  justify-items: start;
  gap: 18px;
  max-width: 620px;
  border: 1px solid var(--psc-border);
  border-radius: 18px;
  background: var(--psc-bg-card);
  padding: 28px;
}

.psc-journal-empty p { margin: 0; color: var(--psc-text-muted); }

.psc-journal .pagination { margin-top: clamp(40px, 6vw, 72px); }
.psc-journal .nav-links { justify-content: center; }

/* Single article: the outer stage owns gutters, while the reading column
   retains a stable 760–780px measure at desktop and 4K. */
.psc-article-page {
  padding-top: calc(var(--psc-nav-h) + clamp(52px, 6vw, 96px));
  padding-bottom: clamp(94px, 9vw, 150px);
}

.psc-article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  justify-content: center;
}

.psc-article-main { min-width: 0; }

.psc-article-header {
  position: relative;
  margin-bottom: clamp(28px, 4vw, 44px);
  padding-bottom: clamp(28px, 3vw, 40px);
  border-bottom: 1px solid var(--psc-border);
}

.psc-article-header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 132px;
  height: 2px;
  background: linear-gradient(90deg, var(--psc-local), var(--psc-accent));
}

.psc-article-header__topic { width: max-content; }

.psc-article-header h1 {
  max-width: 15ch;
  margin: 20px 0 18px;
  font-size: clamp(2.5rem, 4.7vw, 4.8rem);
  line-height: .98;
  letter-spacing: -.058em;
  text-wrap: balance;
}

.psc-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  color: var(--psc-text-dim);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.psc-story-cover--article {
  min-height: clamp(230px, 28vw, 410px);
  margin-bottom: clamp(34px, 5vw, 60px);
  border: 1px solid var(--psc-border);
  border-radius: 22px;
  box-shadow: 0 32px 86px -54px rgba(32, 215, 242, .38);
}

.psc-story-cover--article .psc-story-cover__glyph {
  right: clamp(24px, 4vw, 48px);
  top: clamp(24px, 4vw, 46px);
  width: clamp(68px, 8vw, 104px);
  height: clamp(68px, 8vw, 104px);
  border-radius: 24px;
}

.psc-story-cover--article .psc-story-cover__glyph svg { width: 48%; height: 48%; }
.psc-story-cover--article .psc-story-cover__topic { left: clamp(24px, 4vw, 48px); bottom: clamp(24px, 4vw, 42px); }
.psc-story-cover--article .psc-story-cover__signal { left: clamp(24px, 4vw, 48px); top: clamp(34px, 5vw, 62px); }

.psc-article-prose {
  max-width: none !important;
  margin: 0;
  font-size: clamp(1.02rem, .98rem + .14vw, 1.16rem);
  line-height: 1.78;
}

.psc-article-prose > h2 { margin-top: 2.45em; }
.psc-article-prose > h3 { margin-top: 2em; }

.psc-article-toc-mobile,
.psc-article-toc,
.psc-article-context {
  border: 1px solid var(--psc-border);
  border-radius: 16px;
  background: rgba(10, 23, 36, .82);
  box-shadow: 0 24px 60px -48px #000;
}

.psc-article-toc-mobile[hidden],
.psc-article-toc[hidden] { display: none !important; }

.psc-article-toc-mobile {
  margin-bottom: 34px;
  padding: 0;
}

.psc-article-toc-mobile summary {
  cursor: pointer;
  padding: 16px 18px;
  color: var(--psc-white);
  font-weight: 750;
}

.psc-article-toc-mobile ol,
.psc-article-toc ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.psc-article-toc-mobile ol { padding: 0 18px 18px; }

.psc-article-toc-mobile a,
.psc-article-toc a {
  display: block;
  border-left: 1px solid var(--psc-border);
  padding: 5px 0 5px 12px;
  color: var(--psc-text-muted);
  font-size: .8rem;
  line-height: 1.4;
}

.psc-article-toc-mobile a:hover,
.psc-article-toc-mobile a.is-current,
.psc-article-toc a:hover,
.psc-article-toc a.is-current {
  border-left-color: var(--psc-local);
  color: var(--psc-white);
}

.psc-article-aside { display: none; }

.psc-article-toc {
  max-height: calc(100svh - var(--psc-nav-h) - 118px);
  overflow: auto;
  padding: 20px;
  scrollbar-width: thin;
  scrollbar-color: var(--psc-border-strong) transparent;
}

.psc-article-toc > span {
  display: block;
  margin-bottom: 16px;
  color: var(--psc-local);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.psc-article-context {
  display: grid;
  gap: 12px;
  padding: 22px;
  background:
    linear-gradient(145deg, rgba(115, 229, 194, .08), transparent 56%),
    rgba(10, 23, 36, .9);
}

.psc-article-context p { margin: 0; color: var(--psc-text-muted); font-size: .86rem; line-height: 1.55; }
.psc-article-context > a { font-size: .8rem; font-weight: 800; }

.psc-related {
  margin-top: clamp(72px, 9vw, 128px);
  padding-top: clamp(54px, 7vw, 88px);
  border-top: 1px solid var(--psc-border);
}

.psc-related__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, .7fr);
  align-items: end;
  gap: 20px 48px;
  margin-bottom: 34px;
}

.psc-related__head .psc-eyebrow { grid-column: 1 / -1; margin: 0; }
.psc-related__head h2 { margin: 0; font-size: var(--psc-step-2); }
.psc-related__head > p:last-child { margin: 0; color: var(--psc-text-muted); }

.psc-article-navigation {
  display: grid;
  gap: 26px;
  margin-top: clamp(60px, 8vw, 108px);
  padding-top: 34px;
  border-top: 1px solid var(--psc-border);
}

.psc-article-navigation .navigation { margin: 0; }
.psc-article-navigation .nav-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; }
.psc-article-navigation .nav-previous,
.psc-article-navigation .nav-next { min-width: 0; }
.psc-article-navigation .nav-next { text-align: right; }

.psc-article-navigation .nav-links a {
  display: block;
  min-height: 100%;
  border: 1px solid var(--psc-border);
  border-radius: 14px;
  background: rgba(15, 32, 49, .62);
  padding: 16px 18px;
  color: var(--psc-text-muted);
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.45;
}

.psc-article-navigation .nav-links a:hover { border-color: var(--psc-accent); color: var(--psc-white); }
.psc-article-navigation__back { justify-self: start; }

.psc-article-main .psc-share { margin-top: clamp(44px, 6vw, 68px); }

@media (min-width: 700px) {
  .psc-story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .psc-story-grid--archive > .psc-story-card.is-featured { grid-column: 1 / -1; }

  .psc-story-card.is-featured .psc-story-card__link {
    display: grid;
    grid-template-columns: minmax(260px, .88fr) minmax(0, 1.12fr);
  }

  .psc-story-card.is-featured .psc-story-cover {
    min-height: 390px;
    border-right: 1px solid var(--psc-border);
    border-bottom: 0;
  }
}

@media (min-width: 1100px) {
  .psc-story-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .psc-story-grid--archive > .psc-story-card.is-featured {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

@media (min-width: 1180px) {
  .psc-article-layout {
    grid-template-columns: minmax(0, 780px) minmax(240px, 300px);
    gap: clamp(62px, 6vw, 100px);
  }

  .psc-article-aside {
    position: sticky;
    top: calc(var(--psc-nav-h) + 30px);
    display: grid;
    gap: 14px;
  }

  .psc-article-toc-mobile { display: none !important; }
}

@media (max-width: 860px) {
  .psc-journal-head,
  .psc-related__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .psc-journal-head__lead { max-width: 58ch; }
  .psc-related__head .psc-eyebrow { grid-column: auto; }
}

@media (max-width: 699px) {
  .psc-journal { padding-top: calc(var(--psc-nav-h) + 46px); }
  .psc-journal-head { gap: 22px; padding-bottom: 30px; }
  .psc-journal-head h1 { font-size: clamp(2.55rem, 12vw, 3.4rem); }
  .psc-story-topics ul { flex-wrap: nowrap; margin-inline: -18px; padding-inline: 18px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .psc-story-topics ul::-webkit-scrollbar { display: none; }
  .psc-story-topics li { flex: none; scroll-snap-align: start; }
  .psc-story-cover { min-height: 190px; }
  .psc-story-card.is-featured .psc-story-cover { min-height: 220px; }
  .psc-story-card.is-featured .psc-story-card__title { font-size: clamp(1.65rem, 8.2vw, 2.2rem); }
  .psc-story-card.is-featured .psc-story-card__excerpt { font-size: .96rem; }
  .psc-article-header h1 { font-size: clamp(2.35rem, 11.5vw, 3.25rem); }
  .psc-story-cover--article { min-height: 210px; border-radius: 17px; }
  .psc-article-navigation .nav-links { grid-template-columns: minmax(0, 1fr); }
  .psc-article-navigation .nav-next { text-align: left; }
}

@media (min-width: 1800px) {
  .psc-journal-head h1 { font-size: clamp(4.5rem, 2.5vw, 5.6rem); }
  .psc-story-card__title { font-size: clamp(1.35rem, .8vw, 1.7rem); }
  .psc-story-card.is-featured .psc-story-card__title { font-size: clamp(2.8rem, 1.7vw, 3.7rem); }
  .psc-article-header h1 { font-size: clamp(4rem, 2.1vw, 5rem); }
  .psc-article-prose { font-size: clamp(1.12rem, .58vw, 1.28rem); }
}

@media (prefers-reduced-motion: reduce) {
  .psc-story-card,
  .psc-story-topics a { transition: none !important; }
  .psc-story-card:hover,
  .psc-story-card:focus-within,
  .psc-story-topics a:hover { transform: none; }
}

@media print {
  .psc-story-topics,
  .psc-article-aside,
  .psc-article-toc-mobile,
  .psc-related,
  .psc-article-navigation,
  .psc-share { display: none !important; }
  .psc-article-shell { width: 100%; padding: 0; }
  .psc-article-layout { display: block; }
}

/* ============================================================
   2.2 QUIET INFRASTRUCTURE — product-led depth and scale
   ============================================================ */

body {
  min-width: 320px;
  background:
    radial-gradient(1100px 760px at 88% -12%, rgba(32, 215, 242, 0.09), transparent 62%),
    radial-gradient(900px 640px at -10% 42%, rgba(115, 229, 194, 0.055), transparent 66%),
    var(--psc-bg);
  font-size: var(--psc-step-0);
}

.psc-container {
  padding-left: clamp(20px, 3vw, 56px);
  padding-right: clamp(20px, 3vw, 56px);
}

.psc-section {
  padding: clamp(76px, 8vw, 132px) 0;
  border-top-color: var(--psc-border);
}

.psc-section--compact {
  padding: clamp(44px, 5vw, 76px) 0;
}

.psc-section__head {
  max-width: 760px;
  margin-bottom: clamp(28px, 4vw, 50px);
}

.psc-section__head--wide {
  max-width: 920px;
}

.psc-section__head--center {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.psc-section__head--center .psc-eyebrow {
  justify-content: center;
}

.psc-section__head--center .psc-section__lead {
  margin-right: auto;
  margin-left: auto;
}

.psc-section h2,
.psc-cta h2 {
  font-size: var(--psc-step-3);
  line-height: 1.02;
  letter-spacing: -0.048em;
}

.psc-section__lead,
.psc-page-lead {
  font-size: var(--psc-step-1);
  line-height: 1.6;
}

.psc-eyebrow {
  gap: 10px;
  color: var(--psc-local);
  font-size: clamp(0.72rem, 0.68rem + 0.12vw, 0.84rem);
  letter-spacing: 0.11em;
}

.psc-eyebrow::before {
  background: var(--psc-local);
  box-shadow: 0 0 14px rgba(115, 229, 194, 0.38);
}

/* Pre-paint targets are injected synchronously by the header bootstrap from
   the same selector contract consumed by motion.js. No JS means no prehide. */

.psc-motion-ready .psc-reveal {
  opacity: 0;
  translate: 0 22px;
  scale: 1;
  will-change: opacity, translate, scale;
}

.psc-motion-ready .psc-reveal--left { translate: -18px 12px; }
.psc-motion-ready .psc-reveal--right { translate: 18px 12px; }
.psc-motion-ready .psc-reveal--visual { translate: 28px 0; scale: .985; }

.psc-motion-ready .psc-reveal.is-visible {
  animation: psc-reveal-in-22 760ms cubic-bezier(.2, .72, .22, 1) forwards;
  animation-delay: var(--psc-reveal-delay, 0ms);
}

@keyframes psc-reveal-in-22 {
  to { opacity: 1; translate: 0 0; scale: 1; }
}

/* Shell */
.psc-nav {
  background: rgba(6, 16, 26, 0.7);
  border-bottom-color: rgba(173, 205, 229, 0.08);
  backdrop-filter: saturate(150%) blur(20px);
  -webkit-backdrop-filter: saturate(150%) blur(20px);
}

.psc-nav.is-scrolled {
  background: rgba(6, 16, 26, 0.93);
  border-bottom-color: var(--psc-border);
  box-shadow: 0 18px 48px -38px rgba(0, 0, 0, .9);
}

.psc-logo__mark {
  background: linear-gradient(145deg, #f8fcff 0%, var(--psc-accent) 58%, var(--psc-local) 100%);
  box-shadow: 0 0 22px -5px var(--psc-accent-glow);
}

.psc-btn {
  min-height: 46px;
  padding: 12px 23px;
  border-radius: 12px;
}

.psc-btn--primary {
  background: linear-gradient(135deg, #58e8f8 0%, var(--psc-accent) 48%, #67e2d3 118%);
  box-shadow: 0 12px 34px -14px var(--psc-accent-glow), inset 0 1px rgba(255, 255, 255, .42);
}

.psc-btn--ghost {
  background: rgba(9, 23, 37, .72);
  border-color: var(--psc-border-strong);
}

/* Hero */
.psc-hero {
  min-height: min(1080px, 100svh);
  padding: calc(var(--psc-nav-h) + clamp(58px, 7vw, 112px)) 0 clamp(110px, 10vw, 154px);
  border-bottom: 1px solid var(--psc-border);
}

.psc-hero__bg {
  background:
    radial-gradient(880px 700px at 76% 30%, rgba(32, 215, 242, .15), transparent 65%),
    radial-gradient(720px 560px at 18% 84%, rgba(115, 229, 194, .07), transparent 68%),
    linear-gradient(145deg, #06101a 0%, #07131f 48%, #06101a 100%);
}

.psc-hero__grid {
  background-image:
    linear-gradient(to right, rgba(173, 205, 229, .055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(173, 205, 229, .055) 1px, transparent 1px);
  background-size: clamp(46px, 4vw, 72px) clamp(46px, 4vw, 72px);
  mask-image: radial-gradient(ellipse 88% 78% at 53% 42%, #000 26%, transparent 84%);
  -webkit-mask-image: radial-gradient(ellipse 88% 78% at 53% 42%, #000 26%, transparent 84%);
}

.psc-hero__layout {
  gap: clamp(54px, 6vw, 112px);
}

.psc-hero__col {
  max-width: 720px;
}

.psc-hero h1 {
  max-width: 12ch;
  margin-top: 24px;
  font-size: var(--psc-step-4);
  line-height: .96;
  letter-spacing: -.065em;
}

.psc-hero h1 .psc-grad {
  background: linear-gradient(105deg, var(--psc-accent) 10%, var(--psc-local) 85%);
  -webkit-background-clip: text;
  background-clip: text;
}

.psc-hero__sub {
  max-width: 57ch;
  margin-top: 28px;
  color: #c1ced9;
  font-size: var(--psc-step-1);
  line-height: 1.62;
}

.psc-hero__actions {
  margin-top: 34px;
}

.psc-hero__status {
  display: grid;
  gap: 12px;
  max-width: 680px;
  margin-top: 34px;
  padding: 20px 22px;
  border: 1px solid var(--psc-border);
  border-left: 3px solid var(--psc-home);
  border-radius: 0 var(--psc-radius) var(--psc-radius) 0;
  background: linear-gradient(135deg, rgba(20, 42, 63, .82), rgba(8, 23, 36, .72));
  box-shadow: var(--psc-shadow);
}

.psc-hero__status-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.psc-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  padding: 6px 10px;
  border: 1px solid var(--psc-border-strong);
  border-radius: 999px;
  background: rgba(6, 16, 26, .72);
  color: var(--psc-text);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .05em;
  line-height: 1.1;
  text-transform: uppercase;
}

.psc-status-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--psc-accent);
  box-shadow: 0 0 12px var(--psc-accent-glow);
}

.psc-status-pill--local {
  border-color: rgba(115, 229, 194, .34);
  background: var(--psc-local-soft);
  color: var(--psc-local);
}

.psc-status-pill--local::before { background: var(--psc-local); }
.psc-status-pill--home { border-color: rgba(241, 183, 104, .36); background: var(--psc-home-soft); color: #ffd69c; }
.psc-status-pill--home::before { background: var(--psc-home); box-shadow: 0 0 12px rgba(241, 183, 104, .35); }

.psc-hero__status p {
  max-width: 72ch;
  margin: 0;
  color: var(--psc-text-muted);
  font-size: clamp(.82rem, .78rem + .12vw, .94rem);
  line-height: 1.55;
}

.psc-hero__status a {
  width: fit-content;
  color: var(--psc-local);
  font-size: .84rem;
  font-weight: 750;
}

.psc-hero__scroll {
  color: var(--psc-text-dim);
}

/* Hero product topology */
.psc-hero__visual {
  min-width: 0;
}

.psc-showcase.psc-topology {
  width: min(100%, 760px);
  min-height: 650px;
  padding: 20px;
  border: 1px solid var(--psc-border);
  border-radius: var(--psc-radius-lg);
  background:
    linear-gradient(rgba(173, 205, 229, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(173, 205, 229, .04) 1px, transparent 1px),
    linear-gradient(155deg, rgba(15, 32, 49, .92), rgba(6, 16, 26, .82));
  background-size: 44px 44px, 44px 44px, auto;
  box-shadow: 0 42px 100px -58px rgba(0, 0, 0, .95), inset 0 1px rgba(255, 255, 255, .05);
  overflow: hidden;
}

.psc-showcase__glow {
  inset: -12% -8% 0;
  background: radial-gradient(60% 52% at 50% 43%, rgba(32, 215, 242, .2), transparent 72%);
  filter: blur(46px);
}

.psc-topology__bar {
  position: relative;
  z-index: 4;
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 5px 2px 16px;
  border-bottom: 1px solid var(--psc-border);
}

.psc-topology__bar span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--psc-local);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.psc-topology__bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--psc-local);
  box-shadow: 0 0 14px rgba(115, 229, 194, .5);
}

.psc-topology__bar small,
.psc-topology__footnote {
  color: var(--psc-text-dim);
  font-size: .72rem;
}

.psc-topology__stage {
  position: relative;
  width: 100%;
  height: 520px;
}

.psc-topology__paths {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.psc-topology__path {
  fill: none;
  stroke: url(#nnPathCyan);
  stroke-width: 2;
  stroke-dasharray: 7 9;
  animation: psc-data-path 9s linear infinite;
}

.psc-topology__path--local { stroke: var(--psc-local); stroke-opacity: .56; }

@keyframes psc-data-path { to { stroke-dashoffset: -160; } }

.psc-topology__boundary {
  position: absolute;
  inset: 38px 14px 28px 192px;
  border: 1px dashed rgba(115, 229, 194, .34);
  border-radius: 26px;
  pointer-events: none;
}

.psc-topology__boundary span {
  position: absolute;
  top: -12px;
  right: 22px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--psc-bg-card);
  color: var(--psc-local);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.psc-topology__node {
  position: absolute;
  z-index: 3;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 1px 11px;
  min-width: 148px;
  padding: 12px 14px;
  border: 1px solid var(--psc-border);
  border-radius: 14px;
  background: rgba(8, 23, 36, .94);
  box-shadow: 0 20px 50px -34px rgba(0, 0, 0, .9);
}

.psc-topology__node svg {
  grid-row: 1 / 3;
  align-self: center;
  width: 32px;
  height: 32px;
  fill: none;
  stroke: var(--psc-accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.psc-topology__node strong { color: var(--psc-white); font-size: .82rem; }
.psc-topology__node small { color: var(--psc-text-dim); font-size: .67rem; }
.psc-topology__node--upstream { left: 0; top: 208px; }
.psc-topology__node--home { right: 6px; top: 68px; }
.psc-topology__node--server { right: 6px; bottom: 54px; }
.psc-topology__node--home svg { stroke: var(--psc-home); }
.psc-topology__node--server svg { stroke: var(--psc-local); }

.psc-cube--hero {
  position: absolute;
  z-index: 3;
  left: 51%;
  top: 50%;
  translate: -50% -50%;
  gap: 2px;
}

.psc-cube--hero svg {
  width: clamp(230px, 19vw, 300px);
  height: auto;
  filter: drop-shadow(0 32px 60px rgba(0, 0, 0, .62)) drop-shadow(0 0 34px rgba(32, 215, 242, .22));
}

.psc-cube--hero strong {
  color: var(--psc-white);
  font-size: 1.05rem;
  letter-spacing: -.02em;
}

.psc-cube--hero small {
  color: var(--psc-local);
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.psc-chat--hero {
  position: absolute;
  z-index: 5;
  right: 28px;
  bottom: 20px;
  width: min(310px, 48%);
  border-color: var(--psc-border-strong);
  box-shadow: 0 28px 64px -34px rgba(0, 0, 0, .92);
}

.psc-chat--hero .psc-chat__bar { padding: 10px 12px; }
.psc-chat--hero .psc-chat__avatar { width: 30px; height: 30px; font-size: 13px; }
.psc-chat--hero .psc-chat__id strong { font-size: 12px; }
.psc-chat--hero .psc-chat__id small { font-size: 9px; }
.psc-chat--hero .psc-chat__body { gap: 8px; padding: 10px 12px 12px; }
.psc-chat--hero .psc-msg { padding: 8px 10px 17px; font-size: 10.5px; line-height: 1.35; }
.psc-chat--hero .psc-msg__path { font-size: 9px; }
.psc-chat--hero .psc-msg__t { right: 8px; bottom: 4px; font-size: 8px; }

.psc-topology__footnote {
  position: absolute;
  z-index: 4;
  left: 24px;
  bottom: 13px;
  max-width: 210px;
  margin: 0;
}

/* Proof rail */
.psc-proof-section {
  position: relative;
  z-index: 2;
  padding: 0 0 clamp(44px, 5vw, 72px);
  background: linear-gradient(180deg, rgba(10, 23, 36, .92), var(--psc-bg));
}

.psc-proof-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: -36px;
  border: 1px solid var(--psc-border);
  border-radius: var(--psc-radius-lg);
  background: rgba(10, 23, 36, .94);
  box-shadow: var(--psc-shadow);
  overflow: hidden;
}

.psc-proof-rail > div {
  position: relative;
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 24px 24px 24px 46px;
}

.psc-proof-rail > div + div { border-left: 1px solid var(--psc-border); }

.psc-proof-rail__mark {
  position: absolute;
  left: 24px;
  top: 31px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--psc-accent);
  box-shadow: 0 0 14px var(--psc-accent-glow);
}

.psc-proof-rail__mark--local { background: var(--psc-local); }
.psc-proof-rail__mark--home { background: var(--psc-home); }
.psc-proof-rail strong { color: var(--psc-white); font-size: .9rem; }
.psc-proof-rail small { color: var(--psc-text-dim); font-size: .78rem; line-height: 1.45; }

/* Architecture */
.psc-section--architecture {
  border-top: 0;
  background:
    radial-gradient(760px 540px at 82% 48%, rgba(32, 215, 242, .09), transparent 68%),
    linear-gradient(180deg, var(--psc-bg), #071522);
}

.psc-architecture {
  display: grid;
  gap: clamp(52px, 7vw, 110px);
  align-items: center;
}

.psc-architecture__copy { max-width: 690px; }
.psc-architecture__copy h2 { margin-top: 18px; }
.psc-architecture__copy .psc-section__lead { max-width: 62ch; }

.psc-architecture__steps {
  display: grid;
  gap: 0;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.psc-architecture__steps li {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 16px;
  padding: 0 0 26px;
}

.psc-architecture__steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 20px;
  top: 35px;
  bottom: 3px;
  width: 1px;
  background: linear-gradient(var(--psc-accent), rgba(32, 215, 242, .08));
}

.psc-architecture__steps li > span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(32, 215, 242, .36);
  border-radius: 50%;
  background: var(--psc-bg-elev);
  color: var(--psc-accent);
  font-size: .72rem;
  font-weight: 800;
}

.psc-architecture__steps strong { color: var(--psc-white); font-size: 1rem; }
.psc-architecture__steps p { max-width: 58ch; margin: 4px 0 0; color: var(--psc-text-muted); font-size: .92rem; }
.psc-architecture__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }

.psc-architecture__visual {
  min-width: 0;
}

.psc-blueprint {
  position: relative;
  min-height: 590px;
  border: 1px solid var(--psc-border);
  border-radius: var(--psc-radius-lg);
  background:
    linear-gradient(rgba(173, 205, 229, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(173, 205, 229, .05) 1px, transparent 1px),
    linear-gradient(145deg, rgba(15, 32, 49, .96), rgba(7, 21, 34, .96));
  background-size: 38px 38px, 38px 38px, auto;
  box-shadow: var(--psc-shadow), inset 0 1px rgba(255, 255, 255, .04);
  overflow: hidden;
}

.psc-blueprint::before {
  content: "";
  position: absolute;
  inset: 72px 34px 42px;
  border: 1px dashed rgba(115, 229, 194, .28);
  border-radius: 22px;
}

.psc-blueprint__head {
  display: flex;
  justify-content: space-between;
  padding: 22px 24px;
  border-bottom: 1px solid var(--psc-border);
  color: var(--psc-local);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .1em;
}

.psc-blueprint__head small { color: var(--psc-text-dim); letter-spacing: .04em; }

.psc-blueprint > svg {
  position: absolute;
  inset: 70px 0 40px;
  width: 100%;
  height: calc(100% - 110px);
  fill: none;
  stroke: var(--psc-accent);
  stroke-width: 1.8;
  stroke-dasharray: 5 8;
  opacity: .5;
}

.psc-blueprint__core,
.psc-blueprint__room {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 3px;
  border: 1px solid var(--psc-border-strong);
  background: rgba(8, 23, 36, .94);
  box-shadow: 0 22px 48px -36px #000;
}

.psc-blueprint__core {
  left: 50%;
  top: 50%;
  translate: -50% -44%;
  place-items: center;
  width: 152px;
  height: 152px;
  border-color: rgba(32, 215, 242, .54);
  border-radius: 32px;
  background: linear-gradient(145deg, rgba(20, 42, 63, .98), rgba(6, 16, 26, .98));
}

.psc-blueprint__core > span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--psc-accent), var(--psc-local));
  color: #04141a;
  font-size: 1.35rem;
  font-weight: 900;
}

.psc-blueprint__core strong { color: var(--psc-white); }
.psc-blueprint__core small { color: var(--psc-local); font-size: .72rem; }

.psc-blueprint__room {
  width: 190px;
  padding: 16px;
  border-radius: 15px;
}

.psc-blueprint__room span { color: var(--psc-text-dim); font-size: .72rem; font-weight: 750; text-transform: uppercase; }
.psc-blueprint__room strong { color: var(--psc-text); font-size: .82rem; }
.psc-blueprint__room i { width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--psc-local); box-shadow: 0 0 12px rgba(115, 229, 194, .44); }
.psc-blueprint__room--living { left: 42px; top: 110px; }
.psc-blueprint__room--energy { left: 42px; bottom: 68px; }
.psc-blueprint__room--office { right: 42px; top: 110px; }
.psc-blueprint__room--entry { right: 42px; bottom: 68px; }
.psc-blueprint__room--living i,
.psc-blueprint__room--entry i { background: var(--psc-home); box-shadow: 0 0 12px rgba(241, 183, 104, .4); }
.psc-blueprint > p { position: absolute; left: 42px; bottom: 15px; margin: 0; color: var(--psc-text-dim); font-size: .68rem; }

/* Outcomes, beta and journal */
.psc-section--outcomes {
  background: linear-gradient(180deg, #071522, var(--psc-bg));
}

.psc-outcome-grid { align-items: stretch; }

.psc-card,
.psc-postcard,
.psc-tier,
.psc-member,
.psc-pricing-decision__item,
.psc-pricing-next,
.psc-demo-next a,
.psc-advisor-links a {
  border-color: var(--psc-border);
  background: linear-gradient(155deg, rgba(20, 42, 63, .82), rgba(10, 23, 36, .92));
  box-shadow: 0 24px 60px -48px rgba(0, 0, 0, .92), inset 0 1px rgba(255, 255, 255, .035);
}

.psc-card {
  position: relative;
  padding: clamp(24px, 2.4vw, 36px);
  overflow: hidden;
}

.psc-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: linear-gradient(transparent, rgba(32, 215, 242, .72), transparent);
  opacity: .55;
}

.psc-card:hover {
  border-color: rgba(32, 215, 242, .44);
  transform: translateY(-4px);
  box-shadow: 0 28px 70px -42px rgba(32, 215, 242, .28);
}

.psc-card__icon {
  width: 54px;
  height: 54px;
  border: 1px solid rgba(32, 215, 242, .18);
  border-radius: 15px;
  background: var(--psc-accent-soft);
}

.psc-card__icon svg,
.psc-card--post__glyph svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.psc-outcome-card { min-height: 300px; }
.psc-outcome-card h3 { margin-top: auto; font-size: var(--psc-step-1); }
.psc-outcome-card--local .psc-card__icon { color: var(--psc-local); border-color: rgba(115, 229, 194, .25); background: var(--psc-local-soft); }
.psc-outcome-card--home .psc-card__icon { color: var(--psc-home); border-color: rgba(241, 183, 104, .26); background: var(--psc-home-soft); }
.psc-outcome-card--home::before { background: linear-gradient(transparent, var(--psc-home), transparent); }

.psc-section--beta {
  background:
    radial-gradient(720px 340px at 12% 48%, rgba(241, 183, 104, .08), transparent 70%),
    var(--psc-bg-elev);
}

.psc-beta-stage {
  display: grid;
  gap: clamp(34px, 5vw, 74px);
  align-items: center;
  padding: clamp(30px, 4vw, 58px);
  border: 1px solid var(--psc-border);
  border-radius: var(--psc-radius-lg);
  background: linear-gradient(135deg, rgba(20, 42, 63, .92), rgba(8, 23, 36, .96));
  box-shadow: var(--psc-shadow), inset 0 1px rgba(255, 255, 255, .04);
}

.psc-beta-stage h2 { max-width: 20ch; margin-top: 18px; font-size: var(--psc-step-3); }
.psc-beta-stage__copy > p { max-width: 66ch; color: var(--psc-text-muted); }
.psc-beta-stage__actions { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 26px; }

.psc-beta-stage__track {
  position: relative;
  display: grid;
  gap: 16px;
}

.psc-beta-stage__track::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 30px;
  bottom: 30px;
  width: 1px;
  background: linear-gradient(var(--psc-home), var(--psc-border), var(--psc-border));
}

.psc-beta-stage__track > div {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 2px 14px;
  padding: 14px 16px;
  border: 1px solid var(--psc-border);
  border-radius: 14px;
  background: rgba(6, 16, 26, .72);
}

.psc-beta-stage__track span {
  grid-row: 1 / 3;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--psc-border-strong);
  border-radius: 50%;
  background: var(--psc-bg-card);
  color: var(--psc-text-dim);
  font-size: .7rem;
  font-weight: 800;
}

.psc-beta-stage__track .is-current { border-color: rgba(241, 183, 104, .32); background: var(--psc-home-soft); }
.psc-beta-stage__track .is-current span { color: var(--psc-home); border-color: rgba(241, 183, 104, .5); }
.psc-beta-stage__track strong { color: var(--psc-white); font-size: .9rem; }
.psc-beta-stage__track small { color: var(--psc-text-dim); font-size: .76rem; }

.psc-section--journal {
  background:
    radial-gradient(760px 400px at 88% 0%, rgba(32, 215, 242, .075), transparent 68%),
    var(--psc-bg);
}

.psc-card--post__thumb {
  min-height: 150px;
  background:
    radial-gradient(circle at 70% 26%, rgba(32, 215, 242, .2), transparent 34%),
    linear-gradient(135deg, #0f2031, #071522);
}

.psc-card--post__glyph {
  color: var(--psc-local);
  font-size: 0;
}

.psc-card--post__glyph svg { width: 58px; height: 58px; }

.psc-home-waitlist {
  background:
    radial-gradient(760px 420px at 50% 0%, rgba(32, 215, 242, .14), transparent 65%),
    linear-gradient(180deg, var(--psc-bg-elev), #08131f);
}

.psc-home-waitlist .psc-container--narrow { max-width: 980px; }
.psc-home-waitlist .psc-section__lead { max-width: 760px; font-size: 1rem; }

/* Inner pages and interactive product surfaces */
main.psc-page,
main.psc-blog,
main.psc-single {
  position: relative;
  isolation: isolate;
  border-top: 0;
  background:
    radial-gradient(880px 480px at 78% 4%, rgba(32, 215, 242, .1), transparent 66%),
    linear-gradient(180deg, #071522 0, var(--psc-bg) 430px);
}

main.psc-page::before,
main.psc-blog::before,
main.psc-single::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 410px;
  border-bottom: 1px solid rgba(173, 205, 229, .09);
  background-image:
    linear-gradient(rgba(173, 205, 229, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(173, 205, 229, .035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(#000, transparent);
  -webkit-mask-image: linear-gradient(#000, transparent);
}

.psc-page .psc-section__head,
.psc-blog .psc-section__head,
.psc-single .psc-section__head {
  max-width: 980px;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-bottom: clamp(46px, 6vw, 76px);
  padding-bottom: 30px;
  border-bottom: 1px solid var(--psc-border);
}

.psc-page h1,
.psc-single h1,
.psc-blog h1 {
  max-width: 24ch;
  font-size: var(--psc-step-3);
  line-height: 1.02;
  letter-spacing: -.05em;
  text-wrap: balance;
}

.psc-prose {
  font-size: var(--psc-step-0);
}

.psc-prose:not(.psc-prose--wide) { max-width: 980px; }
.psc-prose h2 { font-size: var(--psc-step-2); line-height: 1.08; }
.psc-prose h3 { font-size: var(--psc-step-1); }

.psc-prose blockquote,
.psc-disclaimer {
  border: 1px solid rgba(241, 183, 104, .26);
  border-left: 3px solid var(--psc-home);
  border-radius: 0 14px 14px 0;
  background: var(--psc-home-soft);
  color: var(--psc-text-muted);
  font-style: normal;
}

.psc-disclaimer { padding: 16px 18px; }

.psc-prose table {
  border-radius: 14px;
  background: rgba(10, 23, 36, .66);
  box-shadow: 0 24px 60px -50px #000;
  overflow: hidden;
}

.psc-prose thead th { background: var(--psc-bg-raised); }

.psc-demo,
.psc-advisor,
.psc-tco,
.psc-energy,
.psc-compat,
.psc-usecases__intro {
  border-color: var(--psc-border-strong);
  border-radius: var(--psc-radius-lg);
  background:
    radial-gradient(620px 300px at 88% 0%, rgba(32, 215, 242, .095), transparent 68%),
    linear-gradient(155deg, rgba(20, 42, 63, .92), rgba(8, 23, 36, .96));
  box-shadow: var(--psc-shadow), inset 0 1px rgba(255, 255, 255, .04);
}

.psc-demo__viewport,
.psc-advisor__form,
.psc-advisor__result,
.psc-tco__form,
.psc-tco__results,
.psc-energy__form,
.psc-energy__result {
  border-color: var(--psc-border);
  background: rgba(6, 16, 26, .72);
}

.psc-demo__surface {
  background:
    radial-gradient(90% 90% at 50% 0%, rgba(32, 215, 242, .13), transparent 62%),
    var(--psc-bg-card);
}

.psc-advisor__privacy,
.psc-energy__privacy,
.psc-demo__signal,
.psc-tco__note {
  border-color: rgba(115, 229, 194, .28);
  background: var(--psc-local-soft);
}

.psc-advisor__privacy strong,
.psc-energy__privacy strong,
.psc-demo__signal strong,
.psc-tco__note strong { color: var(--psc-local); }

.psc-advisor__options button,
.psc-energy__group label,
.psc-demo__tab {
  background: rgba(15, 32, 49, .78);
}

/* Tablet-safe demo: never activate the nested split before it can retain a
   useful copy measure. The two-column desktop composition starts at 1180px. */
.psc-demo__layout,
.psc-demo__panel {
  grid-template-columns: minmax(0, 1fr);
}

.psc-demo__panel-copy,
.psc-demo__surface,
.psc-demo__viewport { min-width: 0; }

@media (min-width: 760px) and (max-width: 1179px) {
  .psc-demo__steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
  }

  .psc-demo__tab {
    min-width: 0;
    padding: 10px 8px;
    text-align: center;
    line-height: 1.2;
  }

  .psc-demo__tab span {
    display: flex;
    margin: 0 auto 7px;
  }
}

@media (min-width: 1180px) {
  .psc-demo__layout { grid-template-columns: minmax(190px, 240px) minmax(0, 1fr); }
  .psc-demo__panel { grid-template-columns: minmax(260px, .88fr) minmax(320px, 1.12fr); }
}

.psc-pricing {
  gap: clamp(18px, 2.2vw, 30px);
  align-items: stretch;
}

.psc-tier {
  height: 100%;
  padding: clamp(26px, 2.4vw, 38px);
  border-radius: var(--psc-radius-lg);
}

.psc-tier--featured {
  border-color: rgba(32, 215, 242, .68);
  background:
    radial-gradient(460px 260px at 50% 0%, rgba(32, 215, 242, .12), transparent 70%),
    linear-gradient(155deg, rgba(20, 42, 63, .96), rgba(8, 23, 36, .98));
  box-shadow: 0 0 0 1px rgba(32, 215, 242, .18), 0 32px 80px -48px rgba(32, 215, 242, .34);
}

.psc-tier__price { font-size: clamp(2.25rem, 3.5vw, 3.4rem); }

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="number"],
.wpcf7-form select,
.wpcf7-form textarea,
.psc-newsletter form.psc-newsletter__form input[type="email"] {
  border-color: var(--psc-border);
  background: rgba(6, 16, 26, .82);
}

/* Footer */
.psc-footer {
  padding: clamp(58px, 6vw, 92px) 0 34px;
  background:
    radial-gradient(700px 360px at 14% 0%, rgba(32, 215, 242, .075), transparent 70%),
    #081521;
}

.psc-footer__inner { gap: clamp(38px, 5vw, 74px); }
.psc-footer__brand p { max-width: 360px; }
.psc-footer__nav { gap: clamp(22px, 3vw, 46px); }
.psc-footer__group h2 { color: var(--psc-local); letter-spacing: .07em; }
.psc-footer__group ul { gap: 9px; }

/* Mobile/tablet shell */
@media (max-width: 1099px) {
  .psc-hero {
    min-height: auto;
    padding-top: calc(var(--psc-nav-h) + 68px);
  }

  .psc-hero__layout { grid-template-columns: minmax(0, 1fr); }
  .psc-hero__col { max-width: 820px; }
  .psc-hero h1 { max-width: 12ch; }
  .psc-hero__visual { width: 100%; }
  .psc-showcase.psc-topology { width: min(100%, 820px); margin: 0 auto; }

  .psc-architecture { grid-template-columns: minmax(0, 1fr); }
  .psc-architecture__copy { max-width: 820px; }
  .psc-architecture__visual { width: min(100%, 820px); }

  .psc-beta-stage { grid-template-columns: minmax(0, 1fr); }
  .psc-beta-stage__track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .psc-beta-stage__track::before { left: 10%; right: 10%; top: 34px; bottom: auto; width: auto; height: 1px; }
  .psc-beta-stage__track > div { grid-template-columns: 40px minmax(0, 1fr); }
}

@media (min-width: 1100px) {
  .psc-hero__layout { grid-template-columns: minmax(0, .92fr) minmax(540px, 1.08fr); align-items: center; }
  .psc-architecture { grid-template-columns: minmax(0, .88fr) minmax(560px, 1.12fr); }
  .psc-beta-stage { grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr); }
}

@media (max-width: 979px) {
  .psc-nav__links {
    inset: var(--psc-nav-h) 0 0;
    width: 100%;
    height: calc(100vh - var(--psc-nav-h));
    height: calc(100dvh - var(--psc-nav-h));
    max-height: none;
    gap: 2px;
    padding: clamp(28px, 6vw, 52px) clamp(24px, 6vw, 52px) 44px;
    background:
      radial-gradient(640px 420px at 82% 0%, rgba(32, 215, 242, .12), transparent 70%),
      rgba(6, 16, 26, .985);
    border-bottom: 0;
    box-shadow: none;
  }

  .psc-nav__links a {
    padding: 10px 0;
    color: var(--psc-text-muted);
    font-size: clamp(1.15rem, 3vw, 1.45rem);
    font-weight: 650;
  }
}

@media (max-width: 759px) {
  .psc-proof-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .psc-proof-rail > div + div { border-left: 0; }
  .psc-proof-rail > div:nth-child(even) { border-left: 1px solid var(--psc-border); }
  .psc-proof-rail > div:nth-child(n + 3) { border-top: 1px solid var(--psc-border); }

  .psc-beta-stage__track { grid-template-columns: minmax(0, 1fr); }
  .psc-beta-stage__track::before { left: 19px; right: auto; top: 30px; bottom: 30px; width: 1px; height: auto; }

  .psc-blueprint { min-height: 700px; }
  .psc-blueprint::before { inset: 72px 20px 42px; }
  .psc-blueprint__core { top: 50%; }
  .psc-blueprint__room { width: calc(50% - 38px); }
  .psc-blueprint__room--living { left: 24px; top: 98px; }
  .psc-blueprint__room--office { right: 24px; top: 98px; }
  .psc-blueprint__room--energy { left: 24px; bottom: 74px; }
  .psc-blueprint__room--entry { right: 24px; bottom: 74px; }
}

/* Let the final item in an odd three-card group use the tablet row instead of
   leaving an accidental empty column beside it. */
@media (min-width: 760px) and (max-width: 999px) {
  .psc-grid--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 599px) {
  .psc-container,
  .psc-nav__inner { padding-left: 18px; padding-right: 18px; }

  .psc-hero { padding-top: calc(var(--psc-nav-h) + 42px); padding-bottom: 94px; }
  .psc-hero__layout { gap: 44px; }
  .psc-hero h1 { font-size: clamp(2.55rem, 12.4vw, 3.55rem); }
  .psc-hero__sub { font-size: 1.03rem; }
  .psc-hero__status { padding: 17px; }

  .psc-showcase.psc-topology { min-height: 0; padding: 16px; border-radius: 22px; }
  .psc-topology__bar { align-items: flex-start; flex-direction: column; gap: 4px; }
  .psc-topology__stage { height: 450px; }
  .psc-topology__boundary { inset: 28px 4px 20px 102px; }
  .psc-topology__node { grid-template-columns: 28px 1fr; min-width: 116px; padding: 9px 10px; }
  .psc-topology__node svg { width: 24px; height: 24px; }
  .psc-topology__node strong { font-size: .7rem; }
  .psc-topology__node small { font-size: .57rem; }
  .psc-topology__node--upstream { top: 192px; }
  .psc-topology__node--home { top: 42px; right: 0; }
  .psc-topology__node--server { right: 0; bottom: 38px; }
  .psc-cube--hero { left: 53%; }
  .psc-cube--hero svg { width: clamp(172px, 50vw, 214px); }
  .psc-cube--hero strong { font-size: .82rem; }
  .psc-chat--hero { position: relative; right: auto; bottom: auto; width: 100%; margin-top: -16px; }
  .psc-topology__footnote { position: static; align-self: start; width: 100%; max-width: none; margin: 0; }

  .psc-proof-section { padding-top: 18px; }
  .psc-proof-rail { margin-top: 0; }
  .psc-proof-rail > div { padding: 18px 14px 18px 34px; }
  .psc-proof-rail__mark { left: 16px; top: 25px; }
  .psc-proof-rail strong { font-size: .78rem; }
  .psc-proof-rail small { font-size: .68rem; }

  .psc-architecture__actions .psc-btn,
  .psc-beta-stage__actions .psc-btn { width: 100%; }

  .psc-blueprint { min-height: 650px; }
  .psc-blueprint__room { width: calc(50% - 30px); padding: 12px; }
  .psc-blueprint__room--living,
  .psc-blueprint__room--energy { left: 16px; }
  .psc-blueprint__room--office,
  .psc-blueprint__room--entry { right: 16px; }
  .psc-blueprint__room strong { font-size: .7rem; }
  .psc-blueprint__core { width: 132px; height: 132px; }
  .psc-blueprint > p { left: 18px; }

  .psc-outcome-card { min-height: 0; }
  .psc-beta-stage { padding: 24px 20px; }

  .psc-page .psc-section__head,
  .psc-blog .psc-section__head,
  .psc-single .psc-section__head { min-height: 140px; }

  .psc-footer__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 22px;
  }

  .psc-footer__group a { font-size: .82rem; }
}

/* On phones, explain the product visually before presenting the complete
   pre-launch/Bridge/pricing caveat. DOM and desktop/tablet composition stay
   unchanged; display:contents only exposes the copy children to this grid. */
@media (max-width: 420px) {
  .psc-hero__layout { gap: 0; align-items: start; }
  .psc-hero__col { display: contents; }
  .psc-hero__col > .psc-eyebrow { order: 1; }
  .psc-hero__col > h1 { order: 2; }
  .psc-hero__sub { order: 3; }
  .psc-hero__actions { order: 4; }
  .psc-hero__visual { order: 5; margin-top: 44px; }
  .psc-hero__status { order: 6; margin-top: 30px; }
}

@media (max-width: 380px) {
  .psc-footer__nav { grid-template-columns: minmax(0, 1fr); }
  .psc-proof-rail { grid-template-columns: minmax(0, 1fr); }
  .psc-proof-rail > div:nth-child(even) { border-left: 0; }
  .psc-proof-rail > div + div { border-top: 1px solid var(--psc-border); }
}

/* Progressive navigation: without JavaScript, or if nav.js never becomes
   ready, expose every primary link in normal document flow. A healthy bundle
   replaces this with the existing full-viewport interactive menu. */
@media (max-width: 979px) {
  /* The interactive control only becomes visible once nav.js has attached its
     handlers. Preserve its slot while pending to avoid a header layout shift;
     true no-JS and timed-out states use the link-first fallbacks below. */
  html.psc-nav-pending .psc-burger {
    visibility: hidden;
    pointer-events: none;
  }

  html.no-js .psc-nav,
  html.psc-nav-fallback .psc-nav {
    position: relative;
    height: auto;
    min-height: var(--psc-nav-h);
    align-items: stretch;
  }

  html.no-js .psc-nav__inner,
  html.psc-nav-fallback .psc-nav__inner {
    min-height: var(--psc-nav-h);
    height: auto;
    flex-wrap: wrap;
    padding-top: 10px;
    padding-bottom: 18px;
  }

  html.no-js .psc-nav__inner > nav,
  html.psc-nav-fallback .psc-nav__inner > nav {
    order: 3;
    width: 100%;
  }

  html.no-js .psc-nav__links,
  html.psc-nav-fallback .psc-nav__links {
    position: static;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    height: auto;
    max-height: none;
    margin-top: 10px;
    padding: 14px 0 0;
    overflow: visible;
    visibility: visible;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    background: none;
    border-top: 1px solid var(--psc-border);
    border-bottom: 0;
    box-shadow: none;
    transition: none;
  }

  html.no-js .psc-nav__links a,
  html.psc-nav-fallback .psc-nav__links a {
    padding: 8px 0;
    font-size: .9rem;
  }

  html.no-js .psc-burger,
  html.psc-nav-fallback .psc-burger { display: none; }
}

@media (min-width: 600px) and (max-width: 979px) {
  html.no-js .psc-nav__links,
  html.psc-nav-fallback .psc-nav__links { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Sideways reveal offsets must never create a transient mobile scrollbar. */
@media (max-width: 599px) {
  .psc-motion-ready .psc-reveal--left,
  .psc-motion-ready .psc-reveal--right,
  .psc-motion-ready .psc-reveal--visual { translate: 0 18px; }
}

/* 4K: expand the composition, not the reading measure. */
@media (min-width: 1800px) {
  body { font-size: clamp(18px, .58vw, 22px); }

  .psc-container,
  .psc-nav__inner { padding-left: clamp(64px, 4vw, 96px); padding-right: clamp(64px, 4vw, 96px); }

  .psc-nav__inner { max-width: 2100px; }

  .psc-hero {
    min-height: min(1500px, 88svh);
    padding-top: calc(var(--psc-nav-h) + 112px);
    padding-bottom: 170px;
  }

  .psc-hero__layout { grid-template-columns: minmax(0, .9fr) minmax(720px, 1.1fr); gap: 130px; }
  .psc-hero__col { max-width: 860px; }
  .psc-hero h1 { font-size: clamp(5.2rem, 2.7vw, 6.5rem); }
  .psc-hero__sub { max-width: 54ch; font-size: clamp(1.35rem, .75vw, 1.7rem); }
  .psc-showcase.psc-topology { width: min(100%, 860px); min-height: 720px; }
  .psc-topology__stage { height: 580px; }
  .psc-cube--hero svg { width: 340px; }

  .psc-section { padding-top: 150px; padding-bottom: 150px; }
  .psc-section--compact { padding-top: 82px; padding-bottom: 82px; }
  .psc-section__head { max-width: 900px; }
  .psc-section h2 { font-size: clamp(3rem, 1.6vw, 3.9rem); }

  .psc-blueprint { min-height: 680px; }
  .psc-card { padding: 40px; }
  .psc-card h3 { font-size: 1.35rem; }
  .psc-outcome-card { min-height: 360px; }

  .psc-page h1,
  .psc-single h1,
  .psc-blog h1 { font-size: clamp(3.25rem, 1.7vw, 4.25rem); }

  .psc-prose:not(.psc-prose--wide) { max-width: 1120px; }
  .psc-footer__inner { grid-template-columns: minmax(300px, 1fr) minmax(0, 2.8fr); }
}

@media (prefers-reduced-motion: reduce) {
  .psc-topology__path,
  .psc-cube,
  .psc-cube__led,
  .psc-hero__scroll { animation: none !important; }

  .psc-motion-ready .psc-reveal,
  .psc-motion-ready .psc-reveal.is-visible {
    opacity: 1 !important;
    translate: none !important;
    scale: 1 !important;
    animation: none !important;
  }
}

@media print {
  html.psc-motion-pending *,
  .psc-motion-ready .psc-reveal {
    opacity: 1 !important;
    translate: none !important;
    scale: 1 !important;
    animation: none !important;
  }
}

/* 2.3 cascade guard: the editorial components intentionally sit on top of
   the 2.2 global section/type scaling without changing non-editorial pages. */
.psc-section.psc-journal {
  padding-top: calc(var(--psc-nav-h) + clamp(50px, 6vw, 94px));
  padding-bottom: clamp(92px, 9vw, 142px);
}

.psc-section.psc-article-page {
  padding-top: calc(var(--psc-nav-h) + clamp(52px, 6vw, 96px));
  padding-bottom: clamp(94px, 9vw, 150px);
}

.psc-section.psc-journal .psc-story-card__title {
  font-size: clamp(1.2rem, 1.35vw, 1.55rem);
  line-height: 1.18;
}

.psc-section.psc-journal .psc-story-card.is-featured .psc-story-card__title {
  font-size: clamp(2rem, 3vw, 3.35rem);
  line-height: 1.04;
}

.psc-section.psc-article-page .psc-related .psc-story-card__title {
  font-size: clamp(1.08rem, 1.1vw, 1.28rem);
  line-height: 1.2;
}

.psc-blog .psc-journal-head h1 {
  max-width: 15ch;
  font-size: clamp(2.8rem, 5vw, 5rem);
}

.psc-single .psc-article-header h1 {
  max-width: 15ch;
  font-size: clamp(2.5rem, 4.7vw, 4.8rem);
}

.psc-section .psc-related__head h2 { font-size: var(--psc-step-2); }

@media (max-width: 699px) {
  .psc-section.psc-journal { padding-top: calc(var(--psc-nav-h) + 46px); }
  .psc-blog .psc-journal-head h1 { font-size: clamp(2.55rem, 12vw, 3.4rem); }
  .psc-single .psc-article-header h1 { font-size: clamp(2.35rem, 11.5vw, 3.25rem); }
}

@media (min-width: 1800px) {
  .psc-blog .psc-journal-head h1 { font-size: clamp(4.5rem, 2.5vw, 5.6rem); }
  .psc-single .psc-article-header h1 { font-size: clamp(4rem, 2.1vw, 5rem); }
}

/* ============================================================
   2.3.1 RELEASE POLISH — explicit states, editorial rails and
   Gutenberg-owned feature/contact page grammar
   ============================================================ */

.psc-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

/* Static product states are deliberately rectangular and label-led. They do
   not borrow the round, hoverable language of filters or topic controls. */
.psc-status-pill {
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 7px;
  background: rgba(6, 16, 26, .74);
  cursor: default;
  text-transform: none;
  user-select: text;
}

.psc-status-pill::before { display: none; }

.psc-status-pill__prefix,
.psc-status-pill__value {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 9px;
}

.psc-status-pill__prefix {
  border-right: 1px solid currentColor;
  color: var(--psc-text-dim);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  opacity: .92;
}

.psc-status-pill__value {
  position: relative;
  gap: 7px;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.psc-status-pill__value::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}

.psc-tier__badge {
  padding: 7px 11px;
  border: 1px solid rgba(32, 215, 242, .32);
  border-left: 3px solid var(--psc-accent);
  border-radius: 5px;
  background: rgba(32, 215, 242, .08);
  box-shadow: none;
  cursor: default;
}

/* The Newsletter Plugin keeps ownership of endpoint, required fields and DOI.
   Its privacy field is turned into a genuine 44px checkbox target; the linked
   privacy policy remains a separate, same-tab link below the form. */
.psc-newsletter form.psc-newsletter__form .tnp-field-privacy {
  position: relative;
  display: block;
  min-height: 44px;
  padding: 0;
}

.psc-newsletter form.psc-newsletter__form input.tnp-privacy {
  position: absolute;
  z-index: 2;
  inset: 0 auto auto 0;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.psc-newsletter form.psc-newsletter__form .tnp-field-privacy label {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 8px 8px 8px 44px;
  cursor: pointer;
}

.psc-newsletter form.psc-newsletter__form .tnp-field-privacy label::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 20px;
  height: 20px;
  translate: 0 -50%;
  border: 1px solid var(--psc-border-strong);
  border-radius: 5px;
  background: rgba(6, 16, 26, .9);
  box-shadow: inset 0 1px rgba(255, 255, 255, .04);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.psc-newsletter form.psc-newsletter__form .tnp-field-privacy label::after {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  width: 7px;
  height: 12px;
  translate: 0 -60%;
  rotate: 45deg;
  border-right: 2px solid #04141a;
  border-bottom: 2px solid #04141a;
  opacity: 0;
}

.psc-newsletter form.psc-newsletter__form input.tnp-privacy:checked + label::before {
  border-color: var(--psc-accent);
  background: var(--psc-accent);
  box-shadow: 0 0 0 3px var(--psc-accent-soft);
}

.psc-newsletter form.psc-newsletter__form input.tnp-privacy:checked + label::after { opacity: 1; }

.psc-newsletter form.psc-newsletter__form input.tnp-privacy:focus-visible {
  outline: 0 !important;
}

.psc-newsletter form.psc-newsletter__form input.tnp-privacy:focus-visible + label::before {
  outline: 3px solid var(--psc-accent);
  outline-offset: 3px;
}

/* Persistent Journal section state in the global navigation. */
.psc-nav__links .current-menu-parent > a,
.psc-nav__links .current_page_parent > a,
.psc-nav__links a.is-section-current,
.psc-nav__links a[aria-current="location"] {
  color: var(--psc-white);
}

.psc-nav__links .current-menu-parent > a::after,
.psc-nav__links .current_page_parent > a::after,
.psc-nav__links a.is-section-current::after,
.psc-nav__links a[aria-current="location"]::after {
  width: 100%;
}

.psc-context-journal .psc-nav {
  border-bottom-color: rgba(115, 229, 194, .18);
}

.psc-journal,
.psc-article-page {
  position: relative;
  isolation: isolate;
}

.psc-journal::before,
.psc-article-page::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: clamp(280px, 35vw, 620px);
  background:
    linear-gradient(180deg, rgba(7, 25, 38, .72), transparent),
    radial-gradient(70% 100% at 14% 0%, rgba(115, 229, 194, .075), transparent 72%);
  pointer-events: none;
}

.psc-article-header__context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: fit-content;
  color: var(--psc-text-dim);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.psc-article-header__context a { color: var(--psc-local); }
.psc-article-header__context a:hover { color: var(--psc-white); }

/* Gutenberg Features: the source copy and every product detail stay editable;
   this layer only supplies hierarchy, scannability and a stable anchor model. */
.psc-page--features {
  overflow: hidden;
  padding-bottom: clamp(66px, 7vw, 112px);
}

.psc-page--features .psc-section__head {
  position: relative;
  max-width: 980px;
  margin-bottom: clamp(30px, 4vw, 54px);
  padding-bottom: clamp(26px, 3vw, 38px);
  border-bottom: 1px solid var(--psc-border);
}

.psc-page--features .psc-section__head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: clamp(100px, 12vw, 180px);
  height: 2px;
  background: linear-gradient(90deg, var(--psc-local), var(--psc-accent));
}

.psc-page--features .psc-section__head h1 {
  max-width: 12ch;
  font-size: clamp(3rem, 6vw, 6rem);
}

.psc-features-content {
  max-width: none !important;
  margin: 0 !important;
}

.psc-features-overview {
  position: relative;
  display: grid;
  gap: 0;
  max-width: 1320px;
  margin: 0 auto clamp(74px, 8vw, 126px);
}

.psc-features-overview__context > p {
  max-width: 78ch;
}

.psc-features-overview__context > p:first-child {
  max-width: 72ch;
  color: #d7e4ee;
  font-size: var(--psc-step-1);
  line-height: 1.55;
  text-wrap: pretty;
}

.psc-features-overview > .psc-disclaimer {
  position: relative;
  max-width: 92ch;
  margin: 10px 0 24px;
  padding: 18px 20px 18px 48px;
  border-color: rgba(241, 183, 104, .3);
  background: linear-gradient(100deg, rgba(241, 183, 104, .12), rgba(10, 23, 36, .74));
}

.psc-features-overview > .psc-disclaimer::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 25px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--psc-home);
  box-shadow: 0 0 14px rgba(241, 183, 104, .4);
}

.psc-features-anchor-nav {
  margin: 0 0 clamp(26px, 4vw, 44px);
  padding: 24px 0;
  border-top: 1px solid var(--psc-border);
  border-bottom: 1px solid var(--psc-border);
}

.psc-features-anchor-nav > span,
.psc-contact-task-nav > span {
  display: block;
  margin-bottom: 14px;
  color: var(--psc-local);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.psc-features-anchor-nav ol,
.psc-contact-task-nav ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--psc-border);
  border-radius: 14px;
  background: var(--psc-border);
  list-style: none;
}

.psc-features-anchor-nav li,
.psc-contact-task-nav li { margin: 0; }

.psc-features-anchor-nav a,
.psc-contact-task-nav a {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 66px;
  padding: 12px 15px;
  background: rgba(8, 23, 36, .97);
  color: var(--psc-text);
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}

.psc-features-anchor-nav a > span,
.psc-contact-task-nav a > span {
  color: var(--psc-text-dim);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.psc-features-anchor-nav a > strong,
.psc-contact-task-nav a > strong {
  color: inherit;
  font-size: .82rem;
  line-height: 1.35;
}

.psc-features-anchor-nav a:hover,
.psc-features-anchor-nav a:focus-visible,
.psc-contact-task-nav a:hover,
.psc-contact-task-nav a:focus-visible {
  background: var(--psc-bg-raised);
  color: var(--psc-accent);
}

.psc-features-overview > .psc-grid {
  margin-top: clamp(20px, 3vw, 34px);
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--psc-border);
  border-radius: var(--psc-radius-lg);
  background: var(--psc-border);
}

.psc-features-overview > .psc-grid .psc-card {
  min-height: 250px;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(260px 170px at 90% 0%, rgba(32, 215, 242, .08), transparent 72%),
    var(--psc-bg-card);
  box-shadow: none;
}

.psc-features-overview > .psc-grid .psc-card:hover {
  transform: none;
  background-color: var(--psc-bg-raised);
}

.psc-features-overview__context {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: clamp(26px, 4vw, 58px);
  align-items: start;
  margin-top: clamp(34px, 5vw, 58px);
  padding-top: clamp(28px, 4vw, 46px);
  border-top: 1px solid var(--psc-border);
}

.psc-features-overview__context > p { margin: 0; }

.psc-feature-band {
  position: relative;
  display: grid;
  grid-template-columns: minmax(72px, .18fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 84px);
  max-width: 1460px;
  margin: 0 auto;
  padding: clamp(64px, 8vw, 126px) 0;
  border-top: 1px solid var(--psc-border);
  scroll-margin-top: calc(var(--psc-nav-h) + 18px);
}

.psc-feature-band::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 16% -18vw;
  background: radial-gradient(50% 80% at 86% 48%, rgba(32, 215, 242, .045), transparent 76%);
  pointer-events: none;
}

.psc-feature-band:nth-of-type(even)::before {
  background: radial-gradient(50% 80% at 12% 48%, rgba(115, 229, 194, .045), transparent 76%);
}

.psc-feature-band__index {
  position: sticky;
  top: calc(var(--psc-nav-h) + 30px);
  align-self: start;
  display: grid;
  gap: 7px;
  padding-top: 4px;
}

.psc-feature-band__index > span {
  color: transparent;
  font-size: clamp(3.5rem, 6vw, 7.5rem);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.08em;
  -webkit-text-stroke: 1px rgba(115, 229, 194, .42);
}

.psc-feature-band__index > small {
  color: var(--psc-text-dim);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.psc-feature-band__body {
  min-width: 0;
  max-width: 1120px;
}

.psc-feature-band__body > h2 {
  max-width: 22ch;
  margin: 0 0 clamp(24px, 3vw, 38px);
  font-size: clamp(2rem, 4vw, 4.4rem);
  line-height: 1.02;
  text-wrap: balance;
  scroll-margin-top: calc(var(--psc-nav-h) + 24px);
}

.psc-feature-band__body > p,
.psc-feature-band__body > ul {
  max-width: 76ch;
}

.psc-feature-band__body > p:first-of-type {
  color: #c7d5e0;
  font-size: clamp(1.05rem, 1rem + .18vw, 1.25rem);
  line-height: 1.72;
}

.psc-feature-band__body > table {
  margin: clamp(28px, 4vw, 46px) 0;
}

.psc-feature-band__body > .psc-grid,
.psc-feature-band__body > .psc-stats {
  max-width: 1080px;
  margin-top: clamp(30px, 4vw, 50px);
  margin-bottom: clamp(30px, 4vw, 50px);
}

.psc-features-final {
  max-width: 900px;
  margin-top: clamp(42px, 6vw, 74px) !important;
  padding: clamp(30px, 4vw, 48px);
  border-color: rgba(32, 215, 242, .42);
  background:
    radial-gradient(440px 220px at 90% 0%, rgba(32, 215, 242, .12), transparent 70%),
    linear-gradient(150deg, rgba(20, 42, 63, .96), rgba(8, 23, 36, .98));
  text-align: left !important;
}

.psc-features-final h3 { font-size: var(--psc-step-2); }

/* Pricing cards sit beneath an accessible overview heading injected by the
   render layer, keeping the visible tier titles at the correct H3 depth. */
.psc-page--pricing .psc-pricing-content { max-width: 1220px; }

/* Contact: a real task index precedes the forms, then the mobile flow makes
   waitlist, message and specialist routes visibly distinct. */
.psc-page--contact .psc-section__head { max-width: 920px; }
.psc-contact-content { max-width: 1040px; }

.psc-contact-intro > .psc-lead {
  max-width: 78ch;
  margin: 0;
  color: #c9d7e2;
  font-size: clamp(1rem, .97rem + .14vw, 1.14rem);
  line-height: 1.7;
}

.psc-contact-task-nav {
  margin: 0 0 clamp(26px, 4vw, 42px);
}

.psc-contact-task-nav ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.psc-contact-intro {
  max-width: 900px;
  margin: 0 0 clamp(54px, 7vw, 82px);
  padding: clamp(20px, 3vw, 28px);
  border-left: 2px solid rgba(115, 229, 194, .44);
  background: linear-gradient(90deg, rgba(115, 229, 194, .055), transparent 82%);
}

.psc-contact-content > h2 {
  position: relative;
  margin-top: clamp(58px, 8vw, 96px);
  padding-top: clamp(30px, 4vw, 46px);
  border-top: 1px solid var(--psc-border);
  scroll-margin-top: calc(var(--psc-nav-h) + 20px);
}

.psc-contact-content > h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 86px;
  height: 2px;
  background: linear-gradient(90deg, var(--psc-local), var(--psc-accent));
}

.psc-contact-content > h2:first-of-type {
  margin-top: 0;
}

.psc-contact-content > .psc-newsletter,
.psc-contact-content > .wpcf7 {
  max-width: 900px;
  margin: 26px 0 0;
  padding: clamp(22px, 4vw, 36px);
  border: 1px solid var(--psc-border);
  border-radius: var(--psc-radius-lg);
  background:
    radial-gradient(420px 220px at 92% 0%, rgba(32, 215, 242, .08), transparent 72%),
    rgba(10, 23, 36, .72);
  box-shadow: var(--psc-shadow);
}

.psc-contact-content > .psc-newsletter .psc-newsletter__doi-note,
.psc-contact-content > .psc-newsletter .psc-newsletter__legal {
  max-width: none;
  margin-left: 0;
}

/* Standalone controls keep a full 44px hit area without changing the rhythm of
   links embedded in paragraphs. */
.psc-logo,
.psc-nav__cta .psc-btn,
.psc-lang__opt,
.psc-link,
.psc-hero__status > a,
.psc-footer__bottom > a,
.psc-story-topics a,
.psc-article-header__context a,
.psc-article-context > a,
.psc-article-toc a,
.psc-article-toc-mobile a,
.psc-share__btn {
  min-height: 44px;
}

.psc-logo,
.psc-link,
.psc-hero__status > a,
.psc-footer__bottom > a,
.psc-article-header__context a,
.psc-article-context > a,
.psc-article-toc a,
.psc-article-toc-mobile a,
.psc-share__btn {
  align-items: center;
}

.psc-hero__status > a,
.psc-footer__bottom > a,
.psc-article-header__context a,
.psc-article-context > a,
.psc-article-toc a,
.psc-article-toc-mobile a,
.psc-share__btn { display: inline-flex; }

.psc-lang { padding: 0; }

.psc-lang__opt {
  min-width: 44px;
  justify-content: center;
  padding: 0 8px;
}

.psc-page-numbers .page-numbers,
.nav-links .page-numbers { min-width: 44px; }

/* The mobile header remains visually compact while every direct control has a
   44px target. */
@media (max-width: 979px) {
  .psc-logo {
    min-width: 44px;
    min-height: 44px;
    margin-left: -8px;
    padding: 4px 8px;
  }

  .psc-nav__cta .psc-btn { min-height: 44px; }

  .psc-lang { min-height: 44px; padding: 0; }

  .psc-lang__opt {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    padding: 0 8px;
  }

  .psc-burger { width: 44px; height: 44px; }
}

/* Mobile Journal rail: persistent edge cues, snap padding and an active topic
   that nav.js centres with horizontal scrolling only. */
@media (max-width: 699px) {
  .psc-story-topics {
    position: relative;
    isolation: isolate;
  }

  .psc-story-topics::before,
  .psc-story-topics::after {
    content: "";
    position: absolute;
    z-index: 3;
    top: 0;
    bottom: 0;
    width: 44px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .16s ease;
  }

  .psc-story-topics::before {
    left: -1px;
    background: linear-gradient(90deg, var(--psc-bg) 12%, transparent);
  }

  .psc-story-topics::after {
    right: -1px;
    background: linear-gradient(270deg, var(--psc-bg) 12%, transparent);
  }

  .psc-story-topics.has-scroll-left::before,
  .psc-story-topics.has-scroll-right::after { opacity: 1; }

  html.no-js .psc-story-topics::after,
  html.psc-nav-fallback .psc-story-topics::after { opacity: 1; }

  .psc-story-topics ul {
    gap: 10px;
    padding-right: max(132px, 36vw);
    scroll-padding-inline: 22vw;
    overscroll-behavior-inline: contain;
    touch-action: pan-x pan-y;
  }

  .psc-story-topics li { scroll-snap-align: center; }

  .psc-story-topics a {
    min-height: 44px;
    padding: 10px 15px;
    border-radius: 12px;
  }

  .psc-feature-band {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 64px 0;
  }

  .psc-feature-band__index {
    position: static;
    display: flex;
    align-items: end;
    gap: 12px;
    padding: 0;
  }

  .psc-feature-band__index > span { font-size: 3.8rem; }
  .psc-feature-band__index > small { padding-bottom: 3px; }
  .psc-feature-band__body > h2 { font-size: clamp(2rem, 10vw, 3.1rem); }

  .psc-features-anchor-nav ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .psc-features-anchor-nav a { min-height: 58px; }

  .psc-features-overview > .psc-grid .psc-card { min-height: 0; }

  .psc-features-overview__context {
    grid-template-columns: minmax(0, 1fr);
  }

  .psc-contact-task-nav ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .psc-contact-content > .psc-newsletter,
  .psc-contact-content > .wpcf7 {
    padding: 20px;
    border-radius: 18px;
  }
}

@media (max-width: 520px) {
  .psc-contact-task-nav ol { grid-template-columns: minmax(0, 1fr); }
  .psc-contact-task-nav a { min-height: 58px; }
}

@media (max-width: 430px) {
  .psc-burger { width: 44px; height: 44px; }
}

/* Keep editorial display type monotonic at the 1800px boundary and let it grow
   modestly on 4K without widening the reading column. */
@media (min-width: 1800px) {
  .psc-blog .psc-journal-head h1 {
    font-size: clamp(5rem, calc(4.1rem + .8vw), 6rem);
  }

  .psc-single .psc-article-header h1 {
    font-size: clamp(4.8rem, calc(3.95rem + .75vw), 5.6rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .psc-features-anchor-nav a,
  .psc-contact-task-nav a,
  .psc-newsletter form.psc-newsletter__form .tnp-field-privacy label::before,
  .psc-story-topics::before,
  .psc-story-topics::after { transition: none !important; }
}

/* ============================================================
   3.0 POWERSMARTCOAT — Bausteine der Partnerseite
   ------------------------------------------------------------
   Kontrast: jedes Text-auf-Flaeche-Paar ist nachgerechnet. Die
   Bezugsflaechen sind
     Grund      --psc-bg        #06101a   L = 0,00484
     erhoeht    --psc-bg-elev   #0a1724   L = 0,00805
     Karte      --psc-bg-card   #0f2031   L = 0,01357
   und die Textfarben
     --psc-text       #eef5fb  L = 0,90462
     --psc-text-muted #a9b8c7  L = 0,46844
     --psc-text-dim   #8397aa  L = 0,30276
     --psc-accent     #04b7d5  L = 0,38702
     --psc-cold       #8ae3f7  L = 0,66983
     --psc-warm       #d1571d  L = 0,20458
   Daraus:
     text  auf Karte 15,02:1 · muted auf Karte 8,16:1
     dim   auf Karte  5,55:1 · accent auf Karte 6,87:1
     cold  auf Karte 11,32:1
     warm  auf Grund  4,64:1  <- nur auf dem GRUND, nicht auf der Karte
   --psc-warm liegt auf der Karte nur bei 4,01:1. Deshalb traegt jede
   Flaeche, auf der warmer Text steht, ausdruecklich den Grund
   (.psc-section--figure) und niemals eine Kartenfarbe. Orange bleibt
   Bedeutungsfarbe (Waermeverlust) und ist nirgends anklickbar.
   ============================================================ */

/* ---- Logo -------------------------------------------------
   Das Wortzeichen ist Navy #2f375e. Auf dem Grund #06101a waeren das
   1,67:1 und damit unlesbar. Auf Weiss sind es 11,48:1. Deshalb steht
   das transparente Logo auf einer eigenen hellen Traegerflaeche; sie
   gehoert zur Sperrzone des Logos, nicht zur Seitenflaeche. */
.psc-logo__plate {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(173, 205, 229, .14), 0 10px 26px -18px rgba(0, 0, 0, .9);
}
.psc-logo__plate img {
  display: block;
  width: auto;
  height: 26px;
}
.psc-footer__brand .psc-logo__plate img { height: 30px; }
/* Die geerbte Regel blendet auf schmalen Viewports das letzte Kind des
   Logos aus. Das war die nestnode-Wortmarke; hier ist es das Logo selbst. */
.psc-logo > .psc-logo__plate { display: inline-flex !important; }
@media (max-width: 430px) {
  .psc-logo__plate { padding: 5px 7px; }
  .psc-logo__plate img { height: 22px; }
}

/* ---- Sektionen mit technischer Zeichnung ------------------
   Ausdruecklich opak auf dem Grund: die Zeichnungen enthalten warmen
   Text (13,0 °C, Gefahrenzone), der nur auf #06101a die 4,5:1 erreicht.
   Ein durchscheinender Verlauf wuerde den Wert auf 4,2:1 druecken. */
/* 3.11: der Abschnitt bleibt hell, siehe Block 3.11 am Dateiende. */

.psc-figure-block {
  margin-top: clamp(24px, 3vw, 40px);
  max-width: 100%;
  min-width: 0;
}

.psc-subsection {
  margin-top: clamp(48px, 6vw, 84px);
  padding-top: clamp(28px, 3vw, 44px);
  border-top: 1px solid var(--psc-border);
}
.psc-subsection__title {
  margin: 0 0 12px;
  font-size: var(--psc-step-2);
  line-height: 1.12;
  letter-spacing: -.035em;
}
.psc-subsection__lead {
  margin: 0;
  max-width: 74ch;
  color: var(--psc-text-muted);
  font-size: var(--psc-step-1);
  line-height: 1.6;
}
.psc-subsection .psc-figure-block { margin-top: clamp(20px, 2.5vw, 34px); }
.psc-subsection .psc-grid { margin-bottom: 0; }

/* ---- Kennwertpanel im Hero ------------------------------- */
.psc-metrics {
  width: 100%;
  max-width: 520px;
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid var(--psc-border);
  border-radius: var(--psc-radius-lg);
  background: linear-gradient(160deg, #142a3f 0%, #0b1c2b 62%, #0a1724 100%);
  box-shadow: var(--psc-shadow);
}
.psc-metrics__title {
  margin: 0 0 4px;
  color: var(--psc-cold);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.psc-metrics__list { margin: 0; }
.psc-metrics__row {
  display: grid;
  gap: 2px;
  padding: 14px 0;
  border-bottom: 1px solid var(--psc-border);
}
.psc-metrics__row:last-child { border-bottom: 0; }
.psc-metrics__label {
  color: var(--psc-text);
  font-size: .95rem;
  font-weight: 650;
}
.psc-metrics__value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0;
}
.psc-metrics__number {
  color: var(--psc-cold);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.psc-metrics__unit {
  color: var(--psc-text-muted);
  font-size: .82rem;
}
.psc-metrics__proof {
  flex: 1 0 100%;
  color: var(--psc-text-dim);
  font-size: .74rem;
  line-height: 1.45;
}
.psc-metrics__scale { margin-top: 18px; }
.psc-metrics__scale-bar {
  display: block;
  height: 8px;
  border-radius: 999px;
  /* Reine Bedeutungsskala, kein Bedienelement. */
  background: linear-gradient(90deg, var(--psc-cold), #6ea0b4 46%, var(--psc-warm));
}
.psc-metrics__scale-legend {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  color: var(--psc-text-muted);
  font-size: .74rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.psc-metrics__note {
  margin: 10px 0 0;
  color: var(--psc-text-dim);
  font-size: .76rem;
  line-height: 1.5;
}

/* ---- Produkteigenschaften -------------------------------- */
.psc-property { display: flex; flex-direction: column; }
.psc-property__unit {
  margin: 0 0 10px;
  color: var(--psc-accent);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.psc-property h3 { margin-bottom: 10px; font-size: 1.16rem; }
.psc-property > p { color: var(--psc-text-muted); line-height: 1.65; }
.psc-property__proof {
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--psc-border);
  color: var(--psc-text-dim);
  font-size: .8rem;
  line-height: 1.5;
}
.psc-property__proof-label {
  display: inline-block;
  margin-right: 6px;
  color: var(--psc-text-muted);
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .7rem;
}

/* ---- Ersparnisrechner ------------------------------------ */
.psc-calc {
  display: grid;
  gap: clamp(20px, 3vw, 34px);
  margin-top: clamp(24px, 3vw, 40px);
  align-items: start;
}
@media (min-width: 980px) {
  .psc-calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.psc-calc__inputs,
.psc-calc__results {
  min-width: 0;
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid var(--psc-border);
  border-radius: var(--psc-radius);
  background: var(--psc-bg-card);
}
.psc-calc__results { background: var(--psc-bg-elev); }
.psc-calc__sub {
  margin: 0 0 16px;
  color: var(--psc-text-muted);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.psc-calc__presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.psc-calc__preset {
  display: grid;
  gap: 2px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--psc-border-strong);
  border-radius: 10px;
  background: var(--psc-bg);
  color: var(--psc-text);
  font: inherit;
  font-size: .84rem;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.psc-calc__preset span {
  color: var(--psc-text-muted);
  font-size: .72rem;
  font-weight: 500;
}
.psc-calc__preset:hover { border-color: var(--psc-accent); }
/* Der gewaehlte Zustand ist nicht allein farbig kodiert: er traegt
   zusaetzlich aria-pressed und einen sichtbaren Rahmen von 2 px. */
.psc-calc__preset[aria-pressed="true"] {
  border-color: var(--psc-accent);
  border-width: 2px;
  padding: 7px 13px;
  background: var(--psc-accent-soft);
}
.psc-calc__preset[aria-pressed="true"]::after {
  content: "gewählt";
  color: var(--psc-accent);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.psc-calc__fields { display: grid; gap: 16px; }
.psc-calc__field { display: grid; gap: 6px; margin: 0; }
.psc-calc__field label {
  color: var(--psc-text);
  font-size: .9rem;
  font-weight: 650;
}
.psc-calc__control {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--psc-border-strong);
  border-radius: 10px;
  background: var(--psc-bg);
  overflow: hidden;
}
.psc-calc__control input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: var(--psc-text);
  font: inherit;
  font-variant-numeric: tabular-nums;
}
.psc-calc__control input:focus { outline: none; }
.psc-calc__control:focus-within {
  border-color: var(--psc-accent);
  box-shadow: 0 0 0 2px var(--psc-accent-soft);
}
.psc-calc__suffix {
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-left: 1px solid var(--psc-border);
  background: var(--psc-bg-card);
  color: var(--psc-text-muted);
  font-size: .8rem;
  white-space: nowrap;
}
.psc-calc__hint {
  color: var(--psc-text-dim);
  font-size: .78rem;
  line-height: 1.5;
}
.psc-calc__hint strong { color: var(--psc-text-muted); }

.psc-calc__headline {
  display: grid;
  gap: 2px;
  margin: 0 0 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--psc-border);
}
.psc-calc__headline-label {
  color: var(--psc-text-muted);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.psc-calc__headline-value {
  color: var(--psc-cold);
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.9rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
  line-height: 1.05;
}
.psc-calc__bars { display: grid; gap: 14px; margin-bottom: 22px; }
.psc-calc__bar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  margin: 0;
}
.psc-calc__bar-label {
  color: var(--psc-text-muted);
  font-size: .82rem;
}
/* Der Balken ist die Zweitkodierung der Zahl daneben, nie ihr Ersatz. */
.psc-calc__bar {
  display: block;
  height: 12px;
  border-radius: 999px;
  background: rgba(173, 205, 229, .12);
  overflow: hidden;
}
.psc-calc__bar::before {
  content: "";
  display: block;
  width: var(--anteil, 2%);
  height: 100%;
  border-radius: inherit;
  transition: width .25s ease;
}
.psc-calc__bar--warm::before { background: var(--psc-warm); }
.psc-calc__bar--cold::before { background: var(--psc-cold); }
.psc-calc__bar-value {
  color: var(--psc-text);
  font-size: .95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.psc-calc__figures {
  display: grid;
  gap: 1px;
  margin: 0 0 18px;
  border: 1px solid var(--psc-border);
  background: var(--psc-border);
}
@media (min-width: 560px) {
  .psc-calc__figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.psc-calc__figures > div {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  background: var(--psc-bg-elev);
}
.psc-calc__figures dt {
  color: var(--psc-text-muted);
  font-size: .76rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.psc-calc__figures dd {
  margin: 0;
  color: var(--psc-text);
  font-size: 1.02rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.psc-calc__reading {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-left: 3px solid var(--psc-accent);
  background: var(--psc-accent-soft);
  color: var(--psc-text);
  font-size: .9rem;
  line-height: 1.6;
}
.psc-calc__method {
  margin: 0;
  color: var(--psc-text-dim);
  font-size: .78rem;
  line-height: 1.6;
}
.psc-calc__method strong { color: var(--psc-text-muted); }
.psc-calc__method em { font-style: normal; color: var(--psc-text-muted); font-weight: 700; }

/* ---- Dokumentierte Untersuchungen -------------------------
   Hairline-Karten ohne eigene Flaeche: der warme "vorher"-Wert braucht
   den Grund, um 4,64:1 zu erreichen. */
.psc-study {
  display: flex;
  flex-direction: column;
  padding: 22px;
  border: 1px solid var(--psc-border);
  border-radius: var(--psc-radius);
  background: transparent;
}
.psc-study__tag {
  margin: 0 0 10px;
  color: var(--psc-accent);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.psc-study h4 { margin: 0 0 8px; font-size: 1.1rem; }
.psc-study__subject {
  margin: 0 0 18px;
  color: var(--psc-text-muted);
  font-size: .9rem;
  line-height: 1.6;
}
.psc-study__results {
  margin: auto 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--psc-border);
}
.psc-study__result {
  display: grid;
  gap: 4px;
  padding: 8px 0;
}
.psc-study__k {
  color: var(--psc-text-muted);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.psc-study__result dd {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
}
.psc-study__v {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: .92rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* "vorher" und "nachher" stehen ausgeschrieben da; die Farbe wiederholt
   die Aussage nur, sie traegt sie nicht. */
.psc-study__state {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.psc-study__v--before { color: var(--psc-warm); }
.psc-study__v--after { color: var(--psc-cold); }
.psc-study__delta {
  width: fit-content;
  margin: 14px 0 0;
  padding: 5px 12px;
  border: 1px solid var(--psc-border-strong);
  border-radius: 999px;
  color: var(--psc-text);
  font-size: .76rem;
  font-weight: 700;
}

/* ---- Kundenstimmen --------------------------------------- */
.psc-quotes {
  display: grid;
  gap: 20px;
  margin-top: clamp(24px, 3vw, 40px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.psc-quote {
  margin: 0;
  padding: 26px;
  border: 1px solid var(--psc-border);
  border-left: 3px solid var(--psc-accent);
  border-radius: 0 var(--psc-radius) var(--psc-radius) 0;
  background: var(--psc-bg-card);
}
.psc-quote blockquote {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  color: var(--psc-text);
  font-size: 1.02rem;
  line-height: 1.7;
  quotes: "„" "“";
}
.psc-quote blockquote p { margin: 0; }
.psc-quote blockquote p::before { content: open-quote; }
.psc-quote blockquote p::after { content: close-quote; }
.psc-quote figcaption {
  color: var(--psc-text);
  font-size: .88rem;
  font-weight: 750;
}
.psc-quote figcaption span {
  display: block;
  margin-top: 2px;
  color: var(--psc-text-muted);
  font-weight: 500;
}

/* ---- Partnervorteile ------------------------------------- */
.psc-benefit {
  padding-top: 18px;
  border-top: 2px solid var(--psc-accent);
}
.psc-benefit__no {
  margin: 0 0 10px;
  color: var(--psc-text-muted);
  font-size: .76rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .12em;
}
.psc-benefit h3 { margin: 0 0 10px; font-size: 1.14rem; }
.psc-benefit p {
  margin: 0;
  color: var(--psc-text-muted);
  line-height: 1.7;
}

/* ---- Kontakt --------------------------------------------- */
.psc-contact {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
@media (min-width: 900px) {
  .psc-contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.psc-contact__copy { min-width: 0; }
.psc-contact__form { min-width: 0; }
.psc-contact__points {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.psc-contact__points li {
  display: flex;
  gap: 12px;
  padding: 13px 0;
  border-top: 1px solid var(--psc-border);
  color: var(--psc-text-muted);
}
.psc-contact__points li::before {
  content: "→";
  flex: none;
  color: var(--psc-accent);
  font-weight: 800;
}

/* Formular. Portiert aus dem Live-Theme und auf die dunkle Flaeche gesetzt:
   Eingabefelder tragen den Grund (#06101a) unter --psc-text = 17,4:1. */
.psc-form {
  padding: clamp(20px, 2.6vw, 32px);
  border: 1px solid var(--psc-border);
  border-radius: var(--psc-radius);
  background: var(--psc-bg-card);
  color: var(--psc-text);
}
.psc-form h3 { margin: 0 0 6px; font-size: 1.24rem; }
.psc-form__hint {
  margin: 0 0 22px;
  color: var(--psc-text-muted);
  font-size: .9rem;
}
.psc-form label {
  display: block;
  margin-bottom: 16px;
  font-size: .88rem;
  font-weight: 650;
}
.psc-form label > span { display: block; margin-bottom: 6px; }
.psc-form .psc-req { color: var(--psc-accent); }
.psc-form__phone {
  display: grid;
  gap: 8px;
  grid-template-columns: 8.5rem minmax(0, 1fr);
}
@media (max-width: 380px) {
  .psc-form__phone { grid-template-columns: minmax(0, 1fr); }
}
.psc-form select,
.psc-form :is(input[type="text"], input[type="email"], input[type="tel"], textarea) {
  width: 100%;
  min-height: 44px;
  padding: 11px 13px;
  border: 1px solid var(--psc-border-strong);
  border-radius: 10px;
  background: var(--psc-bg);
  color: var(--psc-text);
  font: inherit;
  font-weight: 400;
}
.psc-form select option { background: #06101a; color: #eef5fb; }
.psc-form :is(input, select, textarea):focus-visible {
  border-color: var(--psc-accent);
  outline: 2px solid var(--psc-accent);
  outline-offset: 2px;
}
.psc-form textarea { resize: vertical; }
.psc-form__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 20px;
  color: var(--psc-text-muted);
  font-size: .84rem;
  font-weight: 400;
  line-height: 1.6;
}
.psc-form__consent input {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--psc-accent);
}
.psc-form__consent a { color: var(--psc-accent); text-decoration: underline; }
.psc-form button[type="submit"] {
  width: 100%;
  min-height: 48px;
  padding: 13px 24px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #58e8f8 0%, var(--psc-accent) 48%, #67e2d3 118%);
  /* Dunkler Text auf hellem Cyan: 8,6:1. */
  color: #04222b;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.psc-form button[type="submit"]:hover { filter: brightness(1.08); }
.psc-honeypot {
  position: absolute;
  left: -9999px;
  width: 0;
  height: 0;
  overflow: hidden;
}
.psc-form-notice {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: .92rem;
  line-height: 1.55;
}
/* Erfolg und Fehler sind zusaetzlich ueber role="status"/"alert" und ueber
   das vorangestellte Wort unterscheidbar, nicht allein ueber die Farbe. */
.psc-form-notice.is-success {
  border-left: 3px solid var(--psc-proven);
  background: var(--psc-proven-soft);
  color: var(--psc-text);
}
.psc-form-notice.is-error {
  border-left: 3px solid var(--psc-claimed);
  background: var(--psc-claimed-soft);
  color: var(--psc-text);
}

/* ---- Partnerkarte ---------------------------------------- */
.psc-map {
  position: relative;
  margin-top: clamp(20px, 2.5vw, 32px);
  border: 1px solid var(--psc-border);
  border-radius: var(--psc-radius);
  background: var(--psc-bg-card);
  overflow: hidden;
}
.psc-map__gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: clamp(2rem, 6vw, 4rem) 1.25rem;
  text-align: center;
}
.psc-map__gate p {
  max-width: 56ch;
  margin: 0;
  color: var(--psc-text-muted);
  font-size: .94rem;
  line-height: 1.65;
}
.psc-map__gate strong { color: var(--psc-text); }
.psc-map__frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}
@media (max-width: 700px) {
  .psc-map__frame { aspect-ratio: 4 / 5; }
}
.psc-map__note {
  margin-top: 12px;
  color: var(--psc-text-dim);
  font-size: .84rem;
}
.psc-map__note a { color: var(--psc-accent); }

/* ---- Disclaimer ------------------------------------------ */
.psc-disclaimer {
  padding: clamp(30px, 4vw, 52px) 0;
  border-top: 1px solid var(--psc-border);
  background: var(--psc-bg-elev);
}
.psc-disclaimer__title {
  margin: 0 0 10px;
  color: var(--psc-text-muted);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.psc-disclaimer p {
  max-width: 92ch;
  margin: 0;
  color: var(--psc-text-dim);
  font-size: .86rem;
  line-height: 1.75;
}

/* ---- Raster ---------------------------------------------- */
@media (min-width: 720px) {
  .psc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Kein seitliches Scrollen ----------------------------
   Breite Bausteine scrollen in ihrem eigenen Kasten, nie im Dokument.
   Deutsche Komposita ("Kundenerfahrungen", "Schimmelkriterium") sind bei
   36 px Schriftgroesse laenger als ein 320-px-Viewport. Sie brechen jetzt
   die Zeile statt das Dokument: gemessen sind 342 px Dokumentbreite bei
   320 px Viewport vorher, 320 px nachher. */
.psc-figure-block > * { max-width: 100%; }
.psc-datasheet .psc-container { min-width: 0; }

h1, h2, h3, h4,
.psc-section__lead,
.psc-subsection__title,
.psc-subsection__lead,
.psc-thickness__name,
.psc-thickness__hint,
.psc-thickness__value,
.psc-ds__term,
.psc-ds__value { overflow-wrap: break-word; }

@media (max-width: 700px) {
  h1, h2, h3 { hyphens: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .psc-calc__bar::before { transition: none !important; }
}

/* ============================================================
   3.1 — MEHRSEITIGE STRUKTUR UND KOMPAKTES FORMULAR
   Steht bewusst am Dateiende: mehrere Korrekturen unten heben
   Regeln auf, die weiter oben mit gleicher Spezifitaet stehen.
   Die Reihenfolge in der Datei entscheidet dort.
   ============================================================ */

/* ---- Seitenkopf der Unterseiten --------------------------- */
/* .psc-nav ist position:fixed und 72px hoch (--psc-nav-h). Auf der Startseite
   gleicht der Hero das aus (padding-top: calc(var(--psc-nav-h) + 60px)); eine
   Unterseite hat keinen Hero, und das Grundpolster von .psc-section--compact
   faellt mit clamp(44px, 5vw, 76px) auf schmalen Schirmen unter die
   Leistenhoehe - der Seitentitel liefe dann unter die Leiste. */
.psc-pagehead {
  padding-top: calc(var(--psc-nav-h) + clamp(28px, 4vw, 56px));
  border-top: 0;
}

/* ---- Kontaktformular: drei Kollisionen aus dem Altbestand -- */
/* Alle drei Regeln, die hier korrigiert werden, stammen aus dem geforkten
   Contact-Form-7-Block bzw. aus der Grundfassung des nativen Formulars. Sie
   haben jeweils die hoehere Spezifitaet und haben die spaeteren, spezifischer
   gemeinten Regeln ueberstimmt. Das kostete Bauhoehe, ohne dass es jemandem
   ansehbar war. */

/* 1. .psc-form label > span (0,1,2) schlug .psc-form__phone (0,1,0): die
      Laendervorwahl stand deshalb UEBER dem Telefonfeld statt daneben und
      verbrauchte 91 statt 44 Pixel. */
.psc-form label > span.psc-form__phone {
  display: grid;
  gap: 8px;
  /* Mitwachsend statt fest: im zweispaltigen Raster ist die Zelle nur noch
     rund 240px breit, eine feste Vorwahlspalte von 8,5rem liesse fuer die
     Rufnummer keine 100px uebrig. Der untere Anschlag von 6,5rem haelt die
     breiteste Vorwahl (+420) lesbar. */
  grid-template-columns: clamp(6.5rem, 42%, 8.5rem) minmax(0, 1fr);
  margin-bottom: 0;
}
/* Die alte Regel in style.css:6985 stellte die Zeile unter 380px einspaltig,
   weil 8,5rem Vorwahl dort nichts mehr uebrig liessen. Mit dem clamp() oben
   passen beide Felder auch bei 320px Schirmbreite nebeneinander; die Zeile
   spart dadurch rund 47px Bauhoehe. Die alte Regel hat die geringere
   Spezifitaet und greift nicht mehr. */

/* 2. .psc-form label (0,1,1) schlug .psc-form__consent (0,1,0): das
      Einwilligungs-Label war nie flex, der Text rutschte unter die
      Ankreuzflaeche statt daneben. */
.psc-form label.psc-form__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  font-size: .84rem;
  font-weight: 400;
  line-height: 1.55;
}
.psc-form label.psc-form__consent > span { margin-bottom: 0; }

/* 3. .psc-form p (0,1,1) schlug .psc-form__hint und .psc-form-notice (0,1,0):
      deren Abstaende waren real 4px, jede Aenderung an ihnen wirkungslos. */
.psc-form > p.psc-form__hint { margin: 0 0 14px; }
.psc-form > p.psc-form-notice { margin: 0 0 14px; }

/* ---- Kontaktformular: kompaktes Raster -------------------- */
/* Container-Abfrage statt Media Query: ab 900px Fensterbreite steht das
   Formular neben dem Begleittext (.psc-contact) und ist dann selbst nur noch
   halb so breit. Eine an der Fensterbreite haengende Umschaltung erzeugte
   genau dort zwei unbrauchbar schmale Spalten. Browser ohne
   Container-Abfragen bleiben einspaltig - das ist der sichere Rueckfall. */
.psc-form {
  container-type: inline-size;
  container-name: pscform;
  padding: clamp(18px, 2.2vw, 26px);
}
.psc-form__grid {
  display: grid;
  gap: 12px 16px;
  align-items: start;
  margin-bottom: 14px;
}
@container pscform (min-width: 30rem) {
  .psc-form__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* Im Raster traegt der Abstand die Luecke, nicht der Rand jedes Labels. */
.psc-form__grid > label { margin-bottom: 0; }
.psc-form label > span { margin-bottom: 4px; }
/* Attributselektor als Spezifitaets-Gegengewicht: die Feldregel in
   style.css:6989 nutzt :is(input[type="text"], …, textarea) und kommt damit
   auf (0,2,1). Ein blosses .psc-form textarea (0,1,1) verlöre gegen deren
   min-height von 44px - das Nachrichtenfeld liesse sich dann per resize auf
   eine einzige Zeile zusammenziehen. */
.psc-form textarea[rows] { min-height: 92px; }

/* ============================================================
   3.2 — SEITENBREITE UND LESERHYTHMUS
   ============================================================ */

/* Die Grundbreite war clamp(1180px, 86vw, 1984px). Der 86vw-Anteil laesst den
   Inhalt unbegrenzt mitwachsen: 1651px auf einem 1920er-Schirm, 1984px auf einem
   4K-Schirm. Uebliche Seiten deckeln bei 1140 bis 1400px (Bootstrap 1320,
   Tailwind max-w-7xl 1280). Der neue Deckel von 1360px laesst 1280 und 1440
   praktisch unveraendert und stoppt nur das Weiterwachsen darueber. */
:root {
  --psc-max: clamp(900px, 78vw, 1140px);

  /* Eine Zeile ist ab etwa 75 Zeichen unbequem zu lesen, weil das Auge den
     Zeilenanfang nicht mehr sicher findet. Fliesstext bekommt deshalb eine
     eigene Breite - und genau daraus entsteht der Rhythmus: schmaler Text,
     breite Zeichnung. */
  --psc-lesebreite: 68ch;
}

/* Der Belegstatus-Absatz lief mit 92ch auf gemessene 96 Zeichen je Zeile. */
.psc-disclaimer p { max-width: var(--psc-lesebreite); }

/* Fliesstext der Rechtsseiten und der Fachbeitraege. .psc-prose stand auf
   980px, das sind bei 17px Grundschrift rund 105 Zeichen. */
.psc-prose > p,
.psc-prose > ul,
.psc-prose > ol,
.psc-prose > blockquote { max-width: var(--psc-lesebreite); }

/* Zeichnungen und Tabellen duerfen weiterhin die volle Breite nutzen - sie
   brauchen sie, und der Unterschied zum schmalen Text traegt den Rhythmus. */
.psc-prose > figure,
.psc-prose > table,
.psc-prose > .psc-figure-block { max-width: none; }

/* ============================================================
   3.4 — HELLE GRUNDFLÄCHE MIT DUNKLEN BÄNDERN
   ------------------------------------------------------------
   Die Seite war durchgehend dunkelblau. Neu ist eine helle
   Grundfläche, auf der einzelne Bänder dunkel bleiben: die
   Navigationsleiste, die vier technischen Zeichnungen, das
   Kennwertpanel, der Ersparnisrechner, der Kontaktbereich und
   die Fußzeile.

   WARUM die Zeichnungen dunkel bleiben — das ist keine
   Geschmacksfrage, sondern gerechnet: Die beiden Thermalpole
   müssen sich laut Farbsystem AUCH in der Helligkeit
   unterscheiden, damit sie im Graustufendruck und bei
   Rotgrünschwäche unterscheidbar bleiben. Auf dunklem Grund
   gelingt das (warm #d1571d 4,64:1, kalt #8ae3f7 13,14:1,
   Trennung 2,83:1). Auf hellem Grund müssten BEIDE Pole dunkel
   sein, um überhaupt 4,5:1 zu erreichen — und verlieren damit
   zwangsläufig ihre Helligkeitstrennung. Geprüft wurden fünf
   Paare, das beste erreichte 4,49:1 Trennung bei nur 2,64:1
   Kontrast des Kaltpols. Es gibt kein Paar, das beides schafft.

   Umgesetzt über neu gebundene Token statt über doppelte
   Regeln: die Bänder definieren die --psc-Variablen um, alles
   darin erbt sie. Die vier Zeichnungen brauchten dadurch
   KEINE Änderung.
   ============================================================ */

:root {
  /* Flächen */
  --psc-bg:            #f2f6fb;
  --psc-bg-elev:       #ffffff;
  --psc-bg-card:       #ffffff;
  --psc-bg-raised:     #e9eff8;
  --psc-paper:         #ffffff;

  /* Linien. Navy mit Alpha statt Grau: bleibt in der Familie. */
  --psc-border:        rgba(47, 55, 94, 0.16);
  --psc-border-strong: rgba(47, 55, 94, 0.32);
  --psc-line:          rgba(47, 55, 94, 0.18);

  /* Schrift. Alle drei Stufen ≥ 5,2:1 auf #f2f6fb. */
  --psc-text:          #16223a;   /* 14,62:1 */
  --psc-text-muted:    #414e6b;   /*  7,66:1 */
  --psc-text-dim:      #5b6782;   /*  5,22:1 */
  --psc-white:         #16223a;   /* „weiß" heißt hier: kräftigster Text */

  /* Aktionsfarbe für hellen Grund — aus dem Farbsystem der Übergabe.
     #04b7d5 wäre hier falsch: auf Weiß nur 2,1:1. */
  --psc-accent:        #076a80;   /*  5,72:1, Weiß darauf 6,21:1 */
  --psc-accent-soft:   rgba(7, 106, 128, 0.10);
  --psc-accent-glow:   rgba(7, 106, 128, 0.26);

  /* Verlauf der Hauptschaltflächen. Eigene Token, NICHT --psc-accent:
     der Verlauf lief vorher hell → var(--psc-accent) → hell. Solange
     der Akzent das helle #04b7d5 war, ging das auf. Seit der Akzent
     für hellen Grund auf #076a80 steht, ergab derselbe Verlauf
     hell → dunkel → hell und damit einen schmutzigen dunklen Streifen
     quer durch die Mitte jeder Schaltfläche.
     Die drei Stufen sind streng absteigend hell (0,155 → 0,095 → 0,065
     relative Leuchtdichte). Ein Verlauf liest sich nur als Tiefe, wenn
     die Helligkeit monoton läuft. Weiß darauf: 5,11:1 an der hellsten,
     9,16:1 an der dunkelsten Stelle. */
  --psc-btn-1:         #0a7891;
  --psc-btn-2:         #075f74;
  --psc-btn-3:         #044f60;
  --psc-btn-text:      #ffffff;

  --psc-neutral:       #5b6782;   /*  5,22:1 */
  --psc-navy-light:    #3a4370;   /*  8,73:1 */

  /* Belegstatus-Farben, für hellen Grund nachgerechnet. */
  --psc-proven:        #0f7a5f;   /*  4,88:1 */
  --psc-proven-soft:   rgba(15, 122, 95, 0.10);
  --psc-claimed:       #8a5a08;   /*  5,46:1 */
  --psc-claimed-soft:  rgba(138, 90, 8, 0.10);
  --psc-local:         #0f7a5f;
  --psc-local-soft:    rgba(15, 122, 95, 0.10);
  --psc-home:          #8a5a08;
  --psc-home-soft:     rgba(138, 90, 8, 0.10);

  /* Auf heller Fläche trägt ein tiefschwarzer Schatten nicht. */
  --psc-shadow:        0 24px 60px -34px rgba(47, 55, 94, 0.34);
}

/* ---- Dunkle Bänder ---------------------------------------- */
/* ACHTUNG: Jeder Baustein, der --psc-warm oder --psc-cold nutzt,
   MUSS innerhalb eines dieser Selektoren stehen.
   Seit 3.11 haengt das Dunkel an der ZEICHENFLAECHE selbst, nicht mehr
   am Abschnitt und auch nicht am ganzen .psc-figure-block: gebraucht
   wird es nur dort, wo die SVG-Farben liegen. Ueberschrift, Bildtext
   und die Klapptabellen stehen hell. Das war der groesste Posten -
   allein der Bildtext des Bauteilschnitts mass 329 px. Auf heller
   Fläche erreicht der Kaltpol nur 1,34:1 und ist unsichtbar.
   Betroffen sind: die vier Zeichnungen, das Kennwertpanel,
   die Balken des Ersparnisrechners und die Studienwerte. */
.psc-metrics,
.psc-wallsec__viewport,
.psc-graphic__viewport,
.psc-fig__viewport,
.psc-thickness {
  --psc-bg:            #06101a;
  --psc-bg-elev:       #0a1724;
  --psc-bg-card:       #0f2031;
  --psc-bg-raised:     #142a3f;
  --psc-paper:         #0f2031;
  --psc-border:        rgba(173, 205, 229, 0.18);
  --psc-border-strong: rgba(173, 205, 229, 0.32);
  --psc-line:          rgba(173, 205, 229, 0.22);
  --psc-text:          #eef5fb;
  --psc-text-muted:    #a9b8c7;
  --psc-text-dim:      #8397aa;
  --psc-white:         #ffffff;
  --psc-accent:        #04b7d5;
  --psc-accent-soft:   rgba(4, 183, 213, 0.12);
  --psc-accent-glow:   rgba(4, 183, 213, 0.32);
  /* Im dunklen Band dreht sich der Verlauf um: helle Fläche, dunkler
     Text. Weiterhin monoton absteigend (0,564 → 0,321), Text darauf
     10,97:1 bis 6,63:1. */
  --psc-btn-1:         #3fd8ef;
  --psc-btn-2:         #22c4de;
  --psc-btn-3:         #12a8c4;
  --psc-btn-text:      #04222b;
  --psc-neutral:       #8ea6b8;
  --psc-navy-light:    #4a5488;
  /* Die Thermalpole MUESSEN hier zurueckgesetzt werden. Seit Fassung 3.5
     traegt :root die hellen Varianten; ohne diese vier Zeilen erben die
     dunklen Baender sie und das Kennwertpanel faellt auf 2,80:1. */
  --psc-warm:          #d1571d;
  --psc-warm-soft:     rgba(209, 87, 29, 0.14);
  --psc-cold:          #8ae3f7;
  --psc-cold-soft:     rgba(138, 227, 247, 0.14);
  --psc-proven:        #73e5c2;
  --psc-proven-soft:   rgba(115, 229, 194, 0.12);
  --psc-claimed:       #f1b768;
  --psc-claimed-soft:  rgba(241, 183, 104, 0.12);
  --psc-local:         #73e5c2;
  --psc-local-soft:    rgba(115, 229, 194, 0.12);
  --psc-home:          #f1b768;
  --psc-home-soft:     rgba(241, 183, 104, 0.12);
  --psc-shadow:        0 30px 80px -42px rgba(0, 0, 0, 0.86);
  color: var(--psc-text);
}
/* 3.11: der Abschnitt bleibt hell, siehe Block 3.11 am Dateiende. */

/* ---- Hero: hell, mit dunklem Kennwertpanel ----------------- */
.psc-hero__bg {
  background:
    radial-gradient(900px 520px at 78% 4%, rgba(7, 106, 128, 0.10), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, var(--psc-bg) 62%);
}
.psc-hero__grid { opacity: .35; }
/* Die Belegstatus-Box stand auf einem dunklen Verlauf. */
.psc-hero__status {
  background: var(--psc-bg-elev);
  border: 1px solid var(--psc-border);
}
.psc-status-pill { background: var(--psc-accent-soft); }
/* Der Geisterknopf lag auf dunkler Fläche. */
.psc-btn--ghost {
  background: var(--psc-bg-elev);
  border-color: var(--psc-border-strong);
  color: var(--psc-text);
}
.psc-btn--ghost:hover { border-color: var(--psc-accent); color: var(--psc-accent); }

/* ---- Navigationsleiste ------------------------------------ */
.psc-nav { background: rgba(6, 16, 26, 0.94); }
.psc-nav.is-scrolled { background: rgba(6, 16, 26, 0.98); }
@media (max-width: 979px) { .psc-nav__links { background: rgba(6, 16, 26, 0.98); } }

/* ---- Fließtext und Redaktionsseiten ----------------------- */
main.psc-page, main.psc-blog, main.psc-single {
  background:
    radial-gradient(760px 400px at 88% 0%, rgba(7, 106, 128, 0.06), transparent 68%),
    linear-gradient(180deg, #ffffff 0, var(--psc-bg) 430px);
}
.psc-prose table { background: var(--psc-bg-elev); }
.psc-story-topics a,
.psc-article-navigation .nav-links a { background: var(--psc-bg-elev); }
.psc-article-context { background: var(--psc-bg-elev); border: 1px solid var(--psc-border); }
.psc-story-cover::after {
  background: linear-gradient(115deg, rgba(47, 55, 94, .06), rgba(47, 55, 94, .16));
}
.psc-story-cover__glyph { background: rgba(255, 255, 255, .78); }

/* ---- Karten ------------------------------------------------ */
/* Der Polish-Layer setzt hier einen fest verdrahteten dunklen
   Verlauf, den die Token nicht erreichen. */
.psc-card,
.psc-postcard,
.psc-card--post {
  background: var(--psc-bg-card);
  box-shadow: 0 1px 2px rgba(47, 55, 94, .06);
}
.psc-card--post__thumb {
  background:
    radial-gradient(circle at 70% 26%, rgba(7, 106, 128, .12), transparent 40%),
    linear-gradient(135deg, #eaf1f8, #dde7f3);
  border-bottom: 1px solid var(--psc-border);
}
.psc-card--post__cat { background: var(--psc-accent-soft); }

/* Der Polish-Layer setzt hier eine feste helle Schriftfarbe (#c1ced9),
   die die Token uebergeht - auf hellem Grund 1,48:1. */
.psc-hero__sub { color: var(--psc-text-muted); }

/* ---- Blog-Karten ------------------------------------------ */
/* Der Polish-Layer gibt ihnen einen fest verdrahteten dunklen Verlauf.
   Die Schrift kommt aber aus den Token und ist auf heller Flaeche dunkel -
   dunkel auf dunkel, also unlesbar. */
.psc-story-card { background: var(--psc-bg-card); }
.psc-story-cover {
  background:
    radial-gradient(circle at 72% 28%, rgba(7, 106, 128, .14), transparent 46%),
    linear-gradient(135deg, #eaf1f8, #dde7f3);
}
.psc-story-cover::after {
  background: linear-gradient(115deg, rgba(47, 55, 94, .04), rgba(47, 55, 94, .12));
}
.psc-story-cover__topic,
.psc-story-cover__index { color: var(--psc-text-muted); }
.psc-story-cover__glyph { background: rgba(255, 255, 255, .74); color: var(--psc-accent); }

/* ---- Zwei nachgemessene Korrekturen ------------------------ */
/* Die Kategoriepille erbte eine fest verdrahtete Cyan-Toenung
   (rgba(0,212,255,.10), style.css:2413). Zusammen mit der hellen
   Miniaturflaeche darunter blieb der Akzenttext bei 3,51:1.
   Auf nahezu weisser Flaeche sind es 5,96:1. */
.psc-card--post__cat {
  background: rgba(255, 255, 255, .88);
  border-color: var(--psc-border);
  color: var(--psc-accent);
}

/* Der Kicker steht auf --psc-local. #0f7a5f erreicht auf der hellen
   Grundflaeche 4,88:1 - knapp ueber der Grenze, und der radiale
   Farbschleier auf den Redaktionsseiten frisst die Reserve auf.
   Auf den Redaktionsseiten (.psc-page, .psc-blog) liegt zusaetzlich ein
   radialer Farbschleier darueber, der auch #0d6b53 noch auf 4,30:1
   gedrueckt hat. #0a5c47 gibt 7,34:1 und haelt auch dort. */
:root {
  --psc-local:  #0a5c47;
  --psc-proven: #0a5c47;
}

/* ============================================================
   3.5 — HELL ALS VORGABE, BLAU ALS AKZENT
   ------------------------------------------------------------
   Dunkel bleiben nur noch zwei Dinge: die vier technischen
   Zeichnungen und das Kennwertpanel im Hero. Navigationsleiste,
   Kontaktbereich, Fußzeile, Belegstatus-Band und der
   Ersparnisrechner sind hell. Blau trägt jetzt Linien, Kicker,
   Verweise, Schaltflächen und die beiden dunklen Akzentflächen.
   ============================================================ */

/* ---- Thermalpole für helle Flächen ------------------------- */
/* Nur für Stellen, an denen NEBEN der Farbe ein Textetikett steht:
   die Balken des Rechners (.psc-calc__bar-label), die Studienwerte
   (.psc-study__state), die Legende des Kennwertpanels und die
   Schichtbalken im Merkblatt. Dort ist Farbe nicht der alleinige
   Bedeutungsträger, deshalb genügt die Trennung von 1,87:1.
   Die vier ZEICHNUNGEN bleiben davon ausgenommen und dunkel: dort
   trägt die Farbe die Aussage über Dutzende Elemente hinweg, und
   das dunkle Paar erreicht 2,83:1 Trennung. */
:root {
  --psc-warm:      #6b2405;   /* 10,29:1 auf #f2f6fb */
  --psc-warm-soft: rgba(107, 36, 5, 0.12);
  --psc-cold:      #0f6d80;   /*  5,50:1 */
  --psc-cold-soft: rgba(15, 109, 128, 0.12);
}

/* ---- Navigationsleiste: hell ------------------------------- */
.psc-nav {
  background: rgba(255, 255, 255, 0.86);
  border-bottom-color: var(--psc-border);
}
.psc-nav.is-scrolled {
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: var(--psc-border-strong);
}
.psc-nav__links a { color: var(--psc-text-muted); }
.psc-nav__links a:hover,
.psc-nav__links .current-menu-item > a,
.psc-nav__links .current_page_item > a,
.psc-nav__links a[aria-current="page"] { color: var(--psc-text); }
/* Die weiße Trägerfläche des Logos ist auf heller Leiste überflüssig —
   das Wortzeichen ist Navy und erreicht auf Weiß 11,5:1. */
.psc-logo__plate { background: transparent; box-shadow: none; padding: 0; }
.psc-burger span,
.psc-burger span::before,
.psc-burger span::after { background: var(--psc-text); }
@media (max-width: 979px) {
  .psc-nav__links { background: rgba(255, 255, 255, 0.98); }
}

/* ---- Kontaktbereich: hell mit blauem Schleier -------------- */
.psc-section--accent { background: var(--psc-bg-elev); }
.psc-section--accent::before {
  background:
    radial-gradient(720px 380px at 50% 0%, rgba(7, 106, 128, 0.09), transparent 66%);
}

/* ---- Fußzeile: hell --------------------------------------- */
.psc-footer {
  background: var(--psc-bg-raised);
  border-top: 1px solid var(--psc-border);
}

/* ---- Belegstatus-Band: hell, blaue Kante ------------------- */
.psc-disclaimer {
  background: var(--psc-bg-elev);
  border-top: 1px solid var(--psc-border);
  border-left: 3px solid var(--psc-accent);
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
}

/* ---- Ersparnisrechner: hell ------------------------------- */
/* Die beiden Balken tragen ihr Textetikett daneben, deshalb dürfen
   sie die hellen Thermalpole nutzen. */
.psc-calc__results { background: var(--psc-bg-elev); }

/* ============================================================
   3.7 — BREITENRHYTHMUS UND ERSTER BILDSCHIRM
   ------------------------------------------------------------
   Der Auftraggeber hat den Punkt genau benannt: die Seite darf
   breit sein, muss aber immer wieder in die Schmale zurück,
   sonst fühlt sie sich eingeengt an. Eine einzige Breite für
   alles war der Fehler — sie war entweder überall zu weit oder
   überall zu eng.

   Drei Stufen statt einer:
     --weit    Karten, Zeichnungen, Hero — Fläche zum Atmen
     Standard  Formulare, Karte, Bausteine mittlerer Dichte
     --narrow  Fließtext, Zitate, Belegstatus — Lesebreite
   ============================================================ */

:root {
  /* 1520px ist die Obergrenze für die weiten Bänder. Auf einem
     1440er-Schirm greift 94vw und damit 1354px, auf 1920 die 1520. */
  /* Die breiteste Stufe gehoert AUSSCHLIESSLICH dem Hero der Startseite.
     Bis Fassung 3.10 trugen die Zeichnungsabschnitte dieselbe Breite und
     waren damit exakt so breit wie der Hero - der Rhythmus fiel flach. */
  --psc-max-weit:   min(94vw, 1520px);   /* nur Hero */
  --psc-max-mittel: min(90vw, 1180px);   /* Zeichnungen, breite Raster */
}

.psc-container--weit   { max-width: var(--psc-max-weit); }
.psc-container--mittel { max-width: var(--psc-max-mittel); }
.psc-container--narrow { max-width: 780px; }

/* ---- Hero: erster Bildschirm ohne Scrollen ----------------- */
/* Vorher 1890px hoch bei 900px Schirm — der Scrollhinweis lag
   990px unterhalb der Kante. Zwei Ursachen: die Textspalte war
   durch den engen Container auf 377px zusammengedrückt (die
   Überschrift brach auf fünf Zeilen), und die Polster waren fest
   statt an der Schirmhöhe bemessen. */
.psc-hero {
  min-height: 100svh;
  padding: calc(var(--psc-nav-h) + clamp(12px, 3.5vh, 56px)) 0 clamp(58px, 9vh, 104px);
  display: flex;
  align-items: center;
}
@media (min-width: 980px) {
  .psc-hero__layout {
    /* minmax(0, …) ist entscheidend: ohne die Null als Untergrenze
       nimmt sich die rechte Spalte ihre Inhaltsbreite (540px) und
       die linke bekommt nur den Rest. */
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(32px, 4vw, 72px);
  }
}
.psc-hero__col { max-width: 46rem; }

/* Vertikaler Rhythmus im Hero an der Schirmhöhe bemessen. */
.psc-hero h1        { margin-top: clamp(8px, 1.6vh, 24px); }
.psc-hero__sub      { margin-top: clamp(10px, 2vh, 28px); }
.psc-hero__actions  { margin-top: clamp(14px, 2.6vh, 34px); }
.psc-hero__status   { margin-top: clamp(14px, 2.6vh, 34px); padding: clamp(12px, 1.6vh, 20px) clamp(14px, 1.4vw, 20px); }

/* Der Belegstatus-Kasten trug zwei lange Absätze und allein 330px.
   Derselbe Text steht vollständig im Belegstatus-Band am Seitenfuß;
   im Hero genügt die Marke und der Weg zum Merkblatt. Auf niedrigen
   Schirmen entfallen die Absätze ganz. */
/* Die Schriftgroessen im Hero werden an Breite UND Hoehe bemessen.
   Ohne die vh-Grenze brach "Ein neues Geschaeftsfeld." bei 73px in der
   695px breiten Spalte um - aus drei Zeilen wurden fuenf, und allein
   die Ueberschrift war 351px hoch. */
.psc-hero h1 {
  font-size: clamp(30px, min(4.4vw, 7vh), 58px);
  line-height: 1.04;
}
.psc-hero__sub {
  font-size: clamp(15px, min(1.35vw, 2.1vh), 20px);
  line-height: 1.55;
  max-width: 56ch;
}
/* Der Belegstatus-Satz erscheint nur, wenn der Schirm ihn traegt. */
@media (max-height: 950px) {
  /* Auf niedrigen Schirmen bleibt nur Marke und Weg zum Merkblatt. */
  .psc-hero__status p { display: none; }
  .psc-hero__status   { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .psc-hero__status-head { margin: 0; }
}
@media (max-height: 800px) {
  .psc-hero h1 { font-size: clamp(34px, 4.6vh, 56px); line-height: 1.04; }
  .psc-hero__sub { font-size: clamp(15px, 2vh, 19px); }
}

/* Auf niedrigen Schirmen ist das Kennwertpanel der Engpass, nicht der Text:
   es baut 618px und laesst bei 768px Schirmhoehe nichts mehr uebrig. Gekuerzt
   werden die Farbskala und ihre Erlaeuterung — beides ist Beiwerk. Die
   Belegstatus-Zeile unter JEDER Zahl bleibt stehen; sie ist der Grund, warum
   die Zahlen ueberhaupt gezeigt werden duerfen. */
@media (max-height: 820px) {
  .psc-metrics__scale,
  .psc-metrics__note { display: none; }
  .psc-metrics { padding: clamp(14px, 1.8vh, 22px); }
  .psc-metrics__row { padding-block: clamp(6px, 1vh, 12px); }
}

/* ---- Artikelseiten ---------------------------------------- */
/* Die Beitragsvorlage war bei der Hellumstellung nicht pruefbar, weil es
   damals keine Beitraege gab. Das Inhaltsverzeichnis trug einen fest
   verdrahteten dunklen Grund (rgba(10,23,36,.82)) bei jetzt dunkler
   Schrift — 1,35:1. */
.psc-article-toc,
.psc-article-toc-mobile {
  background: var(--psc-bg-elev);
  border: 1px solid var(--psc-border);
}
.psc-article-toc a { color: var(--psc-text-muted); }
.psc-article-toc a:hover,
.psc-article-toc a.is-current { color: var(--psc-accent); }
/* Datum und Lesezeit standen auf --psc-text-dim und kamen auf dem
   Farbschleier der Beitragsseiten nur auf 3,76:1. */
.psc-article__meta,
.psc-article__meta time,
.psc-article__meta span { color: var(--psc-text-muted); }

/* Auf den Redaktionsseiten liegt ein radialer Farbschleier ueber der
   Flaeche. Er kostet den Akzent rund 1,6 Kontraststufen (5,72:1 -> 4,13:1).
   Dort deshalb eine Stufe dunkler binden, statt den Schleier zu opfern. */
main.psc-single,
main.psc-blog,
main.psc-page {
  --psc-accent:    #05596a;
  --psc-text-dim:  #48546f;
}

/* ============================================================
   3.9 — SCHALTFLÄCHEN UND KOMPAKTER RECHNER
   ============================================================
   Zwei Rückstände der Umstellung auf hellen Grund und ein
   Umbau des Rechnerformulars.
   ============================================================ */

/* ---- Der dunkle Streifen in der Verlaufsmitte -------------- */
/* Der Verlauf lautete: #58e8f8 → var(--psc-accent) → #67e2d3.
   Mit dem alten hellen Akzent (#04b7d5) lief die Helligkeit
   flach durch. Mit dem Akzent für hellen Grund (#076a80) lief
   sie hell → dunkel → hell, und genau das sah man: einen
   schmutzigen dunklen Streifen quer durch die Mitte.
   Jetzt streng monoton absteigend über eigene Token, die die
   dunklen Bänder umbinden. */
.psc-btn--primary {
  background: linear-gradient(135deg, var(--psc-btn-1) 0%, var(--psc-btn-2) 55%, var(--psc-btn-3) 100%);
  color: var(--psc-btn-text);
  box-shadow: 0 10px 28px -14px var(--psc-accent-glow), inset 0 1px rgba(255, 255, 255, .22);
}
.psc-btn--primary:hover {
  color: var(--psc-btn-text);
  box-shadow: 0 14px 34px -14px var(--psc-accent-glow), 0 0 0 1px var(--psc-btn-3), inset 0 1px rgba(255, 255, 255, .22);
}
.psc-form button[type="submit"] {
  background: linear-gradient(135deg, var(--psc-btn-1) 0%, var(--psc-btn-2) 55%, var(--psc-btn-3) 100%);
  color: var(--psc-btn-text);
}

/* ---- Balkenspur des Rechners ------------------------------- */
/* Die Spur stand auf rgba(173,205,229,.12) — ein Wert für dunklen
   Grund. Auf der weißen Ergebnisfläche ergab das 1,66:1: die
   Bezugslänge, gegen die man die beiden Balken vergleicht, war
   unsichtbar. Jetzt helle Füllung mit dunkler Haarlinie (5,67:1),
   in beiden Bändern tragfähig, weil beide Werte Token sind. */
.psc-calc__bar {
  height: 14px;
  box-sizing: border-box;
  border: 1px solid var(--psc-text-dim);
  background: var(--psc-bg-raised);
}

/* ---- Rechner: kompakter ----------------------------------- */
/* Vorher 1.135 px hoch bei 1440er Fenster, davon 891 px allein die
   sieben Felder in EINER Spalte und 130 px die Schnellwahl in ZWEI
   Reihen. Beides lag daran, dass die Eingabespalte nur halb so breit
   ist wie der Rechner — die Schnellwahl passte darin nie in eine Reihe.
   Deshalb zwei Abfragebereiche statt Medienabfragen: die Feldspalten
   richten sich nach der Breite, die die Eingabespalte TATSÄCHLICH hat,
   nicht nach der Fensterbreite. Die Schwellen stehen in em, damit bei
   vergrößerter Schrift automatisch auf eine Spalte zurückgefallen wird
   statt zu quetschen. */
.psc-calc {
  container-type: inline-size;
  container-name: psc-rechner;
  gap: clamp(14px, 1.8vw, 22px);
}
.psc-calc__inputs {
  container-type: inline-size;
  container-name: psc-eingaben;
}
.psc-calc__inputs,
.psc-calc__results {
  padding: clamp(16px, 1.8vw, 22px);
}
.psc-calc__sub { margin: 0 0 12px; }

/* Schnellwahl über die volle Breite: erst dort passen alle vier
   Schaltflächen in eine einzige Reihe. Sie setzt Werte für die ganze
   Rechnung und gehört ohnehin nicht in die Eingabespalte. */
.psc-calc__scenarios {
  grid-column: 1 / -1;
  display: grid;
  gap: 7px;
}
.psc-calc__scenarios-title {
  color: var(--psc-text-muted);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.psc-calc__presets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
@container psc-rechner (min-width: 35em) {
  /* Feste vier Spalten, nicht auto-fit: auto-fit hätte bei manchen
     Breiten drei plus eine ergeben, und das sieht nach Versehen aus. */
  .psc-calc__presets { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.psc-calc__preset {
  position: relative;
  align-content: center;
  gap: 1px;
  min-height: 46px;
  padding: 7px 27px 7px 11px;   /* rechts Platz für das Häkchen */
  border-radius: 9px;
  line-height: 1.25;
}
/* Zwei Klassen, weil .psc-calc__preset span (0,1,1) sonst auch den
   Namen klein und gedämpft setzt. */
.psc-calc__preset > .psc-calc__preset-name {
  color: var(--psc-text);
  font-size: .8rem;
  font-weight: 650;
}
.psc-calc__preset > .psc-calc__preset-values {
  color: var(--psc-text-muted);
  font-size: .75rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
/* Der gewählte Zustand darf die Höhe NICHT verändern. Vorher wuchs die
   Schaltfläche um die Zeile „gewählt" und um 1 px Rahmenbreite, wodurch
   beim Klick die ganze Reihe sprang. Jetzt Innenrahmen per box-shadow
   (belegt keinen Platz) und ein Häkchen in der freigehaltenen Spalte.
   Weiterhin nicht allein farbig kodiert: aria-pressed, doppelter
   Innenrahmen und Häkchen. */
.psc-calc__preset[aria-pressed="true"] {
  border-width: 1px;
  padding: 7px 27px 7px 11px;
  box-shadow: inset 0 0 0 2px var(--psc-accent);
}
.psc-calc__preset[aria-pressed="true"]::after {
  content: "✓";
  position: absolute;
  top: 50%;
  right: 9px;
  transform: translateY(-50%);
  font-size: .95rem;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}

/* Felder zweispaltig, sobald die Eingabespalte selbst breit genug ist. */
.psc-calc__fields {
  grid-template-columns: minmax(0, 1fr);
  gap: 13px 14px;
}
/* 21em = 336 px. Die Schwelle ist nachgemessen, nicht geschätzt: die
   längste Einheit ist „W/(m²·K)" mit 74 px. Bei 336 px Inhaltsbreite
   bleibt je Spalte (336−14)/2 = 161 px, davon 74 für die Einheit und
   87 für das Zahlenfeld — genug für „0.85" samt Pfeilen. Darunter wäre
   das Zahlenfeld schmaler als sein Inhalt.
   Mit 24 em blieben die Felder zwischen 980 und 1180 px Fensterbreite
   einspaltig, weil die Eingabespalte dort nur 365 px innen hat. */
@container psc-eingaben (min-width: 21em) {
  .psc-calc__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .psc-calc__field--breit { grid-column: 1 / -1; }
}
.psc-calc__field { gap: 4px; }
.psc-calc__field label {
  font-size: .86rem;
  line-height: 1.3;
}
.psc-calc__control input { padding: 9px 11px; }
/* Nicht unter 12 px effektiv — dieselbe Untergrenze wie in den
   Zeichnungen. .75rem sind genau 12 px. */
.psc-calc__suffix {
  padding: 0 10px;
  font-size: .78rem;
}
.psc-calc__hint {
  font-size: .76rem;
  line-height: 1.45;
}

/* Ergebnisseite mitziehen: sie bestimmt nach dem Kürzen der Felder die
   Gesamthöhe des Rechners. Die Kennzahlen zweispaltig ebenfalls nach
   der Panelbreite statt nach der Fensterbreite — bei 1440 px Fenster
   ist das Panel nur 440 px breit. */
.psc-calc__results {
  container-type: inline-size;
  container-name: psc-ergebnis;
}
.psc-calc__headline {
  margin: 0 0 14px;
  padding-bottom: 12px;
}
.psc-calc__bars { gap: 11px; margin-bottom: 16px; }
/* Zurücksetzen ist hier nötig, nicht nur ergänzen: weiter oben steht ein
   @media (min-width: 560px) auf demselben Selektor. Medienabfragen erhöhen
   die Spezifität nicht, diese Regel steht später und gewinnt deshalb —
   ohne sie bliebe die Fensterbreite maßgeblich und die Kennzahlen wären
   bei 200 % Schriftgröße weiterhin zweispaltig gequetscht. */
.psc-calc__figures {
  grid-template-columns: minmax(0, 1fr);
  margin: 0 0 14px;
}
/* Gleiche Schwelle wie bei den Feldern. Die längste Bezeichnung ist
   „Heizkosten nachher": 18 Zeichen bei 12,16 px und 0,04em Sperrung
   ≈ 135 px, trägt in 161 px. */
@container psc-ergebnis (min-width: 21em) {
  .psc-calc__figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.psc-calc__figures > div { padding: 9px 12px; gap: 2px; }
.psc-calc__reading {
  margin: 0 0 12px;
  padding: 10px 13px;
  font-size: .86rem;
  line-height: 1.5;
}
.psc-calc__method { font-size: .78rem; line-height: 1.5; }

/* ============================================================
   3.10 — BROTKRUMEN
   ============================================================ */
/* Die letzte Krume ist kein Verweis und traegt aria-current="page".
   Der Trenner steckt in ::before statt in einem eigenen Element: er ist
   Dekoration und soll nicht mitgelesen werden. */
.psc-krumen {
  margin: 0 0 clamp(14px, 1.6vw, 22px);
  font-size: .8rem;
  line-height: 1.5;
}
.psc-krumen ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.psc-krumen li { display: flex; align-items: center; gap: 6px; }
.psc-krumen li + li::before {
  content: "/";
  color: var(--psc-text-dim);
  /* Dekoration: aus dem Textfluss der Vorlesehilfe heraushalten. */
  speak: none;
}
.psc-krumen a {
  color: var(--psc-text-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.psc-krumen a:hover,
.psc-krumen a:focus-visible {
  color: var(--psc-accent);
  border-bottom-color: currentColor;
}
.psc-krumen [aria-current="page"] {
  color: var(--psc-text);
  font-weight: 650;
}

/* ============================================================
   3.11 — DUNKEL NUR DORT, WO ES GEBRAUCHT WIRD
   ============================================================
   Gemessen vor dieser Fassung, 1440x900:
     /wirkprinzip/  3.249 px ununterbrochen dunkel = 3,61 Bildschirme
     /produkt/      2.288 px                       = 2,54 Bildschirme
   Die Ursache war eine Verwechslung von Anlass und Umfang: die dunkle
   Flaeche existiert, weil die FARBEN DER ZEICHNUNG sie brauchen — der
   Kaltpol erreicht auf hellem Grund nur 1,34:1. Gefaerbt wurde aber der
   ganze Abschnitt, samt Ueberschrift, Fliesstext und, auf /referenzen/,
   den Studienkarten. Nichts davon braucht dunklen Grund.

   Jetzt traegt .psc-figure-block die Tokens und liegt als dunkle Karte auf
   heller Flaeche. Damit unterbricht zwischen zwei Zeichnungen automatisch
   ein heller Textteil — genau die gewuenschte Taktung.
   ============================================================ */

.psc-section--figure {
  /* Nicht mehr dunkel. Ein Hauch Tiefe trennt den Abschnitt trotzdem vom
     Weiss daneben, ohne eine zweite Flaechenfarbe einzufuehren. */
  background: var(--psc-bg-raised);
}

/* .psc-figure-block ist jetzt nur noch die Klammer und selbst hell.
   Dunkel ist die Zeichenflaeche darin. */
.psc-wallsec__viewport,
.psc-graphic__viewport,
.psc-fig__viewport,
.psc-thickness {
  border-radius: var(--psc-radius);
  background: #06101a;
  color: var(--psc-text);
  box-shadow: var(--psc-shadow);
}
/* Innenabstand bringen die Zeichnungen seit Fassung 3.3 in ihrer eigenen
   viewBox mit (je 20 Einheiten ringsum). Ein zusaetzliches Polster hier
   laege INNERHALB des waagerechten Bildlaufs und wuerde beim Scrollen
   mitwandern. */
.psc-thickness { padding: clamp(14px, 2vw, 26px); }

/* Die Zeichnung soll nicht hoeher als ein Bildschirm werden. Sie skaliert
   ueber die Breite, also wird die Breite begrenzt, nicht die Hoehe: eine
   max-height auf ein SVG mit viewBox erzeugt nur Randstreifen.
   Seitenverhaeltnis der beiden hohen Zeichnungen: 460/760 = 0,605.
   Bei 78svh nutzbarer Hoehe ergibt das 78/0,605 = 129svh Breite — die
   Begrenzung greift also erst auf sehr flachen Fenstern, und genau dort
   soll sie greifen. */
.psc-figure-block > figure,
.psc-figure-block > .psc-graphic {
  margin-inline: auto;
  max-width: min(100%, 128svh);
}

/* Der Abstand zwischen zwei Zeichnungsabschnitten war fuer zwei dunkle
   Flaechen bemessen, die aneinanderstiessen. Zwischen zwei hellen
   Abschnitten mit dunkler Karte darin wirkt er zu gross. */
.psc-section--figure + .psc-section--figure { padding-top: clamp(24px, 3vw, 44px); }

/* ---- 3.11b Zeichnungsabschnitte: enger takten ------------- */
/* Gemessen bei 1440 px: Ueberschrift 787 px breit, Fliesstext 620 px,
   Zeichnung 1152 px — drei Breiten im selben Abschnitt, dazu 115 px
   Polster oben und unten. Das las sich als „zu weiter Kasten mit zu
   wenig darin". Jetzt zwei Breiten: Text auf Lesemass, Zeichnung breit. */
.psc-section--figure {
  padding-block: clamp(44px, 5.5vw, 78px);
}
.psc-section--figure .psc-section__head,
.psc-section--figure .psc-section__head--wide {
  max-width: 760px;
}
/* Die Ueberschrift bricht sonst erst nach 787 px. Bei 51 px Schriftgrad
   sind rund 22 Zeichen je Zeile das angenehme Mass. */
.psc-section--figure .psc-section__head > h2 {
  max-width: 22ch;
}
.psc-section--figure .psc-section__lead {
  max-width: var(--psc-lesebreite);
}

/* ---- Industriereferenzen ----------------------------------- */
.psc-refs {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(24px, 3vw, 40px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.psc-refs__group {
  padding: clamp(14px, 1.6vw, 20px);
  border: 1px solid var(--psc-border);
  border-left: 3px solid var(--psc-accent);
  border-radius: var(--psc-radius);
  background: var(--psc-bg-card);
}
.psc-refs__branch {
  margin: 0 0 10px;
  color: var(--psc-text-muted);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.4;
}
.psc-refs__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 5px;
}
.psc-refs__list li {
  color: var(--psc-text);
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.4;
}
/* Der Belegstatus gehoert an die Liste, nicht ans Seitenende: wer die
   Namen liest, muss im selben Blick sehen, wessen Referenzen das sind. */
.psc-refs__note {
  max-width: var(--psc-lesebreite);
  margin: clamp(20px, 2.4vw, 30px) 0 0;
  padding: 12px 14px;
  border-left: 3px solid var(--psc-claimed);
  background: var(--psc-claimed-soft);
  color: var(--psc-text-muted);
  font-size: .82rem;
  line-height: 1.6;
}
.psc-refs__note strong { color: var(--psc-text); }

/* ---- Partnerkarte, selbst gezeichnet ----------------------- */
/* .psc-map trug die Masse der eingebetteten Karte (feste Hoehe, grauer
   Kasten fuer die Schranke). Die eigene Karte bringt ihre Hoehe aus dem
   Seitenverhaeltnis mit. */
.psc-map--eigen {
  min-height: 0;
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  display: block;
  /* Die Basisregel .psc-map setzt overflow:hidden. Das war fuer die alte,
     eingebettete Karte mit fester Hoehe sinnvoll; bei der selbst gezeichneten
     Karte schneidet es aber die Sprechblasen (.psc-pk__info) ab, die fuer
     Rand-Standorte ueber den Kartenrand hinausragen — unten links ist dabei
     der Text abgeschnitten. Die eigene Karte hat keinen Inhalt, der gekappt
     werden muesste, also sichtbar. (2026-08-09) */
  overflow: visible;
}


/* ============================================================
   4.0 — WOOCOMMERCE
   ============================================================
   Shop, Produktseite und Produktarchive laufen ueber woocommerce.php
   des Themes und liegen dort in .psc-container--mittel.

   Warenkorb, Kasse und Mein Konto sind dagegen normale Seiten mit
   Shortcodes; fuer sie ist is_woocommerce() falsch, sie gehen also durch
   page.php und landen in .psc-container--narrow (780 px). Gemessen: die
   Kasse ist zweispaltig angelegt und faellt bei 780 px zusammen, die
   Bestelluebersicht rutscht unter das Formular. Deshalb hier ueber die
   Body-Klassen aufgeweitet.
   ============================================================ */

body.woocommerce-cart main.psc-page > .psc-container--narrow,
body.woocommerce-checkout main.psc-page > .psc-container--narrow,
body.woocommerce-account main.psc-page > .psc-container--narrow {
  max-width: var(--psc-max);
}

/* .psc-prose setzt Artikeltypografie: Lesebreite, grosse Zeilenabstaende,
   Tabellenrahmen. Auf Warenkorb und Kasse ist das falsch — dort stehen
   Formulare und Rechenwerke, keine Fliesstexte. */
body.woocommerce-cart .psc-prose,
body.woocommerce-checkout .psc-prose,
body.woocommerce-account .psc-prose {
  max-width: none;
}

/* Die mobile Tabellenaufloesung (Block 1, @media max-width 640) zerlegt
   thead/tbody/tr/th/td in .psc-prose zu Bloecken. WooCommerce bringt fuer
   Warenkorb und Bestelldetails eine eigene mobile Darstellung mit eigenen
   ::before-Beschriftungen mit. Beides zusammen ergibt doppelte oder
   fehlende Spaltenbeschriftungen — also hier zuruecknehmen. */
@media (max-width: 640px) {
  .psc-prose table.shop_table thead,
  .psc-prose table.shop_table tbody,
  .psc-prose table.shop_table tr,
  .psc-prose table.shop_table th,
  .psc-prose table.shop_table td,
  .psc-prose table.woocommerce-orders-table thead,
  .psc-prose table.woocommerce-orders-table tbody,
  .psc-prose table.woocommerce-orders-table tr,
  .psc-prose table.woocommerce-orders-table th,
  .psc-prose table.woocommerce-orders-table td {
    display: revert;
    width: revert;
  }
}

/* ---- Shop-Ansicht ----------------------------------------- */
.psc-shop .woocommerce-products-header__title,
.psc-shop .product_title {
  margin-top: 0;
}

/* Vier Spalten sind bei 1180 px Containerbreite rund 270 px je Karte —
   genug fuer Bild, Titel und Preis. Darunter wird geteilt, statt die
   Karten zu quetschen. */
.psc-shop ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: clamp(18px, 2.2vw, 30px);
  margin: clamp(24px, 3vw, 40px) 0 0;
  padding: 0;
  list-style: none;
}
.psc-shop ul.products::before,
.psc-shop ul.products::after { content: none; }
.psc-shop ul.products li.product {
  width: auto !important;   /* WooCommerce setzt Prozentbreiten inline */
  margin: 0 !important;
  float: none !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(12px, 1.4vw, 18px);
  border: 1px solid var(--psc-border);
  border-radius: var(--psc-radius);
  background: var(--psc-bg-card);
}
.psc-shop ul.products li.product img {
  border-radius: calc(var(--psc-radius) - 4px);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.psc-shop ul.products li.product .woocommerce-loop-product__title {
  font-size: .98rem;
  font-weight: 650;
  line-height: 1.3;
  margin: 4px 0 0;
}
.psc-shop ul.products li.product .price {
  color: var(--psc-text);
  font-weight: 700;
}
/* Der Preis ist der letzte Inhalt vor der Schaltflaeche; er soll bei
   unterschiedlich langen Titeln auf gleicher Hoehe stehen. */
.psc-shop ul.products li.product .button {
  margin-top: auto;
  align-self: start;
}

/* ---- Produktseite ----------------------------------------- */
@media (min-width: 900px) {
  .psc-shop div.product {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(28px, 3.5vw, 56px);
    align-items: start;
  }
  /* WooCommerce legt Galerie und Zusammenfassung als Floats mit width:48%
     an. Im Raster bezieht sich das auf die SPALTE, nicht auf die Zeile:
     gemessen 228 px in einer 474-px-Spalte und 273 px in einer 569-px-Spalte,
     die Ueberschrift brach dadurch auf vier Zeilen um. Die Prozentbreiten
     muessen also ausdruecklich zurueckgenommen werden. */
  .psc-shop div.product .woocommerce-product-gallery,
  .psc-shop div.product .summary {
    width: 100% !important;
    float: none !important;
  }
  .psc-shop div.product .woocommerce-product-gallery { grid-column: 1; }
  .psc-shop div.product .summary { grid-column: 2; margin: 0; }
  /* Beschreibung, Zusatzinformationen und Bewertungen laufen unter beiden
     Spalten durch. */
  .psc-shop div.product .woocommerce-tabs,
  .psc-shop div.product .related,
  .psc-shop div.product .upsells { grid-column: 1 / -1; }
}
.psc-shop div.product .summary > * { max-width: var(--psc-lesebreite); }

/* ---- Warenkorb in der Navigationsleiste -------------------- */
.psc-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;          /* Tippziel, wie bei allen Bedienelementen */
  padding: 0 12px;
  border: 1px solid var(--psc-border-strong);
  border-radius: 10px;
  color: var(--psc-text);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.psc-cart:hover,
.psc-cart:focus-visible {
  border-color: var(--psc-accent);
  background: var(--psc-accent-soft);
  color: var(--psc-accent);
}
.psc-cart__icon { flex: none; }
/* Die Zahl ist nicht allein farbig kodiert: der gefuellte Zustand traegt
   zusaetzlich einen kraeftigeren Rahmen und eine Flaeche. */
.psc-cart--gefuellt {
  border-color: var(--psc-accent);
  background: var(--psc-accent-soft);
}
.psc-cart__count { line-height: 1; }

/* Auf schmalen Schirmen konkurriert der Warenkorb mit der Partner-
   Schaltflaeche und dem Menuesymbol. Dort bleibt das Symbol, die Zahl
   rutscht als kleine Marke darueber. */
@media (max-width: 560px) {
  .psc-cart { padding: 0 10px; gap: 0; }
  .psc-cart__count {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--psc-accent);
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
    line-height: 17px;
    text-align: center;
  }
  .psc-cart:not(.psc-cart--gefuellt) .psc-cart__count { display: none; }
}

/* ---- Fusszeile: fuenf Gruppen statt vier ------------------- */
/* Mit dem Shop kam eine fuenfte Spalte dazu. Feste vier Spalten haetten die
   Rechtsseiten in eine bestehende Gruppe gedraengt; auto-fit verteilt sie
   und bricht auf schmalen Schirmen von selbst um. */
.psc-footer__nav {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}

/* ============================================================
   4.1 — SHOP: GESTALTUNG STATT WOOCOMMERCE-VOREINSTELLUNG
   ============================================================
   Drei Befunde aus der Messung am 02.08.2026:

   1. Die Produktfotos sind blasse Gebinde auf weissem Grund. Auf der
      hellen Seitenflaeche haben sie keine Kante — die Bildmitte misst
      rgb(209,212,227), der Seitengrund #f2f6fb. Auf der Produktseite
      wirkte die Galerie dadurch schlicht leer. Jedes Bild braucht eine
      eigene, klar begrenzte Flaeche.
   2. Die Kaufschaltflaechen standen auf rgb(127,84,179) — WooCommerce-
      Violett, nicht die Marke.
   3. Der Preis stand auf rgb(149,142,9), einem Oliv aus derselben Quelle.
   ============================================================ */

/* ---- Schaltflaechen ---------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce button.single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 12px 22px;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--psc-btn-1) 0%, var(--psc-btn-2) 55%, var(--psc-btn-3) 100%);
  color: var(--psc-btn-text);
  font: inherit;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  text-shadow: none;
  transition: filter .2s ease, transform .18s ease, box-shadow .25s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce button.single_add_to_cart_button:hover {
  background: linear-gradient(135deg, var(--psc-btn-1) 0%, var(--psc-btn-2) 55%, var(--psc-btn-3) 100%);
  color: var(--psc-btn-text);
  filter: brightness(1.08);
  transform: translateY(-1px);
}
/* Zweitrangige Schaltflaechen (weiter einkaufen, Gutschein) treten zurueck. */
.woocommerce a.button.wc-backward,
.woocommerce .cart .button[name="update_cart"],
.woocommerce .coupon .button {
  background: var(--psc-bg-card);
  border: 1px solid var(--psc-border-strong);
  color: var(--psc-text);
}
.woocommerce a.button.wc-backward:hover,
.woocommerce .coupon .button:hover {
  background: var(--psc-accent-soft);
  border-color: var(--psc-accent);
  color: var(--psc-accent);
  filter: none;
}
.woocommerce .button.disabled,
.woocommerce button.button:disabled { opacity: .45; filter: none; transform: none; }

/* ---- Preise ------------------------------------------------ */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
  color: var(--psc-text);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.woocommerce div.product p.price { font-size: 1.75rem; line-height: 1.15; margin: 0 0 4px; }
.woocommerce ul.products li.product .price { font-size: 1.12rem; }
.woocommerce del { color: var(--psc-text-dim); font-weight: 500; }
.woocommerce ins { background: none; text-decoration: none; }
/* Grundpreis nach PAngV: Pflichtangabe, aber nachgeordnet. */
.wc-gzd-additional-info,
p.wc-gzd-additional-info,
.woocommerce .price .wc-gzd-additional-info {
  display: block;
  color: var(--psc-text-muted);
  font-size: .84rem;
  font-weight: 500;
  line-height: 1.5;
  margin: 2px 0 0;
}

/* ---- Produktkarten in Raster und Shop ---------------------- */
/* Die Bildflaeche ist der Kern: eine eigene weisse Flaeche mit Kante gibt
   den blassen Gebinden die Begrenzung, die sie selbst nicht mitbringen. */
.woocommerce ul.products li.product a img,
.psc-shop ul.products li.product img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin: 0 0 12px;
  padding: 10px;
  border: 1px solid var(--psc-border);
  border-radius: calc(var(--psc-radius) - 4px);
  background: #fff;
}
.psc-shop ul.products li.product {
  transition: border-color .2s ease, box-shadow .25s ease, transform .18s ease;
}
.psc-shop ul.products li.product:hover {
  border-color: var(--psc-accent);
  box-shadow: var(--psc-shadow);
  transform: translateY(-2px);
}
.psc-shop ul.products li.product .woocommerce-loop-product__title {
  min-height: 2.6em;      /* zwei Zeilen: die Karten enden auf einer Linie */
}
/* Die Schaltflaeche sitzt am Fuss der Karte, damit alle auf einer Linie
   enden — die Infobloecke sind unterschiedlich lang (Grundpreis nur bei
   Fluessigprodukten, Preisspanne nur bei variablen). margin-top: auto ist
   dafuer das Mittel; ein fester Wert wuerde es aufheben, genau das ist mir
   beim ersten Anlauf passiert. */
.psc-shop ul.products li.product .button {
  width: 100%;
  margin-top: auto;
}
/* Der Abstand kommt aus einem eigenen Zwischenraum, nicht aus margin-top —
   sonst konkurriert er wieder mit auto. */
.psc-shop ul.products li.product .price { margin-bottom: 14px; }

/* ---- Kopf der Shop-Seite ----------------------------------- */
.psc-shop .woocommerce-result-count {
  color: var(--psc-text-dim);
  font-size: .88rem;
  margin: 0;
}
.psc-shop .woocommerce-ordering select,
.woocommerce .woocommerce-ordering select {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--psc-border-strong);
  border-radius: 10px;
  background: var(--psc-bg-card);
  color: var(--psc-text);
  font: inherit;
  font-size: .9rem;
}
.psc-shop .woocommerce-notices-wrapper:empty { display: none; }

/* ---- Produktseite ------------------------------------------ */
/* Galerie in eine begrenzte Flaeche. Ohne sie steht ein weisses Gebinde
   auf hellblauem Grund und die Seite wirkt leer. */
.psc-shop div.product .woocommerce-product-gallery {
  padding: clamp(14px, 1.8vw, 26px);
  border: 1px solid var(--psc-border);
  border-radius: var(--psc-radius);
  background: #fff;
}
.psc-shop div.product .woocommerce-product-gallery__image img { border-radius: 6px; }
.psc-shop div.product .flex-control-thumbs { margin-top: 12px; gap: 8px; display: flex; flex-wrap: wrap; }
.psc-shop div.product .flex-control-thumbs li { width: auto !important; margin: 0 !important; }
.psc-shop div.product .flex-control-thumbs img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  padding: 4px;
  border: 1px solid var(--psc-border);
  border-radius: 6px;
  background: #fff;
  opacity: .7;
}
.psc-shop div.product .flex-control-thumbs img.flex-active,
.psc-shop div.product .flex-control-thumbs img:hover { opacity: 1; border-color: var(--psc-accent); }

.psc-shop div.product .product_title {
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -.03em;
  margin: 0 0 14px;
}
/* Kurzbeschreibung als eigener Absatz mit Luft, nicht als Textblock
   direkt unter dem Preis. */
.psc-shop div.product .woocommerce-product-details__short-description {
  margin: 18px 0;
  padding: 16px 18px;
  border-left: 3px solid var(--psc-accent);
  border-radius: 0 var(--psc-radius) var(--psc-radius) 0;
  background: var(--psc-bg-raised);
  font-size: .96rem;
  line-height: 1.65;
}
.psc-shop div.product .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }

.psc-shop div.product form.cart { margin: 20px 0; }
.psc-shop div.product form.cart .quantity { margin-right: 10px; }
.psc-shop div.product .quantity .qty,
.woocommerce .quantity .qty {
  width: 72px;
  min-height: 46px;
  padding: 10px;
  border: 1px solid var(--psc-border-strong);
  border-radius: 10px;
  background: var(--psc-bg);
  color: var(--psc-text);
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
/* Variantenauswahl */
.psc-shop div.product table.variations { margin: 0 0 16px; border: 0; }
.psc-shop div.product table.variations td,
.psc-shop div.product table.variations th { padding: 6px 0; border: 0; background: none; }
.psc-shop div.product table.variations label { font-weight: 650; }
.psc-shop div.product .variations select {
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--psc-border-strong);
  border-radius: 10px;
  background: var(--psc-bg-card);
  color: var(--psc-text);
  font: inherit;
}

/* Artikelnummer, Kategorie, Schlagwoerter: eine ruhige Fusszeile statt
   einer Wand aus Kleinschrift. */
.psc-shop div.product .product_meta {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--psc-border);
  color: var(--psc-text-dim);
  font-size: .84rem;
  line-height: 1.8;
}
.psc-shop div.product .product_meta > span { display: block; }

/* ---- Reiter ------------------------------------------------ */
.psc-shop .woocommerce-tabs { margin-top: clamp(32px, 4vw, 56px); }
.psc-shop .woocommerce-tabs ul.tabs {
  margin: 0 0 24px;
  padding: 0;
  border-bottom: 1px solid var(--psc-border);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.psc-shop .woocommerce-tabs ul.tabs::before,
.psc-shop .woocommerce-tabs ul.tabs::after,
.psc-shop .woocommerce-tabs ul.tabs li::before,
.psc-shop .woocommerce-tabs ul.tabs li::after { content: none !important; display: none !important; }
.psc-shop .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.psc-shop .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 12px 18px;
  border-bottom: 2px solid transparent;
  color: var(--psc-text-muted);
  font-weight: 650;
  text-decoration: none;
}
.psc-shop .woocommerce-tabs ul.tabs li.active a,
.psc-shop .woocommerce-tabs ul.tabs li a:hover {
  color: var(--psc-text);
  border-bottom-color: var(--psc-accent);
}
.psc-shop .woocommerce-tabs .panel > h2:first-child { display: none; }  /* doppelt zur Reiterbeschriftung */
.psc-shop .woocommerce-tabs .panel { max-width: var(--psc-lesebreite); }
.psc-shop .woocommerce-tabs .panel h2,
.psc-shop .woocommerce-tabs .panel h3 { font-size: 1.05rem; margin: 24px 0 8px; }
.psc-shop .woocommerce-tabs .panel p { line-height: 1.7; }

/* ---- Aehnliche Produkte ------------------------------------ */
.psc-shop .related > h2,
.psc-shop .upsells > h2 {
  font-size: 1.25rem;
  margin: 0 0 4px;
}
.psc-shop .related, .psc-shop .upsells { margin-top: clamp(36px, 4.5vw, 64px); }

/* ---- 4.1b Zwei Spezifitaetsfallen ------------------------- */
/* Der Grundpreis traegt selbst die Klasse "price" und erbt damit die
   28 px der Preiszeile. Gemessen: .wc-gzd-additional-info (0,1,0) verliert
   gegen .woocommerce div.product p.price (0,3,1). Also gleichziehen. */
.psc-shop div.product p.price.wc-gzd-additional-info,
.psc-shop div.product .price-unit,
.woocommerce div.product p.price.wc-gzd-additional-info,
.woocommerce ul.products li.product .price-unit {
  font-size: .95rem !important;
  font-weight: 500 !important;
  color: var(--psc-text-muted) !important;
  margin: 2px 0 0 !important;
  line-height: 1.5;
}
.woocommerce ul.products li.product .price-unit { font-size: .86rem !important; }

/* Die Reiter setzt WooCommerce ueber .woocommerce div.product .woocommerce-tabs
   ul.tabs li (0,3,2). Mein .psc-shop .woocommerce-tabs ul.tabs li (0,3,1)
   war eine Stufe zu schwach. */
.psc-shop div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.psc-shop div.product .woocommerce-tabs ul.tabs li a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 12px 18px;
  border-bottom: 2px solid transparent;
  color: var(--psc-text-muted);
  font-weight: 650;
  text-decoration: none;
}
.psc-shop div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--psc-text);
  border-bottom-color: var(--psc-accent);
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
  margin: 0 0 24px;
  border-bottom: 1px solid var(--psc-border);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border: 0; }

/* ============================================================
   4.2 — FASSADENPAKETE
   Die drei Systemstufen mit Quadratmeterpreis, von pscoat.de
   uebernommen. Markup: template-parts/pakete.php, Daten und
   Aktionsfenster: inc/pakete.php.

   Aufbau der Karte von oben nach unten: Marke, Preis, Name,
   U-Wert, Eignung. Das ist bewusst die Reihenfolge der Quellseite
   — der Preis steht VOR dem Namen, weil er die Frage ist, mit
   der jemand hierher kommt.
   ============================================================ */

.psc-pakete {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  /* Platz fuer die Marke, die oben aus der Karte herausragt. Ohne
     das schneidet der Abschnittsabstand sie an. */
  padding-top: 14px;
}

.psc-paket {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 24px;
  background: var(--psc-bg-card);
  border: 1px solid var(--psc-border);
  border-radius: 14px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.psc-paket:hover {
  border-color: var(--psc-border-strong);
  box-shadow: 0 10px 28px rgba(47, 55, 94, 0.10);
  transform: translateY(-2px);
}

/* Die empfohlene Stufe traegt den Akzentrahmen — dieselbe Rolle, die
   auf der Quellseite die blau umrandete Karte hatte, nur an der
   Stufe, die der Auftraggeber empfiehlt. */
.psc-paket--empfehlung {
  border-color: var(--psc-accent);
  box-shadow: 0 0 0 1px var(--psc-accent), 0 12px 30px rgba(7, 106, 128, 0.14);
}
.psc-paket--empfehlung:hover {
  border-color: var(--psc-accent);
  box-shadow: 0 0 0 1px var(--psc-accent), 0 16px 38px rgba(7, 106, 128, 0.20);
}

/* Die Aktionskarte bekommt eine warme Kante statt eines zweiten
   Akzentrahmens — zwei gleich hervorgehobene Karten heben sich
   gegenseitig auf. */
.psc-paket--aktion { border-color: var(--psc-claimed); }
.psc-paket--aktion:hover { border-color: var(--psc-claimed); }

/* ---- Marke oben rechts ---- */
.psc-paket__marke {
  position: absolute;
  top: -14px;
  right: 18px;
  margin: 0;
  padding: 5px 13px;
  font-size: .8125rem;   /* 13px — ueber der Untergrenze von 12px */
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.25;
  white-space: nowrap;
  border-radius: 999px;
}
/* Gold mit dunkler Schrift, 9,7:1 — wie auf der Quellseite. Die
   Empfehlung ist die einzige Stelle im Auftritt mit einem warmen
   Vollton; genau deshalb faellt sie auf. */
.psc-paket__marke--empfehlung {
  background: #f2c200;
  color: #16223a;
  box-shadow: 0 2px 8px rgba(47, 55, 94, 0.22);
}
/* Aktion in der Aktionsfarbe, Weiss darauf 6,2:1. */
.psc-paket__marke--aktion {
  background: var(--psc-accent);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(7, 106, 128, 0.28);
}
/* Vor dem Start: erkennbar eine Ankuendigung, kein laufendes Angebot. */
.psc-paket__marke--bald {
  background: var(--psc-bg-raised);
  color: var(--psc-text-muted);
  border: 1px solid var(--psc-border-strong);
}

/* ---- Preis ---- */
.psc-paket__preis {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 4px;
}
.psc-paket__alt {
  font-size: 1.125rem;
  font-weight: 500;
  /* Gleiche Zeilenhoehe wie der grosse Preis. Mit der Vorgabe des
     Browsers (rund 1,5) ragt die Unterlaenge des kleinen Preises aus
     der Zeile und zieht die ganze Preiszeile um knapp 2 px auf — dann
     stehen Name und U-Wert der Aktionskarte tiefer als bei den
     anderen beiden. */
  line-height: 1.05;
  color: var(--psc-text-dim);
  /* Der durchgestrichene Preis ist Bezugsgroesse, nicht Angebot —
     er tritt zurueck, bleibt aber mit 5,22:1 klar lesbar. */
}
.psc-paket__alt s { text-decoration-thickness: 2px; }
.psc-paket__neu {
  font-size: clamp(1.75rem, 1.4rem + 1.1vw, 2.25rem);
  font-weight: 750;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--psc-text);
}
.psc-paket--aktion .psc-paket__neu { color: var(--psc-claimed); }
.psc-paket__einheit {
  font-size: .5em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--psc-text-muted);
}

/* Der Paketpreis unter der grossen Zahl.
   Er ist der Betrag, der wirklich abgebucht wird, und steht trotzdem kleiner:
   verglichen wird in Euro je Quadratmeter, bezahlt wird je Paket. Deutlich
   genug fuer 4,6:1 auf hellem Grund — eine Preisangabe darf nicht am Rand der
   Lesbarkeit stehen, auch wenn sie die zweite ist. */
.psc-paket__einheitspreis {
  margin: 2px 0 10px;
  font-size: .875rem;
  font-weight: 650;
  line-height: 1.35;
  color: var(--psc-text-dim);
}
.psc-paket__einheitspreis-menge {
  font-weight: 500;
  color: var(--psc-text-muted);
  /* Die Mengenangabe bricht mit um, statt eine eigene Zeile zu erzwingen —
     auf schmalen Karten sonst drei Zeilen fuer eine Preisangabe. */
  white-space: nowrap;
}

.psc-paket__aktionshinweis {
  margin: 0 0 14px;
  /* min-height statt height: der Hinweis darf zweizeilig werden, wenn die
     Karte schmal ist — dann wachsen alle drei Karten gemeinsam, weil das
     Raster sie ohnehin auf gleiche Hoehe zieht. */
  min-height: 1.4em;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--psc-claimed);
}
.psc-paket--angekuendigt .psc-paket__aktionshinweis { color: var(--psc-text-muted); }

/* ---- Name, U-Wert, Eignung ---- */
.psc-paket__name {
  margin: 10px 0 8px;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--psc-text);
}
.psc-paket__u {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--psc-accent);
}
.psc-paket__einheit-u {
  font-size: .8125rem;
  font-weight: 500;
  color: var(--psc-text-muted);
}
.psc-paket__eignung {
  margin: 0;
  /* auto schiebt die Eignung an den Kartenfuss, damit alle drei
     Karten dort dieselbe Zeile haben, auch wenn eine davon einen
     Aktionshinweis mehr traegt. */
  margin-top: auto;
  padding-top: 10px;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--psc-text-muted);
}

/* ---- Fuss des Abschnitts ---- */
.psc-pakete__fuss {
  margin: 22px 0 0;
  max-width: 62ch;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--psc-text-dim);
}
.psc-pakete__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin: 20px 0 0;
}

/* BEWUSST KEINE Regel fuer prefers-color-scheme: dark. Die Seite ist
   seit Fassung 3.5 durchgehend hell; das dunkle Farbschema haengt
   ausschliesslich an den Zeichenflaechen (.psc-graphic__viewport und
   Geschwister). Eine Karte, die als einzige mit der Systemeinstellung
   umschlaegt, sieht kaputt aus, nicht dunkel. */

/* ---- Die Karte ist anklickbar (siehe template-parts/pakete.php) ----
   Sie hebt sich seit jeher beim Ueberfahren an; solange sie nichts tat,
   war das ein leeres Versprechen. Jetzt schreibt sie ihren
   Quadratmeterpreis in das Feld "Investition je m²" des Rechners. */
a.psc-paket {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
a.psc-paket:hover { color: inherit; }
a.psc-paket:focus-visible {
  outline: 3px solid var(--psc-accent);
  outline-offset: 3px;
}

.psc-paket__rechnen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--psc-border);
  font-size: .875rem;
  font-weight: 650;
  line-height: 1.4;
  color: var(--psc-accent);   /* 6,21:1 auf Weiss */
}
.psc-paket__rechnen-aus span { transition: transform .18s ease; display: inline-block; }
a.psc-paket:hover .psc-paket__rechnen-aus span { transform: translateX(3px); }

/* Beschriftung umschalten. display:none nimmt die jeweils falsche Fassung
   auch aus dem Vorlesebaum. */
.psc-paket__rechnen-an { display: none; }
.psc-paket[aria-current="true"] .psc-paket__rechnen-aus { display: none; }
.psc-paket[aria-current="true"] .psc-paket__rechnen-an { display: inline; }

/* Gewaehltes Paket. Das Attribut plus Klasse ergibt (0,2,0) und schlaegt
   damit .psc-paket--empfehlung (0,1,0) - die Auswahl muss die
   Empfehlungsmarkierung ueberschreiben duerfen, sonst sieht man nicht,
   was man gerade angeklickt hat. */
.psc-paket[aria-current="true"] {
  border-color: var(--psc-accent);
  background: var(--psc-accent-soft);
  box-shadow: inset 0 0 0 1px var(--psc-accent);
}

/* ============================================================
   4.3 — KATALOGARTIKEL (nicht direkt bestellbar)
   Die vier Materialgebinde bleiben sichtbar, aber ohne
   Warenkorb. Regeln dazu: inc/shop.php.
   ============================================================ */

.psc-katalogbox {
  margin: 22px 0 0;
  padding: 20px 22px;
  background: var(--psc-bg-raised);
  border: 1px solid var(--psc-border);
  border-left: 3px solid var(--psc-accent);
  border-radius: 10px;
}
.psc-katalogbox__titel {
  margin: 0 0 8px;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--psc-text);
}
.psc-katalogbox__text {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--psc-text-muted);
}
.psc-katalogbox__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin: 16px 0 0;
}

/* In der Shop-Schleife steht statt "In den Warenkorb" ein ruhiger Verweis
   aufs Datenblatt. Er muss dieselbe Hoehe haben wie die Kaufschaltflaeche
   der Pakete, sonst stehen die Karten unterschiedlich hoch. */
.psc-shop .psc-produkt-katalog { margin-top: auto; }

/* ============================================================
   4.4 — BILDMOTIV IM KERNNUTZEN
   Halb Thermoskanne, halb Haus. Uebernommen aus der Mediathek
   von pscoat.de, dort nicht eingebunden.
   ============================================================ */

.psc-kernnutzen__intro {
  display: grid;
  gap: 28px 44px;
  align-items: center;
  margin-bottom: 40px;
}
/* Zweispaltig erst, wenn beide Spalten Platz haben. Unterhalb steht das Bild
   ueber dem Text — die Ueberschrift bliebe sonst unter der Bildschirmkante. */
@media (min-width: 860px) {
  .psc-kernnutzen__intro {
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  }
}

.psc-kernnutzen__intro .psc-metrics {
  /* Das Panel bringt eine eigene Hoehenlogik aus dem Hero mit. Hier steht es
     in einer Rasterzelle und darf sich nach seinem Inhalt richten. */
  margin: 0;
  height: auto;
}

.psc-kernnutzen__intro .psc-section__head {
  margin: 0;
  max-width: none;
  text-align: left;
}
.psc-kernnutzen__intro .psc-section__lead { max-width: 46ch; }

/* ---- Kaufleiste unter den Paketkarten ----
   Erscheint, sobald eine Stufe gewaehlt ist. Sie ist die Bruecke zwischen
   Preisstufe und Warenkorb: Menge = Flaeche, weil der Artikel je
   Quadratmeter verkauft wird. Verdrahtung in assets/js/savings-calculator.js. */
.psc-paketkauf {
  margin: 24px 0 0;
  padding: 20px 22px;
  background: var(--psc-bg-card);
  border: 1px solid var(--psc-accent);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(7, 106, 128, 0.12);
}
.psc-paketkauf[hidden] { display: none; }

.psc-paketkauf__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--psc-border);
}
.psc-paketkauf__was {
  font-size: 1rem;
  font-weight: 600;
  color: var(--psc-text-muted);
}
.psc-paketkauf__summe {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  font-weight: 750;
  letter-spacing: -.02em;
  color: var(--psc-text);
}

.psc-paketkauf__flaeche {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 16px 0 0;
}
.psc-paketkauf__flaeche label {
  font-size: .9375rem;
  font-weight: 650;
  color: var(--psc-text);
}
.psc-paketkauf__control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--psc-bg-raised);
  border: 1px solid var(--psc-border-strong);
  border-radius: 8px;
}
.psc-paketkauf__control input {
  width: 5.5rem;
  padding: 0;
  font: inherit;
  font-weight: 650;
  color: var(--psc-text);
  background: transparent;
  border: 0;
  text-align: right;
}
.psc-paketkauf__control input:focus { outline: 2px solid var(--psc-accent); outline-offset: 3px; }
.psc-paketkauf__suffix {
  font-size: .875rem;
  font-weight: 600;
  color: var(--psc-text-muted);
}
.psc-paketkauf__hinweis {
  flex-basis: 100%;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--psc-text-dim);
}

.psc-paketkauf__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin: 18px 0 0;
}
.psc-paketkauf__anfrage {
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--psc-text-muted);
}
.psc-paketkauf__anfrage[hidden] { display: none; }
/* WooCommerce haengt beim AJAX-Kauf ".added" an und blendet daneben einen
   eigenen Verweis "Warenkorb ansehen" ein. Der soll wie unsere Verweise
   aussehen, nicht wie eine zweite Hauptschaltflaeche. */
.psc-paketkauf .added_to_cart {
  font-size: .9375rem;
  font-weight: 650;
  color: var(--psc-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.psc-paketkauf__vormerk {
  margin: 12px 0 0;
  padding: 10px 14px;
  background: var(--psc-claimed-soft);
  border-radius: 8px;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--psc-claimed);   /* 5,46:1 auf hellem Grund */
}
.psc-paketkauf__vormerk[hidden] { display: none; }

/* ============================================================
   4.6 — SYMBOLBAENDER, THERMOGRAFIE, PRINZIPBILD, SCHLUSSBLOCK
   Bausteine der Startseite, von pscoat.de uebernommen.
   ============================================================ */

/* ---- Symbolbaender ---- */
.psc-band__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: 30px 20px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.psc-band__punkt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.psc-band__symbol {
  width: auto;
  height: 62px;
  /* Die Symbole sind unterschiedlich breit (147 bis 475 px bei gleicher
     Hoehe). Ueber die Hoehe bemessen stehen sie optisch auf einer Linie,
     ueber die Breite bemessen nicht. */
  max-width: 100%;
  object-fit: contain;
}
.psc-band__text {
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--psc-text-muted);
  max-width: 16ch;
}
.psc-band--merkmale .psc-band__text { max-width: 18ch; }

/* ---- Kennzahlen unter den Merkmalen ---- */
.psc-kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 24px;
  margin: 44px 0 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--psc-border);
}
.psc-kennzahl { text-align: center; }
.psc-kennzahl__zahl {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 750;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--psc-text);
}
.psc-kennzahl__text {
  margin: 8px 0 0;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--psc-text-muted);
}
.psc-kennzahlen__quelle {
  margin: 18px 0 0;
  text-align: center;
  font-size: .8125rem;
  color: var(--psc-text-dim);
}

/* ---- Prinzipbild im Kernnutzen ----
 * Die Regeln dieses Bausteins stehen vollstaendig in 4.7 ("Prinzipbild
 * ueber die volle Breite"). Hier stand bis zuletzt eine aeltere Fassung
 * mit .psc-prinzipbild__link — diese Klasse gibt es im Markup nicht mehr,
 * seit die Grafik von einem Verweis auf einen Knopf umgestellt wurde.
 * Ihre .psc-prinzipbild__lupe-Regel wirkte aber weiter und reichte
 * Polsterung und Schriftgroesse an das Lupenzeichen durch. Deshalb ist
 * sie entfernt und nicht bloss ueberschrieben.
 */

/* ---- Thermografie ---- */
.psc-unterschied__raster {
  display: grid;
  gap: 32px 44px;
  align-items: start;
}
@media (min-width: 860px) {
  .psc-unterschied__raster { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); }
}
.psc-unterschied__bild {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--psc-border);
  /* Dunkler Traeger: die Aufnahmen haben schwarze Bildraender, auf hellem
     Grund saehe das nach einem Fehler aus. */
  background: #06101a;
}
.psc-unterschied__bild img { display: block; width: 100%; height: auto; }

/* Objektzeile ueber den Messwerten. Sie fuehrt die Liste an, statt sie zu
   erschlagen: gleiche Schriftgroesse wie die Werte, aber als Ueberschrift
   ausgezeichnet und durch die kraeftigere Linie sichtbar abgesetzt. */
.psc-messwerte__objekt {
  margin: 0;
  padding: 0 0 10px;
  border-bottom: 2px solid var(--psc-text);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--psc-text);
}

.psc-messwerte {
  display: grid;
  gap: 0;
  margin: 0 0 24px;
  padding: 0;
}
.psc-messwert {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 20px;
  padding: 11px 0;
  border-bottom: 1px solid var(--psc-border);
}
.psc-messwert dt {
  font-size: .9375rem;
  color: var(--psc-text-muted);
}
.psc-messwert dd {
  margin: 0;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--psc-text);
}
.psc-unterschied__zahl {
  font-size: 1.0625rem;
  line-height: 1.6;
}
.psc-unterschied__beleg {
  margin: 24px 0 0;
  padding: 14px 16px;
  background: var(--psc-bg-raised);
  border-left: 3px solid var(--psc-claimed);
  border-radius: 0 8px 8px 0;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--psc-text-muted);
}
.psc-unterschied__beleg-marke {
  display: block;
  margin-bottom: 4px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--psc-claimed);
}

/* ---- Schlussabschnitt: die urspruengliche Titelseite ---- */
.psc-titelblock__raster {
  display: grid;
  gap: 40px 56px;
  align-items: center;
}
@media (min-width: 1000px) {
  .psc-titelblock__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.psc-titelblock__titel {
  margin: 12px 0 18px;
  font-size: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.psc-titelblock__sub {
  margin: 0 0 24px;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--psc-text-muted);
  max-width: 52ch;
}
.psc-titelblock__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 28px;
}
.psc-titelblock__panel .psc-metrics { margin: 0; }

/* ============================================================
   4.7 — VOLLFLAECHIGES TITELBILD IM HERO
   Das Karussell fuellt die gesamte Heroflaeche, der Text liegt
   darauf. Markup: template-parts/hero.php,
   Verhalten: assets/js/hero-karussell.js.
   ============================================================ */

.psc-hero--bild { position: relative; overflow: hidden; }

/* Die Medienebene ganz unten, ueber die volle Sektion. */
.psc-titel {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.psc-titel__folie {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity .7s ease;
  /* Kein visibility-Wechsel: beide Folien bleiben aufgebaut, sonst ruckelt
     der Uebergang beim ersten Mal, waehrend der Browser das Video noch
     dekodiert. */
}
.psc-titel__folie.is-aktiv { opacity: 1; }
.psc-titel__folie img,
.psc-titel__folie video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Das Motiv steht rechts im Bild — beim Beschneiden auf breite Formate
     soll es erhalten bleiben, nicht die leere linke Haelfte. */
  object-position: 72% center;
  display: block;
}

/* Der Schleier zwischen Bild und Text.
   OHNE IHN IST DER TEXT NICHT LESBAR, und zwar unvorhersehbar: mal steht er
   auf der hellen Studioflaeche, mal auf der dunklen Dachkante des Videos.
   Links deckt er nahezu vollstaendig in der Seitenfarbe ab, nach rechts
   laeuft er aus. Damit steht der Text auf einer MESSBAREN Flaeche. */
/* SCHLEIER — NEU BEMESSEN AM 05.08.2026, weil das Titelbild darunter
   verschwand. Die Thermoskanne, also das Motiv, steht zwischen 20 % und 47 %
   der Bildbreite — genau dort, wo vorher 90 bis 94 % Deckung lagen.

   GEMESSEN statt geschaetzt. Am Quellbild, Textzone (15–80 % Hoehe), gegen
   die Textfarbe #16223a, Ziel 4,5:1 im dunkelsten Zwanzigstel je Zone:

     0–20 % der Breite   Bild ist dort nahezu weiss (248,248,248)
                         -> 14,7:1 auch OHNE Schleier. Die alten 94 % waren
                            reine Verschwendung: sie deckten nichts ab.
     20–34 %             55 % Deckung genuegen fuer 5,0:1  (vorher 90 %)
     34–47 %             55 % Deckung genuegen fuer 5,1:1  (vorher 66–90 %)

   Gesetzt sind 72/68/40 — also rund 15 Punkte ueber dem rechnerischen
   Minimum. Der Zuschlag deckt ab, dass 'cover' den sichtbaren Ausschnitt je
   nach Fensterbreite verschiebt und dunklere Bildstellen unter den Text
   rutschen koennen.

   Ab 62 % laeuft der Schleier auf null: die rechte Bildhaelfte mit dem Haus
   traegt keinen Text und braucht deshalb keine Abdeckung. */
.psc-hero__schleier {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* ZWEI EBENEN. Der waagerechte Verlauf gibt das Bild frei; der Fleck
     darunter faengt die Stelle ab, an der es allein nicht reicht.

     Gemessen am GERENDERTEN Hero (Text ausgeblendet, dunkelstes Zwanzigstel
     der Flaeche unter jedem Textblock): mit dem waagerechten Verlauf allein
     kamen Augenbraue 14,5:1 und Ueberschrift 6,7:1 — der Untertext aber nur
     3,8:1. Er sitzt tiefer, dort liegt die dunkle Kaffeeflaeche der Kanne.

     Ein staerkerer Gesamtschleier haette dafuer wieder das ganze Motiv
     zugedeckt. Der Fleck sitzt stattdessen genau ueber der Textspalte unten
     links und laeuft nach rechts und oben auf null aus — das Haus bleibt
     unberuehrt. */
  background:
    radial-gradient(
      125% 92% at 6% 72%,
      rgba(242, 246, 251, 0.60) 0%,
      rgba(242, 246, 251, 0.38) 44%,
      rgba(242, 246, 251, 0) 70%
    ),
    linear-gradient(
      90deg,
      rgba(242, 246, 251, 0.72) 0%,
      rgba(242, 246, 251, 0.68) 30%,
      rgba(242, 246, 251, 0.40) 46%,
      rgba(242, 246, 251, 0.12) 58%,
      rgba(242, 246, 251, 0) 68%
    );
}
/* Schmale Bildschirme: dort liegt der Text ueber der vollen Breite, also
   deckt der Schleier von unten statt von links. */
/* ============================================================
   SCHMALE GERAETE: BILD ALS BAND, NICHT ALS HINTERGRUND
   Geaendert am 05.08.2026.

   Das Titelbild ist 1200 x 800, also 3:2 im Querformat. Ein Telefon zeigt
   390 x 844 — Hochformat mit dem umgekehrten Verhaeltnis. Mit object-fit:
   cover blieben davon 31 % der Bildbreite uebrig, und in diesem Ausschnitt
   war weder die Thermoskanne noch das Haus zu erkennen: eine graue Flaeche
   mit einer Dachkante. Ausprobiert wurden 50 %/22 %, 72 %/30 % und
   78 %/38 % — keiner der Ausschnitte liest sich als Motiv.

   Das ist keine Frage der Feinjustierung, sondern der Geometrie. Deshalb
   fuellt das Bild schmale Geraete nicht mehr, sondern steht als Band mit
   eigenem Seitenverhaeltnis ueber dem Text. Der Text darunter liegt auf der
   Seitenfarbe und braucht gar keinen Schleier mehr — er hat dort vollen
   Kontrast statt eines gerechneten Minimums.
   ============================================================ */
@media (max-width: 900px) {
  .psc-hero--bild { display: flex; flex-direction: column; }

  /* Aus der absoluten Hintergrundebene wird ein normales Element im Fluss. */
  .psc-hero--bild .psc-titel {
    position: relative;
    inset: auto;
    inline-size: 100%;
    aspect-ratio: 3 / 2;
    flex: none;
  }
  .psc-hero--bild .psc-titel__folie img,
  .psc-hero--bild .psc-titel__folie video {
    object-fit: cover;
    object-position: 50% 42%;
  }

  /* Ohne Bild unter dem Text ist der Schleier gegenstandslos. */
  .psc-hero--bild .psc-hero__schleier { display: none; }

  .psc-hero--bild .psc-hero__layout {
    position: static;
    padding-block: 28px 8px;
  }

  /* Die Punkte des Karussells gehoeren unter das Bild, nicht unter den Text.
     Sie sind im Markup ein Geschwister von .psc-titel, kein Kind — absolute
     Positionierung haette sie deshalb an den Hero-Fuss gehaengt, also unter
     die Schaltflaechen. Im Flex-Spaltenfluss loest 'order' das sauber. */
  /* Doppelte Klasse am Hero: die Grundregel fuer .psc-titel__steuerung steht
     WEITER UNTEN in der Datei und setzt position:absolute. Bei gleicher
     Spezifitaet gewinnt die spaetere — deshalb hier eine Stufe hoeher, sonst
     bleibt das Element aus dem Fluss und 'order' wirkt gar nicht. */
  .psc-hero.psc-hero--bild .psc-titel { order: 1; }
  .psc-hero.psc-hero--bild .psc-titel__steuerung {
    order: 2;
    position: static;
    inset: auto;
    transform: none;
    justify-content: center;
    padding-block: 14px 0;
  }
  .psc-hero.psc-hero--bild .psc-hero__layout { order: 3; }

  /* Der Sprunganker sass unten im Hero und haette jetzt unter den
     Schaltflaechen geklebt. */
  .psc-hero--bild .psc-hero__scroll { display: none; }
}

/* Ab 901 px zeigt das Titelbild das ganze Motiv und rueckt nach rechts:
   die Thermoskanne steht damit neben dem Text statt darunter. Die freie
   Flaeche links traegt die Seitenfarbe — der Studiohintergrund des Bildes ist
   praktisch derselbe Ton, die Kante ist nicht zu sehen. Nur das Bild, nicht
   das Video: das ist 16:9 und bekaeme mit contain Balken. */
@media (min-width: 901px) {
  .psc-titel { background: var(--psc-bg); }
  .psc-titel__folie img {
    object-fit: contain;
    object-position: 100% center;
  }
}

.psc-hero--bild .psc-hero__layout,
.psc-hero--bild .psc-hero__scroll {
  position: relative;
  z-index: 2;
}
/* Eine Spalte: die rechte Spalte trug das Kennwertpanel, das jetzt im
   Schlussabschnitt steht. Der Text bekommt eine Breitengrenze, damit er
   nicht ueber das Bild hinauslaeuft. */
.psc-hero--bild .psc-hero__layout { grid-template-columns: minmax(0, 1fr); }
.psc-hero--bild .psc-hero__col { max-width: 42rem; }

/* Steuerpunkte unten links, auf Hoehe des Scrollhinweises. */
.psc-hero--bild .psc-titel__steuerung {
  position: absolute;
  z-index: 3;
  left: max(4vw, calc(50vw - var(--psc-max-weit) / 2));
  bottom: 34px;
  display: flex;
  gap: 10px;
}
.psc-titel__punkt {
  position: relative;
  width: 34px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(47, 55, 94, 0.28);
  cursor: pointer;
  transition: background .18s ease, width .18s ease;
}
.psc-titel__punkt.is-aktiv {
  width: 52px;
  background: var(--psc-accent);
}
.psc-titel__punkt:focus-visible {
  outline: 3px solid var(--psc-accent);
  outline-offset: 4px;
}
/* 6 px Hoehe ist als Ziel zu klein — unsichtbarer Rand auf 44 px. */
.psc-titel__punkt::before {
  content: "";
  position: absolute;
  inset: -19px -6px;
}

/* ---- Prinzipbild ueber die volle Breite ---- */
.psc-prinzipbild { margin: 32px 0 0; }
.psc-prinzipbild__ausloeser {
  display: block;
  width: 100%;
  padding: 0;
  position: relative;
  border: 1px solid var(--psc-border);
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
  cursor: zoom-in;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.psc-prinzipbild__ausloeser:hover {
  border-color: var(--psc-accent);
  box-shadow: 0 12px 30px rgba(7, 106, 128, 0.14);
}
.psc-prinzipbild__ausloeser:focus-visible {
  outline: 3px solid var(--psc-accent);
  outline-offset: 3px;
}
.psc-prinzipbild img { display: block; width: 100%; height: auto; }

/* Das Lupenzeichen in der Ecke der Grafik.
 *
 * Es ersetzt die fruehere Beschriftungsleiste unter dem Bild. Die stand
 * dauerhaft da, kostete eine Zeile und sagte etwas, was der Zeigerwechsel
 * auf zoom-in ohnehin sagt.
 *
 * pointer-events: none, damit das Zeichen nicht selbst das Ziel des Klicks
 * wird. Der Knopf darunter soll die Maus bekommen, sonst wechselt der
 * Zeiger beim Ueberfahren der Ecke von zoom-in auf Standard zurueck.
 */
.psc-prinzipbild__lupe {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  color: #ffffff;
  background: var(--psc-accent);
  box-shadow: 0 6px 18px rgba(6, 16, 26, 0.30);
  opacity: 0;
  transform: scale(.88);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.psc-prinzipbild__lupe svg { display: block; }
.psc-prinzipbild__ausloeser:hover .psc-prinzipbild__lupe,
.psc-prinzipbild__ausloeser:focus-visible .psc-prinzipbild__lupe {
  opacity: 1;
  transform: none;
}

/* Ein Touchgeraet kann nichts ueberfahren. Dort steht das Zeichen dauerhaft,
 * sonst gaebe es ueberhaupt keinen Hinweis mehr, dass die Grafik sich
 * oeffnen laesst. */
@media (hover: none) {
  .psc-prinzipbild__lupe { opacity: 1; transform: none; }
}

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

/* ---- Die Lupe selbst ---- */
.psc-lupe {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(6, 16, 26, 0.92);
}
.psc-lupe__buehne {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: calc(100vh - 140px);
  overflow: auto;
}
.psc-lupe__bild {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  background: #ffffff;
}
.psc-lupe__zu {
  position: absolute;
  top: clamp(12px, 3vw, 28px);
  right: clamp(12px, 3vw, 28px);
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  font-size: 30px;
  line-height: 1;
  color: #ffffff;                       /* 15,3:1 auf dem Grund der Lupe */
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  cursor: pointer;
}
.psc-lupe__zu:hover { background: rgba(255, 255, 255, 0.24); }
.psc-lupe__zu:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }
.psc-lupe__hinweis {
  margin: 0;
  font-size: .875rem;
  color: rgba(255, 255, 255, 0.82);     /* 11,1:1 */
}

/* ============================================================
   4.9 — SYSTEMKONFIGURATOR
   Markup: template-parts/konfigurator.php
   Daten:  inc/konfigurator.php
   Verhalten: assets/js/konfigurator.js

   Die Feldreihe uebernimmt die Klassen des Ersparnisrechners
   (.psc-calc__field und Geschwister) — beide Werkzeuge stehen
   auf der Startseite untereinander und muessen gleich aussehen.
   Hier steht nur, was der Konfigurator zusaetzlich braucht.
   ============================================================ */

.psc-konf {
  border: 1px solid var(--psc-border);
  border-radius: 18px;
  background: var(--psc-bg-raised);
  padding: clamp(20px, 3vw, 32px);
}

.psc-konf__fragen {
  display: grid;
  gap: 18px 24px;
}
@media (min-width: 760px) {
  .psc-konf__fragen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- Stufenwahl ---- */
.psc-konf__stufen {
  margin: 26px 0 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 12px;
}
@media (min-width: 760px) {
  .psc-konf__stufen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.psc-konf__stufen legend {
  padding: 0;
  margin: 0 0 12px;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--psc-text-dim);
  /* grid-column, damit die Legende ueber allen drei Spalten steht statt in
     der ersten Zelle zu landen — ein <legend> ist im Grid ein normales Kind. */
  grid-column: 1 / -1;
}

.psc-konf__stufe {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--psc-border);
  border-radius: 12px;
  background: #ffffff;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.psc-konf__stufe:hover { border-color: var(--psc-accent); }

/* Der Rahmen sitzt am Label, der Fokus liegt aber auf dem Radioknopf darin.
   :has() zieht ihn nach aussen, damit die ganze Karte als fokussiert zu
   erkennen ist. Wo :has() fehlt, bleibt der Ring am Knopf — sichtbar bleibt
   der Fokus also in jedem Fall. */
.psc-konf__stufe:has(input:focus-visible) {
  outline: 3px solid var(--psc-accent);
  outline-offset: 2px;
}
.psc-konf__stufe:has(input:checked) {
  border-color: var(--psc-accent);
  box-shadow: 0 0 0 1px var(--psc-accent);
}

.psc-konf__stufe input { margin: 3px 0 0; flex: none; }
.psc-konf__stufe-text { display: grid; gap: 2px; }
.psc-konf__stufe-name { font-weight: 700; color: var(--psc-text); }
.psc-konf__stufe-u { font-size: .875rem; font-weight: 650; color: var(--psc-accent); }
.psc-konf__stufe-eignung { font-size: .875rem; color: var(--psc-text-dim); }

/* ---- Ergebnis ---- */
.psc-konf__ergebnis {
  margin: 26px 0 0;
  padding: 20px 22px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid var(--psc-border);
}
.psc-konf__ergebnis-zeile {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 650;
  color: var(--psc-text);
}
.psc-konf__ergebnis-summe {
  margin: 4px 0 0;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 750;
  letter-spacing: -.02em;
  color: var(--psc-text);
}
.psc-konf__ergebnis-summe:empty { margin: 0; }

/* Der Untergrundhinweis ist eine Einschraenkung, keine Fehlermeldung — er
   traegt deshalb die warme Signalfarbe und nicht Rot. Rot haette an dieser
   Stelle bedeutet "so geht es nicht", gemeint ist "das ist vorher zu klaeren". */
.psc-konf__ergebnis-hinweis {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-left: 3px solid var(--psc-claimed);
  border-radius: 0 8px 8px 0;
  background: rgba(180, 130, 20, 0.08);
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--psc-text-dim);
}

.psc-konf__ergebnis-aktionen {
  margin: 18px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  align-items: center;
}
.psc-konf__ergebnis-aktionen:empty { margin: 0; }

.psc-konf__fuss {
  margin: 18px 0 0;
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--psc-text-muted);
}

/* Das hidden-Attribut muss hier ausdruecklich durchgesetzt werden.
   .psc-btn und .psc-link setzen display:inline-flex; eine Autorenregel schlaegt
   die Browserregel [hidden]{display:none} unabhaengig von der Spezifitaet. Ohne
   diese Zeilen blieben Schaltflaeche und Verweis sichtbar, obwohl das Skript sie
   ausgeblendet hat — und "In den Warenkorb" stuende dann auch dort, wo es
   nichts zu bestellen gibt.

   Dieselbe Falle steckt in der Kaufleiste: fuer .psc-paketkauf__anfrage gibt es
   die Regel seit jeher (Zeile ~9085), fuer die Schaltflaeche daneben fehlte sie. */
.psc-konf__ergebnis-hinweis[hidden],
.psc-konf__ergebnis-aktionen [hidden],
.psc-paketkauf__aktionen [hidden] { display: none; }

/* ---- Auswahlfelder im Konfigurator ----
   Das Theme hatte bis 3.32 kein einziges <select>; die beiden hier standen
   deshalb im Browserstandard neben gestalteten Eingabefeldern. Sie tragen
   jetzt dieselbe Kante, denselben Radius und denselben Fokusring wie
   .psc-calc__control.

   appearance:none nimmt den Systempfeil weg, der Ersatz steckt als
   data:-URI im Hintergrund — eine externe Datei waere ein zusaetzlicher
   Abruf fuer 20 Byte Dreieck. padding-right haelt den Text davon frei. */
.psc-konf__fragen select {
  width: 100%;
  min-height: 46px;
  padding: 10px 40px 10px 12px;
  border: 1px solid var(--psc-border-strong);
  border-radius: 10px;
  background-color: var(--psc-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23415464' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px 18px;
  color: var(--psc-text);
  font: inherit;
  line-height: 1.3;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.psc-konf__fragen select:hover { border-color: var(--psc-accent); }
.psc-konf__fragen select:focus-visible {
  outline: none;
  border-color: var(--psc-accent);
  box-shadow: 0 0 0 2px var(--psc-accent-soft);
}

/* Eine gesperrte Stufe bleibt sichtbar, statt zu verschwinden: dass es sie
   gibt und warum sie hier nicht geht, ist die eigentliche Information. */
.psc-konf__stufe.is-gesperrt {
  opacity: .45;
  cursor: not-allowed;
}
.psc-konf__stufe.is-gesperrt:hover { border-color: var(--psc-border); }

/* ---- Angebot in 60 Sekunden ---- */
.psc-angebot {
  margin: 22px 0 0;
  border: 1px solid var(--psc-border);
  border-radius: 18px;
  background: var(--psc-bg-raised);
  overflow: hidden;
}

.psc-angebot__ausloeser {
  display: flex;
  width: 100%;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  padding: 20px clamp(18px, 3vw, 28px);
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.psc-angebot__ausloeser:hover { background: rgba(7, 106, 128, 0.04); }
.psc-angebot__ausloeser:focus-visible {
  outline: 3px solid var(--psc-accent);
  outline-offset: -3px;
}
.psc-angebot__ausloeser-text { display: grid; gap: 4px; }
.psc-angebot__ausloeser-titel {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--psc-text);
}
.psc-angebot__ausloeser-lead {
  font-size: .875rem;
  color: var(--psc-text-dim);
}
.psc-angebot__zeichen {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--psc-border);
  color: var(--psc-accent);
  transition: transform .2s ease;
}
.psc-angebot__ausloeser[aria-expanded="true"] .psc-angebot__zeichen { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .psc-angebot__zeichen { transition: none; }
}

.psc-angebot__inhalt {
  padding: 0 clamp(18px, 3vw, 28px) clamp(20px, 3vw, 28px);
  border-top: 1px solid var(--psc-border);
}
.psc-angebot__inhalt[hidden] { display: none; }

.psc-angebot__uebernommen {
  margin: 18px 0 0;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(7, 106, 128, 0.07);
  font-size: .875rem;
  font-weight: 600;
  color: var(--psc-text-dim);
}
.psc-angebot__uebernommen:empty { display: none; }

.psc-angebot__gruppe {
  margin: 22px 0 0;
  padding: 0;
  border: 0;
}
.psc-angebot__gruppe legend {
  padding: 0;
  display: grid;
  gap: 2px;
}
.psc-angebot__gruppe-titel {
  font-size: 1rem;
  font-weight: 700;
  color: var(--psc-text);
}
.psc-angebot__gruppe-lead {
  font-size: .8125rem;
  color: var(--psc-text-muted);
}

.psc-angebot__frage { margin: 14px 0 0; }
.psc-angebot__frage-titel {
  margin: 0 0 8px;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--psc-text-dim);
}
.psc-angebot__frage-hinweis {
  margin: 8px 0 0;
  font-size: .875rem;
  color: var(--psc-claimed);
  font-weight: 600;
}
.psc-angebot__frage-hinweis[hidden] { display: none; }

/* ---- Auswahlketten statt gestapelter Radioknoepfe ----
   Neun Fragen mit zusammen 31 Antworten waeren untereinander eine Wand von
   rund 1.400 Pixeln. Als Ketten passt jede Frage auf eine bis zwei Zeilen.
   Der Radioknopf bleibt im Markup und traegt weiter Tastatur und
   Vorlesefunktion — sichtbar ist nur die Beschriftung. */
.psc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.psc-chip { display: inline-flex; }
.psc-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.psc-chip span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--psc-border-strong);
  border-radius: 999px;
  background: #ffffff;
  font-size: .9375rem;
  color: var(--psc-text-dim);
  cursor: pointer;
  transition: border-color .14s ease, background-color .14s ease, color .14s ease;
}
.psc-chip span:hover { border-color: var(--psc-accent); }
.psc-chip input:checked + span {
  border-color: var(--psc-accent);
  background: var(--psc-accent);
  color: #ffffff;
  font-weight: 650;
}
/* Der Knopf ist unsichtbar, sein Fokus muss es nicht sein. */
.psc-chip input:focus-visible + span {
  outline: 3px solid var(--psc-accent);
  outline-offset: 2px;
}

/* ---- Ergebnis der Anfrage ---- */
.psc-angebot__ergebnis {
  margin: 26px 0 0;
  padding: 20px 22px;
  border: 1px solid var(--psc-border);
  border-radius: 14px;
  background: #ffffff;
}
.psc-angebot__ergebnis[hidden] { display: none; }
.psc-angebot__ergebnis h3 { margin: 0 0 14px; font-size: 1.125rem; }

.psc-angebot__zusammenfassung {
  display: grid;
  gap: 6px 18px;
  margin: 0;
}
@media (min-width: 620px) {
  .psc-angebot__zusammenfassung { grid-template-columns: max-content 1fr; }
}
.psc-angebot__zusammenfassung dt {
  font-size: .8125rem;
  font-weight: 700;
  color: var(--psc-text-muted);
  align-self: baseline;
}
.psc-angebot__zusammenfassung dd {
  margin: 0;
  color: var(--psc-text);
}

.psc-angebot__pruefpunkte {
  margin: 16px 0 0;
  padding: 10px 14px;
  border-left: 3px solid var(--psc-claimed);
  border-radius: 0 8px 8px 0;
  background: rgba(180, 130, 20, 0.08);
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--psc-text-dim);
}
.psc-angebot__pruefpunkte[hidden] { display: none; }

.psc-angebot__grenze {
  margin: 16px 0 0;
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--psc-text-muted);
}

.psc-angebot__aktionen {
  margin: 20px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
}
.psc-angebot__aktionen [hidden] { display: none; }
.psc-angebot__senden-hinweis {
  font-size: .875rem;
  color: var(--psc-text-muted);
}

.psc-angebot__kontakt {
  margin: 26px 0 0;
  padding: 20px 22px;
  border: 1px solid var(--psc-border);
  border-radius: 14px;
  background: #ffffff;
}
.psc-angebot__kontakt[hidden] { display: none; }
.psc-angebot__kontakt h3 { margin: 0 0 6px; font-size: 1.0625rem; }
.psc-angebot__kontakt-lead {
  margin: 0 0 16px;
  font-size: .9375rem;
  color: var(--psc-text-dim);
}
.psc-angebot__kontakt-felder {
  display: grid;
  gap: 16px 22px;
}
@media (min-width: 620px) {
  .psc-angebot__kontakt-felder { grid-template-columns: 1fr 1fr; }
}

/* Eine gesperrte Schaltflaeche muss als gesperrt zu erkennen sein — sonst
   liest sich der ausbleibende Effekt als kaputte Seite. */
.psc-angebot__aktionen .psc-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ============================================================
   PAKETSTUFE MIT VERARBEITUNG ("ab"-Preis)
   ============================================================

   Die vierte Karte verkauft nichts, sie fuehrt in den Konfigurator.
   Sie muss deshalb als Teil derselben Reihe lesbar bleiben und
   trotzdem erkennbar anders enden — gleiche Geometrie, anderer Weg. */

.psc-paket--ab {
  border-color: var(--psc-border-strong);
  /* Kein Farbrahmen wie bei --empfehlung: zwei hervorgehobene Karten in
     einer Reihe heben beide nichts mehr hervor. */
  background: var(--psc-bg-raised);
}

.psc-paket__marke--komplett {
  background: var(--psc-bg);
  color: var(--psc-text-muted);
  border: 1px solid var(--psc-border-strong);
}

/* "ab" gehoert zur Zahl, ist aber keine Zahl: kleiner und ruhiger gesetzt,
   damit die Preisreihe ueber alle vier Karten auf derselben Grundlinie
   sitzt und 109 optisch gleich schwer wiegt wie 45. */
.psc-paket__ab {
  font-size: .5em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--psc-text-muted);
  margin-right: .15em;
}

/* ============================================================
   PREIS JE QUADRATMETER IN DEN SHOP-ANSICHTEN
   ============================================================

   Zwei Zahlen, eine Aussage: gross der Quadratmeterpreis, in dem die
   Branche vergleicht, darunter der Betrag, der wirklich berechnet wird.
   Die Reihenfolge ist die Botschaft — umgekehrt waere es der alte
   Zustand mit einer Fussnote. */

.psc-wc-preis {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.psc-wc-preis__qm {
  font-size: clamp(1.5rem, 1.25rem + .8vw, 1.9rem);
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--psc-text);
}

.psc-wc-preis__einheit {
  font-size: .5em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--psc-text-muted);
}

.psc-wc-preis__alt {
  font-size: .5em;
  font-weight: 600;
  color: var(--psc-text-muted);
  text-decoration-thickness: 1px;
}

/* Der Paketpreis traegt die Pflichtangaben (Umsatzsteuer, Versand), die
   Germanized an die urspruengliche Preisausgabe haengt. Er wird deshalb
   ruhiger gesetzt, aber NICHT versteckt: kleiner heisst hier lesbar,
   nicht unauffaellig. */
.psc-wc-preis__paket {
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--psc-text-muted);
}

.psc-wc-preis__paket .woocommerce-Price-amount {
  font-weight: 650;
  color: var(--psc-text);
}

.psc-wc-preis__menge {
  white-space: nowrap;
}

.psc-wc-einheit {
  margin: 10px 0 0;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--psc-text-muted);
}

/* ============================================================
   EINSTIEG DER PAKETSTUFEN: TEXT UND TITELBILD
   ============================================================

   Der Kopf des Abschnitts nutzte bis 3.32 nur die linke Haelfte der
   Zeile; rechts stand Leerraum. Das Titelbild fuellt ihn, ohne den
   Text schmaler zu machen — die Textspalte behaelt ihre Lesebreite. */

.psc-pakete__einstieg {
  margin-bottom: clamp(28px, 4vw, 50px);
}

.psc-pakete__einstieg .psc-section__head {
  margin-bottom: 0;
}

@media (min-width: 900px) {
  .psc-pakete__einstieg--bild {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(24px, 3.5vw, 48px);
    align-items: center;
  }
}

/* Helle Platte unter der Aufnahme. Das Motiv ist auf nahezu weissem Grund
   fotografiert und saesse auf --psc-bg (#06101a) als leuchtendes Rechteck
   mitten in der Seite. Mit Platte, Radius und Rahmen liest es sich als
   Produktaufnahme auf Studiokarton statt als Fehler. */
.psc-pakete__bild {
  margin: 0;
  border: 1px solid var(--psc-border);
  border-radius: var(--psc-radius-lg);
  background: #eef2f5;
  overflow: hidden;
}

.psc-pakete__bild-img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 899px) {
  /* Gestapelt bekommt das Bild eine Hoehenbremse: in voller Breite waere es
     auf dem Telefon fast ein ganzer Bildschirm, bevor die erste Karte kommt. */
  .psc-pakete__bild-img {
    max-height: 46vh;
    object-fit: contain;
  }
}

/* Ohne JavaScript erscheint die Kaufleiste nie. Damit die Seite trotzdem
   verkauft, stehen die Artikeladressen als schlichte Liste bereit. */
.psc-pakete__ohnejs {
  margin: clamp(18px, 2.4vw, 28px) 0 0;
  padding: 16px 18px;
  border: 1px solid var(--psc-border);
  border-radius: var(--psc-radius);
  background: var(--psc-bg-elev);
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--psc-text-muted);
}

.psc-pakete__ohnejs a {
  color: var(--psc-text);
}

/* ============================================================
   THEMENFARBEN DER FACHBEITRAEGE
   ============================================================

   powersmartcoat_story_tone() liefert seit jeher 'cold', 'signal',
   'warm' und 'journal' — im Stylesheet standen dazu aber nur die
   Varianten 'ai', 'privacy' und 'server' aus einem fremden Theme.
   Die Kategoriefarben liefen deshalb alle auf den Vorgabewert.
   Hier stehen sie erstmals vollstaendig, samt der neuen Kategorie
   PScoat ('produkt').

   Die Zuordnung folgt der Farblogik der ganzen Seite: kalt heisst
   Zielzustand (Bauphysik), warm heisst Waermeverlust und damit Geld
   (Wirtschaftlichkeit). Sie ist hier Kennzeichnung, nicht Wertung. */

.psc-story-topics__dot--cold    { background: var(--psc-cold);   box-shadow: 0 0 10px rgba(138, 227, 247, .38); }
.psc-story-topics__dot--warm    { background: var(--psc-warm);   box-shadow: 0 0 10px rgba(209, 87, 29, .38); }
.psc-story-topics__dot--signal  { background: #f2c200;           box-shadow: 0 0 10px rgba(242, 194, 0, .38); }
.psc-story-topics__dot--produkt { background: #6ee7b7;           box-shadow: 0 0 10px rgba(110, 231, 183, .38); }
.psc-story-topics__dot--journal { background: var(--psc-accent); box-shadow: 0 0 10px rgba(4, 183, 213, .38); }

.psc-story-cover--cold    { --psc-story-accent: var(--psc-cold);   --psc-story-soft: rgba(138, 227, 247, .20); }
.psc-story-cover--warm    { --psc-story-accent: var(--psc-warm);   --psc-story-soft: rgba(209, 87, 29, .18); }
.psc-story-cover--signal  { --psc-story-accent: #f2c200;           --psc-story-soft: rgba(242, 194, 0, .18); }
.psc-story-cover--produkt { --psc-story-accent: #6ee7b7;           --psc-story-soft: rgba(110, 231, 183, .20); }
.psc-story-cover--journal { --psc-story-accent: var(--psc-accent); --psc-story-soft: rgba(4, 183, 213, .18); }

/* ---- Ansprechpartner auf der Partnerseite ----
   Steht in der Akzentflaeche neben dem Formular. Eigene Karte auf hellem
   Grund, damit die Angaben nicht mit den Stichpunkten darueber verschwimmen —
   sie sind der einzige Weg auf dieser Seite, der ohne Absenden funktioniert. */
/* Gemessen am 04.08.2026: .psc-section--accent ist WEISS, nicht dunkel. Die
   erste Fassung setzte hier eine weisse Flaeche mit 8 % Deckung auf weissen
   Grund — der Kasten war schlicht nicht da. Jetzt die Flaeche des Themes fuer
   abgesetzte Kaesten, mit sichtbarer Kante. */
.psc-ansprech {
  margin: 26px 0 0;
  padding: 20px 22px;
  border-radius: 14px;
  background: var(--psc-bg-raised);
  border: 1px solid var(--psc-border);
}
.psc-ansprech__marke {
  margin: 0 0 10px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--psc-text-muted);
}
.psc-ansprech__name { margin: 0; font-size: 1.125rem; font-weight: 750; }
.psc-ansprech__rolle { margin: 2px 0 0; font-size: .9375rem; color: var(--psc-accent); font-weight: 650; }
.psc-ansprech__zweck { margin: 8px 0 0; font-size: .875rem; line-height: 1.5; color: var(--psc-text-dim); }
.psc-ansprech__wege {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.psc-ansprech__wege li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.psc-ansprech__was {
  flex: none;
  min-inline-size: 4.5rem;
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--psc-text-muted);
}
/* Die beiden Verweise sind die Handlung dieses Kastens — sie tragen deshalb
   eine dauerhafte Unterstreichung und keine, die erst beim Ueberfahren kommt. */
.psc-ansprech__wege a {
  font-weight: 650;
  color: var(--psc-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.psc-ansprech__wege a:hover { text-decoration-thickness: 2px; }

/* ============================================================
   ARTIKELSEITE: MEHR TEXTBREITE, RUHIGERE SEITENPANELE
   ============================================================
   Auf Ansage vom 04.08.2026.

   BREITE. Die Textspalte war auf 780 px gedeckelt und wurde bei
   1440 px zusaetzlich durch Spaltenabstand (86 px) und Panelbreite
   (300 px) auf rund 766 px gedrueckt. Die Regel .psc-prose erlaubte
   laengst 980 px — gebunden hat das Raster, nicht die Typografie.

   Gedreht werden alle drei Groessen zugleich, sonst verpufft die
   Aenderung: Deckel hoch, Abstand schmaler, Panel schmaler. Bei
   1440 px ergibt das rund 830 px, ab 1600 px die vollen 880 px.

   NICHT MEHR ALS 880 px: darueber laeuft die Zeile bei dieser
   Schriftgroesse ueber 100 Zeichen, und der Rueckweg zum
   Zeilenanfang wird zur eigenen Aufgabe. */

@media (min-width: 1180px) {
  .psc-article-layout {
    grid-template-columns: minmax(0, 880px) minmax(230px, 270px);
    gap: clamp(40px, 4vw, 72px);
  }
}

/* SCHATTEN. Vorher 0 24px 60px -48px: 24 px nach unten versetzt und
   60 px weich. Auf dem dunklen Grund (#06101a) liest sich das nicht
   als Kante, sondern als Schmutzfleck unter dem Kasten — die Flaeche
   sieht aus, als laege etwas hinter ihr.

   Jetzt kurz und nah: Der Schatten setzt die Kante ab, statt eine
   zweite Flaeche zu erzeugen. Die Abgrenzung leistet ohnehin der
   Rahmen (1px var(--psc-border)). */
.psc-article-context {
  box-shadow: 0 6px 18px -14px rgba(0, 0, 0, .75);
}

.psc-article-toc {
  box-shadow: none;
}

/* Tabellen im Fliesstext trugen denselben weiten Schatten. Sie stehen
   mitten im Lesefluss, dort faellt er noch staerker auf. */
.psc-prose table {
  box-shadow: 0 6px 18px -14px rgba(0, 0, 0, .7);
}

/* ============================================================
   ERKLAERVIDEOS (Seite Fachbeiträge)
   Markup: template-parts/erklaervideos.php
   ============================================================ */
.psc-videos {
  display: grid;
  gap: 28px;
}
@media (min-width: 900px) {
  /* Zwei Spalten waeren bei 16:9 und zehn Minuten Laufzeit zu klein zum
     Mitlesen der eingeblendeten Zahlen. Eine Spalte, dafuer gross. */
  .psc-videos { max-width: 860px; margin-inline: auto; }
}
.psc-video {
  margin: 0;
  border: 1px solid var(--psc-border);
  border-radius: 16px;
  background: var(--psc-bg-elev);
  overflow: hidden;
}
.psc-video__player {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #0b1220;
}
.psc-video__text { padding: 18px 20px 20px; }
.psc-video__titel {
  margin: 0 0 6px;
  font-size: 1.125rem;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: baseline;
}
/* Die Laufzeit gehoert zur Ueberschrift, nicht darunter: sie entscheidet mit,
   ob jemand ueberhaupt anfaengt. */
.psc-video__dauer {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--psc-text-muted);
  font-variant-numeric: tabular-nums;
}
.psc-video__text p {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--psc-text-dim);
}
.psc-videos__fuss {
  margin: 24px auto 0;
  max-width: 860px;
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--psc-text-muted);
}

/* ============================================================
   UNTERLAGEN (PDF-Karten)
   Markup: template-parts/dokumente.php · Daten: inc/dokumente.php
   ============================================================ */
.psc-dokumente { margin: 0; padding: 0; list-style: none; display: grid; gap: 20px; }
.psc-dok {
  display: grid;
  gap: 18px 22px;
  align-items: start;
  padding: 20px;
  border: 1px solid var(--psc-border);
  border-radius: 16px;
  background: var(--psc-bg-elev);
}
@media (min-width: 620px) {
  /* Feste Spalte fuer das Titelblatt: die Vorschauen haben verschiedene
     Seitenverhaeltnisse (Hoch- und Querformat), die Textspalte soll trotzdem
     ueber alle Karten auf derselben Kante beginnen. */
  .psc-dok { grid-template-columns: 132px minmax(0, 1fr); }
}
.psc-dok__blatt {
  display: block;
  border: 1px solid var(--psc-border);
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
  line-height: 0;
}
.psc-dok__blatt img { width: 100%; height: auto; display: block; }
.psc-dok__titel { margin: 0 0 8px; font-size: 1.0625rem; line-height: 1.35; }
.psc-dok__titel a { color: var(--psc-text); text-decoration: none; }
.psc-dok__titel a:hover { color: var(--psc-accent); text-decoration: underline; text-underline-offset: 3px; }
/* Umfang und Groesse gehoeren in den Verweis, aber nicht in die Ueberschrift-
   groesse: sie sind Beiwerk, das vor dem Klick trotzdem sichtbar sein muss. */
.psc-dok__meta {
  display: block;
  margin-top: 3px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--psc-text-muted);
}
.psc-dok__beschreibung { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--psc-text-dim); }
.psc-dok__stand { margin: 8px 0 0; font-size: .8125rem; color: var(--psc-text-muted); }
.psc-dok__hinweis {
  margin: 10px 0 0;
  padding: 8px 12px;
  border-left: 3px solid var(--psc-claimed);
  border-radius: 0 6px 6px 0;
  background: rgba(180, 130, 20, 0.08);
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--psc-text-dim);
}

/* ============================================================
   ENERGIE-RECHNER — Variante des Ersparnisrechners
   ============================================================ */
/* Der Energie-Rechner (/energie-rechner/) benutzt bewusst die Klassen des
   Ersparnisrechners: gleiche Bedienung, gleiche Geometrie, gleiche Fokus- und
   Hinweisregeln. Hier steht ausschliesslich, was ihm eigen ist — eine zweite
   Feldgruppe in der Eingabespalte, ein Auswahlfeld, fuenf statt zwei Balken
   und die Uebergabe an den Ersparnisrechner. Alles andere erbt er.
   Kein einziger Farbwert direkt: beide Baender (hell/dunkel) tragen dieselben
   Token, deshalb gilt jede Regel hier in beiden. */

/* Zweite Ueberschrift innerhalb einer Karte ("Ihr Gebaeude", "Heizkosten pro
   Jahr"). Die erste sitzt am Kartenrand, jede weitere braucht Luft nach oben,
   sonst klebt sie am vorangehenden Block. */
.psc-calc__sub--weiter { margin-top: 18px; }

/* Auswahlfeld in derselben Huelle wie ein Zahlenfeld: gleiche Mindesthoehe
   (44 px Trefferflaeche), gleiche Innenabstaende, gleiche Schrift. Das
   Aufklappzeichen bleibt das des Browsers — ein selbst gezeichnetes waere ein
   weiteres Bildelement, das in beiden Baendern nachgepflegt werden muesste,
   und das native traegt Farbe und Fokus des Systems korrekt mit. */
.psc-calc__control select {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 9px 11px;
  border: 0;
  background: transparent;
  color: var(--psc-text);
  font: inherit;
}
.psc-calc__control select:focus { outline: none; }

/* "(optional)" im Beschriftungstext: dasselbe Wort in derselben Zeile, aber
   leiser. Ein eigener Hinweis darunter wuerde die Feldhoehe veraendern und die
   zweispaltige Reihe aus dem Takt bringen. */
.psc-calc__optional {
  color: var(--psc-text-dim);
  font-weight: 500;
}

/* Der Zielwert am Balken. Er steht IM Etikett und nicht in der Wertspalte:
   dort steht der Betrag, und die Spalte muss eine Bedeutung tragen, nicht
   zwei. Der Trennpunkt ist Dekoration und deshalb in ::before. */
.psc-calc__bar-note {
  color: var(--psc-text-dim);
  font-variant-numeric: tabular-nums;
}
.psc-calc__bar-note::before {
  content: " · ";
  speak: none;
}

/* Referenzbalken des klassischen WDVS. Weder warm noch kalt: er ist kein
   Zustand dieses Gebaeudes, sondern der gesetzliche Anforderungswert, gegen
   den beide Seiten gemessen werden. Farbe bleibt Zweitkodierung — die
   Beschriftung nennt Stufe und Zielwert ohnehin. */
.psc-calc__bar--neutral::before { background: var(--psc-neutral); }

/* Uebergabe in den Ersparnisrechner und in die Preise. Zwei Verweise in einer
   Zeile, ab schmalem Behaelter untereinander; sie stehen VOR dem
   Methodenabsatz, weil sie der naechste Schritt sind und nicht das Kleingedruckte. */
.psc-calc__weiter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 0 0 14px;
}