/* PCM VISION Kopf- und Fusszeile fuer alle Seiten.
   Der Kopf bleibt eine schmale Leiste in den oberen Ecken, damit er die
   Lesekarten der Startseite nicht verdeckt; nur Logo und Burger nehmen
   Klicks an. */

.pcm-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:9400;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  box-sizing:border-box;
  padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left));
  pointer-events:none;
}

.pcm-header-brand,
.pcm-language,
.pcm-header-burger{
  pointer-events:auto;
}

.pcm-header-brand{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:7px 13px 7px 8px;
  color:rgba(255,255,255,.82)!important;
  background:rgba(6,9,15,.72);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  font-family:var(--mono,"Share Tech Mono",monospace)!important;
  font-size:10px!important;
  font-weight:600!important;
  line-height:1!important;
  letter-spacing:0!important;
  text-transform:uppercase;
  text-decoration:none!important;
  -webkit-backdrop-filter:blur(9px);
  backdrop-filter:blur(9px);
  box-sizing:border-box;
  min-height:44px;
  min-width:0;
  max-width:220px;
}

.pcm-header-brand span{ overflow-wrap:anywhere; line-height:1.25; }

.pcm-header-brand img{
  display:block;
  width:26px;
  height:26px;
  object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(231,212,181,.24));
}

.pcm-header-brand:hover{
  color:#fff!important;
  border-color:color-mix(in srgb,var(--ifc-cyan,#31dce8) 55%,transparent);
}

.pcm-header-burger{
  display:grid;
  align-content:center;
  justify-items:stretch;
  gap:5px;
  box-sizing:border-box;
  width:44px;
  height:44px;
  padding:12px 11px;
  background:rgba(6,9,15,.72);
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  cursor:pointer;
  -webkit-backdrop-filter:blur(9px);
  backdrop-filter:blur(9px);
  flex-shrink:0;
}

.pcm-header-burger i{
  display:block;
  height:2px;
  border-radius:2px;
  background:rgba(255,255,255,.86);
  transition:transform .18s ease,opacity .18s ease;
}

.pcm-header-burger:hover{
  border-color:color-mix(in srgb,var(--ifc-cyan,#31dce8) 55%,transparent);
}

.pcm-header-burger:focus-visible,
.pcm-header-brand:focus-visible{
  outline:3px solid rgba(49,220,232,.72);
  outline-offset:3px;
}

body.pcm-menu-open .pcm-header-burger i:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.pcm-menu-open .pcm-header-burger i:nth-child(2){ opacity:0; }
body.pcm-menu-open .pcm-header-burger i:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ===== Menue ===== */

.pcm-menu[hidden]{
  display:none!important;
}

.pcm-menu{
  position:fixed;
  inset:0;
  z-index:9300;
  display:grid;
  place-items:start center;
  box-sizing:border-box;
  padding:max(64px,calc(env(safe-area-inset-top) + 64px)) 12px 24px;
  overflow-y:auto;
  overscroll-behavior:contain;
}

.pcm-menu-backdrop{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  padding:0;
  background:rgba(0,2,7,.92);
  border:0;
  cursor:default;
}

.pcm-menu-shell{
  position:relative;
  z-index:1;
  box-sizing:border-box;
  width:min(620px,calc(100vw - 24px));
  padding:clamp(18px,2.4vw,26px);
  border:1px solid color-mix(in srgb,var(--ifc-cyan,#31dce8) 34%,rgba(255,255,255,.14));
  border-radius:22px;
  background:
    linear-gradient(180deg,rgba(5,11,17,.97),rgba(7,9,16,.96)),
    color-mix(in srgb,var(--ifc-cyan,#31dce8) 3%,rgba(2,4,7,.97));
  box-shadow:0 34px 110px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08);
}

.pcm-menu-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:6px;
}

.pcm-menu-kicker{
  margin:0!important;
  color:var(--ifc-cyan,#31dce8)!important;
  font-family:var(--mono,"Share Tech Mono",monospace)!important;
  font-size:10px!important;
  font-weight:700!important;
  line-height:1.35!important;
  letter-spacing:.12em!important;
  text-transform:uppercase;
}

.pcm-menu-close{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  padding:0;
  color:#fff;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  font-size:19px;
  line-height:1;
  cursor:pointer;
}

.pcm-menu-close:hover{
  background:rgba(255,255,255,.12);
}

.pcm-menu-group{
  padding:13px 0 4px;
  border-top:1px solid rgba(255,255,255,.10);
}

.pcm-menu-group h2{
  margin:0 0 9px!important;
  color:rgba(255,255,255,.5)!important;
  font-family:var(--mono,"Share Tech Mono",monospace)!important;
  font-size:9px!important;
  font-weight:700!important;
  line-height:1.2!important;
  letter-spacing:.12em!important;
  text-transform:uppercase;
}

.pcm-menu-group ul{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px 12px;
  margin:0!important;
  padding:0!important;
  list-style:none;
}

.pcm-menu-group a{
  display:block;
  padding:8px 11px;
  color:rgba(255,255,255,.86)!important;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  font-family:var(--body,'Inter',sans-serif)!important;
  font-size:13px!important;
  line-height:1.3!important;
  letter-spacing:0!important;
  text-decoration:none!important;
}

.pcm-menu-group a:hover{
  color:#fff!important;
  border-color:color-mix(in srgb,var(--ifc-cyan,#31dce8) 55%,transparent);
}

.pcm-menu-group a[aria-current="page"]{
  color:var(--ifc-cyan,#31dce8)!important;
  border-color:color-mix(in srgb,var(--ifc-cyan,#31dce8) 55%,transparent);
}

body.pcm-menu-open{
  overflow:hidden!important;
}

/* Die festen Schaltflaechen der Buehne wuerden sonst ueber dem Menue liegen. */
body.pcm-menu-open .pcm-store-launcher,
body.pcm-menu-open .phinix-bot,
body.pcm-menu-open .rail{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* ===== Fusszeile =====

   Eine Fusszeile fuer alle Seiten: Store-Schaltflaechen oben, darunter die
   Rechtshinweise, darunter die Marke - immer gestapelt und zentriert. Auf der
   Startseite haengt dieselbe Zeile fest am unteren Rand, auf allen anderen
   Seiten steht sie am Dokumentende. Der einzige Unterschied ist die
   Positionierung, nicht der Aufbau. */

.pcm-footer{
  box-sizing:border-box;
  display:grid;
  justify-items:center;
  gap:8px;
  padding:18px max(12px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-bottom));
  color:rgba(255,255,255,.55);
  text-align:center;
}

.pcm-footer-legal{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:4px 14px;
  margin:0!important;
  padding:0!important;
  list-style:none;
}

.pcm-footer-legal a{
  color:rgba(255,255,255,.72)!important;
  font-family:var(--mono,"Share Tech Mono",monospace)!important;
  font-size:10px!important;
  line-height:1.3!important;
  letter-spacing:.06em!important;
  text-decoration:none!important;
  text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.22);
}

.pcm-footer-legal a:hover{
  color:#fff!important;
  border-bottom-color:var(--ifc-cyan,#31dce8);
}

.pcm-footer-claim{
  margin:0!important;
  color:rgba(255,255,255,.42)!important;
  font-family:var(--mono,"Share Tech Mono",monospace)!important;
  font-size:9px!important;
  line-height:1.3!important;
  letter-spacing:.08em!important;
  text-transform:uppercase;
}

.pcm-footer-slot:empty{
  display:none;
}

/* Auf der Startseite ist die Seite eine feste Buehne - dieselbe Fusszeile haengt
   dort unten. Die Store-Schaltflaechen stehen in ihrer Zeile im Fluss statt fest
   am Bildrand, sonst braeuchten sie eine eigene Zeile darueber. */
.pcm-footer-fixed{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:9200;
  gap:6px;
  padding:8px 12px max(8px,env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(2,4,7,0),rgba(2,4,7,.86) 42%);
  pointer-events:none;
}

.pcm-footer-fixed .pcm-footer-legal,
.pcm-footer-fixed .pcm-footer-claim,
.pcm-footer-fixed .pcm-footer-slot{
  pointer-events:auto;
}

.pcm-footer .pcm-store-launcher{
  position:static!important;
  inset:auto!important;
  transform:none!important;
}

@media(max-width:820px){
  .pcm-footer{
    gap:7px;
    padding:14px 10px max(12px,env(safe-area-inset-bottom));
  }

  .pcm-footer-fixed{
    gap:5px;
    padding:7px 10px max(6px,env(safe-area-inset-bottom));
  }

  /* In der schmalen Buehnenzeile bleibt kein Platz fuer die Markenzeile; sie
     steht auf allen uebrigen Seiten. */
  .pcm-footer-fixed .pcm-footer-claim{
    display:none;
  }

  .pcm-footer-legal{
    gap:3px 10px;
  }

  .pcm-footer-legal a{
    font-size:9px!important;
    letter-spacing:.04em!important;
  }
}

/* Waehrend Overlays und der Eroeffnungssequenz bleibt die Buehne frei. */
body.ifc-simulator-open .pcm-header,
body.ifc-simulator-open .pcm-footer-fixed,
body.pcm-inventory-open .pcm-header,
body.pcm-inventory-open .pcm-footer-fixed,
body.pcm-awakening-active .pcm-header,
body.pcm-awakening-active .pcm-footer-fixed,
body.pcm-spiral-ready[data-scene="awakening"] .pcm-header,
body.pcm-spiral-ready[data-scene="awakening"] .pcm-footer-fixed{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

@media (prefers-reduced-motion:reduce){
  .pcm-header-burger i{ transition:none; }
}


/* Sprache und Projektland sind unabhaengige Einstellungen. */
.pcm-language{ position:relative; margin-left:auto; flex:0 0 44px; }
.pcm-header-language{
  position:relative; display:grid; place-items:center; box-sizing:border-box;
  width:44px; height:44px; padding:9px; border-radius:50%;
  border:1px solid rgba(49,220,232,.55); background:rgba(6,9,15,.9);
  color:#7fe8f2; cursor:pointer;
}
.pcm-header-language svg{ width:23px; height:23px; }
.pcm-header-language span{
  position:absolute; right:-4px; bottom:-3px; padding:2px 4px;
  border:1px solid rgba(49,220,232,.45); border-radius:4px;
  background:#080e15; color:#d7f9fc; font:600 9px/1.2 system-ui,sans-serif;
  letter-spacing:0;
}
.pcm-header-language:hover,.pcm-header-language[aria-expanded="true"]{ background:#12323b; }
.pcm-header-language:focus-visible,.pcm-language-panel :focus-visible{
  outline:2px solid #7fe8f2; outline-offset:3px;
}
.pcm-language-panel[hidden],.pcm-language-panel [hidden]{ display:none!important; }
.pcm-language-panel{
  position:absolute; top:54px; right:0; box-sizing:border-box;
  width:min(340px,calc(100vw - 80px)); max-height:calc(100dvh - 100px);
  display:flex; flex-direction:column; padding:16px; gap:12px;
  border:1px solid rgba(127,232,242,.36); border-radius:8px;
  background:#0b121b; color:#f1f5f8;
  box-shadow:0 18px 60px #000a; font:14px/1.4 system-ui,sans-serif;
  letter-spacing:0; text-align:start;
}
.pcm-language-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.pcm-language-panel h2{ font:600 16px/1.3 system-ui,sans-serif!important; margin:0!important; color:#f1f5f8!important; }
.pcm-language-close{ background:transparent; color:#f1f5f8; border:0; width:32px; height:32px; cursor:pointer; font:24px/1 system-ui; }
.pcm-language-search{
  box-sizing:border-box; width:100%; min-height:44px; padding:10px;
  border:1px solid #43515d; border-radius:4px; background:#121e29; color:#fff;
  font:14px/1.4 system-ui,sans-serif;
}
.pcm-language-list{ overflow-y:auto; overscroll-behavior:contain; min-height:0; max-height:350px; }
.pcm-language-option{ display:flex; align-items:center; gap:10px; padding:10px 6px; min-height:44px; box-sizing:border-box; cursor:pointer; }
.pcm-language-option:hover{ background:#172a35; }
.pcm-language-option input{ accent-color:#7fe8f2; flex-shrink:0; width:16px; height:16px; }
.pcm-language-option strong{ display:block; color:#f1f5f8; font-weight:500; }
.pcm-language-option small{ display:block; color:#a5b5c3; font-size:11px; }
.pcm-language-note,.pcm-language-error{ font:12px/1.5 system-ui,sans-serif!important; margin:0!important; color:#a5b5c3!important; }
.pcm-language-error{ color:#ffbbaa!important; }
[data-pcm-i18n]{ letter-spacing:0!important; }
[data-pcm-i18n][dir="rtl"]{ text-align:right; font-family:system-ui,sans-serif!important; }

/* ===== Einwilligung =====
   Unten, ueber allem, aber nicht bildschirmfuellend: der Leser soll die Seite
   sehen koennen, ueber die er entscheidet. Beide Knoepfe wiegen gleich - ein
   Banner, auf dem "Zustimmen" leuchtet und "Ablehnen" sich versteckt, holt
   keine Einwilligung ein, sondern erschleicht sie. */
.pcm-einwilligung{
  position:fixed;
  left:50%;
  bottom:max(12px,env(safe-area-inset-bottom));
  z-index:9500;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
  justify-content:space-between;
  width:min(760px,calc(100vw - 24px));
  transform:translateX(-50%);
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px;
  background:rgba(6,9,15,.94);
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}

/* `hidden` muss staerker sein als die eigene Anzeigeregel.
   Ein Autorenstil schlaegt den Browserstil: `display:flex` auf der Klasse holt
   das versteckte Banner zurueck, unsichtbar zwar, aber es faengt weiter Klicks
   ab. Genau daran ist der Replay-Knopf der Themenwahl haengengeblieben - und
   genau dieselbe Falle stand schon im eigenen Bereich unter /konto/. */
.pcm-einwilligung[hidden]{ display:none!important; }

.pcm-einwilligung p{
  flex:1 1 320px;
  margin:0;
  color:rgba(255,255,255,.78)!important;
  font-family:var(--body,Inter,system-ui,sans-serif)!important;
  font-size:13px!important;
  line-height:1.55!important;
}

.pcm-einwilligung a{
  color:var(--ifc-cyan,#31dce8)!important;
  text-decoration:underline;
  text-underline-offset:2px;
}

.pcm-einwilligung-knoepfe{
  display:flex;
  flex:0 0 auto;
  gap:8px;
}

/* Gleiche Groesse, gleiches Gewicht, gleicher Kontrast. */
.pcm-einwilligung-knoepfe button{
  min-width:118px;
  padding:10px 16px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:999px;
  background:transparent;
  color:#f5f7fb;
  font-family:var(--body,Inter,system-ui,sans-serif);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}

.pcm-einwilligung-knoepfe button:hover{ border-color:rgba(255,255,255,.6); }
.pcm-einwilligung-knoepfe button:focus-visible{ outline:2px solid #31dce8; outline-offset:2px; }

@media(max-width:560px){
  .pcm-einwilligung{ padding:12px; }
  .pcm-einwilligung-knoepfe{ width:100%; }
  .pcm-einwilligung-knoepfe button{ flex:1 1 0; min-width:0; }
}

/* ===== Live-Test: goldener Kopfknopf ===== */
/* PCM-Palette: Schwarz #050505, Braun #22120c, Bronze #9a8a78, Gold #efd0a3.
   Der Glanz laeuft als schmaler Lichtstreif ueber den Knopf, der Punkt
   pulsiert wie eine Aufnahmelampe. Angemeldet steht darunter klein
   "Meine Projekte". */
.pcm-header-live{ display:none; }

.pcm-header-konto{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  color:#f6e2bd!important;
  background:linear-gradient(135deg,#2b170e 0%,#22120c 48%,#3a2414 100%);
  border:1px solid #c9a46e!important;
  box-shadow:0 0 0 1px rgba(239,208,163,.12),0 0 18px rgba(239,208,163,.28),inset 0 1px 0 rgba(255,236,204,.22);
  animation:pcm-live-atem 3.2s ease-in-out infinite;
}

.pcm-header-konto::after{
  content:"";
  position:absolute;
  top:-2px;
  bottom:-2px;
  left:-60%;
  width:45%;
  z-index:-1;
  background:linear-gradient(100deg,transparent 0%,rgba(255,240,214,.08) 30%,rgba(255,240,214,.55) 50%,rgba(255,240,214,.08) 70%,transparent 100%);
  transform:skewX(-18deg);
  animation:pcm-live-glanz 3.6s ease-in-out infinite;
  pointer-events:none;
}

.pcm-header-konto img{ filter:drop-shadow(0 0 8px rgba(239,208,163,.55)); }

.pcm-header-konto .pcm-header-live{
  display:block;
  flex:0 0 7px;
  width:7px;
  height:7px;
  margin-left:2px;
  border-radius:50%;
  background:#efd0a3;
  box-shadow:0 0 0 0 rgba(239,208,163,.7);
  animation:pcm-live-punkt 1.6s ease-out infinite;
}

.pcm-header-konto:hover{
  color:#fff7e8!important;
  border-color:#efd0a3!important;
  box-shadow:0 0 0 1px rgba(239,208,163,.3),0 0 26px rgba(239,208,163,.45),inset 0 1px 0 rgba(255,236,204,.3);
}

.pcm-header-konto:focus-visible{ outline:2px solid #efd0a3; outline-offset:3px; }

.pcm-header-texte{ display:grid; gap:3px; min-width:0; }
.pcm-header-unter{
  display:none;
  color:#b8a07c;
  font-size:8.5px;
  letter-spacing:.06em;
  line-height:1;
}
.pcm-header-konto[data-angemeldet="true"] .pcm-header-unter{ display:block; }

/* Ankunft der geschlossenen Hinweiskarte */
.pcm-header-konto.ist-angekommen{ animation:pcm-live-ankunft .9s ease-out 1, pcm-live-atem 3.2s ease-in-out .9s infinite; }

@keyframes pcm-live-glanz{
  0%,55%{ left:-60%; }
  85%,100%{ left:120%; }
}
@keyframes pcm-live-atem{
  0%,100%{ box-shadow:0 0 0 1px rgba(239,208,163,.12),0 0 14px rgba(239,208,163,.2),inset 0 1px 0 rgba(255,236,204,.22); }
  50%{ box-shadow:0 0 0 1px rgba(239,208,163,.26),0 0 24px rgba(239,208,163,.42),inset 0 1px 0 rgba(255,236,204,.3); }
}
@keyframes pcm-live-punkt{
  0%{ box-shadow:0 0 0 0 rgba(239,208,163,.75); }
  100%{ box-shadow:0 0 0 8px rgba(239,208,163,0); }
}
@keyframes pcm-live-ankunft{
  0%{ transform:scale(1); box-shadow:0 0 0 0 rgba(239,208,163,.9); }
  35%{ transform:scale(1.08); box-shadow:0 0 0 10px rgba(239,208,163,.25),0 0 36px rgba(239,208,163,.7); }
  100%{ transform:scale(1); box-shadow:0 0 0 1px rgba(239,208,163,.12),0 0 18px rgba(239,208,163,.28); }
}

/* ===== Live-Test: Hinweiskarte ===== */
.pcm-live-hinweis{
  position:fixed;
  inset:0;
  z-index:2147483000;
  display:grid;
  place-items:center;
  box-sizing:border-box;
  padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));
  background:rgba(5,5,5,0);
  transition:background .35s ease;
}
.pcm-live-hinweis.ist-offen{ background:rgba(5,5,5,.72); }
.pcm-live-hinweis.ist-zu{ background:rgba(5,5,5,0); pointer-events:none; }

.pcm-live-karte{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  box-sizing:border-box;
  width:min(360px,100%);
  padding:26px 24px 24px;
  text-align:center;
  color:#f3e6d2;
  background:linear-gradient(160deg,#2a170d 0%,#160b06 55%,#050505 100%);
  border:1px solid #9a7a52;
  border-radius:18px;
  box-shadow:0 0 0 1px rgba(239,208,163,.1),0 24px 60px rgba(0,0,0,.6),0 0 40px rgba(239,208,163,.16);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  opacity:0;
  transform:scale(.6);
  transition:transform .5s cubic-bezier(.2,.9,.25,1.15),opacity .35s ease;
}
.pcm-live-hinweis.ist-offen .pcm-live-karte{ opacity:1; transform:scale(1); }
.pcm-live-hinweis.ist-zu .pcm-live-karte{ transition:transform .5s cubic-bezier(.5,0,.75,0),opacity .45s ease; }
.pcm-live-hinweis.ist-zu .pcm-live-karte.ist-fliegend{ opacity:0; transform:translate(var(--pcm-flug-x,0),var(--pcm-flug-y,0)) scale(.08); }

/* Derselbe Glanz wie am Kopfknopf, ueber die ganze Karte */
.pcm-live-karte::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-70%;
  width:50%;
  z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,236,204,.1) 45%,rgba(255,236,204,.18) 50%,rgba(255,236,204,.1) 55%,transparent);
  transform:skewX(-18deg);
  animation:pcm-live-glanz 4.2s ease-in-out 1s infinite;
  pointer-events:none;
}

.pcm-live-zu{
  position:absolute;
  top:10px;
  right:10px;
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  padding:0;
  border:1px solid rgba(154,138,120,.45);
  border-radius:50%;
  background:rgba(5,5,5,.4);
  color:#d8c3a2;
  cursor:pointer;
}
.pcm-live-zu svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.pcm-live-zu:hover{ color:#fff7e8; border-color:#efd0a3; }
.pcm-live-zu:focus-visible{ outline:2px solid #efd0a3; outline-offset:2px; }

.pcm-live-bild svg{ display:block; width:100%; max-width:260px; height:auto; margin:0 auto 8px; overflow:visible; }
.pcm-live-haus{ filter:drop-shadow(0 0 10px rgba(239,208,163,.32)); animation:pcm-live-schweben 4s ease-in-out infinite; }
@keyframes pcm-live-schweben{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }
.pcm-live-scan{ animation:pcm-live-scan 3.2s ease-in-out 1s infinite; }
.pcm-live-schein{ transform-origin:174px 108px; animation:pcm-live-schein 3.2s ease-in-out infinite; }
@keyframes pcm-live-scan{ 0%{ transform:translateY(0); opacity:0; } 15%{ opacity:1; } 85%{ opacity:1; } 100%{ transform:translateY(-96px); opacity:0; } }
@keyframes pcm-live-schein{ 0%,100%{ opacity:.75; transform:scale(.96); } 50%{ opacity:1; transform:scale(1.04); } }
.pcm-live-weg{ animation:pcm-live-fluss 1.2s linear infinite; }
.pcm-live-netz{ stroke-dasharray:240; stroke-dashoffset:240; animation:pcm-live-zeichnen 2.4s ease-out .4s forwards; }

@keyframes pcm-live-fluss{ to{ stroke-dashoffset:-18; } }
@keyframes pcm-live-zeichnen{ to{ stroke-dashoffset:0; } }

.pcm-live-marke{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin:0 0 8px;
  padding:4px 10px;
  border:1px solid rgba(239,208,163,.45);
  border-radius:999px;
  color:#efd0a3;
  font:600 10px/1 var(--mono,"Share Tech Mono",monospace);
  letter-spacing:.16em;
}
.pcm-live-marke::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:#efd0a3;
  animation:pcm-live-punkt 1.6s ease-out infinite;
}

.pcm-live-karte h2{
  margin:0 0 8px;
  color:#fbefdc;
  font-size:22px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:0;
}

.pcm-live-satz{
  margin:0 0 20px;
  color:#cdb99a;
  font-size:14px;
  line-height:1.5;
}

.pcm-live-los{
  position:relative;
  overflow:hidden;
  width:100%;
  min-height:50px;
  padding:14px 20px;
  border:0;
  border-radius:12px;
  background:linear-gradient(135deg,#f6e2bd 0%,#efd0a3 45%,#b8925e 100%);
  color:#22120c;
  font-size:15px;
  font-weight:700;
  letter-spacing:.02em;
  cursor:pointer;
  box-shadow:0 0 22px rgba(239,208,163,.35),inset 0 1px 0 rgba(255,255,255,.5);
}
.pcm-live-los::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-60%;
  width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);
  transform:skewX(-18deg);
  animation:pcm-live-glanz 3s ease-in-out infinite;
}
.pcm-live-los:hover{ filter:brightness(1.06); }
.pcm-live-los:focus-visible{ outline:2px solid #fbefdc; outline-offset:3px; }

@media (prefers-reduced-motion:reduce){
  .pcm-header-konto,
  .pcm-header-konto::after,
  .pcm-header-konto .pcm-header-live,
  .pcm-header-konto.ist-angekommen,
  .pcm-live-karte::after,
  .pcm-live-los::after,
  .pcm-live-marke::before,
  .pcm-live-weg,
  .pcm-live-haus,
  .pcm-live-scan,
  .pcm-live-schein{ animation:none; }
  .pcm-live-scan{ opacity:0; }
  .pcm-live-netz{ animation:none; stroke-dashoffset:0; }
  .pcm-live-hinweis,.pcm-live-karte{ transition:none; }
}

/* ===== Sprache vor dem Live-Test-Knopf ===== */
/* Der Globus steht ganz links, gleich vor dem goldenen Knopf, ist genau so
   hoch wie er, auch wenn angemeldet die zweite Zeile dazukommt, und traegt
   dasselbe Gold. Der Burger bleibt allein rechts. */
.pcm-language{
  position:static;
  display:flex;
  align-self:stretch;
  flex:0 0 auto;
  margin-left:0;
  order:-1;
}
.pcm-header-language{
  width:auto;
  height:100%;
  min-height:44px;
  aspect-ratio:1;
  color:#f6e2bd;
  background:linear-gradient(135deg,#2b170e 0%,#22120c 48%,#3a2414 100%);
  border-color:#c9a46e;
  box-shadow:0 0 0 1px rgba(239,208,163,.12),0 0 18px rgba(239,208,163,.28),inset 0 1px 0 rgba(255,236,204,.22);
}
.pcm-header-language span{
  border-color:#c9a46e;
  background:#22120c;
  color:#f6e2bd;
}
.pcm-header-language:hover,.pcm-header-language[aria-expanded="true"]{
  color:#fff7e8;
  background:linear-gradient(135deg,#3a2414 0%,#2b170e 100%);
  border-color:#efd0a3;
  box-shadow:0 0 0 1px rgba(239,208,163,.3),0 0 26px rgba(239,208,163,.45),inset 0 1px 0 rgba(255,236,204,.3);
}
.pcm-header-language:focus-visible{ outline-color:#efd0a3; }
/* Die Liste haengt am Kopf selbst und beginnt an seinem linken Rand, damit
   sie auch auf dem Telefon ganz im Bild bleibt. */
.pcm-language-panel{
  top:100%;
  left:max(12px,env(safe-area-inset-left));
  right:auto;
  width:min(340px,calc(100vw - 24px));
}
.pcm-header-burger{ margin-left:auto; }

/* ===== Menue mit Bewegung =====
   Beim Oeffnen blendet der Hintergrund ein, die Karte gleitet herab, die
   Gruppen folgen der Reihe nach. Die Eintraege heben sich unter dem Zeiger. */
@keyframes pcm-menue-schleier{ from{ opacity:0; } }
@keyframes pcm-menue-karte{ from{ opacity:0; transform:translateY(-14px) scale(.98); } }
@keyframes pcm-menue-gruppe{ from{ opacity:0; transform:translateY(10px); } }
.pcm-menu:not([hidden]) .pcm-menu-backdrop{ animation:pcm-menue-schleier .3s ease-out; }
.pcm-menu:not([hidden]) .pcm-menu-shell{ animation:pcm-menue-karte .42s cubic-bezier(.2,.8,.2,1); }
.pcm-menu:not([hidden]) .pcm-menu-group{ animation:pcm-menue-gruppe .5s cubic-bezier(.2,.8,.2,1) backwards; }
.pcm-menu:not([hidden]) .pcm-menu-group:nth-of-type(1){ animation-delay:.08s; }
.pcm-menu:not([hidden]) .pcm-menu-group:nth-of-type(2){ animation-delay:.14s; }
.pcm-menu:not([hidden]) .pcm-menu-group:nth-of-type(3){ animation-delay:.2s; }
.pcm-menu:not([hidden]) .pcm-menu-group:nth-of-type(4){ animation-delay:.26s; }
.pcm-menu:not([hidden]) .pcm-menu-group:nth-of-type(n+5){ animation-delay:.32s; }
.pcm-menu-group a{ transition:translate .25s cubic-bezier(.2,.8,.2,1),border-color .25s ease,background-color .25s ease,color .25s ease; }
.pcm-menu-group a:hover{ translate:0 -2px; background:rgba(255,255,255,.07); }
.pcm-footer-legal a{ transition:color .25s ease,opacity .25s ease; }

@media (prefers-reduced-motion:reduce){
  .pcm-menu:not([hidden]) .pcm-menu-backdrop,
  .pcm-menu:not([hidden]) .pcm-menu-shell,
  .pcm-menu:not([hidden]) .pcm-menu-group{ animation:none; }
  .pcm-menu-group a{ transition:none; }
  .pcm-menu-group a:hover{ translate:none; }
}