/* The price pages on a phone (price-mobile.js): a switch on top, the chosen plans as rows, one open. Phones only;
   wider screens keep the cards side by side and never see the switch or the rows. */
.pm-seg,.pm-head{display:none}
@media (max-width:640px){
  /* the switch, a sliding green under the chosen one */
  .pm-seg{position:relative;display:flex;gap:2px;margin:0 0 16px;padding:4px;border-radius:14px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
  .pm-seg button{position:relative;z-index:1;flex:1;min-width:0;height:42px;padding:0 10px;border:0;border-radius:10px;background:none;color:var(--mute);font:600 15px/1 var(--f);cursor:pointer;transition:color 212ms;white-space:nowrap}
  .pm-seg button.is-on{color:#0b1a10}
  .pm-seg-ind{position:absolute;left:0;top:4px;bottom:4px;border-radius:10px;background:var(--acc);transition:transform 520ms var(--sp,cubic-bezier(.2,.8,.2,1)),width 520ms var(--sp,cubic-bezier(.2,.8,.2,1))}
  .pm-hide:not(#q){display:none !important}

  /* the rows */
  .pm-acc:not(#q){gap:10px !important}
  .pm-acc .pm-head{display:grid;grid-template-columns:minmax(0,1fr) auto 18px;align-items:center;gap:12px;width:100%;min-height:64px;margin:0;padding:0;color:var(--ink);text-align:left;cursor:pointer;font-family:var(--f)}
  .pm-head .pm-nn{display:grid;gap:3px;min-width:0}
  .pm-head .pm-n{font-size:17px;font-weight:700;letter-spacing:-.01em}
  .pm-head small{font-size:13.5px;color:var(--mute);line-height:1.3}
  .pm-head .pm-p{font-size:14.5px;font-weight:600;color:var(--acc-hi);white-space:nowrap}
  .pm-head i{width:18px;height:18px;background:var(--mute);transition:transform 420ms var(--sp,ease);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
  .pm-acc>*:not(.pm-closed) .pm-head i{transform:rotate(180deg)}
  .pm-acc .pm-closed:not(#q){padding-top:4px !important;padding-bottom:4px !important;min-height:0 !important}
  .pm-acc .pm-closed>*:not(.pm-head):not(#q){display:none !important}
  .pm-acc>*:not(.pm-closed):not(#q)>.pm-head{margin-bottom:6px;padding-bottom:12px;box-shadow:0 1px 0 rgba(255,255,255,.08)}
  .pm-acc>*:not(.pm-closed):not(#q){box-shadow:inset 0 0 0 1.5px rgba(143,227,157,.45),0 30px 60px -36px rgba(0,0,0,.9) !important}
  /* a choice with one plan (Kostenlos, Individuell): just its card; an open card doesn't repeat the name its row shows */
  .pm-acc>.pm-single>.pm-head:not(#q){display:none !important}
  .pm-acc>*:not(.pm-single):not(.pm-closed)>:is(h2,.tkbm-plan-label,.tkbm-plan-devices,.tkbm-plan-flag):not(#q){display:none !important}
}
@media (prefers-reduced-motion:reduce){.pm-seg-ind,.pm-head i{transition:none}}