/* ── Pro-Fenster, Runde 9 (06.11.2026, Wunsch Lino): clean im Stellio-Stil ──────────────────────
   Kein Blau. Weiss, Beige, Braun, matte Farben, saubere Ränder. Der Rand rundherum wird langsam
   bräunlich dunkel (von aussen zur Mitte), dann poppt das Fenster ruhig auf.
   Nur ein kurzer Satz oben und die drei Bereiche mit ruhigen Animationen. Kein Preis, keine Figur. */
@property --ptr { syntax: '<percentage>'; inherits: false; initial-value: 140%; }
.pt-overlay { background: transparent !important; }
.pt-overlay::before { content: ""; position: fixed; inset: 0; pointer-events: none; --ptr: 140%;
  background: radial-gradient(circle at 50% 50%, rgba(38, 28, 20, .26) var(--ptr), rgba(38, 28, 20, .70) calc(var(--ptr) + 50%));
  opacity: 0; transition: opacity .35s ease, --ptr .9s cubic-bezier(.2, .8, .2, 1); }
.pt-overlay.is-open::before { opacity: 1; --ptr: 0%; }
.pt-overlay.is-open { backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); }

.pt-card.pt3 { width: min(900px, 100%); padding: 26px 26px 20px; border-radius: 24px; overflow: hidden;
  background: #FFFCF7; color: #302823; border: 1px solid #E7DDCF;
  box-shadow: 0 30px 80px rgba(38, 28, 20, .32), 0 2px 6px rgba(38, 28, 20, .08);
  transform: translateY(10px) scale(.97); opacity: 0; transition: transform .45s cubic-bezier(.2, .9, .25, 1) .25s, opacity .3s ease .25s; }
.pt-overlay.is-open .pt-card.pt3 { transform: none; opacity: 1; }
.pt-card.pt3::before, .pt3 .pt2-glow { display: none; }
.pt3 .pt-x { top: 14px; right: 14px; width: 26px; height: 26px; border-radius: 50%; color: #8A7765; opacity: .8; z-index: 2; }
.pt3 .pt-x:hover { background: #F3EDE5; color: #302823; opacity: 1; }
.pt3 .pt-head { position: relative; padding: 0 36px 0 2px; }
.pt3 .pt-kicker { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #F3EDE5; color: #705E4E; box-shadow: none; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.pt3 .pt-head h2 { margin: 10px 0 2px; font-size: 24px; line-height: 1.2; color: #302823; }
.pt3 .pt-sub { margin: 4px 0 0; font-size: 14px; color: #756B63; max-width: 600px; }

.pt3 .pt2-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0 16px; }
.pt3 .pt2-cat { padding: 12px 12px 14px; border-radius: 18px; background: #fff; border: 1px solid #ECE4D8; opacity: 0; transform: translateY(8px); animation: pt3In .5s ease forwards; animation-delay: calc(.55s + var(--i) * .12s); }
@keyframes pt3In { to { opacity: 1; transform: none; } }
.pt3 .pt2-cat > b { display: block; margin: 12px 2px 3px; font-size: 15.5px; color: #302823; }
.pt3 .pt2-cat > p { margin: 0 2px; font-size: 13.5px; line-height: 1.45; color: #756B63; }
.pt3 .pt2-art { position: relative; height: 118px; border-radius: 13px; background: #F6F1EA; display: grid; place-items: center; overflow: hidden; }

/* Animation 1: ein Blatt schreibt sich, eine Stelle wird markiert und verbessert (ruhig, 8 s) */
.pt3 .pt2-pdf { position: relative; width: 80px; height: 100px; padding: 12px 10px; box-sizing: border-box; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px #E7DDCF, 0 8px 18px rgba(48, 40, 35, .12); display: flex; flex-direction: column; gap: 7px; transform: rotate(-3deg); }
.pt3 .pt2-pdf-tag { position: absolute; right: -9px; top: 8px; padding: 2px 6px; border-radius: 5px; background: #8A7765; color: #fff; font: 800 9px/1.2 Inter, sans-serif; letter-spacing: .04em; }
.pt3 .pt2-pdf-head { display: flex; gap: 5px; align-items: center; margin-bottom: 2px; }
.pt3 .pt2-pdf-head i { width: 14px; height: 14px; border-radius: 50%; background: #E6DACB; }
.pt3 .pt2-pdf-head em { height: 6px; flex: 1; border-radius: 3px; background: #B9A58F; }
.pt3 .pt2-ln { display: block; height: 4px; border-radius: 3px; background: #E2D8CB; width: 0; animation: pt3Write 8s ease-in-out infinite; animation-delay: calc(var(--d) * .45s); }
.pt3 .pt2-ln.is-short { --w: 55%; }
.pt3 .pt2-ln.is-mark { animation-name: pt3WriteMark; }
@keyframes pt3Write { 0% { width: 0; } 14%, 86% { width: var(--w, 100%); } 100% { width: 0; } }
@keyframes pt3WriteMark { 0% { width: 0; background: #E2D8CB; } 14% { width: 100%; background: #E2D8CB; } 32%, 48% { background: #E9D3A6; } 62%, 86% { width: 100%; background: #9DB89F; } 100% { width: 0; } }
.pt3 .pt2-pen { position: absolute; width: 5px; height: 20px; border-radius: 3px; background: linear-gradient(#B9A58F 70%, #5C4D41 70%); transform: rotate(28deg); left: 10px; top: 30px; animation: pt3Pen 8s ease-in-out infinite; }
@keyframes pt3Pen { 0% { left: 10px; top: 30px; } 10% { left: 66px; top: 30px; } 14% { left: 10px; top: 41px; } 24% { left: 66px; top: 41px; } 28% { left: 10px; top: 52px; } 38% { left: 66px; top: 52px; } 42% { left: 10px; top: 63px; } 52% { left: 66px; top: 63px; } 56% { left: 10px; top: 74px; } 64%, 100% { left: 46px; top: 74px; } }

/* Animation 2: Lernpfad füllt sich, Fortschritt im Ring */
.pt3 .pt2-path { position: relative; width: 170px; height: 92px; }
.pt3 .pt2-path::before { content: ""; position: absolute; left: 14px; right: 66px; top: 50%; height: 3px; margin-top: -1.5px; background: repeating-linear-gradient(90deg, #D9CDBE 0 6px, transparent 6px 11px); }
.pt3 .pt2-node { position: absolute; top: 50%; left: calc(6px + var(--d) * 26px); width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #D9CDBE; animation: pt3Node 8s ease-in-out infinite; animation-delay: calc(var(--d) * .7s); }
.pt3 .pt2-node.is-now { animation-name: pt3NodeNow; }
@keyframes pt3Node { 0%, 12% { background: #fff; box-shadow: inset 0 0 0 2px #D9CDBE; } 24%, 84% { background: #9DB89F; box-shadow: 0 0 0 4px rgba(157, 184, 159, .22); } 100% { background: #fff; } }
@keyframes pt3NodeNow { 0%, 12% { background: #fff; transform: none; } 24%, 84% { background: #8A7765; transform: scale(1.2); box-shadow: 0 0 0 5px rgba(138, 119, 101, .18); } 100% { background: #fff; transform: none; } }
.pt3 .pt2-ring { position: absolute; right: 0; top: 50%; width: 56px; height: 56px; margin-top: -28px; display: grid; place-items: center; }
.pt3 .pt2-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.pt3 .pt2-ring circle { fill: none; stroke: #E6DACB; stroke-width: 4; }
.pt3 .pt2-ring .pt2-ring-v { stroke: #8A7765; stroke-linecap: round; stroke-dasharray: 94.3; stroke-dashoffset: 94.3; animation: pt3Ring 8s ease-in-out infinite; }
.pt3 .pt2-ring b { position: relative; font: 800 12.5px/1 Inter, sans-serif; color: #302823; }
@keyframes pt3Ring { 0%, 12% { stroke-dashoffset: 94.3; } 62%, 86% { stroke-dashoffset: 26; } 100% { stroke-dashoffset: 94.3; } }

/* Animation 3: Gespräch, dann Häkchen «gesendet» */
.pt3 .pt2-chat { position: relative; width: 158px; height: 96px; }
.pt3 .pt2-bub { position: absolute; display: flex; flex-direction: column; gap: 5px; justify-content: center; padding: 9px 12px; box-sizing: border-box; border-radius: 16px; opacity: 0; animation: pt3Bub 8s ease-in-out infinite; }
.pt3 .pt2-bub i { display: block; height: 5px; border-radius: 3px; }
.pt3 .pt2-bub.is-a { left: 0; top: 6px; width: 96px; height: 40px; background: #fff; box-shadow: 0 0 0 1px #E7DDCF; border-bottom-left-radius: 5px; --r: -4deg; }
.pt3 .pt2-bub.is-a i { background: #E2D8CB; } .pt3 .pt2-bub.is-a i:first-child { width: 85%; } .pt3 .pt2-bub.is-a i:last-child { width: 55%; }
.pt3 .pt2-bub.is-b { right: 6px; bottom: 6px; width: 92px; height: 40px; background: #EDE2D5; box-shadow: 0 0 0 1px #E2D6C7; border-bottom-right-radius: 5px; --r: 4deg; animation-delay: 1.2s; }
.pt3 .pt2-bub.is-b i { background: #C9B49A; } .pt3 .pt2-bub.is-b i:first-child { width: 80%; } .pt3 .pt2-bub.is-b i:last-child { width: 50%; }
@keyframes pt3Bub { 0%, 8% { opacity: 0; transform: rotate(var(--r)) translateY(6px); } 18%, 86% { opacity: 1; transform: rotate(var(--r)); } 100% { opacity: 0; transform: rotate(var(--r)); } }
.pt3 .pt2-sent { position: absolute; right: -2px; top: 38px; width: 22px; height: 22px; border-radius: 50%; background: #6E9E78; display: grid; place-items: center; box-shadow: 0 0 0 3px #F6F1EA; transform: scale(0); animation: pt3Pop 8s ease-in-out infinite; }
.pt3 .pt2-sent svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
@keyframes pt3Pop { 0%, 40% { transform: scale(0); } 48% { transform: scale(1.08); } 54%, 86% { transform: scale(1); } 100% { transform: scale(0); } }

/* Unten nur ein ruhiger Knopf zu den Plänen */
.pt3-foot { display: flex; justify-content: flex-end; }
.pt3-cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1px solid #8A7765; background: #8A7765; color: #fff; font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; transition: background .15s, transform .15s; }
.pt3-cta:hover { background: #705E4E; }
.pt3-cta svg { transition: transform .15s; }
.pt3-cta:hover svg { transform: translateX(3px); }
.pt3-cta:focus-visible { outline: 3px solid rgba(138, 119, 101, .35); outline-offset: 3px; }
.pt3 .pt-free, .pt3 .pt2-foot, .pt3 .pt2-peekwrap { display: none !important; }

@media (max-width: 820px) {
  .pt-card.pt3 { padding: 22px 14px 14px; border-radius: 20px; }
  .pt3 .pt-head h2 { font-size: 21px; }
  .pt3 .pt2-cats { grid-template-columns: 1fr; gap: 8px; margin: 14px 0 12px; }
  .pt3 .pt2-cat { display: grid; grid-template-columns: 104px 1fr; gap: 0 12px; align-items: center; padding: 8px; }
  .pt3 .pt2-art { grid-row: span 2; height: 86px; }
  .pt3 .pt2-art > * { transform: scale(.66); }
  .pt3 .pt2-cat > b { margin: 2px 0 2px; font-size: 14.5px; }
  .pt3 .pt2-cat > p { font-size: 12.5px; }
  .pt3-foot { justify-content: stretch; }
  .pt3-cta { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .pt3 .pt2-ln, .pt3 .pt2-pen, .pt3 .pt2-node, .pt3 .pt2-ring-v, .pt3 .pt2-bub, .pt3 .pt2-sent, .pt3 .pt2-cat { animation: none !important; }
  .pt3 .pt2-ln { width: var(--w, 100%); } .pt3 .pt2-bub, .pt3 .pt2-cat { opacity: 1; transform: none; } .pt3 .pt2-sent { transform: none; }
  .pt-card.pt3 { transition: opacity .2s; transform: none; }
}