/* generiert aus _src/portal.css — nicht direkt bearbeiten */
:root { --pt-head: var(--head); --pt-text: var(--ink); --pt-text-2: var(--muted-text); --pt-accent: var(--leaf); --pt-accent-text: var(--leaf-text); --pt-accent-soft: rgba(46, 112, 80, .1); --pt-accent-on-dark: var(--lime); --pt-surface: #fff; --pt-surface-solid: #fff; --pt-soft: var(--sage); --pt-dark: var(--pine); --pt-line: var(--line); --pt-glow: var(--lime-tint); }
/* ==========================================================================
   asim:PORTAL — Landingpage-Bausteine (gleich auf ASIM und hoerl).
   Farben kommen aus den --pt-*-Variablen, die jede Site auf ihre Tokens abbildet.
   ========================================================================== */

/* ---------- 3D-Optik ----------
   Kacheln stehen gerade; sie neigen sich nur, wenn der Zeiger darüberfährt
   (--rx/--ry aus site.js), mit Lichtreflex an der Zeigerposition (--gx/--gy). */
[data-tilt] { --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 0%; }
.pt-3d { perspective: 1400px; }
.pt-3d > .pt-diagram, .pt-device {
  position: relative;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 600ms var(--ease), box-shadow 600ms var(--ease);
  box-shadow: 0 2px 4px rgba(15, 23, 42, .04), 0 24px 48px -20px rgba(15, 23, 42, .2), 0 60px 120px -50px rgba(15, 23, 42, .3);
}
.pt-device { transform: perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry)); }
.is-tilting.pt-3d > .pt-diagram, .pt-device.is-tilting { transition-duration: 120ms; box-shadow: 0 2px 4px rgba(15, 23, 42, .04), 0 36px 64px -24px rgba(15, 23, 42, .28), 0 80px 140px -50px rgba(15, 23, 42, .36); }
.pt-3d > .pt-diagram::after, .pt-device::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(520px circle at var(--gx) var(--gy), rgba(255, 255, 255, .22), transparent 45%);
  transition: opacity 400ms var(--ease);
}
.is-tilting.pt-3d > .pt-diagram::after, .pt-device.is-tilting::after { opacity: 1; }

/* ---------- Hero ---------- */
.pt-hero { position: relative; padding: var(--s-9) 0 var(--s-9); overflow: hidden; }
.pt-hero::before { content: ""; position: absolute; inset: -30% -10% auto auto; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px; border-radius: 50%; background: radial-gradient(circle, var(--pt-glow), transparent 62%); pointer-events: none; }
.pt-hero__grid { position: relative; display: grid; gap: var(--s-9); align-items: center; }
@media (min-width: 1020px) { .pt-hero__grid { grid-template-columns: .9fr 1.1fr; gap: var(--s-7); } }
.pt-h1 { font-size: clamp(2.5rem, 1.3rem + 3.3vw, 4rem); line-height: 1.04; letter-spacing: -0.035em; font-family: var(--pt-head); font-weight: 800; color: var(--pt-text); }
.pt-h1 span { display: block; color: var(--pt-accent-text); }
.pt-lead { margin-top: var(--s-5); font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); line-height: 1.6; color: var(--pt-text-2); max-width: 52ch; }
.pt-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-7); }
.pt-proof { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-6); padding: 0; list-style: none; }
.pt-proof li { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-small); color: var(--pt-text-2); }
.pt-proof li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--pt-accent); box-shadow: 0 0 0 4px var(--pt-accent-soft); }

/* Gestaffelte Screenshots im Raum */
.pt-stack { position: relative; aspect-ratio: 16 / 11.5; perspective: 1800px; }
@media (min-width: 1020px) { .pt-stack { margin-right: calc(var(--s-7) * -1); } }
.pt-stack__img {
  position: absolute; width: 84%; height: auto; border-radius: 14px; background: #111;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 60px -20px rgba(15, 23, 42, .35), 0 80px 140px -50px rgba(15, 23, 42, .45);
  transition: transform 800ms var(--ease);
}
.pt-stack__img--3 { top: 0; right: 0; transform: rotateX(calc(10deg + var(--rx))) rotateY(calc(-18deg + var(--ry))) rotateZ(3deg) translateZ(-120px); opacity: .92; }
.pt-stack__img--2 { top: 16%; right: 8%; transform: rotateX(calc(8deg + var(--rx))) rotateY(calc(-16deg + var(--ry))) rotateZ(2deg) translateZ(-60px); }
.pt-stack__img--1 { top: 33%; right: 16%; transform: rotateX(calc(6deg + var(--rx))) rotateY(calc(-14deg + var(--ry))) rotateZ(1deg); }
.pt-stack.is-tilting .pt-stack__img { transition-duration: 200ms; }
.pt-stack:hover .pt-stack__img--3 { transform: rotateX(calc(10deg + var(--rx))) rotateY(calc(-18deg + var(--ry))) rotateZ(3deg) translate3d(24px, -18px, -120px); }
.pt-stack:hover .pt-stack__img--1 { transform: rotateX(calc(6deg + var(--rx))) rotateY(calc(-14deg + var(--ry))) rotateZ(1deg) translate3d(-18px, 14px, 30px); }
.pt-stack__badge { position: absolute; z-index: 2; left: 2%; top: 4%; padding: var(--s-2) var(--s-4); border-radius: 999px; font-size: var(--t-micro); font-weight: 600; color: var(--pt-text); background: var(--pt-surface-solid); box-shadow: 0 0 0 1px var(--pt-line) inset, 0 12px 30px -12px rgba(15, 23, 42, .3); }
@media (max-width: 1019px) { .pt-stack { max-width: 640px; } }

/* ---------- Zitate ---------- */
.pt-quotes { display: grid; gap: var(--s-4); }
@media (min-width: 640px) { .pt-quotes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .pt-quotes { grid-template-columns: repeat(4, 1fr); } }
.pt-quotes figure { margin: 0; padding: var(--s-6); border-radius: 20px; background: var(--pt-surface); box-shadow: 0 0 0 1px var(--pt-line) inset; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-5); }
.pt-quotes blockquote { font-family: var(--pt-head); font-size: 1.125rem; line-height: 1.4; font-weight: 600; color: var(--pt-text); letter-spacing: -.01em; }
.pt-quotes figcaption { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--pt-accent-text); }

/* ---------- Prinzipien & Architektur ---------- */
.pt-soft { background: var(--pt-soft); }
.pt-principles { display: grid; gap: var(--s-6); }
@media (min-width: 640px) { .pt-principles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .pt-principles { grid-template-columns: repeat(4, 1fr); } }
.pt-principles div { padding-top: var(--s-5); border-top: 2px solid var(--pt-text); }
.pt-principles h3 { font-family: var(--pt-head); font-size: 1.25rem; color: var(--pt-text); margin-bottom: var(--s-3); }
.pt-principles p { color: var(--pt-text-2); font-size: var(--t-small); }

.pt-arch-row { display: grid; gap: var(--s-8); align-items: center; margin-top: var(--s-9); }
@media (min-width: 1020px) { .pt-arch-row { grid-template-columns: 1.05fr 1fr; } }
.pt-roles .h3 { font-family: var(--pt-head); font-size: var(--t-h2); color: var(--pt-text); margin-bottom: var(--s-5); letter-spacing: -0.02em; }
.pt-roles p { color: var(--pt-text-2); font-size: 1.0625rem; }
.pt-roles p + p { margin-top: var(--s-4); }
.pt-roles strong { color: var(--pt-text); }
.pt-eco-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); padding: 0; list-style: none; }
.pt-eco-chips li { padding: 6px 14px; border-radius: 999px; font-size: var(--t-small); color: var(--pt-text-2); background: var(--pt-surface-solid); box-shadow: 0 0 0 1px var(--pt-line) inset; }
.pt-eco-chips b { color: var(--pt-text); }
.pt-roles .pt-note { margin-top: var(--s-5); font-size: var(--t-small); }

.pt-diagram { display: grid; justify-items: center; padding: var(--s-6); border-radius: 22px; background: var(--pt-surface-solid); box-shadow: 0 0 0 1px var(--pt-line) inset; font-size: var(--t-micro); color: var(--pt-text-2); }
.pd-box { width: 100%; padding: var(--s-4); border-radius: 14px; background: var(--pt-soft); box-shadow: 0 0 0 1px var(--pt-line) inset; text-align: left; }
.pd-box b { display: block; font-family: var(--pt-head); font-size: .9375rem; color: var(--pt-text); margin-bottom: 2px; }
.pd-box b small { font-family: inherit; font-size: var(--t-micro); font-weight: 400; color: var(--pt-text-2); margin-left: var(--s-2); }
.pd-portal { background: var(--pt-accent-soft); box-shadow: 0 0 0 1.5px var(--pt-accent) inset; }
.pd-portal ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; margin-top: var(--s-3); padding: 0; list-style: none; }
.pd-portal li { padding: 5px 8px; border-radius: 999px; text-align: center; background: var(--pt-surface-solid); box-shadow: 0 0 0 1px var(--pt-line) inset; color: var(--pt-text); }
.pd-portal li.is-idea { background: transparent; box-shadow: 0 0 0 1px var(--pt-accent) inset; border: 0; color: var(--pt-accent-text); }
.pd-core { width: auto; min-width: 60%; text-align: center; background: var(--pt-dark); box-shadow: none; }
.pd-core b { color: #fff; }
.pd-core span { color: rgba(255, 255, 255, .7); }
.pd-link { position: relative; width: 2px; height: 28px; background: var(--pt-accent); }
.pd-link--api { height: 36px; }
.pd-link--api em { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-style: normal; color: var(--pt-text-2); }
.pd-fan { width: 80%; height: 22px; border: 1.5px solid var(--pt-line); border-bottom: 0; border-radius: 16px 16px 0 0; margin-top: var(--s-3); }
.pd-eco { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; width: 100%; padding: 0; list-style: none; }
.pd-eco li { padding: var(--s-2) 4px; border-radius: 10px; text-align: center; background: var(--pt-surface-solid); box-shadow: 0 0 0 1px var(--pt-line) inset; }
.pd-eco b { display: block; color: var(--pt-text); font-size: .75rem; }
.pd-eco span { display: block; font-size: .6875rem; line-height: 1.3; }
@media (max-width: 639px) {
  .pd-eco { grid-template-columns: repeat(2, 1fr); }
  .pd-portal ul { grid-template-columns: repeat(2, 1fr); }
  .pd-box b small { display: block; margin: 2px 0 0; }
  .pt-3d > .pt-diagram { transform: none; }
}

/* ---------- Beispiele ---------- */
.pt-tablist { display: inline-flex; flex-wrap: wrap; gap: var(--s-1); padding: var(--s-1); margin-bottom: var(--s-7); border-radius: 999px; background: var(--pt-surface); box-shadow: 0 0 0 1px var(--pt-line) inset; }
.pt-tablist [role="tab"] { padding: var(--s-2) var(--s-5); border-radius: 999px; font-family: var(--pt-head); font-weight: 600; font-size: 1rem; color: var(--pt-text-2); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.pt-tablist [role="tab"]:hover { color: var(--pt-text); }
.pt-tablist [role="tab"][aria-selected="true"] { background: var(--pt-surface-solid); color: var(--pt-text); box-shadow: 0 0 0 1.5px var(--pt-accent) inset, 0 6px 16px -8px rgba(15, 23, 42, .25); }
.pt-panel { display: grid; gap: var(--s-8); align-items: center; animation: pt-in var(--dur-slow) var(--ease); }
.pt-panel[hidden] { display: none; }
@media (min-width: 1020px) { .pt-panel { grid-template-columns: 1.5fr 1fr; } }
@keyframes pt-in { from { opacity: 0; transform: translateY(12px); } }
.pt-device { margin: 0; border-radius: 16px; overflow: hidden; background: var(--pt-surface-solid); }
.pt-device img { display: block; width: 100%; height: auto; }
.pt-chrome { display: flex; gap: 6px; padding: 12px 14px; background: var(--pt-soft); border-bottom: 1px solid var(--pt-line); }
.pt-chrome i { width: 10px; height: 10px; border-radius: 50%; background: var(--pt-line); }
.pt-eyebrow { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--pt-accent-text); }
.pt-facts h3 { font-family: var(--pt-head); font-size: var(--t-h2); letter-spacing: -0.02em; color: var(--pt-text); margin: var(--s-3) 0 var(--s-4); }
.pt-text { color: var(--pt-text-2); font-size: 1.0625rem; }
.pt-checks { display: grid; gap: var(--s-3); margin-top: var(--s-5); padding: 0; list-style: none; }
.pt-checks li { display: flex; gap: var(--s-3); align-items: baseline; color: var(--pt-text); }
.pt-checks svg { flex: none; width: 18px; height: 18px; color: var(--pt-accent); transform: translateY(3px); }
.pt-foot { margin-top: var(--s-8); color: var(--pt-text-2); font-size: var(--t-small); }

/* ---------- Schon gebaut / Genauso denkbar ---------- */
.pt-split { display: grid; gap: var(--s-5); }
@media (min-width: 1020px) { .pt-split { grid-template-columns: 1fr 1fr; } }
.pt-card { padding: var(--s-7) var(--s-6); border-radius: 24px; background: var(--pt-surface-solid); box-shadow: 0 0 0 1px var(--pt-line) inset; }
.pt-card h3 { font-family: var(--pt-head); font-size: var(--t-h3); color: var(--pt-text); }
.pt-card > p { color: var(--pt-text-2); font-size: var(--t-small); margin: var(--s-2) 0 var(--s-5); }
.pt-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: 0; list-style: none; }
.pt-chips li { padding: var(--s-2) var(--s-4); border-radius: 12px; font-size: var(--t-small); font-weight: 500; color: var(--pt-text); background: var(--pt-soft); transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.pt-chips li:hover { transform: translateY(-2px); background: var(--pt-accent-soft); }
.pt-card--dark { background: var(--pt-dark); box-shadow: none; }
.pt-card--dark h3 { color: #fff; }
.pt-card--dark > p { color: rgba(255, 255, 255, .7); }
.pt-ideas { display: grid; gap: var(--s-3); padding: 0; list-style: none; }
.pt-ideas li { padding: var(--s-4) var(--s-5); border-radius: 14px; background: rgba(255, 255, 255, .05); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1) inset; transition: background-color var(--dur-fast) var(--ease); }
.pt-ideas li:hover { background: rgba(255, 255, 255, .08); }
.pt-ideas b { display: block; color: #fff; font-family: var(--pt-head); }
.pt-ideas span { color: rgba(255, 255, 255, .7); font-size: var(--t-small); }
.pt-ideas li.is-more { text-align: center; background: none; box-shadow: none; border: 1px dashed rgba(255, 255, 255, .2); color: var(--pt-accent-on-dark); font-weight: 600; }

/* ---------- Weg & Sicherheit ---------- */
.pt-steps { display: grid; gap: var(--s-5); padding: 0; list-style: none; counter-reset: pts; }
@media (min-width: 640px) { .pt-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .pt-steps { grid-template-columns: repeat(4, 1fr); } }
.pt-steps li { position: relative; padding-top: var(--s-7); border-top: 2px solid var(--pt-line); }
.pt-steps li::before { counter-increment: pts; content: counter(pts, decimal-leading-zero); position: absolute; top: var(--s-4); left: 0; font-family: var(--pt-head); font-weight: 800; font-size: var(--t-micro); letter-spacing: .08em; color: var(--pt-accent-text); }
.pt-steps li::after { content: ""; position: absolute; top: -2px; left: 0; width: 40px; height: 2px; background: var(--pt-accent); }
.pt-steps h3 { font-family: var(--pt-head); font-size: 1.25rem; color: var(--pt-text); margin-bottom: var(--s-2); }
.pt-steps p { font-size: var(--t-small); color: var(--pt-text-2); }
.pt-security { display: grid; gap: var(--s-6); padding: var(--s-7) var(--s-6); border-radius: 24px; background: var(--pt-surface-solid); box-shadow: 0 0 0 1px var(--pt-line) inset; }
@media (min-width: 1020px) { .pt-security { grid-template-columns: .8fr 1.2fr; padding: var(--s-8); } }
.pt-security ul { display: grid; gap: var(--s-4); padding: 0; list-style: none; }
.pt-security li { padding-left: var(--s-6); position: relative; color: var(--pt-text-2); }
.pt-security li::before { content: ""; position: absolute; left: 0; top: .35em; width: 14px; height: 14px; border-radius: 4px; background: var(--pt-accent-soft); box-shadow: 0 0 0 1.5px var(--pt-accent) inset; }
.pt-security b { color: var(--pt-text); }

@media (prefers-reduced-motion: reduce) {
  .pt-3d > .pt-diagram, .pt-device, .pt-stack__img { transition: none; }
  .pt-panel { animation: none; }
}