/* Orbit postcard page (/orbit-postkarte/): request button, orbit loader, flippable postcard, share row, wall, how-it-works.
   The card itself is "paper" with fixed colours, so it reads the same in light and dark theme. */
.pcp { --paper: #fbf6ea; --paper-2: #f3ead4; --pink: #1d2747; --pink-soft: #5a6177; --air-r: #c8423b; --air-b: #2c4f9e; --space: #070b18; }
.pcp-hero .h2 { font-size: clamp(34px, 6vw, 60px); line-height: 1.05; letter-spacing: -.01em; }
.pcp-hero .h2::after { content: " 🛰"; font-size: .6em; vertical-align: .2em; }

/* ---- request button */
.pcp-run { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 22px 0 6px; }
.pcp-go { min-height: 56px; padding: 0 30px; border: 0; border-radius: 999px; background: var(--accent); color: var(--ink); font: 700 18px var(--font-b);
  cursor: pointer; animation: pcp-glow 2.4s infinite; transition: transform .2s var(--ease), filter .2s; }
.pcp-go:hover { filter: brightness(1.08); transform: translateY(-2px); }
.pcp-go:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
.pcp-go[disabled] { opacity: .6; cursor: wait; animation: none; transform: none; }
.pcp-msg { margin: 0; color: var(--muted); font-size: 15px; max-width: 60ch; }
.pcp-msg:empty { display: none; }
.pcp-msg.ok { color: var(--ok); font-weight: 600; }
.pcp-msg.warn { color: var(--accent); font-weight: 500; }
@keyframes pcp-glow { 0% { box-shadow: 0 0 0 0 rgba(255, 180, 84, .45); } 70% { box-shadow: 0 0 0 16px rgba(255, 180, 84, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 180, 84, 0); } }

/* ---- loader: earth + orbiting ISS */
.pcl { margin: 18px 0 8px; padding: 18px 16px 20px; border-radius: var(--radius); text-align: center; color: #e9eefc;
  background: radial-gradient(600px 300px at 50% 40%, #13224a, var(--space) 70%); border: 1px solid #1d2a4d; }
.pcl-svg { display: block; width: min(100%, 440px); height: auto; margin: 0 auto; }
.pcl-star { fill: #fff; animation: pcl-tw 3s ease-in-out infinite; }
.pcl-orbit { fill: none; stroke: rgba(255, 255, 255, .28); stroke-width: 2.6; stroke-dasharray: 5 7; vector-effect: non-scaling-stroke; }
.pcl-land path { fill: #5cc28a; opacity: .85; }
.pcl-land { animation: pcl-land 14s linear infinite; }
.pcl-x { animation: pcl-x 2.4s ease-in-out infinite alternate; }
.pcl-y { animation: pcl-y 2.4s ease-in-out -1.2s infinite alternate; }
.pcl-sat rect { fill: #ffd27a; }
.pcl-ping { fill: none; stroke: #ffd27a; stroke-width: .8; opacity: .7; animation: pcl-ping 1.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.pcl-step { margin: 8px 0 0; font: 500 15px var(--font-m); min-height: 1.6em; color: #e9eefc; transition: opacity .3s; }
.pcl-step.out { opacity: 0; }
@keyframes pcl-x { from { transform: translateX(-118px); } to { transform: translateX(118px); } }
@keyframes pcl-y { from { transform: translateY(-40px); } to { transform: translateY(40px); } }
@keyframes pcl-land { from { transform: translateX(0); } to { transform: translateX(200px); } }
@keyframes pcl-tw { 50% { opacity: .2; } }
@keyframes pcl-ping { from { transform: scale(.5); opacity: .9; } to { transform: scale(2.2); opacity: 0; } }

/* ---- postcard */
.pcd { margin: 22px 0 10px; }
.pcd-scene { perspective: 1800px; max-width: 820px; margin: 0 auto; }
.pcd-card { position: relative; display: grid; aspect-ratio: 3 / 2; transform-style: preserve-3d; transition: transform .9s var(--ease); cursor: pointer; }
.pcd-card.flipped { transform: rotateY(180deg); animation: none; }
.pcd-card.arrive { animation: pcd-in 1s var(--ease) both; }
@keyframes pcd-in { from { transform: translateY(-60px) rotate(-6deg) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
.pcd-face { grid-area: 1 / 1; position: relative; overflow: hidden; border-radius: 10px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 22px 50px -12px rgba(0, 0, 0, .55); }
html[data-theme="light"] .pcd-face { box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 22px 46px -14px rgba(40, 30, 10, .35); }
.pcd-back { transform: rotateY(180deg); }

/* front */
.pcd-front { background: #0b1226; border: 10px solid var(--paper); }
.pcd-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.15) contrast(1.05); }
.pcd-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .25), transparent 30%, transparent 55%, rgba(0, 0, 0, .65)); }
.pcd-stamp { position: absolute; top: 14px; right: 14px; width: 100px; height: 120px; padding: 6px; transform: rotate(3deg);
  background: radial-gradient(circle, transparent 3.2px, var(--paper) 3.6px) -5px -5px / 10px 10px; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .45)); }
.pcd-stamp-in { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px; color: #fff;
  background: linear-gradient(160deg, #2c4f9e, #142a5c 70%), #142a5c; outline: 1px solid rgba(255, 255, 255, .5); outline-offset: -4px; }
.pcd-iss { width: 54px; height: 34px; color: #ffd27a; }
.pcd-stamp-t { font: 700 15px/1 var(--font-m); letter-spacing: .14em; margin-top: 4px; }
.pcd-stamp-no { font: 500 italic 15px/1.1 var(--font-d); }
.pcd-stamp-v { font: 500 9px var(--font-m); letter-spacing: .08em; opacity: .75; }
.pcd-pm { position: absolute; top: 40px; right: 104px; width: 230px; height: auto; transform: rotate(-12deg); overflow: visible;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .8)); pointer-events: none; }
.pcd-pm-w, .pcd-pm-o, .pcd-pm-i { fill: none; stroke: rgba(255, 250, 235, .82); }
.pcd-pm-w { stroke-width: 2.4; }
.pcd-pm-o { stroke-width: 3; }
.pcd-pm-i { stroke-width: 1.4; }
.pcd-pm text { fill: rgba(255, 250, 235, .92); font-family: var(--font-m); }
.pcd-pm-arc { font-size: 8.6px; letter-spacing: .12em; }
.pcd-pm-d { font-size: 14px; font-weight: 700; letter-spacing: .04em; }
.pcd-pm-t { font-size: 12px; }
.pcd-label { position: absolute; left: 22px; bottom: 18px; right: 140px; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .7); }
.pcd-from { display: block; font: 600 12px var(--font-m); letter-spacing: .2em; text-transform: uppercase; opacity: .92; }
.pcd-place { display: block; font: 500 italic clamp(28px, 5.4vw, 52px)/1.05 var(--font-d); overflow-wrap: anywhere; }

/* back */
.pcd-back { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; color: var(--pink); padding: 26px 26px 22px;
  background: radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, .55), transparent 60%), linear-gradient(135deg, var(--paper), var(--paper-2)); }
.pcd-back::before { content: ""; position: absolute; inset: 0; pointer-events: none; border: 8px solid transparent; border-radius: 10px;
  border-image: repeating-linear-gradient(-45deg, var(--air-r) 0 14px, transparent 14px 20px, var(--air-b) 20px 34px, transparent 34px 40px) 8; opacity: .9; }
.pcd-msg { padding-right: 22px; border-right: 1.5px solid rgba(29, 39, 71, .25); display: flex; flex-direction: column; min-width: 0; }
.pcd-greet { margin: 0 0 10px; font: 500 italic clamp(20px, 2.6vw, 26px)/1.2 var(--font-d); color: #0f1838; }
.pcd-text { margin: 0; font: 500 italic clamp(15px, 1.7vw, 17.5px)/1.62 var(--font-d); color: var(--pink);
  background: repeating-linear-gradient(transparent 0 calc(1.62em - 1px), rgba(29, 39, 71, .12) calc(1.62em - 1px) 1.62em); }
.pcd-sign { margin: auto 0 0; padding-top: 10px; font: 500 italic 17px var(--font-d); color: #0f1838; }
.pcd-side { padding-left: 22px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pcd-side-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.pcd-air { font: 700 10.5px/1.3 var(--font-m); letter-spacing: .12em; text-transform: uppercase; color: var(--air-b); border: 1.5px solid var(--air-b); padding: 4px 6px; border-radius: 3px; transform: rotate(-3deg); }
.pcd-mini-stamp { width: 52px; height: 60px; flex: none; display: grid; place-items: center; border: 1.5px dashed rgba(29, 39, 71, .4); }
.pcd-mini-stamp .pcd-iss { width: 36px; height: 24px; color: rgba(29, 39, 71, .55); }
.pcd-addr { display: flex; flex-direction: column; font: 500 italic 15px/1.2 var(--font-d); }
.pcd-addr span { padding: 6px 0 3px; border-bottom: 1px solid rgba(29, 39, 71, .35); overflow-wrap: anywhere; }
.pcd-addr .pcd-to { font: 600 11px var(--font-m); letter-spacing: .1em; text-transform: uppercase; border: 0; padding: 0; color: var(--pink-soft); }
.pcd-data { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 2px 0 0; font-family: var(--font-m); }
.pcd-data div { min-width: 0; }
.pcd-data .pcd-wide { grid-column: 1 / -1; }
.pcd-data dt { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--pink-soft); }
.pcd-data dd { margin: 0; font-size: 13.5px; font-weight: 600; color: #0f1838; }
.pcd-serial { margin: auto 0 0; font: 10.5px var(--font-m); color: var(--pink-soft); letter-spacing: .06em; }

/* tools + share */
.pcd-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; margin: 16px 0 4px; }
.pcd-hint { font-size: 13px; color: var(--dim); }
.pcd-share { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 10px 0 0; }
.pcd-flip, .pcd-share button, .pcd-share a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--panel); color: var(--text); font: 600 14px var(--font-b); cursor: pointer; text-decoration: none; transition: border-color .2s, transform .2s var(--ease); }
.pcd-flip:hover, .pcd-share button:hover, .pcd-share a:hover { border-color: var(--accent); transform: translateY(-1px); text-decoration: none; }
.pcd-flip:focus-visible, .pcd-share button:focus-visible, .pcd-share a:focus-visible, .pcw-grid a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.pcd-copy.done { border-color: var(--ok); color: var(--ok); }

/* ---- wall */
.pcw { margin-top: 34px; }
.pcw-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; margin: 14px 0 0; padding: 0; }
.pcw-grid a { display: block; color: var(--text); text-decoration: none; background: var(--paper); padding: 6px 6px 8px; border-radius: 6px;
  box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .55); transition: transform .25s var(--ease); }
.pcw-grid li:nth-child(3n+1) a { transform: rotate(-1.6deg); }
.pcw-grid li:nth-child(3n+2) a { transform: rotate(1.2deg); }
.pcw-grid li:nth-child(3n) a { transform: rotate(-.4deg); }
.pcw-grid a:hover, .pcw-grid a:focus-visible { transform: rotate(0) translateY(-4px) scale(1.03); text-decoration: none; }
.pcw-grid a.cur { box-shadow: 0 0 0 3px var(--accent), 0 10px 22px -10px rgba(0, 0, 0, .55); }
.pcw-grid img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 3px; background: #0b1226; }
.pcw-cap { display: flex; justify-content: space-between; gap: 6px; padding: 6px 2px 0; color: #1d2747; }
.pcw-cap b { font: 500 italic 14.5px/1.2 var(--font-d); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcw-cap span { font: 11px/1.6 var(--font-m); color: #5a6177; flex: none; }

/* ---- how it works */
.pch { margin-top: 34px; }
.pch-steps { list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; padding: 0; margin: 14px 0 16px; }
.pch-steps li { counter-increment: s; position: relative; padding: 14px 16px 14px 54px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.pch-steps li::before { content: counter(s); position: absolute; left: 14px; top: 14px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); font: 700 14px var(--font-m); }
.pch-steps b { display: block; font: 600 15px var(--font-b); margin-bottom: 2px; }
.pch-steps span { font-size: 14.5px; color: var(--muted); line-height: 1.5; }

/* ---- narrow screens: no 3D flip, both faces stacked */
@media (max-width: 640px) {
  .pcd-card { aspect-ratio: auto; display: block; transform: none !important; cursor: default; }
  .pcd-face { backface-visibility: visible; -webkit-backface-visibility: visible; }
  .pcd-front { aspect-ratio: 3 / 2; border-width: 6px; }
  .pcd-back { transform: none; margin-top: 14px; grid-template-columns: 1fr; padding: 22px 20px 18px; }
  .pcd-msg { padding: 0 0 14px; border-right: 0; border-bottom: 1.5px solid rgba(29, 39, 71, .25); }
  .pcd-side { padding: 14px 0 0; }
  .pcd-flip, .pcd-hint { display: none; }
  .pcd-stamp { top: 8px; right: 8px; width: 60px; height: 70px; padding: 5px; }
  .pcd-stamp-in { padding: 3px; gap: 0; }
  .pcd-iss { width: 30px; height: 20px; }
  .pcd-stamp-t { font-size: 10px; margin-top: 2px; }
  .pcd-stamp-no { font-size: 11px; }
  .pcd-stamp-v { display: none; }
  .pcd-pm { width: 128px; top: 18px; right: 58px; }
  .pcd-label { left: 12px; bottom: 10px; right: 12px; }
  .pcd-from { font-size: 10px; }
  .pcw-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .pcp-go, .pcl-star, .pcl-land, .pcl-x, .pcl-y, .pcl-ping, .pcd-card.arrive { animation: none; }
  .pcl-x { transform: translateX(96px); }
  .pcl-y { transform: translateY(-24px); }
  .pcd-card, .pcw-grid a, .pcp-go, .pcl-step { transition: none; }
}