/* Probetraining-Funnel: dunkle Karte, eine Frage pro Bildschirm, große Antwortflächen (mobil zuerst). */
.pt {
	--g: #FFF730; --sw: #101010; --grau: #9b9b96; --linie: rgba(255, 255, 255, .16);
	--display: "Big Shoulders Display", sans-serif; --text: "Noto Sans", sans-serif; --aus: cubic-bezier(.16, 1, .3, 1);
	position: relative; width: 100%; max-width: 640px; margin: 0 auto; color: #fff; font-family: var(--text);
}
.pt * { box-sizing: border-box; }
.pt__kopf { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px; margin-bottom: 30px; }
.pt__fortschritt { grid-column: 2; height: 4px; background: var(--linie); overflow: hidden; }
.pt__fortschritt span { display: block; height: 100%; background: var(--g); transform-origin: left; transform: scaleX(0); transition: transform .7s var(--aus); }
.pt__schritt { grid-column: 3; font: 800 12px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--grau); white-space: nowrap; }
.pt button.pt__zurueck { grid-column: 1; width: 44px; height: 44px; padding: 0; border: 1px solid var(--linie) !important; border-radius: 0 !important; background: transparent !important; color: #fff !important; font: 400 20px/1 var(--text); cursor: pointer; }
.pt button.pt__zurueck:hover { border-color: var(--g) !important; color: var(--g) !important; }
.pt button.pt__zurueck[hidden] { display: block; visibility: hidden; }

.pt__buehne.ist-rein { animation: pt-rein .55s var(--aus) both; }
.pt__buehne.ist-rein-zurueck { animation: pt-rein-zurueck .55s var(--aus) both; }
@keyframes pt-rein { from { opacity: 0; transform: translateX(40px); } }
@keyframes pt-rein-zurueck { from { opacity: 0; transform: translateX(-40px); } }

.pt__frage { margin: 0 0 10px; font: 900 clamp(34px, 6vw, 52px)/1 var(--display); text-transform: uppercase; color: #fff; }
.pt__hilfe { margin: 0 0 26px; font: 400 16px/1.55 var(--text); color: #c9c9c4; }
.pt__treffer { display: inline-flex; gap: 8px; margin: 0 0 18px; padding: 8px 12px; background: var(--g); color: var(--sw); font: 700 14px/1.2 var(--text); }
.pt__treffer b { font: 900 16px/1.1 var(--display); letter-spacing: .06em; text-transform: uppercase; }

.pt__optionen { display: grid; gap: 10px; margin-top: 22px; }
.pt button.pt__option { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; gap: 4px 16px; width: 100%; padding: 20px 22px !important; border: 1px solid var(--linie) !important; border-radius: 0 !important; background: rgba(255, 255, 255, .03) !important; color: #fff !important; text-align: left; cursor: pointer; transition: background .3s, color .3s, border-color .3s, transform .3s var(--aus); }
.pt__option b { grid-column: 1; font: 900 26px/1 var(--display); text-transform: uppercase; }
.pt__option span { grid-column: 1; font: 400 14px/1.4 var(--text); color: var(--grau); transition: color .3s; }
.pt__option svg { grid-column: 2; grid-row: 1 / span 2; width: 22px; height: 22px; transition: transform .4s var(--aus); }
.pt button.pt__option:hover, .pt button.pt__option:focus-visible { background: var(--g) !important; border-color: var(--g) !important; color: var(--sw) !important; }
.pt button.pt__option:hover span, .pt button.pt__option:focus-visible span { color: #3a3a36; }
.pt button.pt__option:hover svg { transform: translateX(5px); }
.pt__option--termin b { font-size: 22px; }

.pt__jahre { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.pt button.pt__jahr { padding: 16px 0 !important; border: 1px solid var(--linie) !important; border-radius: 0 !important; background: rgba(255, 255, 255, .03) !important; color: #fff !important; font: 900 24px/1 var(--display); cursor: pointer; transition: background .25s, color .25s; }
.pt button.pt__jahr:hover, .pt button.pt__jahr:focus-visible { background: var(--g) !important; border-color: var(--g) !important; color: var(--sw) !important; }

.pt button.pt__link { display: inline-block; margin-top: 18px; padding: 0 0 4px !important; border: 0 !important; border-bottom: 2px solid var(--g) !important; border-radius: 0 !important; background: none !important; color: #fff !important; font: 800 14px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.pt a.pt__link { display: inline-block; margin-top: 18px; padding-bottom: 4px; border-bottom: 2px solid var(--g); color: #fff; font: 800 14px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.pt button.pt__weiter, .pt a.pt__weiter, .pt button.pt__senden { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; margin-top: 24px; padding: 20px 26px !important; border: 0 !important; border-radius: 0 !important; background: var(--g) !important; color: var(--sw) !important; font: 800 17px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .3s; }
.pt button.pt__senden:hover, .pt a.pt__weiter:hover, .pt button.pt__weiter:hover { background: #fff !important; }
.pt__weiter svg, .pt__senden svg { width: 20px; height: 20px; }
.pt button.pt__senden.ist-laeuft { opacity: .6; cursor: wait; }

.pt__formular { display: grid; gap: 14px; margin-top: 20px; }
.pt__feld { display: grid; gap: 6px; }
.pt__feld span { font: 700 12px/1.3 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--grau); }
.pt__feld input, .pt__feld textarea { width: 100%; padding: 14px 16px; border: 1px solid var(--linie); border-radius: 0; background: rgba(255, 255, 255, .05); color: #fff; font: 400 17px/1.4 var(--text); outline: none; transition: border-color .25s, background .25s; }
.pt__feld input:focus, .pt__feld textarea:focus { border-color: var(--g); background: rgba(255, 255, 255, .08); }
.pt__versteckt { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pt__check { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; margin-top: 4px; font: 400 14px/1.5 var(--text); color: #c9c9c4; cursor: pointer; }
.pt__check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--g); }
.pt__check a { color: var(--g); }
.pt__fehler { margin: 0; padding: 12px 14px; background: #ff7b5c; color: var(--sw); font: 600 14px/1.4 var(--text); }
.pt__fehler[hidden] { display: none; }

.pt__fertig { text-align: left; }
.pt__haken { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 0 22px; background: var(--g); color: var(--sw); font: 900 40px/1 var(--text); animation: pt-haken .7s var(--aus) both; }
@keyframes pt-haken { from { transform: scale(.4) rotate(-20deg); opacity: 0; } }
.pt__zusammen { display: grid; gap: 6px; margin: 24px 0 0; padding: 20px 22px; border-left: 4px solid var(--g); background: rgba(255, 255, 255, .05); }
.pt__zusammen span { font: 400 14px/1.4 var(--text); color: var(--grau); }
.pt__zusammen b { font: 900 26px/1 var(--display); text-transform: uppercase; }

/* Vollbild-Ebene über dem Header (öffnet als Kreis aus der rechten oberen Ecke, wie das Menü) */
.pt-ebene { position: fixed; inset: 0; z-index: 100000; overflow-y: auto; overscroll-behavior: contain; background: #0c0c0c; clip-path: circle(0 at calc(100% - 180px) 40px); transition: clip-path .7s cubic-bezier(.16, 1, .3, 1); }
.pt-ebene.ist-offen { clip-path: circle(150% at calc(100% - 180px) 40px); }
.pt-ebene::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: url(../../../uploads/brand/hintergrund/flutlicht-reihe.webp) right -6vw top -4vw / min(1000px, 90vw) auto no-repeat; mix-blend-mode: screen; opacity: .14; }
.pt-ebene__innen { position: relative; min-height: 100%; padding: clamp(80px, 12vh, 130px) 20px 60px; }
.pt-ebene__kicker { display: flex; align-items: center; gap: 14px; max-width: 640px; margin: 0 auto 26px; font: 800 13px/1 "Big Shoulders Display", sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #FFF730; }
.pt-ebene__kicker::before { content: ""; width: 40px; height: 2px; background: currentColor; }
.pt-ebene button.pt-ebene__zu { position: fixed; top: clamp(16px, 3vw, 28px); right: clamp(16px, 3vw, 28px); z-index: 2; display: grid; place-items: center; width: 54px; height: 54px; padding: 0; border: 0 !important; border-radius: 0 !important; background: #FFF730 !important; cursor: pointer; transition: background .3s, transform .3s; }
.pt-ebene button.pt-ebene__zu:hover { background: #fff !important; transform: rotate(90deg); }
.pt-ebene__zu span { grid-area: 1 / 1; width: 22px; height: 2.5px; background: #101010; transform: rotate(45deg); }
.pt-ebene__zu span + span { transform: rotate(-45deg); }
html.pt-offen { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
	.pt-ebene { transition: none; }
	.pt__buehne.ist-rein, .pt__buehne.ist-rein-zurueck { animation: none; }
}
/* Kit-Knopfstile (Versalien, Abstände) in den Antworten zurücknehmen */
.pt button.pt__option span, .pt button.pt__option b { letter-spacing: normal; }
.pt button.pt__option span { text-transform: none; font-weight: 400; }
.pt__kopf { grid-template-columns: 44px 1fr; }
.pt__schritt { grid-column: 1 / -1; justify-self: end; margin-top: -6px; }