/* ZeroLog product pages (/code, /mobile, /extension), 19.10.2026.
   Loaded after landing-v4.css: header, footer, buttons and tokens come from there, so the product
   pages and the start page stay one identity. Everything here is prefixed p- to stay clear of the
   start page's own sections. --tint is the product colour from the start page's product cards. */
@view-transition{navigation:auto}
.p-seite{--tint:166,137,235}
.p-seite[data-produkt=code]{--tint:127,142,245}
.p-seite[data-produkt=mobile]{--tint:107,184,220}
.p-seite[data-produkt=extension]{--tint:195,133,226}

.p-main{max-width:1120px;width:calc(100% - 88px);margin:0 auto;position:relative}

/* Hero. The icon's box (top 152px, 96px wide; 118px/80px on phones) is the landing spot of the
   start page's zoom: landing-v4.js flies the clicked symbol to exactly this rectangle. */
.p-hero{position:relative;text-align:center;padding:72px 0 56px;isolation:isolate}
.p-hero::before{content:"";position:absolute;left:50%;top:0;width:min(900px,120%);height:520px;transform:translateX(-50%);z-index:-1;pointer-events:none;background:radial-gradient(ellipse 50% 45% at 50% 22%,rgba(var(--tint),.2),transparent 70%)}
.p-icon{display:block;width:96px;height:96px;margin:0 auto;border-radius:26%;border:1px solid #baa2ff40;background:#121019;box-shadow:0 10px 30px #0005,0 0 44px rgba(var(--tint),.3);overflow:hidden;view-transition-name:produkt-icon}
.p-icon img{width:100%;height:100%;border-radius:26%}
.p-name{margin-top:20px;font-size:15px;font-weight:540;letter-spacing:-.02em;color:#cfc5dd}
.p-hero h1{margin:12px auto 0;max-width:15ch;font-size:clamp(40px,5.2vw,66px);font-weight:550;line-height:1.06;letter-spacing:-.05em;text-wrap:balance}
.p-lead{margin:22px auto 0;max-width:60ch;font-size:16px;line-height:1.6;color:var(--muted);text-wrap:pretty}
.p-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px}
.p-actions .button{font-size:13px}
.p-meta{margin-top:16px;font:11px/1.6 var(--mono);color:var(--dim)}

/* The figure: a real piece of the product drawn in HTML, framed like the start page's workspace. */
.p-figur{position:relative;max-width:900px;margin:8px auto 0;border:1px solid #bba2f042;border-radius:17px;background:#111119;box-shadow:0 30px 80px #0008,0 0 60px rgba(var(--tint),.06);overflow:hidden}
.p-figur-kopf{display:flex;align-items:center;gap:7px;height:40px;padding:0 16px;border-bottom:1px solid var(--line);font:11px var(--mono);color:var(--dim)}
.p-figur-kopf i{width:9px;height:9px;border-radius:50%;background:#ffffff14}
.p-figur-kopf span{margin-left:10px}
.p-figur-tag{margin-left:auto;padding:2px 9px;border:1px solid var(--line);border-radius:999px;font:10px var(--mono);color:var(--dim)}

/* Terminal (ZeroLog Code) */
.p-terminal{margin:0;padding:26px 28px 30px;font:13.5px/1.9 var(--mono);color:#ddd5ea;white-space:pre-wrap;overflow-wrap:anywhere}
.p-terminal .k{color:var(--dim)}
.p-terminal .p{color:rgb(var(--tint));user-select:none}

/* Phone (ZeroLog Mobile) */
.p-seite[data-produkt=mobile] .p-figur{max-width:560px}
.p-buehne-telefon{position:relative;display:grid;place-items:center;padding:40px 20px 0;background:radial-gradient(ellipse 60% 70% at 50% 100%,rgba(var(--tint),.1),transparent 70%)}
.p-buehne-telefon::after{content:"";position:absolute;left:0;right:0;bottom:0;height:48px;background:linear-gradient(transparent,#111119);pointer-events:none}
.p-telefon{width:min(330px,100%);border:1px solid #c9b8ea33;border-bottom:0;border-radius:36px 36px 0 0;background:#0f0f16;padding:14px 14px 0;box-shadow:0 -10px 50px #0006}
.p-telefon-kopf{display:flex;align-items:center;justify-content:space-between;padding:4px 10px 12px;font:11px var(--mono);color:var(--dim)}
.p-telefon-tabs{display:flex;gap:6px;padding:0 4px 12px}
.p-telefon-tabs span{padding:5px 12px;border-radius:999px;font-size:12px;color:var(--muted);border:1px solid var(--line)}
.p-telefon-tabs span[aria-current]{color:var(--text);background:rgba(var(--tint),.14);border-color:rgba(var(--tint),.35)}
.p-verlauf{list-style:none;margin:0;padding:6px 4px 22px;display:grid;gap:10px;font-size:13px;line-height:1.5}
.p-verlauf li{padding:10px 12px;border-radius:14px;background:#17161f;color:#d8d0e4}
.p-verlauf .du{justify-self:end;max-width:86%;background:rgba(var(--tint),.16);color:var(--text)}
.p-verlauf .haken{background:transparent;border:1px dashed #ffffff1c;color:var(--dim);font:12px/1.5 var(--mono)}
.p-verlauf .ziel{background:transparent;border:1px solid rgba(var(--tint),.4);color:var(--text);font-weight:540}

/* Browser with side panel (ZeroLog Extension) */
.p-browser{display:grid;grid-template-columns:minmax(0,1fr) 300px;min-height:320px}
.p-webseite{padding:30px 32px 30px;border-right:1px solid var(--line)}
.p-webseite-adresse{display:inline-block;margin-bottom:26px;padding:5px 12px;border-radius:8px;background:#ffffff08;font:11px var(--mono);color:var(--dim)}
.p-webseite b{display:block;font-size:22px;font-weight:560;letter-spacing:-.03em}
.p-webseite .zeile{display:block;height:9px;margin-top:12px;border-radius:5px;background:#ffffff0d}
.p-webseite .zeile.kurz{width:62%}
.p-webseite .knopf{display:inline-block;margin-top:26px;padding:10px 18px;border-radius:9px;background:#ffffff10;font-size:13px;color:var(--text);box-shadow:0 0 0 2px rgba(var(--tint),.75),0 0 24px rgba(var(--tint),.35)}
.p-leiste{display:flex;flex-direction:column;gap:12px;padding:18px 16px;background:#0f0f16}
.p-leiste-titel{font-size:12px;font-weight:560;color:#cfc5dd}
.p-leiste ol{list-style:none;margin:0;padding:0;display:grid;gap:7px;font:12px/1.5 var(--mono);color:var(--muted)}
.p-leiste ol li::before{content:"✓";margin-right:8px;color:rgb(var(--tint))}
.p-leiste ol li.wartet::before{content:"…"}
.p-freigabe{margin-top:auto;padding:14px;border:1px solid rgba(var(--tint),.38);border-radius:12px;background:#17161f}
.p-freigabe strong{display:block;font-size:13px;font-weight:560}
.p-freigabe p{margin-top:4px;font-size:12px;line-height:1.5;color:var(--muted)}
.p-freigabe div{display:flex;gap:8px;margin-top:12px}
.p-freigabe span{flex:1;padding:7px 0;border-radius:8px;text-align:center;font-size:12px;border:1px solid var(--line);color:var(--muted)}
.p-freigabe span:first-child{color:#211831;background:linear-gradient(130deg,#efe6ff,#c9b5ec);border-color:transparent}

/* Sections: heading on the left, content on the right, hairlines between rows. */
.p-abschnitt{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:56px;padding:72px 0;border-top:1px solid var(--line)}
.p-figur+.p-abschnitt{margin-top:96px;border-top-color:rgba(var(--tint),.22)}
.p-abschnitt>h2{position:sticky;top:32px;align-self:start;font-size:clamp(24px,2.4vw,32px);font-weight:520;line-height:1.15;letter-spacing:-.035em;text-wrap:balance}
.p-zeilen{list-style:none;margin:0;padding:0}
.p-zeilen>li{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:28px;padding:22px 0;border-bottom:1px solid var(--line)}
.p-zeilen>li:first-child{padding-top:4px}
.p-zeilen>li:last-child{border-bottom:0}
.p-zeilen strong{font-size:15px;font-weight:560;line-height:1.5;letter-spacing:-.01em}
.p-zeilen p{font-size:15px;line-height:1.65;color:var(--muted);max-width:62ch}
.p-zeilen code,.p-text code,.p-schritte code,.p-hinweis code{font:13px var(--mono);color:#ddd5ea;overflow-wrap:anywhere}

.p-text{font-size:15px;line-height:1.65;color:var(--muted);max-width:72ch}
.p-text+.p-text{margin-top:14px}

/* Steps are a real sequence, so they carry numbers. */
.p-schritte{list-style:none;margin:0;padding:0;counter-reset:s}
.p-schritte>li{counter-increment:s;display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px 12px;padding:18px 0;border-bottom:1px solid var(--line)}
.p-schritte>li:first-child{padding-top:4px}
.p-schritte>li::before{content:counter(s,decimal-leading-zero);grid-row:span 2;font:13px/1.6 var(--mono);color:rgb(var(--tint))}
.p-schritte strong{font-size:15px;font-weight:560;line-height:1.6}
.p-schritte strong:only-child{font-weight:440}
.p-schritte p{font-size:15px;line-height:1.65;color:var(--muted);max-width:62ch}
.p-gruppe+.p-gruppe,.p-gruppen+.p-gruppe{margin-top:44px}
.p-gruppen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 40px}
.p-gruppen .p-gruppe+.p-gruppe{margin-top:0}
/* Side by side, the two lists cannot share row heights; without hairlines the offset does not read as a broken grid. */
@media (min-width:1101px){.p-gruppen .p-schritte>li{border-bottom:0;padding:10px 0}}
/* Two lists of equal length side by side share their rows (subgrid), so step n sits level with step n. */
@media (min-width:1101px){
  .p-paarweise{grid-template-rows:repeat(6,auto);row-gap:0}
  .p-paarweise>.p-gruppe{display:grid;grid-template-rows:subgrid;grid-row:span 6;align-content:start}
  .p-paarweise .p-schritte{display:grid;grid-template-rows:subgrid;grid-row:span 4}
  .p-paarweise .p-schritte>li{border-bottom:1px solid var(--line);padding:14px 0}
}
.p-gruppen+.p-hinweis{max-width:none}
.p-fakten+.p-datei{margin-top:8px}
.p-fakten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-block:1px solid var(--line)}
.p-fakten>li{padding:22px 24px 24px 0}
.p-fakten>li+li{padding-left:24px;border-left:1px solid var(--line)}
.p-fakt-marke{display:block;margin-bottom:14px;font:500 22px/1 var(--mono);letter-spacing:-.02em;color:rgb(var(--tint))}
.p-fakten strong{display:block;font-size:15px;font-weight:560;line-height:1.4}
.p-fakten p{margin-top:6px;font-size:14px;line-height:1.6;color:var(--muted)}
.p-gruppe>h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:16px;font-size:17px;font-weight:560;letter-spacing:-.02em}
.p-gruppe>h3 small{font:11px var(--mono);font-weight:400;color:var(--dim)}
.p-gruppe .button{margin-bottom:18px}

/* A command with a copy button. */
.p-befehl{display:flex;align-items:center;gap:12px;margin-top:10px;padding:10px 10px 10px 16px;border:1px solid var(--line);border-radius:10px;background:#111119}
/* Wraps instead of scrolling: a scroll box needs keyboard focus to be usable (axe scrollable-region-focusable). */
.p-befehl pre{flex:1;margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.6 var(--mono);color:#ddd5ea}
.p-kopieren{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:0 12px;border:1px solid var(--line);border-radius:8px;font-size:12px;color:var(--muted);transition:color .15s ease,border-color .15s ease,background-color .15s ease}
.p-kopieren .icon{width:14px;height:14px}
.p-kopieren[data-erledigt]{color:var(--text);border-color:rgba(var(--tint),.5)}
@media (hover:hover) and (pointer:fine){.p-kopieren:hover{color:var(--text);background:#ffffff08}}

.p-hinweis{margin-top:22px;padding:14px 16px;border-left:2px solid rgba(var(--tint),.6);background:#ffffff04;border-radius:0 10px 10px 0;font-size:14px;line-height:1.6;color:var(--muted);max-width:66ch}

/* File facts */
.p-datei{display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);margin:0}
.p-datei dt,.p-datei dd{padding:10px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.5}
.p-datei dt{color:var(--dim);font-size:13px}
.p-datei dd{margin:0;color:var(--text)}
.p-datei dd.summe{font:12px/1.7 var(--mono);color:var(--muted);overflow-wrap:anywhere}
.p-datei a,.p-text a,.p-hinweis a{color:#d3c3ef;text-decoration:underline;text-decoration-color:#d3c3ef66;text-underline-offset:3px}
.p-datei a:hover,.p-text a:hover,.p-hinweis a:hover{color:#fff}

/* The other products */
.p-familie{padding:72px 0 24px;border-top:1px solid var(--line)}
.p-familie-liste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:4px}
.p-familie-liste a{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:14px;padding:16px;border:1px solid #b89ad327;border-radius:13px;transition:border-color .2s ease,background-color .2s ease}
.p-familie-liste img{width:44px;height:44px;border-radius:12px;border:1px solid #cfb3fb26}
.p-familie-liste strong{display:block;font-size:14px;font-weight:540}
.p-familie-liste span{display:block;margin-top:2px;font-size:12px;color:var(--muted)}
@media (hover:hover) and (pointer:fine){.p-familie-liste a:hover{border-color:#bea0e763;background:#b599e10a}}

.p-sprache{display:flex;gap:4px}
.p-sprache a{display:inline-flex;align-items:center;min-height:24px;padding:4px 8px;border-radius:6px;color:#8d7f9c}
.p-sprache a[aria-current]{color:var(--text);background:#ffffff08}
.p-sprache a:hover{color:var(--text)}

/* Arrival from the start page's zoom: the icon is already in place; the rest settles in after it.
   Only on that arrival, never on a plain visit. */
@media (prefers-reduced-motion:no-preference){
  .angekommen .p-auftritt{animation:p-ein .5s cubic-bezier(.23,1,.32,1) both;animation-delay:calc(var(--i,0)*60ms + 90ms)}
  .angekommen .p-icon{animation:p-halo .9s cubic-bezier(.23,1,.32,1) both}
  .angekommen .p-hero::before{animation:p-licht .9s cubic-bezier(.23,1,.32,1) both}
}
@keyframes p-ein{from{opacity:0;transform:translateY(10px)}}
@keyframes p-halo{from{box-shadow:0 10px 30px #0005,0 0 90px rgba(var(--tint),.55)}}
@keyframes p-licht{from{opacity:0}}
::view-transition-group(produkt-icon){animation-duration:.28s;animation-timing-function:cubic-bezier(.23,1,.32,1)}
@media (prefers-reduced-motion:reduce){::view-transition-group(produkt-icon){animation:none}}

@media (max-width:1100px){.p-gruppen{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){
  .p-abschnitt{grid-template-columns:minmax(0,1fr);gap:24px;padding:56px 0}
  .p-abschnitt>h2{position:static}
  .p-zeilen>li{grid-template-columns:minmax(0,1fr);gap:6px}
  .p-familie-liste{grid-template-columns:minmax(0,1fr)}
  .p-browser{grid-template-columns:minmax(0,1fr) 250px}
  .p-fakten{grid-template-columns:minmax(0,1fr)}
  .p-fakten>li+li{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .p-figur+.p-abschnitt{margin-top:72px}
}
@media (max-width:650px){
  .p-main{width:calc(100% - 36px)}
  .p-hero{padding:48px 0 40px}
  .p-icon{width:80px;height:80px}
  .p-hero h1{font-size:clamp(34px,10vw,44px)}
  .p-lead{font-size:15px}
  .p-actions{flex-direction:column;align-items:stretch}
  .p-terminal{padding:18px 16px 22px;font-size:12.5px}
  .p-browser{grid-template-columns:minmax(0,1fr)}
  .p-webseite{border-right:0;border-bottom:1px solid var(--line);padding:22px 18px}
  .p-datei{grid-template-columns:minmax(0,1fr)}
  .p-datei dt{padding-bottom:0;border-bottom:0}
  .p-befehl{flex-direction:column;align-items:stretch}
  .p-kopieren{justify-content:center;min-height:44px}
  .p-sprache a{min-height:44px;padding:4px 12px}
  .p-schritte>li{grid-template-columns:28px minmax(0,1fr);gap:4px 8px}
  .p-befehl pre{font-size:11.5px}
  .p-seite[data-produkt=mobile] .p-figur{border:0;background:none;box-shadow:none}
  .p-seite[data-produkt=mobile] .p-figur-kopf{display:none}
  .p-buehne-telefon{padding:24px 0 0}
  .p-telefon{width:100%}
}