/* V173: ausschliesslich fuer kleine Touch-Displays. Desktop und Tablet bleiben unberuehrt. */
@media (max-width: 700px) {
  html.pv-mobile-effects-enabled {
    --pv-mobile-glow: rgba(255, 67, 58, .34);
  }

  .pv-mobile-effects-enabled [data-mobile-effect] {
    transform: translateZ(0);
    transition: transform .52s cubic-bezier(.2,.8,.2,1),
                border-color .42s ease,
                background .42s ease,
                box-shadow .52s ease,
                filter .45s ease;
  }

  .pv-mobile-effects-enabled [data-mobile-effect].is-mobile-effect-active {
    border-color: rgba(255, 81, 71, .42);
    box-shadow: 0 20px 42px rgba(0,0,0,.24), 0 0 30px rgba(255,67,58,.10);
    transform: translateY(-3px) translateZ(0);
  }

  /* Animationsarbeit bleibt auf den sichtbaren Wirkungsbereich begrenzt. */
  .pv-mobile-effects-enabled [data-mobile-effect]:not(.is-mobile-effect-active),
  .pv-mobile-effects-enabled [data-mobile-effect]:not(.is-mobile-effect-active)::before,
  .pv-mobile-effects-enabled [data-mobile-effect]:not(.is-mobile-effect-active)::after,
  .pv-mobile-effects-enabled [data-mobile-effect]:not(.is-mobile-effect-active) *,
  .pv-mobile-effects-enabled [data-mobile-effect]:not(.is-mobile-effect-active) *::before,
  .pv-mobile-effects-enabled [data-mobile-effect]:not(.is-mobile-effect-active) *::after {
    animation-play-state: paused !important;
  }

  .pv-mobile-effects-enabled [data-mobile-effect].is-mobile-effect-active,
  .pv-mobile-effects-enabled [data-mobile-effect].is-mobile-effect-active::before,
  .pv-mobile-effects-enabled [data-mobile-effect].is-mobile-effect-active::after,
  .pv-mobile-effects-enabled [data-mobile-effect].is-mobile-effect-active *,
  .pv-mobile-effects-enabled [data-mobile-effect].is-mobile-effect-active *::before,
  .pv-mobile-effects-enabled [data-mobile-effect].is-mobile-effect-active *::after {
    animation-play-state: running !important;
  }

  .pv-mobile-effects-enabled [data-mobile-effect].is-mobile-tapped {
    animation: pvMobileTapTarget170 .58s cubic-bezier(.16,.84,.2,1);
  }

  .pv-mobile-menu-backdrop {
    position: fixed;
    z-index: 28;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: rgba(0,0,0,.14);
    transition: opacity .22s ease;
  }

  body.menu-open .pv-mobile-menu-backdrop {
    pointer-events: auto;
    opacity: 1;
  }

  /* Der filmische Hero-Wisch wird fuer das kleinere Display kompakter uebernommen. */
  .pv-mobile-effects-enabled .hero-concept-v1 .hero-media::after,
  html.pv-mobile-effects-enabled + body.hero-concept-v1 .hero-media::after {
    animation: pvMobileHeroSweep170 1.35s cubic-bezier(.62,0,.28,1) .08s forwards;
    transform: translateX(-108%);
  }

  /* Desktop-Hover der Bildwelten als scrollgesteuerte Handy-Reaktion. */
  .pv-mobile-effects-enabled .premium-gallery figure.is-mobile-effect-active img,
  .pv-mobile-effects-enabled .handover-film-image.is-mobile-effect-active img,
  .pv-mobile-effects-enabled .fleet-gallery figure.is-mobile-effect-active img,
  .pv-mobile-effects-enabled .origin-story.is-mobile-effect-active figure img,
  .pv-mobile-effects-enabled .service-media.is-mobile-effect-active img,
  .pv-mobile-effects-enabled .service-gallery figure.is-mobile-effect-active img,
  .pv-mobile-effects-enabled .service-switch-card.is-mobile-effect-active > img {
    filter: saturate(1.04) contrast(1.035) brightness(1.025);
    transform: scale(1.035);
  }

  .pv-mobile-effects-enabled .night-stage-v46.is-mobile-effect-active .night-stage-media img {
    filter: brightness(1.08) contrast(1.07) saturate(.92);
    transform: scale(1.025);
  }

  .pv-mobile-effects-enabled .service-detail-card.is-mobile-effect-active,
  .pv-mobile-effects-enabled .transport-grid article.is-mobile-effect-active,
  .pv-mobile-effects-enabled .pv-service-card.is-mobile-effect-active,
  .pv-mobile-effects-enabled .service-card.is-mobile-effect-active,
  .pv-mobile-effects-enabled .service-step.is-mobile-effect-active,
  .pv-mobile-effects-enabled .review-card.is-mobile-effect-active,
  .pv-mobile-effects-enabled .scope-category.is-mobile-effect-active,
  .pv-mobile-effects-enabled .about-editorial article.is-mobile-effect-active {
    background-image: radial-gradient(circle at 92% 8%,rgba(255,67,58,.105),transparent 38%);
  }

  .pv-mobile-effects-enabled .service-detail-card.is-mobile-effect-active li::before,
  .pv-mobile-effects-enabled .transport-grid article.is-mobile-effect-active li::before {
    box-shadow: 0 0 13px rgba(255,67,58,.76);
    transform: scale(1.24);
  }

  .pv-mobile-effects-enabled .service-detail-card.is-mobile-effect-active > a span,
  .pv-mobile-effects-enabled .premium-copy .text-link.is-mobile-effect-active span,
  .pv-mobile-effects-enabled .reviews-summary > a.is-mobile-effect-active span {
    text-shadow: 0 0 14px rgba(255,67,58,.78);
    transform: translateX(5px);
  }

  .pv-mobile-effects-enabled .transport-grid article.is-mobile-effect-active figure img,
  .pv-mobile-effects-enabled .kinetic-service-card.is-mobile-effect-active > img {
    filter: saturate(1.03) contrast(1.04) brightness(1.02);
    transform: scale(1.055);
  }

  .pv-mobile-effects-enabled .kinetic-service-card.is-mobile-effect-active b {
    opacity: 1;
    transform: none;
  }

  .pv-mobile-effects-enabled .process li.is-mobile-effect-active {
    border-color: rgba(255,67,58,.26);
    background: rgba(255,255,255,.82);
    box-shadow: 0 18px 38px rgba(28,29,27,.09), 0 0 24px rgba(255,67,58,.055);
  }

  .pv-mobile-effects-enabled .process li.is-mobile-effect-active > span {
    color: #fff;
    background: #ff433a;
    box-shadow: 0 0 0 6px #edede9, 0 0 20px rgba(255,67,58,.45);
    transform: scale(1.08);
  }

  .pv-mobile-effects-enabled .fleet-copy .spec-grid > div.is-mobile-effect-active,
  .pv-mobile-effects-enabled .story-timeline li.is-mobile-effect-active,
  .pv-mobile-effects-enabled .night-stage-rail > div.is-mobile-effect-active,
  .pv-mobile-effects-enabled .service-proof-grid > div.is-mobile-effect-active {
    border-color: rgba(255,67,58,.28);
    background: linear-gradient(115deg,rgba(255,67,58,.07),rgba(255,255,255,.018));
  }

  .pv-mobile-effects-enabled .story-system .about-stats > div.is-mobile-effect-active strong {
    border-color: rgba(255,81,73,.58);
    box-shadow: inset 0 0 0 7px rgba(255,255,255,.015), 0 0 38px rgba(255,67,58,.16);
    transform: translateY(-3px) scale(1.02);
  }

  .pv-mobile-effects-enabled .premium-brief.is-mobile-effect-active,
  .pv-mobile-effects-enabled .service-cta.is-mobile-effect-active {
    border-color: rgba(255,67,58,.44);
    box-shadow: 0 24px 50px rgba(0,0,0,.28), 0 0 28px rgba(255,67,58,.10);
  }

  .pv-mobile-effects-enabled .premium-copy .chips li.is-mobile-effect-active,
  .pv-mobile-effects-enabled .scope-category .tag-cloud span.is-mobile-effect-active {
    color: #f6f3ee;
    border-color: rgba(255,67,58,.5);
    background: rgba(255,67,58,.08);
    box-shadow: 0 8px 22px rgba(0,0,0,.22), 0 0 16px rgba(255,67,58,.08);
  }

  .pv-mobile-effects-enabled .service-switch-card.is-mobile-effect-active {
    color: #fff;
    border-color: #ff7568;
    box-shadow: 0 12px 30px rgba(0,0,0,.32), 0 0 22px rgba(239,70,56,.2);
  }

  /* Auf dem Desktop vorhandene Atmosphaere bleibt auf dem Handy sichtbar, aber dezenter. */
  .pv-mobile-effects-enabled .premium-ambient {
    display: block;
    opacity: .32;
    transform: scale(.82);
    transform-origin: center;
  }

  /* V177: Desktop-Komposition des PV-Transportprinzips als kompakte Handyfassung. */
  .pv-mobile-effects-enabled .cine-principle-head {
    display: grid;
    grid-template-columns: minmax(0,1.4fr) minmax(88px,.6fr);
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 40px;
    align-items: end;
    margin-bottom: 32px;
  }

  .pv-mobile-effects-enabled .cine-principle-head > div:first-child {
    display: contents;
  }

  .pv-mobile-effects-enabled .cine-principle-head .eyebrow.eyebrow-symmetric {
    position: relative;
    top: -1cm;
    z-index: 3;
    grid-column: 1 / -1;
    grid-row: 1;
    width: max-content;
    max-width: 100%;
    justify-content: flex-start;
    justify-self: start;
    margin: 0;
    text-align: left;
  }

  html.pv-mobile-effects-enabled body.card-design-recommended #cine-principle-title {
    position: relative;
    z-index: 3;
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    max-width: none;
    margin: 0;
    font-size: clamp(1.08rem,5.8vw,1.44rem);
    line-height: 1.08;
    letter-spacing: -.012em;
  }

  .pv-mobile-effects-enabled .cine-principle-head > p {
    position: relative;
    z-index: 3;
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    max-width: none;
    margin: 0 0 2px;
    color: #5c5c58;
    font-size: clamp(.54rem,2.3vw,.64rem);
    line-height: 1.62;
  }

  .pv-mobile-effects-enabled .cine-principle-watermark {
    top: 232px;
    right: auto;
    left: 62%;
    font-size: clamp(10rem,48vw,12rem);
    opacity: 1;
    -webkit-transform: translate3d(-50%,0,0);
    transform: translate3d(-50%,0,0);
  }

  .pv-mobile-effects-enabled .cine-principle-watermark-p {
    position: relative;
    top: -1.5cm;
    color: rgba(239,70,56,.26);
  }

  .pv-mobile-effects-enabled .cine-principle-watermark-v {
    color: rgba(255,255,255,.78);
  }

  /* V181: Mobile Fortschrittslinie exakt durch die Kreismitten und nur
     zwischen den Außenkanten von 01 und 03. */
  body.card-design-recommended .cine-principle-rail::before,
  body.card-design-recommended .cine-principle-rail::after {
    top: 22.5px;
    right: calc(16.666% + 24px);
    left: calc(16.666% + 24px);
    height: 3px;
    border-radius: 99px;
  }

  body.card-design-recommended .cine-principle-rail::before {
    background: rgba(239,70,56,.24);
    box-shadow: none;
  }

  body.card-design-recommended .cine-principle-rail::after {
    background: linear-gradient(90deg,#ef4638,#ff655b);
    box-shadow: 0 0 10px rgba(239,70,56,.38);
    transform: scaleX(0);
    transform-origin: left center;
    animation: pvMobilePrincipleProgress181 4.8s ease-in-out infinite;
  }

  body.card-design-recommended .cine-principle-step-number {
    animation: pvMobilePrincipleStep181 4.8s ease-in-out infinite;
  }

  body.card-design-recommended .cine-principle-step:nth-child(2) .cine-principle-step-number { animation-delay: .86s; }
  body.card-design-recommended .cine-principle-step:nth-child(3) .cine-principle-step-number { animation-delay: 1.72s; }

  body.card-design-recommended .cine-principle-direction {
    top: 24px;
    width: 8px;
    height: 8px;
    display: block;
    border-top-width: 2px;
    border-right-width: 2px;
  }

  body.card-design-recommended .cine-principle-direction-one { left: calc(33.333% - 4px); }
  body.card-design-recommended .cine-principle-direction-two { left: calc(66.666% - 4px); }

  /* Entwurf 1: ruhige, mittige Bruecke zwischen den gestapelten Transportarten. */
  .pv-mobile-effects-enabled .transport-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 0;
  }

  .pv-mobile-effects-enabled .transport-grid::before,
  .pv-mobile-effects-enabled .transport-grid::after,
  .pv-mobile-effects-enabled .transport-grid article::before {
    display: none;
  }

  .pv-mobile-effects-enabled .transport-grid article:nth-of-type(1) { grid-row: 1; }
  .pv-mobile-effects-enabled .transport-grid article:nth-of-type(2) { grid-row: 3; }

  .pv-mobile-effects-enabled .transport-choice {
    position: relative;
    z-index: 2;
    top: auto;
    right: auto;
    left: auto;
    grid-row: 2;
    display: inline-flex;
    min-width: 66px;
    margin: 22px 0;
    justify-self: center;
    transform: none;
  }

  .pv-mobile-effects-enabled .transport-choice::before,
  .pv-mobile-effects-enabled .transport-choice::after {
    content: "";
    position: absolute;
    top: 50%;
    width: min(28vw,120px);
    height: 1px;
    transform: translateY(-50%);
  }

  .pv-mobile-effects-enabled .transport-choice::before {
    right: calc(100% + 16px);
    background: linear-gradient(90deg,transparent,rgba(255,67,58,.85));
  }

  .pv-mobile-effects-enabled .transport-choice::after {
    left: calc(100% + 16px);
    background: linear-gradient(90deg,rgba(255,67,58,.85),transparent);
  }

  .pv-mobile-effects-enabled .transport-grid article,
  .pv-mobile-effects-enabled .transport-grid article > div > span,
  .pv-mobile-effects-enabled .transport-grid article h3,
  .pv-mobile-effects-enabled .transport-grid article figcaption {
    animation: none;
  }

  /* Ablauf: Anschluss, Nummer und Text leuchten im gleichen Takt nacheinander auf. */
  .pv-mobile-effects-enabled .process li,
  .pv-mobile-effects-enabled .process li > span,
  .pv-mobile-effects-enabled .process li h3 {
    animation-duration: 8s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }

  .pv-mobile-effects-enabled .process li { animation-name: pvMobileProcessCard173; }
  .pv-mobile-effects-enabled .process li > span { animation-name: pvMobileProcessNode173; }
  .pv-mobile-effects-enabled .process li h3 { animation-name: pvMobileProcessTitle173; }

  .pv-mobile-effects-enabled .process li:nth-child(2),
  .pv-mobile-effects-enabled .process li:nth-child(2) > span,
  .pv-mobile-effects-enabled .process li:nth-child(2) h3 { animation-delay: 1.6s; }
  .pv-mobile-effects-enabled .process li:nth-child(3),
  .pv-mobile-effects-enabled .process li:nth-child(3) > span,
  .pv-mobile-effects-enabled .process li:nth-child(3) h3 { animation-delay: 3.2s; }
  .pv-mobile-effects-enabled .process li:nth-child(4),
  .pv-mobile-effects-enabled .process li:nth-child(4) > span,
  .pv-mobile-effects-enabled .process li:nth-child(4) h3 { animation-delay: 4.8s; }
  .pv-mobile-effects-enabled .process li:nth-child(5),
  .pv-mobile-effects-enabled .process li:nth-child(5) > span,
  .pv-mobile-effects-enabled .process li:nth-child(5) h3 { animation-delay: 6.4s; }

  /* Das Karussell zeigt bis zum fertigen Bild einen ruhigen PV-Platzhalter statt Weissflaechen. */
  .pv-mobile-effects-enabled .reference-card {
    background:
      linear-gradient(112deg,transparent 28%,rgba(255,255,255,.08) 43%,transparent 58%) -180% 0 / 220% 100% no-repeat,
      radial-gradient(circle at 82% 18%,rgba(255,67,58,.16),transparent 34%),
      #111315;
    animation: pvMobileImagePlaceholder173 1.8s ease-in-out infinite;
    animation-play-state: paused;
  }

  .pv-mobile-effects-enabled .reference-card.is-mobile-effect-active {
    animation-play-state: running;
  }

  .pv-mobile-effects-enabled .reference-card img {
    opacity: 0;
    transition: opacity .38s ease, transform .55s ease, filter .45s ease;
  }

  .pv-mobile-effects-enabled .reference-card.is-image-ready {
    animation: none;
    background: #111315;
  }

  .pv-mobile-effects-enabled .reference-card.is-image-ready img { opacity: 1; }

  /* iOS-feste Formularschrift nur in den beiden Hauptformularen. */
  body.card-design-recommended .contact-form input,
  body.card-design-recommended .contact-form select,
  body.card-design-recommended .contact-form textarea {
    min-height: 54px;
    font-size: max(16px, 1rem);
  }

  /* Grosse Schrift darf die Notfall-Gridspalte nicht ueber den Viewport ziehen. */
  body.card-design-recommended .night-stage-v46 .night-stage-copy {
    grid-template-columns: minmax(0, 1fr);
  }

  body.card-design-recommended .night-stage-v46 .night-stage-title,
  body.card-design-recommended .night-stage-v46 .night-title-tail {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
  }

  body.card-design-recommended .scope-heading h2,
  body.card-design-recommended .scope-heading h2 > span {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    -webkit-hyphens: auto;
    hyphens: auto;
  }

  body.card-design-recommended #kontakt .section-heading,
  body.card-design-recommended #kontakt .section-heading h2 {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    -webkit-hyphens: auto;
    hyphens: auto;
  }

  .pv-mobile-effects-enabled .button.is-mobile-tapped,
  .pv-mobile-effects-enabled .mobile-actions a.is-mobile-tapped,
  .pv-mobile-effects-enabled .mobile-menu a.is-mobile-tapped {
    filter: brightness(1.18);
  }
}

/*
 * Schnellkontakt fuer schmale Hochformate und niedrige Touch-Querformate.
 * Die JS-Variable folgt der real gerenderten Hoehe inklusive Safe Area.
 */
@media (max-width: 620px),
       (min-width: 621px) and (max-width: 860px) and (max-height: 500px) and (orientation: landscape) and (any-pointer: coarse) {
  body.card-design-recommended {
    padding-bottom: calc(var(--pv-mobile-actions-height, 74px) + 8px);
  }

  body.card-design-recommended .mobile-actions {
    position: fixed;
    z-index: 60;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-width: 100vw;
    min-width: 0;
    min-height: 66px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    box-sizing: border-box;
    padding:
      6px max(6px, env(safe-area-inset-right, 0px))
      calc(6px + env(safe-area-inset-bottom, 0px))
      max(6px, env(safe-area-inset-left, 0px));
    border-top: 1px solid rgba(255,67,58,.58);
    color: #fff;
    background: linear-gradient(180deg,rgba(15,16,17,.82),rgba(6,7,8,.97));
    box-shadow: 0 -14px 36px rgba(0,0,0,.42),0 -1px 18px rgba(255,67,58,.13);
    -webkit-backdrop-filter: blur(20px) saturate(145%);
    backdrop-filter: blur(20px) saturate(145%);
  }

  body.card-design-recommended .mobile-actions::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 8%;
    width: 34%;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg,transparent,#ff5148,transparent);
    box-shadow: 0 0 14px rgba(255,67,58,.7);
    animation: pvMobileActionSignal173 5.4s ease-in-out infinite alternate;
  }

  body.card-design-recommended .mobile-actions a {
    min-width: 0;
    min-height: 54px;
    display: grid;
    grid-template-columns: 30px minmax(0,1fr);
    grid-template-rows: auto auto;
    column-gap: 7px;
    align-content: center;
    box-sizing: border-box;
    padding: 7px 8px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    background: linear-gradient(145deg,rgba(102,42,36,.72),rgba(43,23,21,.92) 68%,rgba(23,15,14,.98));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.13),
      inset 0 -5px 11px rgba(0,0,0,.24),
      0 4px 0 rgba(10,6,6,.96),
      0 9px 17px rgba(0,0,0,.34),
      0 0 15px rgba(255,67,58,.12);
    transform: translateY(0) scale(.985);
    transform-origin: center;
    will-change: transform,box-shadow;
    animation: pvMobileContactDepth182 2.8s ease-in-out infinite;
  }

  body.card-design-recommended .mobile-actions a + a {
    border-left: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(145deg,rgba(64,39,36,.7),rgba(29,23,22,.94) 68%,rgba(16,14,14,.98));
  }

  body.card-design-recommended .mobile-actions a::before {
    content: "☎";
    grid-row: 1 / 3;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    align-self: center;
    border: 1px solid rgba(255,255,255,.42);
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg,#ff554c,#db2f28);
    box-shadow:
      inset 0 2px 3px rgba(255,255,255,.34),
      inset 0 -4px 7px rgba(91,0,0,.28),
      0 4px 8px rgba(0,0,0,.38),
      0 0 0 4px rgba(255,67,58,.1),
      0 0 16px rgba(255,67,58,.32);
    font-size: .88rem;
  }

  body.card-design-recommended .mobile-actions a + a::before {
    content: "↗";
    color: #ff5a51;
    border-color: rgba(255,67,58,.52);
    background: linear-gradient(145deg,rgba(71,32,29,.92),rgba(18,14,14,.98));
    box-shadow:
      inset 0 1px 2px rgba(255,255,255,.1),
      inset 0 -3px 6px rgba(0,0,0,.3),
      0 4px 8px rgba(0,0,0,.34),
      0 0 0 4px rgba(255,67,58,.055);
  }

  body.card-design-recommended .mobile-actions span,
  body.card-design-recommended .mobile-actions b {
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
  }

  body.card-design-recommended .mobile-actions span {
    color: #ff7770;
    font-size: .47rem;
    letter-spacing: .14em;
    white-space: nowrap;
  }

  body.card-design-recommended .mobile-actions b {
    margin-top: 2px;
    color: #f7f5f1;
    font-size: clamp(.61rem,3vw,.72rem);
    line-height: 1.12;
    letter-spacing: -.01em;
    white-space: normal;
    overflow-wrap: normal;
  }

  body.card-design-recommended .mobile-actions a:first-child b {
    white-space: nowrap;
  }
}

@keyframes pvMobileHeroSweep170 {
  to { transform: translateX(108%); }
}

@keyframes pvMobileTapTarget170 {
  0%,100% { filter: brightness(1); transform: translateY(0) scale(1); }
  34% { filter: brightness(.9); transform: translateY(1px) scale(.985); }
  70% { filter: brightness(1.16); transform: translateY(-2px) scale(1.012); }
}

@keyframes pvMobileTransportSignal173 {
  0%, 32% { top: 24%; }
  46%, 54% { top: 50%; }
  68%, 100% { top: 76%; }
}

@keyframes pvMobileTransportCard173 {
  0%, 38% {
    border-color: rgba(255,67,58,.52);
    box-shadow: 0 24px 52px rgba(0,0,0,.32),0 0 30px rgba(255,67,58,.11);
  }
  50%, 100% {
    border-color: rgba(255,255,255,.15);
    box-shadow: 0 24px 52px rgba(0,0,0,.2);
  }
}

@keyframes pvMobileTransportLabel173 {
  0%, 38% { color: #fff; text-shadow: 0 0 17px rgba(255,67,58,.55); }
  50%, 100% { text-shadow: none; }
}

@keyframes pvMobileProcessCard173 {
  0%, 11% {
    border-color: rgba(255,67,58,.32);
    background: rgba(255,255,255,.88);
    box-shadow: 0 18px 36px rgba(28,29,27,.09),0 0 25px rgba(255,67,58,.06);
  }
  19%, 100% {
    border-color: rgba(13,15,16,.12);
    background: rgba(255,255,255,.43);
    box-shadow: 0 16px 34px rgba(28,29,27,.035);
  }
}

@keyframes pvMobileProcessNode173 {
  0%, 11% {
    color: #fff;
    background: #ff433a;
    box-shadow: 0 0 0 5px #edede9,0 0 22px rgba(255,67,58,.55);
    transform: scale(1.09);
  }
  19%, 100% {
    color: #df342d;
    background: #edede9;
    box-shadow: 0 0 0 5px #edede9;
    transform: scale(1);
  }
}

@keyframes pvMobileProcessTitle173 {
  0%, 11% { color: #111315; text-shadow: 0 0 12px rgba(255,67,58,.15); }
  19%, 100% { text-shadow: none; }
}

@keyframes pvMobileHandoverLabel173 {
  0%, 22% {
    color: #fff;
    opacity: 1;
    text-shadow: 0 0 14px rgba(255,67,58,.85);
  }
  31%, 100% {
    color: rgba(255,255,255,.58);
    opacity: .62;
    text-shadow: none;
  }
}

@keyframes pvMobileHandoverNode182 {
  0%,22% {
    border-color: #ff5149;
    background: #ff433a;
    box-shadow: 0 0 0 5px rgba(5,6,7,.72),0 0 20px rgba(255,67,58,.72);
    transform: scale(1.08);
  }
  30%,100% {
    border-color: rgba(255,81,73,.88);
    background: #ff433a;
    box-shadow: 0 0 0 5px rgba(5,6,7,.82),0 0 14px rgba(255,67,58,.3);
    transform: scale(1);
  }
}

@keyframes pvMobileHandoverRailOne182 {
  0%,10% { transform: scaleX(0); }
  32%,100% { transform: scaleX(1); }
}

@keyframes pvMobileHandoverRailTwo182 {
  0%,43% { transform: scaleX(0); }
  65%,100% { transform: scaleX(1); }
}

@keyframes pvMobileImagePlaceholder173 {
  0% { background-position: -180% 0,center,center; }
  100% { background-position: 180% 0,center,center; }
}

@keyframes pvMobileActionSignal173 {
  from { left: 6%; opacity: .55; }
  to { left: 60%; opacity: 1; }
}

@keyframes pvMobilePrincipleProgress181 {
  0%,12% { transform: scaleX(0); opacity: .55; }
  72%,88% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(0); opacity: .55; }
}

@keyframes pvMobilePrincipleStep181 {
  0%,15%,100% {
    transform: scale(1);
    box-shadow: 0 0 0 5px #eeeae2,0 10px 26px rgba(0,0,0,.22);
  }
  24%,34% {
    transform: scale(1.08);
    box-shadow: 0 0 0 5px #eeeae2,0 0 24px rgba(239,70,56,.62);
  }
}

@keyframes pvMobileContactDepth182 {
  0%,100% {
    transform: translateY(0) scale(.985);
  }
  50% {
    transform: translateY(-2px) scale(1);
  }
}

/* P1 200% reflow: keep the mobile header and emergency controls reachable
   without suppressing the user's effective root-font enlargement. */
@media (max-width: 620px) {
  .hero-concept-v1 .site-header .brand {
    min-width: 0;
    flex: 1 1 auto;
  }

  .hero-concept-v1 .site-header .brand-mark {
    flex: none;
  }

  .hero-concept-v1 .site-header .brand > span:last-child {
    min-width: 0;
  }

  .hero-concept-v1 .site-header .brand > span:last-child b,
  .hero-concept-v1 .site-header .brand > span:last-child small {
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .hero-concept-v1 .site-header .menu-button {
    flex: 0 0 46px;
  }

  .hero-concept-v1 .emergency-message,
  .hero-concept-v1 .emergency-call,
  .hero-concept-v1 .emergency-call-copy {
    min-width: 0;
  }

  .hero-concept-v1 .emergency-call-copy strong {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (min-width: 621px) and (max-width: 860px) {
  .hero-concept-v1 .emergency-message,
  .hero-concept-v1 .emergency-call,
  .hero-concept-v1 .emergency-call-copy {
    min-width: 0;
  }

  .hero-concept-v1 .emergency-call-copy strong {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 980px) {
  #kontakt .section-heading,
  #kontakt .section-heading > div,
  #kontakt .section-heading h2 {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 350px) {
  #kontakt .eyebrow-symmetric::before,
  #kontakt .eyebrow-symmetric::after {
    display: none;
  }

  #kontakt .eyebrow-symmetric {
    overflow-wrap: anywhere;
  }
}

/* P1 200% content reflow: the hero copy stays in normal document flow while
   enlarged title lines may wrap instead of being cut by the decorative hero
   viewport. The normal mobile font sizes and content order stay unchanged. */
@media (max-width: 860px) {
  body.hero-concept-v1 .hero-copy,
  body.hero-concept-v1 .hero-copy h1,
  body.hero-concept-v1 .hero-copy h1 > * {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  body.hero-concept-v1 .hero-copy h1 > * {
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    -webkit-hyphens: manual;
    hyphens: manual;
  }

  body.hero-concept-v1 .hero-copy > .eyebrow {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
    overflow-wrap: anywhere;
  }

  body.hero-concept-v1 .hero-copy > .hero-lead {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    -webkit-hyphens: auto;
    hyphens: auto;
  }

  body.hero-concept-v1 .hero-copy > .eyebrow::before,
  body.hero-concept-v1 .hero-copy > .eyebrow::after {
    flex: 1 1 20px;
    max-width: 32px;
  }
}

/* Premium-Reflow fuer die explizite CSS-Root-Pruefung bei 200 %. Die Klasse
   wird aus der berechneten Root-Schriftgroesse gesetzt und veraendert die
   normale mobile Gestaltung nicht. */
@media (max-width: 1120px) {
  html.pv-root-font-200 body.hero-concept-v1 .desktop-nav {
    display: none;
  }

  html.pv-root-font-200 body.hero-concept-v1 .menu-button {
    display: grid;
    margin-left: 0;
  }

  html.pv-root-font-200 body.hero-concept-v1 .header-language-switch {
    margin-left: auto;
  }

  html.pv-root-font-200 body.hero-concept-v1 .mobile-menu-backdrop {
    position: fixed;
    z-index: 28;
    top: calc(var(--emergency-height) + var(--header-height));
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    background: rgba(2,3,4,.34);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }

  html.pv-root-font-200 body.card-design-recommended .pv-service-grid--three,
  html.pv-root-font-200 body.card-design-recommended .pv-service-grid--four {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html.pv-root-font-200 body.card-design-recommended .pv-service-card__content > b,
  html.pv-root-font-200 body.card-design-recommended .pv-service-card__content > small {
    overflow-wrap: break-word;
  }

  html.pv-root-font-200 body.hero-concept-v1 .mobile-menu {
    position: fixed;
    z-index: 29;
    top: calc(var(--emergency-height) + var(--header-height));
    right: 0;
    left: 0;
    display: grid;
    align-content: start;
    padding: 20px max(24px, calc((100vw - 700px) / 2));
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    background: rgba(9, 10, 11, .98);
    opacity: 0;
    transform: translateY(-8px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  }

  html.pv-root-font-200 body.hero-concept-v1 .mobile-menu.is-open {
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
  }

  html.pv-root-font-200 body.hero-concept-v1 .mobile-menu a {
    min-height: 50px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--line);
    font-size: .9rem;
    font-weight: 700;
  }
}

@media (max-width: 620px) {
  html.pv-root-font-200 {
    --header-height: 128px;
  }

  html.pv-root-font-200 body.hero-concept-v1 .site-header .header-inner {
    min-height: var(--header-height);
    align-content: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding-block: 10px;
  }

  html.pv-root-font-200 body.hero-concept-v1 .site-header .brand {
    flex: 1 0 100%;
    width: 100%;
    gap: 6px;
  }

  html.pv-root-font-200 body.hero-concept-v1 .site-header .brand > span:last-child {
    display: block;
  }

  html.pv-root-font-200 body.hero-concept-v1 .site-header .brand > span:last-child b,
  html.pv-root-font-200 body.hero-concept-v1 .site-header .brand > span:last-child small {
    white-space: nowrap;
    overflow-wrap: normal;
  }

  html.pv-root-font-200 body.hero-concept-v1 .site-header .brand > span:last-child b {
    letter-spacing: .02em;
  }

  html.pv-root-font-200 body.hero-concept-v1 .site-header .brand > span:last-child small {
    letter-spacing: .08em;
  }

  html.pv-root-font-200 body.hero-concept-v1 .hero-inner {
    padding-top: calc(var(--header-height) + 34px);
  }

}

@media (max-width: 360px) {
  html.pv-root-font-200 body.hero-concept-v1 .hero h1 {
    letter-spacing: -.055em;
  }

  html.pv-root-font-200 body.card-design-recommended .mobile-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  html.pv-root-font-200 body.card-design-recommended .mobile-actions a + a {
    border-left: 1px solid rgba(255,255,255,.12);
  }
}

/* The existing contact eyebrow keeps both decorative rules, but lets them
   shrink when enlarged copy needs the width at the 360px breakpoint. */
@media (max-width: 620px) {
  body.card-design-recommended #kontakt .eyebrow-symmetric {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
    overflow-wrap: anywhere;
  }

  body.card-design-recommended #kontakt .eyebrow-symmetric::before,
  body.card-design-recommended #kontakt .eyebrow-symmetric::after {
    flex: 1 1 18px;
    max-width: 32px;
  }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .pv-mobile-effects-enabled [data-mobile-effect],
  .pv-mobile-effects-enabled [data-mobile-effect].is-mobile-effect-active,
  .pv-mobile-effects-enabled [data-mobile-effect].is-mobile-tapped,
  .pv-mobile-effects-enabled .hero-concept-v1 .hero-media::after,
  html.pv-mobile-effects-enabled + body.hero-concept-v1 .hero-media::after,
  .pv-mobile-effects-enabled .pv-mobile-menu-backdrop,
  .pv-mobile-effects-enabled .transport-grid::after,
  .pv-mobile-effects-enabled .transport-grid article,
  .pv-mobile-effects-enabled .transport-grid article > div > span,
  .pv-mobile-effects-enabled .transport-grid article h3,
  .pv-mobile-effects-enabled .transport-grid article figcaption,
  .pv-mobile-effects-enabled .process li,
  .pv-mobile-effects-enabled .process li > span,
  .pv-mobile-effects-enabled .process li h3,
  .pv-mobile-effects-enabled .reference-card,
  body.card-design-recommended .mobile-actions::before,
  body.card-design-recommended .mobile-actions a,
  body.card-design-recommended .cine-principle-rail::after,
  body.card-design-recommended .cine-principle-step-number {
    animation: none !important;
    transition: none !important;
  }

  body.card-design-recommended .cine-principle-rail::after {
    transform: scaleX(1);
  }

}

@media (min-width: 621px) and (max-width: 860px) and (orientation: landscape) and (prefers-reduced-motion: reduce) {
  body.card-design-recommended .mobile-actions::before,
  body.card-design-recommended .mobile-actions a {
    animation: none !important;
    transition: none !important;
  }
}

/* Gemeinsamer, breakpoint-synchronisierter Porsche-Zustand. */
/* Entwurf 1: 01-02-03 bewegt sich ruhig von Abholung bis Uebergabe. */
.handover-film-image.is-mobile-handover figcaption {
  right: 14px;
  bottom: 14px;
  left: 14px;
  min-height: 74px;
  grid-template-columns: auto minmax(20px,1fr) auto minmax(20px,1fr) auto;
  align-items: start;
  gap: 7px;
  padding: 12px 11px 10px;
  background: linear-gradient(100deg,rgba(5,6,7,.91),rgba(12,13,14,.78));
  border-color: rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  backdrop-filter: blur(12px) saturate(130%);
}

.handover-film-image.is-mobile-handover figcaption::before {
  display: none;
}

.handover-film-image.is-mobile-handover figcaption::after {
  display: none;
}

.handover-film-image.is-mobile-handover figcaption > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: .5rem;
  font-weight: 850;
  letter-spacing: .12em;
  line-height: 1.2;
  white-space: nowrap;
  opacity: .82;
  animation: none;
}

.handover-film-image.is-mobile-handover figcaption > span > b {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 2px solid rgba(255,81,73,.88);
  border-radius: 50%;
  background: #ff433a;
  box-shadow: 0 0 0 5px rgba(5,6,7,.82),0 0 14px rgba(255,67,58,.3);
  color: #fff;
  font-size: .68rem;
  line-height: 1;
  animation: pvMobileHandoverNode182 6s ease-in-out infinite;
}

.handover-film-image.is-mobile-handover figcaption > span:nth-of-type(2) > b { animation-delay: -4s; }
.handover-film-image.is-mobile-handover figcaption > span:nth-of-type(3) > b { animation-delay: -2s; }

.handover-film-image.is-mobile-handover figcaption > i {
  position: relative;
  height: 1px;
  margin-top: 14px;
  overflow: hidden;
  background: rgba(255,255,255,.26);
}

.handover-film-image.is-mobile-handover figcaption > i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #ff5149;
  box-shadow: 0 0 8px rgba(255,81,73,.62);
  transform: scaleX(0);
  transform-origin: left;
}

.handover-film-image.is-mobile-handover figcaption > i:nth-of-type(1)::after {
  animation: pvMobileHandoverRailOne182 6s ease-in-out infinite;
}

.handover-film-image.is-mobile-handover figcaption > i:nth-of-type(2)::after {
  animation: pvMobileHandoverRailTwo182 6s ease-in-out infinite;
}


/* V183: In kurzen Smartphone-Querformaten darf die feste Schnellkontaktleiste
   weder Transportkarten noch grosse Abschnittsueberschriften verdecken. Sie
   bleibt als vollwertige Aktion erhalten, steht dort aber im Dokumentfluss
   direkt nach dem Footer. Hochformat und Desktop bleiben unveraendert. */
@media (min-width: 621px) and (max-width: 860px) and (orientation: landscape) {
  body.card-design-recommended {
    padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
  }

  body.card-design-recommended .mobile-actions {
    position: static;
    inset: auto;
    z-index: auto;
    width: min(calc(100% - 32px), 760px);
    max-width: none;
    min-height: 0;
    margin: 24px auto max(10px, env(safe-area-inset-bottom, 0px));
    padding: 5px;
    border: 1px solid rgba(255, 67, 58, .42);
    border-radius: 12px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, .28);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  body.card-design-recommended .mobile-actions a {
    min-height: 48px;
    padding-block: 5px;
  }

}

@media (min-width: 621px) and (orientation: landscape) {
  /* V184: Der freigegebene Porsche-Entwurf 1 gilt auch im kurzen
     Smartphone-Querformat. Drei nummerierte Stationen ersetzen dort den
     alten einzelnen Laufpunkt; Knoten und Verbindungsstrecken bleiben ruhig
     animiert. */
  .handover-film-image.is-mobile-handover figcaption {
    right: 18px;
    bottom: 16px;
    left: 18px;
    min-height: 74px;
    grid-template-columns: auto minmax(44px, 1fr) auto minmax(44px, 1fr) auto;
    align-items: start;
    gap: 10px;
    padding: 12px 16px 10px;
    border-color: rgba(255, 255, 255, .2);
    background: linear-gradient(100deg, rgba(5, 6, 7, .91), rgba(12, 13, 14, .78));
    -webkit-backdrop-filter: blur(12px) saturate(130%);
    backdrop-filter: blur(12px) saturate(130%);
  }

  .handover-film-image.is-mobile-handover figcaption::before,
  .handover-film-image.is-mobile-handover figcaption::after {
    display: none;
  }

  .handover-film-image.is-mobile-handover figcaption > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, .82);
    font-size: .54rem;
    font-weight: 850;
    letter-spacing: .12em;
    line-height: 1.2;
    white-space: nowrap;
    opacity: 1;
    text-shadow: none;
    animation: none;
  }

  .handover-film-image.is-mobile-handover figcaption > span > b {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 2px solid rgba(255, 81, 73, .88);
    border-radius: 50%;
    background: #ff433a;
    box-shadow: 0 0 0 5px rgba(5, 6, 7, .82), 0 0 14px rgba(255, 67, 58, .3);
    color: #fff;
    font-size: .7rem;
    line-height: 1;
    animation: pvMobileHandoverNode182 6s ease-in-out infinite;
  }

  .handover-film-image.is-mobile-handover figcaption > span:nth-of-type(2) > b {
    animation-delay: -4s;
  }

  .handover-film-image.is-mobile-handover figcaption > span:nth-of-type(3) > b {
    animation-delay: -2s;
  }

  .handover-film-image.is-mobile-handover figcaption > i {
    position: relative;
    height: 1px;
    margin-top: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, .26);
  }

  .handover-film-image.is-mobile-handover figcaption > i::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #ff5149;
    box-shadow: 0 0 8px rgba(255, 81, 73, .62);
    transform: scaleX(0);
    transform-origin: left;
  }

  .handover-film-image.is-mobile-handover figcaption > i:nth-of-type(1)::after {
    animation: pvMobileHandoverRailOne182 6s ease-in-out infinite;
  }

  .handover-film-image.is-mobile-handover figcaption > i:nth-of-type(2)::after {
    animation: pvMobileHandoverRailTwo182 6s ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .handover-film-image.is-mobile-handover figcaption > span > b,
  .handover-film-image.is-mobile-handover figcaption > i::after {
    animation: none !important;
  }

  .handover-film-image.is-mobile-handover figcaption > span > b {
    border-color: #ff5149;
  }

  .handover-film-image.is-mobile-handover figcaption > i::after {
    transform: scaleX(1);
  }
}