/* Porträtkarte von Thomas (chen.js) */
.chen{--ease-out:cubic-bezier(.23,1,.32,1);display:flex;align-items:flex-end;gap:14px;position:relative}
.chen-figur{position:relative;flex:none;width:clamp(180px,22vw,260px);aspect-ratio:3/4;padding:0;border:0;background:none;cursor:pointer;perspective:900px;
  transform:translateY(24px);opacity:0;transition:transform 600ms var(--ease-out),opacity 500ms var(--ease-out)}
.chen.sichtbar .chen-figur{transform:none;opacity:1}
.chen-figur:active .chen-karte{scale:.98}
.chen-karte{position:absolute;inset:0;display:block;border-radius:22px;transform-style:preserve-3d;transition:scale 160ms var(--ease-out);
  box-shadow:0 30px 60px -20px rgba(40,30,90,.45)}
/* Farbiger Rahmen als eigene Ebene hinter dem Bild */
.chen-aura{position:absolute;inset:-3px;border-radius:25px;background:linear-gradient(135deg,#2997ff,#7c5cff 55%,#ff6fb0);transform:translateZ(-1px)}
.chen-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:22px;image-rendering:pixelated;pointer-events:none}
/* Lichtreflex folgt dem Zeiger */
.chen-glanz{position:absolute;inset:0;border-radius:22px;pointer-events:none;opacity:0;transition:opacity 300ms var(--ease-out);
  background:radial-gradient(circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.38),transparent 55%);mix-blend-mode:soft-light}
.chen-figur.aktiv .chen-glanz{opacity:1}
/* Namensschild schwebt vor der Karte */
.chen-schild{position:absolute;left:12px;right:12px;bottom:12px;display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:9px 12px;border-radius:14px;text-align:left;
  background:rgba(255,255,255,.72);backdrop-filter:blur(12px) saturate(1.4);-webkit-backdrop-filter:blur(12px) saturate(1.4);color:#14142a;
  box-shadow:0 10px 24px -8px rgba(20,20,60,.35);transform:translateZ(46px)}
.chen-schild b{font-size:.95rem;letter-spacing:-.01em}
.chen-schild small{font-size:.74rem;opacity:.65}
.chen-punkt{position:absolute;top:14px;right:14px;width:12px;height:12px;border-radius:50%;background:#34c759;box-shadow:0 0 0 3px rgba(255,255,255,.85);transform:translateZ(30px)}
.chen-blase{position:relative;align-self:center;max-width:300px;padding:14px 16px;border-radius:16px 16px 16px 4px;background:var(--bg-elevated,#fff);color:var(--text,#111);
  box-shadow:0 10px 30px rgba(0,0,0,.12);border:1px solid rgba(127,127,160,.2);opacity:0;transform:translateY(6px) scale(.97);transform-origin:left bottom;
  transition:opacity 260ms var(--ease-out),transform 260ms var(--ease-out)}
.chen-blase.da{opacity:1;transform:none}
.chen-blase strong{display:block;font-size:1.02rem;margin-bottom:2px}
.chen-blase span{display:block;opacity:.85;font-size:.95rem;line-height:1.45}
.chen-blase small{display:block;margin-top:8px;opacity:.5;font-size:.75rem}
@media (max-width:560px){.chen{flex-direction:column;align-items:center;text-align:center}.chen-blase{border-radius:16px}}
@media (prefers-reduced-motion:reduce){.chen-figur,.chen-blase{transition:opacity 200ms linear;transform:none!important}.chen-karte{transform:none!important}}
/* Abschnitt auf der Startseite */
.chen-sektion{display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;padding:28px;border-radius:24px;border:1px solid rgba(127,127,160,.2);
  background:radial-gradient(600px circle at 15% 80%,rgba(41,151,255,.12),transparent 60%)}
.chen-sektion h2{margin:0 0 8px}
.chen-sektion p{margin:0 0 14px;opacity:.85}
@media (max-width:760px){.chen-sektion{grid-template-columns:1fr;text-align:center}}
/* Begrüßung beim ersten Besuch (gruss.js) */
.gruss{position:fixed;left:20px;bottom:20px;z-index:60;display:flex;align-items:flex-end;gap:10px;max-width:min(360px,calc(100vw - 32px));
  opacity:0;transform:translateY(12px) scale(.97);transform-origin:left bottom;transition:opacity 260ms cubic-bezier(.23,1,.32,1),transform 260ms cubic-bezier(.23,1,.32,1)}
.gruss.da{opacity:1;transform:none}
.gruss-bild{flex:none;width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 30%;image-rendering:pixelated;
  box-shadow:0 0 0 3px #fff,0 0 0 5px #7c5cff,0 10px 24px rgba(20,20,60,.3);transform-origin:50% 90%}
.gruss.da .gruss-bild{animation:grussNick 1.1s cubic-bezier(.23,1,.32,1) 300ms}
@keyframes grussNick{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}55%{transform:rotate(6deg)}80%{transform:rotate(-3deg)}}
.gruss-inhalt{position:relative;padding:14px 16px 14px;border-radius:18px 18px 18px 6px;background:var(--bg-elevated,#fff);color:var(--text,#111);
  border:1px solid rgba(127,127,160,.22);box-shadow:0 16px 40px rgba(0,0,0,.18)}
.gruss-inhalt strong{display:block;font-size:1rem;margin:0 22px 2px 0}
.gruss-inhalt p{margin:0 0 10px;font-size:.9rem;line-height:1.45;opacity:.85}
.gruss-x{position:absolute;top:8px;right:8px;border:0;background:none;color:inherit;opacity:.5;font-size:18px;line-height:1;cursor:pointer;padding:2px 6px;border-radius:6px}
.gruss-wege{display:flex;flex-wrap:wrap;gap:6px}
.gruss-weg{font:inherit;font-size:.82rem;padding:7px 11px;border-radius:99px;border:1px solid rgba(127,127,160,.3);background:none;color:inherit;text-decoration:none;cursor:pointer;transition:transform 140ms cubic-bezier(.23,1,.32,1)}
.gruss-weg.haupt{background:linear-gradient(135deg,#2997ff,#7c5cff);color:#fff;border-color:transparent}
.gruss-weg.leise{opacity:.7}
.gruss-weg:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.gruss-weg:not(.haupt):hover{border-color:#7c5cff}.gruss-x:hover{opacity:.9}}
@media (prefers-reduced-motion:reduce){.gruss{transition:opacity 150ms linear;transform:none}.gruss.da .gruss-bild{animation:none}}
@media print{.gruss{display:none}}
/* Kleiner: auf der Startseite nur ein Porträt-Kärtchen, auf der Entstehungsseite zurückhaltender */
.chen-sektion .chen-figur{width:120px}
.chen-sektion .chen-schild,.chen-sektion .chen-punkt{display:none}
.chen-sektion .chen-karte,.chen-sektion .chen-bild{border-radius:16px}
.chen-sektion .chen-aura{border-radius:19px}