/* Plate Parken: Seite /parken und Abschnitte auf der Startseite. Karten, Überschriften, Abstände
   und Raster kommen aus den Klassen des Bündels. Hier steht nur, was es dort nicht gibt. */

/* iPhone-Rahmen 1:1 wie im Bündel (Baustein „T“, dunkel, Größe md), Bildschirm 1206 × 2622.
   Das Bündel gibt den Baustein nicht nach außen. */
.pk-phone{position:relative;display:block;width:100%;max-width:280px;margin-inline:auto}
.pk-rail{position:relative;z-index:1;display:block;border-radius:2.9rem;padding:3px;background-image:linear-gradient(135deg,#48484d 0%,#1d1d20 28%,#0b0b0d 54%,#2b2b30 78%,#4a4a50 100%);box-shadow:0 28px 60px -24px rgba(10,10,30,.32),0 8px 20px -10px rgba(10,10,30,.18)}
.pk-bezel{display:block;border-radius:2.75rem;background:#000;padding:5px}
.pk-screen{position:relative;display:block;overflow:hidden;border-radius:2.45rem;background:#000}
.pk-screen img{display:block;width:100%;height:auto}
.pk-btn{position:absolute;z-index:0;width:3px;background:#26262a}
.pk-btn1,.pk-btn2,.pk-btn3{left:-2px;border-radius:2px 0 0 2px}
.pk-btn4{right:-2px;border-radius:0 2px 2px 0;top:33%;height:66px}
.pk-btn1{top:19%;height:34px}.pk-btn2{top:29%;height:52px}.pk-btn3{top:40%;height:52px}
.shadow-phone{box-shadow:0 28px 60px -24px rgba(10,10,30,.32),0 8px 20px -10px rgba(10,10,30,.18)!important}
.pk-stage .pk-phone{max-width:260px}
@media (min-width:640px){.pk-stage .pk-phone{max-width:290px}}

/* Kopf der Seite /parken */
.pk-crumb{margin-bottom:1.25rem}
.pk-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:2.25rem;max-width:36rem}
.pk-facts strong{display:block;font-size:clamp(1.4rem,3vw,1.9rem);font-weight:800;letter-spacing:-.03em}
.pk-facts span{display:block;margin-top:.15rem;font-size:13px;line-height:1.35;color:#5b5b66}

/* Listen */
.pk-list{margin-top:1.1rem;display:grid;gap:.55rem}
.pk-list li{position:relative;padding-left:1.5rem;color:#5b5b66;font-size:16px;line-height:1.45}
.pk-list li:before{content:"";position:absolute;left:.15rem;top:.55rem;width:.5rem;height:.5rem;border-radius:999px;background:#3f56ff}

/* Tabellen */
.pk-table-wrap{overflow-x:auto;margin-top:1rem}
.pk-table{width:100%;border-collapse:collapse;font-size:15px;min-width:30rem}
.pk-table caption{text-align:left;padding:.9rem 1.1rem .1rem;font-weight:600;font-size:14px;color:#5b5b66}
.pk-table th,.pk-table td{padding:.75rem 1.1rem;text-align:right;border-top:1px solid rgba(10,10,15,.06);white-space:nowrap;font-weight:400;color:#5b5b66}
.pk-table thead th{border-top:0;font-size:13px;font-weight:600}
.pk-table th:first-child{text-align:left;color:#0a0a0f}
.pk-table .pk-net{color:#0a0a0f;font-weight:700}
@media (max-width:639px){.pk-table{min-width:0;font-size:13px}.pk-table th,.pk-table td{padding:.6rem .45rem}.pk-table thead th{white-space:normal;font-size:11.5px;vertical-align:bottom}.pk-table th:first-child{padding-left:.8rem}.pk-table td:last-child{padding-right:.8rem}.pk-rules th,.pk-rules td{padding:.7rem .8rem}.pk-facts{gap:.6rem}}

/* Rechenbeispiele mit Umschalter. Die Umschalter gelten auch in „So funktioniert es“. */
.pk-calc-grid{display:grid;gap:2.5rem;align-items:start;margin-top:2rem}
.pk-calc-grid>*{min-width:0}
.pk-tabs{display:none;gap:.25rem;padding:.25rem;border-radius:999px;background:rgba(10,10,15,.05);width:max-content;max-width:100%}
.pk-js .pk-tabs{display:inline-flex}
.pk-tabs button{border-radius:999px;padding:.55rem 1.1rem;font-size:14.5px;font-weight:600;color:#5b5b66;background:transparent;transition:background .2s,color .2s}
.pk-tabs button[aria-selected="true"],.pk-tabs button[aria-pressed="true"]{background:#fff;color:#0a0a0f;box-shadow:0 2px 10px -4px rgba(10,10,15,.3)}
.pk-tabs button:focus-visible{outline:2px solid #3f56ff;outline-offset:2px}
@media (min-width:1024px){.pk-calc-grid{grid-template-columns:1.35fr .65fr}}

/* Preiskarte im Abschnitt E-Ladesäule */
.pk-pricecard{width:100%;max-width:420px;margin-inline:auto;padding:1.75rem}
.pk-pc-top{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}
.pk-pc-top strong{display:block;font-size:20px;font-weight:700;letter-spacing:-.02em}
.pk-pc-top span{display:block;font-size:13.5px;color:#5b5b66;margin-top:.1rem}
.pk-pc-price{text-align:right}
.pk-pc-price b{display:block;font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1}
.pk-pc-kwh{display:flex;align-items:center;gap:.4rem;margin-top:1rem;padding:.55rem .75rem;border-radius:.8rem;background:rgba(63,86,255,.08);color:#2438f5;font-size:14px;font-weight:600;line-height:1.6}
.pk-pc-kwh svg{width:1rem;height:1rem;flex:none}
.pk-pricecard dl{margin-top:1rem}
.pk-pricecard dl>div{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-top:1px solid rgba(10,10,15,.06);font-size:14.5px}
.pk-pricecard dt{color:#5b5b66}
.pk-pricecard dd{font-weight:600;color:#0a0a0f;text-align:right}

/* Bilderfolge wie bei Apple: Das iPhone wechselt, der Text bleibt an seiner Stelle und blendet sich um. */
.pk-gal-grid{display:grid;gap:2rem;align-items:center}
.pk-gal-grid>*{min-width:0}
.pk-gal-texte{display:grid}
.pk-gal-an .pk-slide-text{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
.pk-gal-an .pk-slide-text.is-aktiv{opacity:1;visibility:visible;transition:opacity .45s ease,visibility 0s}
.pk-gal-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:1rem 0 4.5rem;margin-bottom:-3rem;outline-offset:4px}
.pk-gal-track::-webkit-scrollbar{display:none}
.pk-slide{flex:0 0 100%;scroll-snap-align:start}
.pk-slide-no{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#2438f5}
.pk-slide-text h3{margin-top:.6rem;font-size:clamp(1.6rem,3.2vw,2.4rem);line-height:1.08;font-weight:800;letter-spacing:-.03em;color:#0a0a0f}
.pk-gal-nav{display:none;align-items:center;justify-content:center;gap:1rem;margin-top:1.75rem}
.pk-gal-an .pk-gal-nav{display:flex}
.pk-gal-btn{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:999px;background:rgba(10,10,15,.06);color:#0a0a0f;transition:background .2s,opacity .2s}
.pk-gal-btn:hover{background:rgba(10,10,15,.12)}
.pk-gal-btn[aria-disabled="true"]{opacity:.35;cursor:default;background:rgba(10,10,15,.06)}
.pk-gal-btn svg{width:1.15rem;height:1.15rem}
.pk-gal-dots{display:flex;gap:.45rem}
.pk-gal-dots i{display:block;width:.5rem;height:.5rem;border-radius:999px;background:rgba(10,10,15,.2);transition:background .25s,width .25s}
.pk-gal-dots i.is-aktiv{width:1.5rem;background:#3f56ff}
@media (min-width:1024px){.pk-gal-grid{grid-template-columns:1fr 1fr;gap:3rem}.pk-gal-texte{padding-inline:2rem}}
@media (prefers-reduced-motion:reduce){.pk-gal-an .pk-slide-text,.pk-gal-an .pk-slide-text.is-aktiv{transition:none}}

/* Häufige Fragen: das Bündel baut die Liste mit Knöpfen, hier ist es <details>. */
.pk-faq summary{cursor:pointer;list-style:none}
.pk-faq summary::-webkit-details-marker{display:none}
.pk-faq[open] .pk-faq-plus{transform:rotate(45deg);background:#0a0a0f;color:#fff}

/* Startseite: „So funktioniert es“ mit Umschalter */
#pk-ablauf .pk-tabs{display:inline-flex;margin-top:1.75rem;flex-wrap:wrap;justify-content:center}
.pk-modus-park>.container-px>:first-child h2,.pk-modus-park>.container-px>:first-child p{display:none}
.pk-modus-park>.container-px>.grid{display:none}

/* Startseite: zwei Kernfunktionen */
.pk-kern-park{background:radial-gradient(90% 120% at 95% 0,#3f56ff 0,#2438f5 55%,#1a28d6 100%)}

/* Startseite: eigener Abschnitt zu Plate Parken */
.pk-haupt{padding:2.25rem 1.5rem}
.pk-arten{display:grid;gap:.6rem;margin:1.5rem 0 1.75rem}
.pk-arten li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .6rem;padding:.75rem 0;border-top:1px solid rgba(10,10,15,.08)}
.pk-arten strong{font-size:16px;font-weight:700;color:#0a0a0f}
.pk-arten span{font-size:14.5px;color:#5b5b66}
@media (min-width:1024px){.pk-haupt{padding:3.5rem}}

/* Überschriften stehen in einer Zeile, solange sie passen. Der Text darunter bleibt schmal.
   Gilt auf allen Seiten, auf denen das Bündel läuft. */
@media (min-width:768px){
  main section .max-w-2xl{max-width:none}
  main section .max-w-2xl>p{max-width:42rem}
  main section .mx-auto.max-w-2xl>p{margin-inline:auto}
  .pl8rm-head{max-width:none}
  .pl8rm-head p{max-width:42rem;margin-inline:auto}
}
main h2{text-wrap:balance}

/* Startseite: Rahmen um die drei Kacheln zum Parken */
.pk-vorteile-box{margin-top:4rem;padding:1.5rem;border-radius:2rem;border:1px solid rgba(63,86,255,.18);background:linear-gradient(100deg,rgba(63,86,255,.09),rgba(63,86,255,.03))}
.pk-vorteile-kopf{display:flex;align-items:center;gap:1rem}
@media (min-width:768px){.pk-vorteile-box{padding:2rem}}
/* E-Ladesäule: Karte links, Text rechts */
@media (min-width:1024px){.pk-tausch>:first-child{order:2}}

/* Abzeichen „Plate Parken“: gleiches Blau wie die Karte „Parkplatz mieten und vermieten“ */
.eyebrow.pk-badge{border-color:transparent;background:radial-gradient(90% 120% at 95% 0,#3f56ff 0,#2438f5 55%,#1a28d6 100%);color:#fff}
.pk-vorteile-kopf>span{flex:none}

/* Oberer Bereich: Safari zeichnet die große Weichzeichnung beim Überfahren der Knöpfe neu und zeigt
   dabei ein helles Rechteck mit Kante. Ein Farbverlauf sieht gleich aus und braucht keinen Filter. */
.mobile-glow-off.blur-\[120px\]{filter:none;background-color:transparent;width:1090px;height:1090px;top:calc(-10% - 225px);background-image:radial-gradient(closest-side,rgba(107,129,255,.2),rgba(107,129,255,.15) 25%,rgba(107,129,255,.08) 50%,rgba(107,129,255,.025) 75%,rgba(107,129,255,0))}

/* Schild aus dem Plate Shop: drehbares 3D-Objekt, DIN A4 quer. Der Körper ist ein Quader mit Vorder- und
   Rückseite und vier Randflächen, deshalb hat er auch von der Seite ein geschlossenes Profil. */
.pk-3d{position:relative;width:100%;max-width:560px;aspect-ratio:297/210;margin:2.5rem auto 4.5rem;perspective:1500px;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline-offset:12px;border-radius:1rem}
.pk-3d.is-zieht{cursor:grabbing}
.pk-3d:focus-visible{outline:2px solid #3f56ff}
.pk-3d-koerper{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(-5deg) rotateY(-20deg);will-change:transform}
.pk-3d-rand{position:absolute;background:linear-gradient(180deg,#c6cad2,#a4a9b3);outline:1px solid transparent}
.pk-3d-links,.pk-3d-rechts{top:6px;bottom:6px;width:7px}
.pk-3d-oben,.pk-3d-unten{left:6px;right:6px;height:7px}
.pk-3d-links{left:-3.5px;transform:rotateY(-90deg)}
.pk-3d-rechts{right:-3.5px;transform:rotateY(90deg)}
.pk-3d-oben{top:-3.5px;transform:rotateX(90deg)}
.pk-3d-unten{bottom:-3.5px;transform:rotateX(-90deg)}
.pk-3d-vorn,.pk-3d-rueck{position:absolute;inset:0;width:100%;height:100%;border-radius:6px;outline:1px solid transparent;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.pk-3d-vorn{transform:translateZ(3.5px);pointer-events:none;box-shadow:0 0 0 1px rgba(10,10,15,.06)}
.pk-3d-rueck{transform:rotateY(180deg) translateZ(3.5px);background:linear-gradient(135deg,#eef0f4,#d5d9e0)}
.pk-3d-boden{position:absolute;left:8%;right:8%;bottom:-11%;height:16%;background:radial-gradient(closest-side,rgba(10,10,30,.14),rgba(10,10,30,.05) 55%,rgba(10,10,30,0));pointer-events:none}
.pk-3d-tipp{text-align:center;font-size:13.5px;color:#5b5b66}
.pk-schild-preis{margin-top:1.5rem;color:#5b5b66;font-size:15px}
.pk-schild-preis strong{font-size:2rem;font-weight:800;letter-spacing:-.03em;color:#0a0a0f;margin-right:.25rem}

/* Plate Parken startet im Dezember 2026: Bestellknopf für das Schild noch aus. */
.pk-aus, .pk-aus:hover { opacity: 0.4; cursor: not-allowed; pointer-events: none; transform: none; box-shadow: none; }
.pk-bald { display: inline-flex; align-items: center; border-radius: 999px; padding: 6px 14px; font-size: 13.5px; font-weight: 600; color: rgb(36 56 245); background: rgb(238 242 255); }