/* OKNXT Unterseite Portale (Präfix pt-). Portalnamen nur als neutrale Schriftmarken. Abstände 150 px wie überall.
   --w und --dreh sind seitenweit Winkel, hier nicht verwenden. */

.pt-seite-wrap{--h-grund:#F2F4F9;--h-linie:#E2E7F1;--h-text:#161B2E;--h-text-2:#667089;--h-text-3:#98A1B5}
.pt-hell{color:var(--h-text)}
.pt-seite-wrap img{height:auto;max-width:none}
.pt-marke{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:8px;font:800 .66rem/1 "Manrope",sans-serif;font-style:normal;color:#fff;background:#5C6478}
.pt-marke svg{width:15px;height:15px}
.pt-m-is{background:#1BB39A}.pt-m-iw{background:#F2B705;color:#2A2100}.pt-m-i1{background:#1E7FB8}.pt-m-ka{background:#7FB82E}.pt-m-web{background:linear-gradient(140deg,#2F6BFF,#7B3BFF)}
.pt-k{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:9px;border:1px solid var(--h-linie);background:var(--pt-f2,#fff);font:600 .74rem/1 "Manrope",sans-serif;color:var(--h-text);white-space:nowrap}
.pt-k svg{width:14px;height:14px}
.pt-k-voll{color:#fff;border-color:transparent;background:linear-gradient(100deg,#00B4F9,#2F6BFF 55%,#9B05FE)}
.pt-zeiger{position:absolute;z-index:9;left:0;top:0;width:26px;height:26px;pointer-events:none;opacity:0;transform:translate(var(--zx,60%),var(--zy,60%));transition:transform .95s cubic-bezier(.65,0,.35,1),opacity .4s}
.pt-zeiger.da{opacity:1}
.pt-zeiger svg{width:26px;height:26px;fill:#161B2E;stroke:#fff;stroke-width:1.6;filter:drop-shadow(0 4px 8px rgba(0,0,0,.35))}
.pt-zeiger i{position:absolute;left:3px;top:2px;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;border:2px solid #2F6BFF;opacity:0}
.pt-zeiger.klick i{animation:pt-ring .6s ease-out}
@keyframes pt-ring{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.4)}}

/* Objektkarte */
.pt-objekt{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:10px;border-radius:16px;background:#fff;color:var(--h-text);box-shadow:0 30px 60px -20px rgba(0,0,0,.8),0 0 0 1px rgba(143,164,255,.3),0 0 60px -10px rgba(47,107,255,.7)}
.pt-objekt img{width:92px;aspect-ratio:3/2;object-fit:cover;border-radius:10px}
.pt-objekt span{display:grid;gap:2px}
.pt-objekt small{font:600 .6rem/1 "JetBrains Mono",monospace;color:#2F6BFF;letter-spacing:.08em}
.pt-objekt b{font-size:.88rem}.pt-objekt em{font-style:normal;font-size:.72rem;color:var(--h-text-2)}

/* ---------- Einstieg ---------- */
.pt-start{position:relative;padding:clamp(28px,5vh,64px) var(--seitenrand) 0}
.pt-start-innen{max-width:var(--ab-breite);margin:0 auto;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,56px);align-items:center;min-height:calc(100svh - var(--oben-hoehe,100px) - 40px)}
.pt-start .h1{max-width:12ch;font-size:clamp(2.3rem,4.2vw,4rem)}
.pt-start .unterzeile{max-width:42ch}
.pt-fakten{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pt-fakten li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font-size:.84rem;color:var(--text-2);border:1px solid var(--linie-stark);background:color-mix(in srgb,var(--panel) 80%,transparent)}
.pt-fakten li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--verlauf);box-shadow:0 0 8px rgba(47,107,255,.8)}
.pt-start .einstieg-aktionen{display:flex;margin-top:30px}
.pt-buehne{position:relative;container-type:inline-size;aspect-ratio:10/9;font-size:clamp(9px,1.9cqw,13px)}
.pt-buehne::before{content:"";position:absolute;inset:10%;border-radius:50%;background:radial-gradient(closest-side,rgba(47,107,255,.45),rgba(155,5,254,.2) 60%,transparent);filter:blur(30px)}
.pt-strahlen{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pt-strahlen line{stroke:url(#pt-sv);stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s cubic-bezier(.6,0,.2,1) calc(.8s + var(--n) * .35s)}
.pt-an .pt-strahlen line{stroke-dashoffset:0}
.pt-buehne>.pt-objekt{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.85);opacity:0;transition:transform .9s cubic-bezier(.22,1,.36,1) .2s,opacity .7s .2s;z-index:2}
.pt-an>.pt-objekt{transform:translate(-50%,-50%);opacity:1}
.pt-ziel{position:absolute;z-index:2;left:50%;top:50%;display:flex;align-items:center;gap:.8em;padding:.7em .9em;border-radius:1em;min-width:13em;background:rgba(13,16,26,.88);border:1px solid rgba(143,164,255,.3);box-shadow:0 24px 50px -24px rgba(0,0,0,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transform:translate(-50%,-50%) translate(var(--x),var(--y)) scale(.6);opacity:0;transition:transform .8s cubic-bezier(.34,1.3,.5,1) calc(.4s + var(--n) * .1s),opacity .5s calc(.4s + var(--n) * .1s)}
.pt-an .pt-ziel{transform:translate(-50%,-50%) translate(var(--x),var(--y));opacity:1}
.pt-ziel span{display:grid;gap:2px;flex:1}
.pt-ziel b{font-size:.9em;color:var(--text)}
.pt-ziel small{font-size:.72em;color:var(--text-3);transition:color .3s}
.pt-ok{display:grid;place-items:center;width:1.8em;height:1.8em;border-radius:50%;background:#16A36A;color:#fff;transform:scale(0);transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.pt-ok svg{width:1.1em;height:1.1em;stroke-width:3}
.pt-ziel.fertig .pt-ok{transform:none}
.pt-ziel.fertig small{color:#4ADE9A}
.pt-ziel.fertig{border-color:rgba(74,222,154,.45)}

/* ---------- Veröffentlichen ---------- */
.pt-cockpit{position:relative;max-width:860px;margin:0 auto;padding:18px;border-radius:22px;background:var(--h-grund);border:1px solid rgba(255,255,255,.55);box-shadow:0 50px 100px -50px rgba(0,0,0,.95),0 0 120px -40px rgba(92,203,255,.45)}
.pt-c-kopf{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.pt-c-kopf span{display:grid}.pt-c-kopf b{font-size:1rem}.pt-c-kopf small{font-size:.72rem;color:var(--h-text-2)}
.pt-c-kopf img{width:64px;aspect-ratio:3/2;object-fit:cover;border-radius:8px}
.pt-alle{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:12px;margin-bottom:10px;border-radius:12px;border:1px solid var(--h-linie);background:var(--pt-f1,#fff);font:700 .88rem/1 "Manrope",sans-serif;color:var(--h-text);cursor:pointer;transition:all .3s}
.pt-alle svg{width:16px;height:16px}
.pt-alle.drueckt{animation:pt-druck .35s ease;border-color:var(--pt-blau-rand,#9DB6FF);box-shadow:0 0 0 3px rgba(47,107,255,.12)}
@keyframes pt-druck{50%{transform:scale(.98)}}
.pt-zeilen{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pt-zeile{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:13px;background:var(--pt-f1,#fff);border:1px solid var(--h-linie);transition:border-color .4s,background .4s}
.pt-z-text{flex:1;display:grid;gap:2px}
.pt-z-text b{font-size:.86rem}
.pt-z-st{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;color:var(--h-text-2)}
.pt-z-knoepfe{display:flex;gap:6px}
.pt-zeile.laeuft .pt-z-st{color:var(--pt-blau-t,#2457D6)}
.pt-zeile.laeuft .pt-z-st::before{content:"";width:10px;height:10px;border-radius:50%;border:2px solid #9DB6FF;border-top-color:#2F6BFF;animation:pt-dreh .8s linear infinite}
@keyframes pt-dreh{to{transform:rotate(1turn)}}
.pt-zeile.online{border-color:var(--pt-gruen-rand,#A9E5C7);background:var(--pt-gruen-zart,#F5FCF8)}
.pt-zeile.online .pt-z-st{color:var(--pt-gruen-t,#11804F)}
.pt-zeile.online .pt-z-st::before{content:"";width:12px;height:12px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}
.pt-zeile.weg .pt-z-st{color:var(--h-text-2)}

/* ---------- Portal und Website ---------- */
.pt-ansicht{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 230px minmax(0,1fr);gap:22px;align-items:center;max-width:1240px;margin:0 auto}
.pt-fen{border-radius:16px;overflow:hidden;background:#fff;color:var(--h-text);box-shadow:0 50px 100px -40px rgba(0,0,0,.95),0 0 0 1px rgba(143,164,255,.2)}
.pt-fen-leiste{display:flex;align-items:center;gap:10px;height:30px;padding:0 10px;background:#EEF1F6;border-bottom:1px solid var(--h-linie)}
.pt-ampel{display:flex;gap:4px}.pt-ampel i{width:8px;height:8px;border-radius:50%;background:#D5DBE7}
.pt-url{display:inline-flex;align-items:center;gap:5px;flex:1;padding:3px 8px;border-radius:6px;background:#fff;font-size:.56rem;color:var(--h-text-2);white-space:nowrap;overflow:hidden}
.pt-url svg{width:9px;height:9px;color:#16A36A}
.pt-p-innen{padding:12px}
.pt-p-bilder{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:4px;height:170px;border-radius:10px;overflow:hidden}
.pt-p-bilder img{width:100%;height:100%;object-fit:cover}
.pt-p-bilder img:first-child{grid-row:span 2}
.pt-p-unten{display:grid;grid-template-columns:1fr 120px;gap:12px;margin-top:10px}
.pt-p-titel{display:block;font-size:.86rem;line-height:1.3}
.pt-p-unten small{display:flex;align-items:center;gap:4px;margin:4px 0 8px;font-size:.64rem;color:var(--h-text-2)}
.pt-p-unten small svg{width:11px;height:11px}
.pt-p-unten dl{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0}
.pt-p-unten dt{font-size:.82rem;font-weight:800}.pt-p-unten dd{margin:0;font-size:.56rem;color:var(--h-text-2)}
.pt-p-unten .pt-preis{padding:1px 4px;border-radius:4px;background:#D9F7EF}
.pt-p-unten aside{display:grid;gap:4px;align-content:start;padding:8px;border-radius:10px;border:1px solid var(--h-linie);font-size:.66rem}
.pt-p-unten aside small{margin:0}
.pt-p-firma{display:flex;align-items:center;gap:5px;font-size:.6rem;color:var(--h-text-2)}
.pt-p-firma i{width:12px;height:12px;border-radius:50%;background:#2F6BFF}
.pt-p-knopf{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:4px;padding:6px;border-radius:7px;background:#22C3A6;color:#fff;font-weight:700}
.pt-p-knopf svg{width:11px;height:11px}
.pt-mitte{display:grid;gap:12px;justify-items:center}
.pt-mitte .pt-objekt{grid-template-columns:1fr;text-align:center;width:100%}
.pt-mitte .pt-objekt img{width:100%}
.pt-preis-aend{display:grid;justify-items:center;padding:8px 14px;border-radius:12px;background:rgba(13,16,26,.85);border:1px solid rgba(143,164,255,.3)}
.pt-preis-aend small{font-size:.62rem;color:var(--text-3)}
.pt-preis-aend b{font-size:1.05rem;color:var(--text);font-variant-numeric:tabular-nums}
.pt-w-innen{padding:10px 12px 12px;background:#F7F8FA}
.pt-w-kopf{display:flex;justify-content:space-between;align-items:center;padding-bottom:8px;border-bottom:1px solid var(--h-linie)}
.pt-w-logo{display:inline-flex;align-items:center;gap:4px;color:#16204A}
.pt-w-logo i{width:12px;height:12px;border-radius:50%;background:#2F6BFF;box-shadow:inset 0 0 0 3px #fff,0 0 0 1.5px #2F6BFF}
.pt-w-logo b{font-size:.7rem;font-weight:800;letter-spacing:.06em}.pt-w-logo em{font-style:normal;font-size:.42rem;letter-spacing:.2em;color:#8A93A8}
.pt-w-nav{display:flex;gap:9px;font-size:.54rem;color:var(--h-text-2)}.pt-w-nav em{font-style:normal}.pt-w-nav .an{color:#16204A;font-weight:700;box-shadow:inset 0 -1.5px 0 #2F6BFF}
.pt-w-zahl{margin:8px 0;font-size:.56rem;color:var(--h-text-3)}
.pt-w-raster{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.pt-wk{display:grid;gap:3px;padding:0 0 7px;border-radius:8px;background:#fff;overflow:hidden;box-shadow:0 4px 10px -6px rgba(0,0,0,.25);font-size:.5rem}
.pt-wk img{width:100%;aspect-ratio:3/2;object-fit:cover}
.pt-wk>*:not(img){padding:0 6px}
.pt-wk small{display:flex;align-items:center;gap:3px;font-size:.46rem;color:#2F6BFF;font-weight:700}
.pt-wk small svg{width:8px;height:8px}
.pt-wk b{font-size:.56rem;line-height:1.25}
.pt-wk dl{display:flex;gap:6px;margin:0}.pt-wk dt{font-weight:800}.pt-wk dd{margin:0;font-size:.4rem;color:#888}
.pt-wk strong{font-size:.72rem}
.pt-wk>span{margin:3px 6px 0;padding:4px;border-radius:4px;background:#2F6BFF;color:#fff;text-align:center;font-weight:700;font-size:.46rem}
.pt-wk-neu{box-shadow:0 0 0 2px #2F6BFF,0 8px 18px -6px rgba(47,107,255,.6)}
/* Flug-Zustand: Ziele leer, bis die Daten ankommen */
.pt-ansicht [data-fliegt]{transition:opacity .4s ease,filter .4s ease}
.pt-ansicht.leer [data-fliegt]{opacity:.08;filter:blur(3px)}
.pt-flug{position:absolute;z-index:20;pointer-events:none;padding:5px 9px;border-radius:8px;background:#2F6BFF;color:#fff;font:700 .7rem/1.2 "Manrope",sans-serif;box-shadow:0 10px 24px -6px rgba(47,107,255,.9);white-space:nowrap}
.pt-preis.blitzt{animation:pt-blitz 1s ease}
@keyframes pt-blitz{30%{background:#FFE58A;transform:scale(1.08)}}

/* ---------- Anbinden ---------- */
.pt-einst{position:relative;max-width:1080px;margin:0 auto;padding:18px;border-radius:22px;background:var(--h-grund);border:1px solid rgba(255,255,255,.55);box-shadow:0 50px 100px -50px rgba(0,0,0,.95),0 0 120px -40px rgba(155,5,254,.4)}
.pt-e-kopf{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.pt-e-kopf span:first-child{display:flex;align-items:center;gap:8px}.pt-e-kopf b{font-size:1.05rem}
.pt-e-kopf em{padding:2px 8px;border-radius:999px;font-style:normal;font-size:.7rem;background:var(--pt-grau,#E3E8F1);color:var(--h-text-2)}
.pt-e-th,.pt-er{display:grid;grid-template-columns:30px 1.3fr 1fr 1.4fr 1.6fr 70px;gap:12px;align-items:center;padding:0 14px}
.pt-e-th{height:34px;font:600 .58rem/1 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--h-text-2)}
.pt-e-liste{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pt-er{min-height:52px;border-radius:12px;background:var(--pt-f1,#fff);border:1px solid var(--h-linie);font-size:.8rem;transition:border-color .4s,box-shadow .4s}
.pt-er>span{color:var(--h-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-host{font-family:"JetBrains Mono",monospace;font-size:.68rem}
.pt-test{display:flex;align-items:center;gap:8px}
.pt-erg{display:inline-flex;align-items:center;gap:4px;font-style:normal;font-size:.7rem;color:var(--pt-gruen-t,#11804F);opacity:0;transition:opacity .3s}
.pt-erg svg{width:12px;height:12px;stroke-width:3}
.pt-er.ok .pt-erg{opacity:1}
.pt-er.testet .pt-testknopf svg{animation:pt-funk .6s ease infinite alternate;color:var(--pt-blau-t,#2F6BFF)}
@keyframes pt-funk{to{opacity:.3}}
.pt-aktiv,.pt-inaktiv{justify-self:start;padding:3px 8px;border-radius:6px;font-style:normal;font-size:.66rem;font-weight:600;color:var(--pt-gruen-t,#11804F);background:var(--pt-gruen-bg,#E3F8EE)}
.pt-inaktiv{color:var(--pt-rot-t,#C0392B);background:var(--pt-rot-bg,#FDE8E6)}
.pt-er-neu{max-height:0;min-height:0;opacity:0;overflow:hidden;border-width:0;transition:max-height .5s cubic-bezier(.22,1,.36,1),min-height .5s,opacity .4s,border-width .5s}
.pt-er-neu.da{max-height:60px;min-height:52px;opacity:1;border-width:1px;border-color:var(--pt-blau-rand,#9DB6FF);box-shadow:0 0 0 3px rgba(47,107,255,.1)}
.pt-punkte{list-style:none;margin:clamp(28px,3vw,40px) auto 0;padding:0;max-width:1080px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pt-punkte li{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:3px;padding:18px;border-radius:18px;border:1px solid var(--linie-stark);background:color-mix(in srgb,var(--panel) 88%,transparent)}
.pt-punkte i{grid-row:span 2;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;color:#fff;background:linear-gradient(140deg,var(--cyan),var(--blau) 55%,var(--violett))}
.pt-punkte i svg{width:17px;height:17px}
.pt-punkte b{font-size:.95rem;font-weight:600}.pt-punkte small{font-size:.82rem;line-height:1.45;color:var(--text-2)}

@media (max-width:1100px){.pt-ansicht{grid-template-columns:1fr 1fr}.pt-mitte{grid-column:1/-1;grid-row:1;grid-template-columns:200px auto;align-items:center;justify-content:center}}
@media (max-width:900px){.pt-start-innen{grid-template-columns:1fr;min-height:0}.pt-punkte{grid-template-columns:1fr}.pt-e-th{display:none}.pt-er{grid-template-columns:30px 1fr auto;padding:10px 12px}.pt-er>span:not(.pt-test),.pt-host{display:none}.pt-er .pt-test{grid-column:2/-1}}
@media (max-width:640px){
  .pt-buehne{aspect-ratio:auto;display:grid;gap:8px;font-size:12px}.pt-strahlen{display:none}
  .pt-buehne>.pt-objekt,.pt-ziel{position:relative;left:auto;top:auto;transform:none!important;min-width:0}
  .pt-ansicht{grid-template-columns:1fr}.pt-mitte{grid-template-columns:1fr}.pt-web{display:none}
  .pt-cockpit,.pt-einst{padding:12px}.pt-z-knoepfe .pt-k-hell{display:none}
}
@media (min-width:901px) and (max-height:860px){.pt-start .h1{font-size:clamp(2.2rem,3.5vw,3.3rem)}.pt-fakten{margin-top:18px}.pt-start .einstieg-aktionen{margin-top:22px}}
@media (prefers-reduced-motion:reduce){.pt-seite-wrap *{transition:none!important;animation:none!important}.pt-ziel,.pt-buehne>.pt-objekt{opacity:1}}
.pt-k em{font-style:normal}
@media (min-width:901px) and (max-height:760px){.pt-buehne{max-height:calc(100svh - 150px);aspect-ratio:auto;height:calc(100svh - 150px)}}

/* ---------- Portal und Website: links ändern, rechts in Laptop und Handy gleichzeitig aktuell ---------- */
.pt-ansicht{display:block;max-width:1180px}
.pt-buehne3{position:relative;--b3h:max(380px,min(540px,calc(100svh - 460px)));height:var(--b3h)}
.pt-buehne3::before{content:"";position:absolute;left:60%;top:50%;width:60%;height:80%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(47,107,255,.32),rgba(155,5,254,.14) 60%,transparent);filter:blur(30px)}
/* Objekt in OKNXT */
.pt-ed{position:absolute;left:0;top:50%;width:29%;transform:translateY(-50%);display:grid;gap:6px;padding:16px;border-radius:18px;background:#fff;z-index:3;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.9),0 0 0 1px rgba(143,164,255,.3),0 0 60px -14px rgba(47,107,255,.6)}
.pt-ed-kopf{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.pt-ed-kopf>span:first-child{display:grid}.pt-ed-kopf b{font-size:.92rem}.pt-ed-kopf small{font-size:.6rem;color:#2F6BFF;font-weight:600}
.pt-ed-ok{display:inline-flex;white-space:nowrap;flex:none;align-items:center;gap:4px;padding:4px 8px;border-radius:999px;background:#DDF7EE;color:#0E8A66;font-size:.62rem;font-weight:700;opacity:0;transform:scale(.8);transition:opacity .3s,transform .4s cubic-bezier(.34,1.56,.64,1)}
.pt-ed-ok svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.6}
.pt-ed-ok.da{opacity:1;transform:none}
.pt-ed-lb{font-size:.62rem;font-weight:700;color:var(--h-text-2);margin-top:4px}
.pt-ed-bilder{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pt-ed-b{position:relative;border-radius:8px;overflow:hidden;outline:2px solid transparent;outline-offset:1px;transition:outline-color .3s}
.pt-ed-b img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.pt-ed-b em{position:absolute;left:3px;bottom:3px;padding:1px 5px;border-radius:4px;background:#2F6BFF;color:#fff;font-style:normal;font-size:.5rem;font-weight:700;opacity:0;transition:opacity .3s}
.pt-ed-b.an{outline-color:#2F6BFF}.pt-ed-b.an em{opacity:1}
.pt-ed-feld{position:relative;display:flex;align-items:center;gap:2px;min-height:36px;padding:8px 10px;border-radius:9px;border:1px solid var(--h-linie);background:#F7F8FB;font-size:.78rem;font-weight:600;transition:border-color .25s,box-shadow .25s}
.pt-ed-feld.aktiv{border-color:#2F6BFF;box-shadow:0 0 0 3px rgba(47,107,255,.15);background:#fff}
.pt-ed-titel{align-items:flex-start;line-height:1.35}
.pt-ed-preis .pt-ed-wert{font-size:1rem;font-variant-numeric:tabular-nums}
.pt-ed-preis em{margin-left:auto;font-style:normal;color:var(--h-text-2)}
.pt-ed-strich{display:none;width:2px;height:1.1em;background:#2F6BFF;animation:pt-strich .9s steps(1) infinite;flex:none;align-self:center}
.pt-ed-feld.aktiv .pt-ed-strich{display:block}
.pt-ed-wert mark{background:rgba(47,107,255,.18);color:inherit;border-radius:3px}
@keyframes pt-strich{50%{opacity:0}}
/* Linien mit Lichtimpuls */
.pt-linien{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.pt-li{fill:none;stroke:rgba(143,164,255,.28);stroke-width:2;stroke-dasharray:4 6}
.pt-puls{fill:none;stroke:url(#pt-lv);stroke-width:4;stroke-linecap:round;stroke-dasharray:90px var(--len,2000px);stroke-dashoffset:90px;opacity:0;filter:drop-shadow(0 0 6px #5CCBFF)}
.pt-puls.los{animation:pt-puls 1s cubic-bezier(.45,0,.55,1) forwards}
@keyframes pt-puls{0%{opacity:1;stroke-dashoffset:90px}85%{opacity:1}100%{opacity:0;stroke-dashoffset:calc(var(--len,2000px) * -1)}}
/* Geräte */
.pt-laptop,.pt-handy{position:absolute;top:50%;z-index:2}
.pt-laptop{left:36%;width:47%;transform:translateY(-50%) perspective(1600px) rotateY(-10deg) scale(var(--lsk,1))}
.pt-handy{right:0;width:17%;z-index:3;transform:translateY(-50%) perspective(1600px) rotateY(-14deg) scale(var(--hsk,1))}
.pt-l-schirm,.pt-h-schirm{position:relative;transition:box-shadow .3s}
.pt-laptop.trifft .pt-l-schirm,.pt-handy.trifft .pt-h-schirm{animation:pt-trifft .9s ease-out}
@keyframes pt-trifft{0%{box-shadow:0 0 0 2px #5CCBFF,0 0 60px 6px rgba(92,203,255,.8)}100%{box-shadow:0 40px 80px -30px rgba(0,0,0,.95),0 0 0 1px rgba(143,164,255,.25)}}
.pt-tp{font-size:1.1rem;font-variant-numeric:tabular-nums}
.pt-z-daten{display:flex;gap:12px;font-size:.58rem;color:var(--h-text-2)}
.pt-z-daten span{display:grid}
.pt-z-daten b{font-size:.78rem;color:var(--h-text)}
.pt-z-makler{display:flex;align-items:center;gap:8px;font-size:.6rem;color:var(--h-text-2)}
.pt-z-makler img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.pt-z-makler span{display:grid}
.pt-z-makler b{font-size:.72rem;color:var(--h-text)}
.pt-l-schirm{border-radius:14px 14px 4px 4px;overflow:hidden;background:#fff;border:8px solid #1A1E2B;border-bottom-width:10px;box-shadow:0 40px 80px -30px rgba(0,0,0,.95),0 0 0 1px rgba(143,164,255,.25)}
.pt-l-fuss{height:12px;margin:0 -5%;border-radius:0 0 14px 14px;background:linear-gradient(#2A2F3D,#141824);box-shadow:0 18px 30px -10px rgba(0,0,0,.8)}
.pt-l-innen{display:grid;align-items:start;grid-template-columns:1.25fr 1fr;gap:12px;padding:12px;color:var(--h-text)}
.pt-l-rechts{display:grid;gap:7px;align-content:start}
.pt-l-ort{display:flex;align-items:center;gap:4px;font-size:.58rem;color:var(--h-text-2)}
.pt-l-ort svg{width:10px;height:10px}
.pt-l-knopf{display:flex;align-items:center;justify-content:center;gap:5px;padding:6px;border-radius:7px;background:#22C3A6;color:#fff;font-size:.62rem;font-weight:700}
.pt-l-knopf svg{width:11px;height:11px}
.pt-z-foto img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;display:block}
.pt-z-titel b{font-size:.78rem;line-height:1.3}
.pt-z-preis .pt-tp{font-size:1rem;padding:1px 5px;border-radius:5px;background:#D9F7EF}
.pt-h-schirm{border-radius:26px;overflow:hidden;background:#F7F8FA;border:8px solid #1A1E2B;box-shadow:0 40px 80px -30px rgba(0,0,0,.95),0 0 0 1px rgba(143,164,255,.25);color:var(--h-text)}
.pt-h-kopf{display:flex;justify-content:space-between;align-items:center;padding:12px 10px 8px}
.pt-h-menue{display:grid;gap:3px}.pt-h-menue i{width:14px;height:2px;border-radius:2px;background:#16204A}
.pt-handy .pt-z-foto img{aspect-ratio:4/3;border-radius:0}
.pt-h-text{display:grid;gap:7px;padding:10px}
.pt-handy .pt-z-titel b{font-size:.7rem}
.pt-handy .pt-z-daten{gap:8px}
.pt-handy .pt-z-preis .pt-tp{background:none;padding:0}
.pt-h-knopf{padding:6px;border-radius:6px;background:#2F6BFF;color:#fff;text-align:center;font-size:.56rem;font-weight:700}
.pt-handy .pt-z-makler{padding-top:6px;border-top:1px solid var(--h-linie)}
.pt-z-foto{position:relative;overflow:hidden;border-radius:8px}
.pt-handy .pt-z-foto{border-radius:0}
.pt-bild-neu{position:absolute;inset:0;height:100% !important;clip-path:inset(0 100% 0 0);transition:clip-path .8s cubic-bezier(.65,0,.35,1)}
.pt-z-foto.neu .pt-bild-neu{clip-path:inset(0 0 0 0)}
.pt-blitzt{animation:pt-blitz 1.1s ease}
@keyframes pt-blitz{0%,100%{background-color:transparent}20%{background-color:rgba(92,203,255,.45)}}
.pt-z-titel b,.pt-z-preis b{border-radius:4px}
.pt-akt{position:absolute;top:14px;right:14px;z-index:4;display:inline-flex;align-items:center;gap:4px;padding:5px 9px;border-radius:999px;background:#0E8A66;color:#fff;font-size:.6rem;font-weight:700;opacity:0;transform:translateY(-6px) scale(.9);transition:opacity .35s,transform .45s cubic-bezier(.34,1.56,.64,1);box-shadow:0 8px 20px -8px rgba(14,138,102,.9)}
.pt-akt svg{width:11px;height:11px;stroke:#fff;fill:none;stroke-width:2.6}
.pt-handy .pt-akt{top:44px;right:12px}
.pt-akt.da{opacity:1;transform:none}
.pt-buehne3 .pt-zeiger{z-index:6}
.pt-phasen{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:16px;font-size:.62rem}
.pt-phasen span{padding:6px 12px;border-radius:999px;border:1px solid var(--linie-stark);color:var(--text-3);transition:all .4s}
.pt-phasen span.an{color:#fff;border-color:transparent;background:linear-gradient(100deg,#00B4F9,#2F6BFF 55%,#9B05FE)}
.pt-phasen span.fertig{color:var(--text-2);border-color:rgba(92,203,255,.45)}
@media (max-width:900px){.pt-buehne3{--b3h:640px;height:640px}.pt-ed{left:50%;top:0;width:min(340px,92%);transform:translateX(-50%)}.pt-laptop{left:0;top:auto;bottom:4%;width:74%;transform:perspective(1600px) rotateY(-8deg) scale(var(--lsk,1));transform-origin:0 100%}.pt-handy{top:auto;bottom:0;width:30%;transform:perspective(1600px) rotateY(-12deg) scale(var(--hsk,1));transform-origin:100% 100%}}
@media (max-width:640px){.pt-buehne3{--b3h:600px;height:600px}.pt-ed{padding:12px;gap:4px}.pt-ed-titel{font-size:.7rem}.pt-laptop{width:84%}.pt-handy{width:40%}.pt-l-innen{grid-template-columns:1fr}.pt-l-rechts .pt-z-makler,.pt-l-knopf,.pt-l-ort,.pt-l-rechts .pt-z-daten{display:none}.pt-akt{top:8px;right:8px}.pt-phasen{gap:5px;font-size:.55rem}.pt-phasen span{padding:5px 8px}}


/* ---------- Dunkle Abschnitte im Stil der übrigen Website (Karten wie auf KI-Agenten): Veröffentlichen, Anbinden ---------- */
.pt-dunkel{--h-grund:var(--panel);--h-linie:rgba(255,255,255,.09);--h-text:#F6F4EE;--h-text-2:#A7AAB6;--h-text-3:#6F7281;--pt-f1:#161A24;--pt-f2:#1C2130;--pt-grau:#1C2130;
  --pt-blau-t:#8FA4FF;--pt-blau-rand:rgba(143,164,255,.55);--pt-gruen-bg:rgba(74,222,154,.12);--pt-gruen-t:#4ADE9A;--pt-gruen-rand:rgba(74,222,154,.35);--pt-gruen-zart:rgba(74,222,154,.05);
  --pt-rot-bg:rgba(255,128,128,.12);--pt-rot-t:#FF9A9A;color:var(--h-text)}
.pt-cockpit.pt-dunkel,.pt-einst.pt-dunkel{background:var(--panel);border:1px solid var(--linie);box-shadow:var(--schatten)}
.pt-dunkel .pt-zeile.laeuft .pt-z-st::before{border-color:rgba(143,164,255,.35);border-top-color:#8FA4FF}

/* ---------- Handy (18.10.2026) ---------- */
/* Einstieg: Status der Portale nicht unter 0.62rem */
@media (max-width:640px){
  .pt-ziel small{font-size:.84em}
}
/* Veröffentlichen: Die Statuszeile wechselt („Bereit …“, „Wird übertragen …“, „Veröffentlicht · Heute, 14:05“) und brach
   in der schmalen Mittelspalte mal ein-, mal dreizeilig um, die Karte sprang zwischen 510 und 600 px. Jetzt steht der
   Status in einer eigenen Zeile über die volle Breite, der Knopf neben dem Namen. „Diskret“ (am Desktop sichtbar,
   auf dem Handy bisher ausgeblendet) steht bei der Website in einer dritten Zeile */
@media (max-width:640px){
  .pt-zeile{display:grid;grid-template-columns:30px minmax(0,1fr) auto;column-gap:12px;row-gap:4px;align-items:center;padding:11px 12px}
  .pt-zeile>.pt-marke{grid-column:1;grid-row:1/3;align-self:center}
  .pt-z-text{display:contents}
  .pt-z-text b{grid-column:2;grid-row:1;min-width:0}
  .pt-z-st{grid-column:2/-1;grid-row:2;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pt-z-knoepfe{grid-column:3;grid-row:1}
  .pt-z-knoepfe .pt-k-hell{display:inline-flex}
  .pt-zeile[data-n="4"] .pt-z-knoepfe{grid-column:2/-1;grid-row:3;justify-self:start;margin-top:4px}
  .pt-k{padding:6px 10px;font-size:.7rem}
}
/* Portal und Website: Titelfeld hat Platz für zwei Zeilen (mit „· provisionsfrei“ wuchs die Karte um 12 px);
   im Handy-Gerät liefen Titel und Eckdaten rechts aus dem Bildschirm */
@media (max-width:640px){
  .pt-ed-titel{min-height:48px}
  .pt-h-text{grid-template-columns:minmax(0,1fr)}
  .pt-handy .pt-z-daten{flex-wrap:wrap;gap:3px 8px}
  .pt-phasen{font-size:.62rem}
}
/* Anbinden: Unter 900 px fehlten Verbindung (Host) und der Status stand verloren unter dem Symbol. Jetzt: Name und
   Status oben, Verbindung darunter, Testknopf in der dritten Zeile. Die neue Zeile („Portal hinzufügen“) hält ihren Platz
   schon vorher frei und blendet nur ein, die Karte springt nicht und wird nicht abgeschnitten */
@media (max-width:640px){
  .pt-er{grid-template-columns:30px minmax(0,1fr) auto;column-gap:12px;row-gap:5px;padding:11px 12px}
  .pt-er>.pt-marke{grid-column:1;grid-row:1/3;align-self:start}
  .pt-er>b{grid-column:2;grid-row:1;min-width:0}
  .pt-er>.pt-aktiv,.pt-er>.pt-inaktiv{grid-column:3;grid-row:1;justify-self:end}
  .pt-er>span.pt-host{display:block;grid-column:2/-1;grid-row:2;min-width:0;font-size:.64rem}
  .pt-er .pt-test{grid-column:2/-1;grid-row:3}
  .pt-er-neu,.pt-er-neu.da{max-height:none;min-height:0;border-width:1px;box-shadow:none}
  .pt-er-neu{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s cubic-bezier(.22,1,.36,1),border-color .4s}
  .pt-er-neu.da{opacity:1;transform:none;border-color:var(--pt-blau-rand,#9DB6FF);box-shadow:0 0 0 3px rgba(47,107,255,.1)}
}
/* Handy: kleine Marken nicht unter 0.62rem */
@media (max-width:640px){
  .pt-ed-b em,.pt-objekt small,.pt-ed-kopf small{font-size:.62rem}
}
/* Portal und Website, Handy (Feedback 18.10.2026): Laptop und Handy-Gerät wurden verkleinert, damit beide in eine
   600 px hohe Bühne passen; das Handy-Gerät war nur 71 px breit, Schrift winzig. Jetzt untereinander im Fluss:
   Objektkarte, darunter der Laptop in voller Breite ohne Verkleinerung, das Handy-Gerät überlappt unten rechts */
@media (max-width:640px){
  .pt-buehne3{--b3h:auto;height:auto;display:flex;flex-direction:column;align-items:center;padding-bottom:30px}
  .pt-buehne3 .pt-ed{position:relative;left:auto;top:auto;transform:none;width:100%}
  .pt-buehne3 .pt-laptop{position:relative;left:auto;top:auto;bottom:auto;align-self:flex-start;width:80%;margin-top:34px;transform:perspective(1600px) rotateY(-6deg);transform-origin:0 50%}
  .pt-buehne3 .pt-handy{position:absolute;top:auto;right:0;bottom:0;width:38%;transform:perspective(1600px) rotateY(-10deg);transform-origin:100% 100%}
  .pt-buehne3 .pt-linien{display:none}
  /* Titel reservieren zwei Zeilen, damit „· provisionsfrei“ nichts verschiebt */
  .pt-laptop .pt-z-titel b,.pt-handy .pt-z-titel b{display:block;min-height:2.6em}
  .pt-handy .pt-z-titel b{font-size:.62rem}
  .pt-h-schirm{border-width:6px;border-radius:20px}
}
@media (max-width:640px){
  /* Laptop und Handy-Gerät nebeneinander, unten bündig, ohne den Titel im Laptop zu verdecken */
  .pt-buehne3{padding-bottom:0}
  .pt-buehne3 .pt-laptop{width:62%;margin-top:110px;transform:perspective(1600px) rotateY(-6deg)}
  .pt-buehne3 .pt-handy{width:35%}
  .pt-laptop .pt-z-titel b{font-size:.66rem}
}
@media (max-width:640px){
  /* Raster statt Überlappen: Karte oben über die ganze Breite, darunter Laptop und Handy-Gerät nebeneinander, unten bündig.
     So ragt das Handy-Gerät bei keiner Breite in die Karte oder über den Titel im Laptop */
  .pt-buehne3{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);column-gap:12px;row-gap:28px;align-items:end;padding-bottom:6px}
  .pt-buehne3 .pt-ed{grid-column:1 / -1;grid-row:1}
  .pt-buehne3 .pt-laptop{grid-column:1;grid-row:2;width:auto;margin:0}
  .pt-buehne3 .pt-handy{position:relative;grid-column:2;grid-row:2;width:auto;right:auto;bottom:auto}
}
@media (max-width:640px){.pt-handy .pt-z-titel b{min-height:5.3em}.pt-laptop .pt-z-titel b{min-height:4em}}
@media (max-width:640px){.pt-ed-titel{min-height:54px}}
/* Portal und Website, Handy (zweite Runde 18.10.2026): Handy-Gerät mit normalen Handy-Proportionen (ca. 1 : 2),
   überlappt den Laptop unten rechts; Inhalt wird im Gerät abgeschnitten wie auf einem echten Bildschirm */
@media (max-width:640px){
  .pt-buehne3{grid-template-columns:minmax(0,1fr);padding-bottom:0}
  .pt-buehne3 .pt-laptop{grid-column:1;grid-row:2;justify-self:start;align-self:start;width:80%}
  .pt-buehne3 .pt-handy{grid-column:1;grid-row:2;justify-self:end;align-self:start;width:132px;margin-top:70px;z-index:4;transform:perspective(1600px) rotateY(-10deg)}
  .pt-handy .pt-h-schirm{height:270px}
  .pt-handy .pt-h-kopf{padding:8px 8px 6px}
  .pt-handy .pt-h-text{gap:4px;padding:8px}
  .pt-handy .pt-z-titel b{min-height:0;font-size:.6rem}
  .pt-handy .pt-z-daten,.pt-handy .pt-z-makler{display:none}
  .pt-handy .pt-z-preis b{font-size:.8rem}
  .pt-h-knopf{font-size:.55rem;padding:5px}
}
@media (max-width:640px){.pt-laptop .pt-z-titel b{padding-right:17%;min-height:2.7em}.pt-buehne3 .pt-laptop .pt-z-titel b{font-size:.66rem}}
@media (max-width:400px){.pt-ed-titel{min-height:62px}}