/* phygenera Katalogmodus
   Tokens aus dem phygenera-Designsystem (dunkles Theme, ein helles Band).
   Alles ist unter #phy-gate, .phy-cbar und .phy-cnotice gekapselt und berührt das Shop-Template nicht. */

/* Source Sans 3 aus dem Plugin, nur falls das Template sie nicht schon bereitstellt */
@font-face { font-family: "phygenera Source Sans 3"; src: url(../fonts/SourceSans3VF-Upright.woff2) format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "phygenera Source Sans 3"; src: url(../fonts/SourceSans3VF-Italic.woff2) format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }

/* =====================================================================
   Gemeinsame Tokens
   ===================================================================== */
#phy-gate, .phy-cbar, .phy-cnotice {
  --pg-green: #98c330;
  --pg-surface: #000000;
  --pg-surface-subtle: #111111;
  --pg-surface-raised: #1c1c1c;
  --pg-ink: #ffffff;
  --pg-ink-muted: #a3a3a3;
  --pg-ink-subtle: #858585;
  --pg-ink-on-accent: #000000;
  --pg-line: #333333;
  --pg-line-strong: #6e6e6e;
  --pg-accent: var(--pg-green);
  --pg-accent-wash: rgba(152, 195, 48, 0.2);
  --pg-focus-ring: 0 0 0 2px #000000, 0 0 0 4px #98c330;

  --pg-font: "Source Sans 3", "phygenera Source Sans 3", "Source Sans Pro", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --pg-display-xl: 300 72px/76px var(--pg-font);
  --pg-display-l: 300 56px/60px var(--pg-font);
  --pg-heading-2: 600 30px/36px var(--pg-font);
  --pg-heading-3: 600 24px/30px var(--pg-font);
  --pg-heading-4: 600 19px/26px var(--pg-font);
  --pg-lead: 400 21px/32px var(--pg-font);
  --pg-body: 400 17px/27px var(--pg-font);
  --pg-body-sm: 400 15px/23px var(--pg-font);
  --pg-caption: 400 14px/20px var(--pg-font);
  --pg-overline: 600 13px/16px var(--pg-font);
  --pg-label: 600 15px/20px var(--pg-font);

  --pg-s1: 4px; --pg-s2: 8px; --pg-s3: 12px; --pg-s4: 16px; --pg-s5: 24px;
  --pg-s6: 32px; --pg-s7: 48px; --pg-s8: 64px; --pg-s9: 96px; --pg-s10: 128px;
  --pg-hair: 1px; --pg-icon: 1.5px; --pg-rule: 2px;
  --pg-text: 560px; --pg-content: 1200px;
  --pg-fast: 150ms; --pg-base: 250ms; --pg-slow: 400ms;
  --pg-standard: cubic-bezier(0.2, 0, 0, 1);
  --pg-enter: cubic-bezier(0, 0, 0.2, 1);
  --pg-exit: cubic-bezier(0.4, 0, 1, 1);
}

/* =====================================================================
   Hinweisseite (Gate) als Ebene über dem Shop
   ===================================================================== */
html.phy-gate-open, html.phy-gate-open body { overflow: hidden !important; }

#phy-gate {
  position: fixed; inset: 0; z-index: 2147483000;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  background: var(--pg-surface); color: var(--pg-ink);
  font: var(--pg-body); letter-spacing: normal; text-align: left; text-transform: none;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  outline: none;
}
#phy-gate *, #phy-gate *::before, #phy-gate *::after { box-sizing: border-box; }
#phy-gate :where(h1, h2, h3, p, dl, dt, dd, ul, ol, figure, address, form, label) { margin: 0; padding: 0; border: 0; font: inherit; color: inherit; background: none; text-transform: none; }
#phy-gate [hidden] { display: none !important; }
#phy-gate ::selection { background: var(--pg-accent-wash); }
#phy-gate :focus { outline: none; }
#phy-gate :focus-visible { outline: none; box-shadow: var(--pg-focus-ring); }
#phy-gate a { color: var(--pg-ink); text-decoration: underline var(--pg-rule) var(--pg-accent); text-underline-offset: 0.2em; }
#phy-gate a:hover { color: var(--pg-ink); text-decoration-color: var(--pg-ink); }
#phy-gate .pg-nowrap { white-space: nowrap; }
#phy-gate .pg-wrap { max-width: calc(var(--pg-content) + 2 * var(--pg-s6)); margin-inline: auto; padding-inline: var(--pg-s6); }
#phy-gate .pg-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--pg-s5); }
#phy-gate .pg-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: var(--pg-icon); stroke-linecap: round; stroke-linejoin: round; }
#phy-gate section[id] { scroll-margin-top: var(--pg-s4); }

/* Sprache: ohne JavaScript bleibt die Shop-Sprache sichtbar */
#phy-gate[data-lang="de"] [data-l="en"], #phy-gate[data-lang="en"] [data-l="de"] { display: none !important; }
#phy-gate [lang="de"] { hyphens: auto; }

/* Typo-Rollen */
#phy-gate .pg-overline { font: var(--pg-overline); letter-spacing: 0.08em; text-transform: uppercase; color: var(--pg-ink-muted); margin-bottom: var(--pg-s5); }
#phy-gate .pg-display { font: var(--pg-display-xl); letter-spacing: -0.01em; margin-bottom: var(--pg-s5); }
#phy-gate .pg-display-l { font: var(--pg-display-l); letter-spacing: -0.01em; margin-bottom: var(--pg-s6); }
#phy-gate .pg-h2 { font: var(--pg-heading-2); margin-bottom: var(--pg-s7); }
#phy-gate .pg-lead { font: var(--pg-lead); max-width: var(--pg-text); margin-bottom: var(--pg-s4); }
#phy-gate .pg-body { color: var(--pg-ink-muted); max-width: var(--pg-text); }
#phy-gate .pg-caption { font: var(--pg-caption); color: var(--pg-ink-muted); }

/* Buttons */
#phy-gate .pg-actions { display: flex; flex-wrap: wrap; gap: var(--pg-s3); margin-top: var(--pg-s6); }
#phy-gate .pg-btn {
  display: inline-flex; align-items: center; gap: var(--pg-s2); min-height: 44px; margin: 0;
  padding: var(--pg-s3) var(--pg-s5); border: var(--pg-hair) solid transparent; border-radius: 999px;
  font: var(--pg-label); text-decoration: none; cursor: pointer; white-space: nowrap; -webkit-appearance: none; appearance: none;
  transition: background-color var(--pg-fast) var(--pg-standard), color var(--pg-fast) var(--pg-standard),
              border-color var(--pg-fast) var(--pg-standard), box-shadow var(--pg-fast) var(--pg-standard);
}
#phy-gate .pg-btn .pg-icon { transition: transform var(--pg-base) var(--pg-standard); }
#phy-gate .pg-btn-secondary { color: var(--pg-ink); background: transparent; border-color: var(--pg-ink); }
#phy-gate .pg-btn-secondary:hover { background: var(--pg-surface-raised); }
#phy-gate .pg-btn-primary { color: var(--pg-ink-on-accent); background: var(--pg-accent); border-color: var(--pg-accent); }
#phy-gate .pg-btn-primary:hover { box-shadow: inset 0 0 0 var(--pg-rule) var(--pg-ink-on-accent); }
#phy-gate .pg-btn-primary:hover .pg-icon { transform: translateX(3px); }
#phy-gate .pg-btn-primary:focus-visible { box-shadow: var(--pg-focus-ring); }

/* ---------- Kopfzeile ---------- */
#phy-gate .pg-top { position: relative; }
#phy-gate .pg-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--pg-hair); background: var(--pg-line); transform-origin: 0 50%; animation: pg-draw 700ms var(--pg-standard) both; }
#phy-gate .pg-top .pg-wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--pg-s4); padding-block: var(--pg-s4); }
#phy-gate .pg-top .pg-wrap > * { animation: pg-fade var(--pg-base) var(--pg-standard) 200ms both; }
#phy-gate .pg-nav { display: flex; gap: var(--pg-s5); }
#phy-gate .pg-nav a { font: var(--pg-label); color: var(--pg-ink-muted); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; transition: color var(--pg-fast) var(--pg-standard); }
#phy-gate .pg-nav a:hover { color: var(--pg-ink); }
#phy-gate .pg-switch { display: flex; gap: var(--pg-s2); }
#phy-gate .pg-switch button {
  font: var(--pg-label); color: var(--pg-ink); background: transparent; margin: 0;
  min-height: 44px; padding: 0 var(--pg-s4); border: var(--pg-hair) solid var(--pg-ink); border-radius: 999px; cursor: pointer;
  transition: background-color var(--pg-fast) var(--pg-standard), color var(--pg-fast) var(--pg-standard);
}
#phy-gate .pg-switch button:hover { background: var(--pg-surface-raised); }
#phy-gate .pg-switch button[aria-pressed="true"] { background: var(--pg-ink); color: var(--pg-surface); }
#phy-gate .pg-switch .pg-sh { display: none; }

/* ---------- Hero ---------- */
#phy-gate .pg-hero .pg-grid { align-items: center; padding-block: var(--pg-s8); row-gap: var(--pg-s8); }
#phy-gate .pg-hero-text { grid-column: 1 / 8; }
#phy-gate .pg-hero-art { grid-column: 8 / 13; display: flex; justify-content: flex-end; align-self: start; padding-top: var(--pg-s6); }
#phy-gate .pg-sym { display: block; width: min(400px, 46vh); height: auto; }

/* Bestätigung */
/* Bestätigung bleibt am unteren Rand erreichbar, bis man zu ihrer Stelle scrollt */
#phy-gate .pg-confirm { position: sticky; bottom: 0; z-index: 2; margin-top: var(--pg-s6); padding-block: var(--pg-s5); max-width: 640px; background: var(--pg-surface); }
#phy-gate .pg-confirm::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--pg-rule); background: var(--pg-ink); transform-origin: 0 50%; animation: pg-draw 700ms var(--pg-standard) 900ms both; }
#phy-gate .pg-confirm-info { position: relative; padding-block: 0; margin-top: var(--pg-s5); }
#phy-gate .pg-confirm-info::before { display: none; }
#phy-gate .pg-confirm-info .pg-actions { margin-top: var(--pg-s5); }
#phy-gate .pg-confirm .pg-actions { margin-top: var(--pg-s5); }

#phy-gate .pg-check { position: relative; display: grid; grid-template-columns: 24px 1fr; column-gap: var(--pg-s4); align-items: start; cursor: pointer; padding-block: var(--pg-s2); min-height: 44px; }
#phy-gate .pg-check input { position: absolute; top: var(--pg-s2); left: 0; width: 24px; height: 24px; margin: 0; opacity: 0; cursor: pointer; }
#phy-gate .pg-box {
  position: relative; width: 24px; height: 24px; margin-top: 2px;
  border: var(--pg-hair) solid var(--pg-line-strong); border-radius: 2px; background: var(--pg-surface);
  transition: border-color var(--pg-fast) var(--pg-standard), background-color var(--pg-fast) var(--pg-standard);
}
#phy-gate .pg-box svg { position: absolute; inset: 2px; width: 18px; height: 18px; fill: none; stroke: var(--pg-surface); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset var(--pg-base) var(--pg-enter); }
#phy-gate .pg-check:hover .pg-box { border-color: var(--pg-ink); }
#phy-gate .pg-check input:checked + .pg-box { background: var(--pg-ink); border-color: var(--pg-ink); }
#phy-gate .pg-check input:checked + .pg-box svg { stroke-dashoffset: 0; }
#phy-gate .pg-check input:focus-visible + .pg-box { box-shadow: var(--pg-focus-ring); }
#phy-gate .pg-check-text { font: var(--pg-body); color: var(--pg-ink); }
#phy-gate .pg-confirm.is-error .pg-box { border-color: var(--pg-ink); box-shadow: 0 0 0 1px var(--pg-ink); }

#phy-gate .pg-err { display: flex; align-items: center; gap: var(--pg-s2); margin-top: var(--pg-s3); padding-left: 40px; font: var(--pg-label); color: var(--pg-ink); animation: pg-rise var(--pg-base) var(--pg-enter) both; }

/* Button ist erst „scharf“, wenn bestätigt ist (mit JavaScript); ohne JS greift „required“ */
#phy-gate.pg-js .pg-confirm:not(.is-checked) .pg-btn-primary { background: transparent; color: var(--pg-ink-muted); border-color: var(--pg-line-strong); box-shadow: none; }
#phy-gate.pg-js .pg-confirm:not(.is-checked) .pg-btn-primary .pg-icon { transform: none; }

/* Statusanzeige */
#phy-gate .pg-readout-wrap { grid-column: 1 / -1; }
#phy-gate .pg-readout { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--pg-s5); row-gap: var(--pg-s5); }
#phy-gate .pg-readout::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--pg-rule); background: var(--pg-ink); transform-origin: 0 50%; animation: pg-draw 800ms var(--pg-standard) 1150ms both; }
#phy-gate .pg-readout > div { position: relative; padding-top: var(--pg-s5); animation: pg-rise var(--pg-slow) var(--pg-enter) both; animation-delay: calc(1300ms + var(--i) * 70ms); }
#phy-gate .pg-readout > div::before { content: ""; position: absolute; top: 0; left: 0; width: var(--pg-hair); height: var(--pg-s2); background: var(--pg-ink); transform-origin: 50% 0; animation: pg-tick var(--pg-base) var(--pg-enter) both; animation-delay: calc(1250ms + var(--i) * 70ms); }
#phy-gate .pg-readout dt { font: var(--pg-caption); color: var(--pg-ink-muted); margin-bottom: var(--pg-s2); }
#phy-gate .pg-readout dd { display: flex; align-items: flex-start; gap: var(--pg-s2); font: var(--pg-heading-4); }
#phy-gate .pg-readout dd .pg-icon { margin-top: 3px; }
#phy-gate .pg-asof { margin-top: var(--pg-s5); }

/* ---------- Band: Bestandskunden (hell) ---------- */
#phy-gate .pg-inverse {
  --pg-surface: #ffffff; --pg-surface-subtle: #f5f5f5; --pg-surface-raised: #ffffff;
  --pg-ink: #000000; --pg-ink-muted: #595959; --pg-ink-subtle: #6e6e6e;
  --pg-line: #dedede; --pg-line-strong: #858585; --pg-accent-wash: rgba(152, 195, 48, 0.16);
  --pg-focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #000000;
  background: var(--pg-surface); color: var(--pg-ink);
}
#phy-gate .pg-inverse a:not(.pg-btn) { text-decoration-color: var(--pg-ink); }
#phy-gate .pg-band { padding-block: var(--pg-s9); }
#phy-gate .pg-band .pg-grid { align-items: start; row-gap: var(--pg-s7); }
#phy-gate .pg-band-text { grid-column: 1 / 8; }
#phy-gate .pg-band-contact { grid-column: 9 / 13; }
#phy-gate .pg-contact > div { padding-block: var(--pg-s5); border-bottom: var(--pg-hair) solid var(--pg-line); }
#phy-gate .pg-contact > div:last-child { border-bottom: 0; }
#phy-gate .pg-contact dt { font: var(--pg-caption); color: var(--pg-ink-muted); margin-bottom: var(--pg-s2); }
#phy-gate .pg-contact .pg-big a { font: 300 40px/46px var(--pg-font); letter-spacing: -0.01em; overflow-wrap: anywhere; }
#phy-gate .pg-contact .pg-mid a { font: var(--pg-heading-3); }
#phy-gate .pg-contact a:hover { text-decoration-thickness: 1px; }

/* ---------- Impressum ---------- */
#phy-gate .pg-legal { padding-block: var(--pg-s9); }
#phy-gate .pg-legal .pg-grid { row-gap: var(--pg-s6); }
#phy-gate .pg-legal-addr { grid-column: 1 / 5; font-style: normal; }
#phy-gate .pg-legal-addr strong { font-weight: 600; }
#phy-gate .pg-legal-spec { grid-column: 6 / 13; }
#phy-gate .pg-spec { font: var(--pg-body-sm); border-bottom: var(--pg-rule) solid var(--pg-ink); }
#phy-gate .pg-spec > div { display: grid; grid-template-columns: 38% 1fr; gap: var(--pg-s4); padding-block: var(--pg-s3); border-bottom: var(--pg-hair) solid var(--pg-line); }
#phy-gate .pg-spec > div:last-child { border-bottom: 0; }
#phy-gate .pg-spec dt { color: var(--pg-ink-muted); }
#phy-gate .pg-legal-notes { grid-column: 6 / 13; display: grid; gap: var(--pg-s2); }

/* ---------- Fußzeile ---------- */
#phy-gate .pg-foot { border-top: var(--pg-hair) solid var(--pg-line); }
#phy-gate .pg-foot .pg-wrap { display: flex; align-items: center; gap: var(--pg-s4); padding-block: var(--pg-s6); font: var(--pg-caption); color: var(--pg-ink-muted); }
#phy-gate .pg-foot svg { width: 24px; height: 24px; flex: none; }

/* =====================================================================
   Bewegung: gerade, gemessen, sauberer Stopp. Nur transform, opacity, clip-path.
   Zeitachse (ms): Kopflinie 0–700 · Overline 200–700 · Headline 300–1200 · Logo 100–1180
   · Text 760–1240 · Bestätigungslinie 900–1600 · Checkbox/Buttons 980–1460 · Statusanzeige 1150–1950
   ===================================================================== */
#phy-gate .pg-scan { animation: pg-scan 500ms var(--pg-standard) 200ms both; }
#phy-gate .pg-words .pg-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
#phy-gate .pg-words .pg-w > span { display: inline-block; animation: pg-up 640ms var(--pg-enter) both; animation-delay: calc(300ms + var(--i) * 50ms); }
#phy-gate .pg-rise { animation: pg-rise var(--pg-slow) var(--pg-enter) both; animation-delay: var(--d, 0ms); }

/* Logo-Aufbau: Ringsegmente im Uhrzeigersinn ab oben (60 ms Abstand), dann die Balken aus ihrer Mitte, der grüne zuletzt */
#phy-gate .pg-sym .pg-ink { fill: #ffffff; }
#phy-gate .pg-sym .pg-grn { fill: var(--pg-green); }
#phy-gate .pg-sw { fill: none; stroke: #ffffff; stroke-width: 260; stroke-dasharray: 1700 6000; animation: pg-sweep 440ms var(--pg-standard) both; }
#phy-gate .pg-sw1 { animation-delay: 100ms; } #phy-gate .pg-sw2 { animation-delay: 160ms; } #phy-gate .pg-sw3 { animation-delay: 220ms; } #phy-gate .pg-sw4 { animation-delay: 280ms; }
#phy-gate .pg-bar { transform-box: fill-box; transform-origin: center; animation: pg-grow 420ms var(--pg-enter) both; }
#phy-gate .pg-b1 { animation-delay: 420ms; } #phy-gate .pg-b3 { animation-delay: 480ms; } #phy-gate .pg-b4 { animation-delay: 540ms; } #phy-gate .pg-b2 { animation-delay: 760ms; }

/* Abschnitte beim Scrollen in der Ebene */
#phy-gate.pg-io-on .pg-io { opacity: 0; transform: translateY(8px); transition: opacity var(--pg-slow) var(--pg-enter), transform var(--pg-slow) var(--pg-enter); }
#phy-gate.pg-io-on .pg-io.is-in { opacity: 1; transform: none; }
#phy-gate .pg-draw { position: relative; }
#phy-gate .pg-draw::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--pg-rule); background: var(--pg-ink); transform-origin: 0 50%; }
#phy-gate .pg-contact.pg-draw > div:first-child, #phy-gate .pg-spec.pg-draw > div:first-child { padding-top: calc(var(--pg-s5) + var(--pg-rule)); }
#phy-gate .pg-spec.pg-draw > div:first-child { padding-top: calc(var(--pg-s3) + var(--pg-rule)); }
#phy-gate.pg-io-on .pg-io .pg-draw::before { transform: scaleX(0); transition: transform 800ms var(--pg-standard) 150ms; }
#phy-gate.pg-io-on .pg-io.is-in .pg-draw::before { transform: none; }
#phy-gate.pg-io-on .pg-io .pg-draw > div { opacity: 0; transform: translateY(6px); transition: opacity var(--pg-slow) var(--pg-enter), transform var(--pg-slow) var(--pg-enter); transition-delay: calc(300ms + var(--i, 0) * 60ms); }
#phy-gate.pg-io-on .pg-io.is-in .pg-draw > div { opacity: 1; transform: none; }

/* Sprachwechsel: kein zweiter Auftritt, nur kurzes Einblenden */
#phy-gate.pg-ready .pg-scan, #phy-gate.pg-ready .pg-words .pg-w > span, #phy-gate.pg-ready .pg-rise, #phy-gate.pg-ready .pg-readout > div {
  animation: pg-fade var(--pg-base) var(--pg-standard) both !important; animation-delay: 0ms !important;
}
#phy-gate.pg-ready .pg-readout::before, #phy-gate.pg-ready .pg-readout > div::before, #phy-gate.pg-ready .pg-confirm::before { animation: none !important; }
#phy-gate.pg-ready .pg-io .pg-draw > div { transition-delay: 0ms; }

/* Abgang nach der Bestätigung: Inhalt hebt sich leicht, Ebene blendet aus */
#phy-gate.pg-leaving { pointer-events: none; animation: pg-out var(--pg-slow) var(--pg-exit) forwards; }
#phy-gate.pg-leaving > * { animation: pg-lift var(--pg-slow) var(--pg-exit) forwards; }

@keyframes pg-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pg-tick { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes pg-scan { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pg-up { from { transform: translateY(110%); } to { transform: none; } }
@keyframes pg-sweep { from { stroke-dasharray: 0 6000; } to { stroke-dasharray: 1700 6000; } }
@keyframes pg-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes pg-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pg-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pg-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes pg-lift { from { transform: none; } to { transform: translateY(-12px); } }

/* =====================================================================
   Hinweisleiste auf jeder Seite
   ===================================================================== */
.phy-cbar {
  position: relative; z-index: 1030; background: var(--pg-surface-subtle); color: var(--pg-ink);
  border-bottom: var(--pg-hair) solid var(--pg-line);
  font: var(--pg-body-sm); font-family: inherit; text-align: left;
}
.phy-cbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: var(--pg-hair); background: var(--pg-line-strong); transform-origin: 0 50%; animation: pg-draw 700ms var(--pg-standard) both; }
.phy-cbar-in { max-width: calc(var(--pg-content) + 2 * var(--pg-s6)); margin-inline: auto; padding: var(--pg-s3) var(--pg-s6); display: flex; align-items: center; gap: var(--pg-s4); }
.phy-cbar-mark { flex: none; width: 4px; height: 20px; border-radius: 999px; background: var(--pg-accent); transform-origin: 50% 50%; animation: pg-grow 420ms var(--pg-enter) 200ms both; }
.phy-cbar-text { margin: 0; flex: 1; min-width: 0; color: var(--pg-ink-muted); font: inherit; font-size: 15px; line-height: 23px; }
.phy-cbar-text strong { color: var(--pg-ink); font-weight: 600; margin-right: var(--pg-s2); }
.phy-cbar-text > span:not(.phy-cbar-long) { color: var(--pg-ink); }
.phy-cbar-nowrap { white-space: nowrap; }
.phy-cbar a { color: var(--pg-ink); text-decoration: underline var(--pg-rule) var(--pg-accent); text-underline-offset: 0.2em; }
.phy-cbar a:hover { color: var(--pg-ink); text-decoration-color: var(--pg-ink); }
.phy-cbar .phy-cbar-more {
  flex: none; display: inline-flex; align-items: center; gap: var(--pg-s1); min-height: 36px; padding: 0 var(--pg-s4);
  border: var(--pg-hair) solid var(--pg-ink); border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 14px; line-height: 20px;
  transition: background-color var(--pg-fast) var(--pg-standard);
}
.phy-cbar .phy-cbar-more:hover { background: var(--pg-surface-raised); }
.phy-cbar .phy-cbar-more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--pg-base) var(--pg-standard); }
.phy-cbar .phy-cbar-more:hover svg { transform: translateX(2px); }
.phy-cbar :focus-visible, .phy-cnotice :focus-visible { outline: none; box-shadow: var(--pg-focus-ring); }
.phy-cbar > .phy-cbar-in > * { animation: pg-fade var(--pg-base) var(--pg-standard) 150ms both; }
.phy-cbar > .phy-cbar-in > .phy-cbar-mark { animation: pg-grow 420ms var(--pg-enter) 200ms both; }

/* Kaufbuttons, die das Template trotz Sperre noch zeigt (z. B. Sets oder Matrix), ausblenden */
body.phy-catalog [name="inWarenkorb"], body.phy-catalog .register-wrapper { display: none !important; }

/* Hinweis anstelle des Registrierungsformulars */
.phy-cnotice { display: flex; gap: var(--pg-s4); align-items: flex-start; padding: var(--pg-s5); margin-block: var(--pg-s5); border: var(--pg-hair) solid var(--pg-line-strong); background: var(--pg-surface-subtle); color: var(--pg-ink); }
.phy-cnotice .phy-cbar-mark { height: 26px; margin-top: 1px; animation: none; }
.phy-cnotice p { margin: 0; color: var(--pg-ink-muted); }
.phy-cnotice .phy-cnotice-title { color: var(--pg-ink); font-weight: 600; font-size: 19px; line-height: 26px; margin-bottom: var(--pg-s2); }
.phy-cnotice a { color: var(--pg-ink); text-decoration: underline var(--pg-rule) var(--pg-accent); text-underline-offset: 0.2em; }

/* =====================================================================
   Responsiv
   ===================================================================== */
@media (max-width: 1024px) {
  #phy-gate .pg-hero-text { grid-column: 1 / 9; }
  #phy-gate .pg-hero-art { grid-column: 9 / 13; }
  #phy-gate .pg-display { font: var(--pg-display-l); letter-spacing: -0.01em; }
  #phy-gate .pg-readout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #phy-gate .pg-readout::before { display: none; }
  #phy-gate .pg-readout > div::before { width: 100%; height: var(--pg-rule); transform-origin: 0 50%; animation-name: pg-draw; animation-duration: 700ms; animation-timing-function: var(--pg-standard); animation-delay: calc(1150ms + var(--i) * 90ms); }
  #phy-gate .pg-band-text { grid-column: 1 / -1; }
  #phy-gate .pg-band-contact { grid-column: 1 / 9; }
  #phy-gate .pg-legal-addr { grid-column: 1 / -1; }
  #phy-gate .pg-legal-spec, #phy-gate .pg-legal-notes { grid-column: 1 / 10; }
}
@media (max-width: 720px) {
  #phy-gate .pg-wrap { padding-inline: var(--pg-s4); }
  #phy-gate .pg-nav .pg-opt, #phy-gate .pg-switch .pg-lg { display: none; }
  #phy-gate .pg-switch .pg-sh { display: inline; }
  #phy-gate .pg-switch button { min-width: 44px; padding: 0 var(--pg-s3); }
  #phy-gate .pg-nav { gap: var(--pg-s4); }
  #phy-gate .pg-hero .pg-grid { grid-template-columns: 1fr; padding-block: var(--pg-s6) var(--pg-s8); row-gap: var(--pg-s6); }
  #phy-gate .pg-hero-text, #phy-gate .pg-hero-art, #phy-gate .pg-readout-wrap { grid-column: 1 / -1; }
  /* Logo klein, mit Schutzraum von einem Viertel seines Durchmessers */
  #phy-gate .pg-hero-art { order: -1; justify-content: flex-start; padding: 16px 0 0 16px; }
  #phy-gate .pg-sym { width: 64px; }
  #phy-gate .pg-overline { margin-bottom: var(--pg-s4); }
  #phy-gate .pg-display, #phy-gate .pg-display-l { font-size: 40px; line-height: 46px; }
  #phy-gate .pg-lead { font-size: 19px; line-height: 29px; }
  #phy-gate .pg-confirm { margin-top: var(--pg-s6); padding-block: var(--pg-s4); }
  #phy-gate .pg-confirm .pg-actions { margin-top: var(--pg-s3); }
  #phy-gate .pg-confirm .pg-btn-secondary { display: none; } /* „Dringende Aufträge“ steht oben in der Kopfzeile */
  #phy-gate .pg-check-text { font: var(--pg-body-sm); }
  #phy-gate .pg-actions .pg-btn { flex: 1 1 100%; justify-content: center; }
  #phy-gate .pg-readout dd { font: var(--pg-label); }
  #phy-gate .pg-band, #phy-gate .pg-legal { padding-block: var(--pg-s8); }
  #phy-gate .pg-band-contact, #phy-gate .pg-legal-spec, #phy-gate .pg-legal-notes { grid-column: 1 / -1; }
  #phy-gate .pg-contact .pg-big a { font-size: 32px; line-height: 38px; }
  #phy-gate .pg-h2 { margin-bottom: var(--pg-s6); }
  #phy-gate .pg-spec > div { grid-template-columns: 1fr; gap: 0; }

  .phy-cbar-in { padding: var(--pg-s3) var(--pg-s4); gap: var(--pg-s3); }
  .phy-cbar .phy-cbar-long { display: none; }
  .phy-cbar-text strong { display: block; margin: 0; }
}
@media (max-width: 380px) {
  #phy-gate .pg-top .pg-wrap { gap: var(--pg-s2); }
  #phy-gate .pg-nav { gap: var(--pg-s3); }
  #phy-gate .pg-readout { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  #phy-gate *, #phy-gate *::before, #phy-gate *::after, .phy-cbar *, .phy-cbar::after {
    animation-duration: var(--pg-fast) !important; animation-delay: 0ms !important;
    transition-duration: var(--pg-fast) !important; transition-delay: 0ms !important;
  }
  #phy-gate .pg-sw, #phy-gate .pg-bar, #phy-gate .pg-top::after, #phy-gate .pg-readout::before,
  #phy-gate .pg-readout > div::before, #phy-gate .pg-confirm::before, .phy-cbar::after, .phy-cbar-mark { animation: none !important; }
  #phy-gate .pg-words .pg-w > span, #phy-gate .pg-rise, #phy-gate .pg-readout > div, #phy-gate .pg-scan { animation-name: pg-fade !important; }
  #phy-gate.pg-leaving > * { animation: none !important; }
  #phy-gate.pg-io-on .pg-io, #phy-gate.pg-io-on .pg-io .pg-draw > div { transform: none; }
  #phy-gate.pg-io-on .pg-io .pg-draw::before { transform: none; transition: none; }
}