/* ==========================================================================
   Abschleppdienst Sperhake – Unterseiten
   Ergänzt css/style.css. Werte stammen aus den Elementor-Stylesheets der
   Live-Seite (post-1056/1474/2661/10/1023/5095/7076 sowie den globalen
   Vorlagen post-598 = 24/7-Box und post-619 = "Jetzt anrufen"-Band).
   ========================================================================== */

/* --------------------------------------------------------------------------
   P0 · GEMEINSAME KEYFRAMES
   `sph-gradient` schiebt einen überbreiten Verlauf hin und her – einmal als
   Flächenfüllung (24/7-Box) und einmal als Textfüllung (Telefonnummer).
   `sph-moema` ist der Stauch-Effekt der ElementsKit-Buttons (anim-moema-1).
   -------------------------------------------------------------------------- */
@keyframes sph-gradient {
   0% {
      background-position: 0% 50%
   }

   50% {
      background-position: 100% 50%
   }

   100% {
      background-position: 0% 50%
   }
}

@keyframes sph-moema {
   60% {
      transform: scale3d(.8, .8, 1)
   }

   85% {
      transform: scale3d(1.1, 1.1, 1)
   }

   100% {
      transform: scale3d(1, 1, 1)
   }
}

/* --------------------------------------------------------------------------
   P1 · SEITEN-HERO mit Foto und dunklem Overlay
   leistungen · pannenhilfe · soforthilfe
   Original: Sektion 10% 0 10%, Container 1300px, Overlay #000 @ 0.71
   -------------------------------------------------------------------------- */
/* Das Foto ist immer ein echtes <img class="sph-phero__bg"> im Markup, nie ein
   CSS-Hintergrund – siehe .sph-bgimg in style.css, dieselbe Technik. Es liegt
   als Deckbild hinter dem Overlay und trägt nichts zur Höhe bei; die Sektion
   behält ihre 10 % Innenabstand.
   height:100% muss hier stehen, weil style.css allen Bildern height:auto gibt. */
.sph-phero {
   position: relative;
   overflow: hidden;
   padding: 10% 0
}

.sph-phero__bg {
   position: absolute;
   inset: 0;
   z-index: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center center;
}

/* Overlay ohne z-index reicht: es steht im Markup nach dem Bild und liegt
   damit darüber, der Textcontainer mit z-index:2 über beiden. */
.sph-phero__overlay {
   position: absolute;
   inset: 0;
   background: #000;
   opacity: .71
}

.sph-phero__inner {
   position: relative;
   z-index: 2;
   display: flex
}

.sph-phero__col {
   width: 52.727%;
   padding: 0
}

.sph-phero__title {
   font-size: 3em;
   font-weight: 600;
   line-height: 1.2;
   color: #fff;
   margin-bottom: 29px
}

/* Nur der zweite Teil der Überschrift trägt den Verlauf (Vorlage: span.heading-end). */
.sph-phero__title .sph-grad {
   background-image: linear-gradient(100deg, var(--sph-yellow) 0%, var(--sph-orange) 74%);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
}

.sph-phero__text {
   font-size: var(--sph-lead-size);
   font-weight: 400;
   line-height: var(--sph-p-line);
   color: #fff;
   margin-bottom: var(--sph-p-gap)
}

.sph-phero__text strong {
   font-weight: 600
}

.sph-phero__text em {
   font-style: italic
}

/* orangener Angebots-Button (ekit_creative_button) */
.sph-btn {
   display: inline-block;
   background: #FF7B3C;
   color: #fff;
   font-family: "Poppins", Sans-serif;
   font-size: 1.4em;
   font-weight: 600;
   line-height: 1.5;
   padding: .3em 1em;
   border-radius: 10px;
   transition: background .3s;
}

/* Beim Überfahren zusätzlich das kurze Stauchen der ElementsKit-Buttons
   („moema"): erst auf 80 %, dann auf 110 % und zurück auf die Ausgangsgröße. */
.sph-btn:hover {
   background: var(--sph-orange);
   color: #fff;
   animation: sph-moema .3s forwards
}

/* --------------------------------------------------------------------------
   P2 · VERTRAUENS-BAND: VBA + Google + 24/7-Box
   Die 24/7-Box (globale Vorlage 598) ragt 55px nach oben in den Hero.
   -------------------------------------------------------------------------- */
.sph-trust {
   background: #fff;
   height: 119px
}

.sph-trust__inner {
   position: relative;
   display: flex;
   align-items: center;
   height: 100%
}

.sph-trust__badges {
   width: 50%;
   display: flex;
   align-items: center
}

.sph-trust__badge {
   width: 50%;
   max-width: 50%;
   display: flex;
   justify-content: center
}

.sph-trust__badge--vba {
   padding-top: 11px
}

.sph-trust__badge img {
   width: auto
}

.sph-trust__box {
   position: absolute;
   right: 0;
   top: -65px;
   width: 50%;
   height: 184px;
   border-radius: 29px;
   background: var(--sph-yellow);
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   /* Dauerhaft wandernder Farbverlauf. Das Gelb darüber bleibt als
     Rückfallfarbe stehen, falls der Verlauf nicht gerendert wird. */
   background-image: linear-gradient(-45deg, #f7b42c, #fc575e, #f9b022, #f37849);
   background-size: 1000% 600%;
   animation: sph-gradient 4s infinite cubic-bezier(.62, .28, .23, .99) both;
}

/* Reifenmotiv: früher ein ::before mit background-image, jetzt ein <img> im
   Markup (components/trust-band.php). Kein object-fit:cover – die Vorlage zeigt
   das Bild in Originalgröße, oben links angeschlagen und am Kastenrand
   beschnitten; genau das leistet object-fit:none mit object-position:top left.
   Deckkraft, Mischmodus und Filter bleiben unverändert. */
.sph-trust__boxbg {
   position: absolute;
   inset: 0;
   z-index: 0;
   width: 100%;
   height: 100%;
   object-fit: none;
   object-position: top left;
   opacity: .2;
   mix-blend-mode: luminosity;
   filter: brightness(200%) contrast(200%) saturate(200%) hue-rotate(123deg);
}

.sph-trust__boxinner {
   position: relative;
   display: flex;
   align-items: flex-start
}

.sph-trust__boxicon {
   width: 80px;
   height: 80px;
   flex: none;
   margin-right: 30px;
   transform: translateY(14px)
}

.sph-trust__boxlabel {
   display: block;
   font-size: 1.5em;
   font-weight: 400;
   font-style: italic;
   color: #fff
}

.sph-trust__boxnum {
   display: block;
   font-size: 3em;
   font-weight: 600;
   font-style: italic;
   line-height: 1.2em;
   color: #fff
}

/* --------------------------------------------------------------------------
   P3 · LEISTUNGSLISTE (abwechselnd Bild/Text, Karten in #F6F6F6)
   Original: Sektion max-width 1143px, padding 100px 0 160px,
   jede Karte margin-bottom 3%, Bild-Spalte ohne Padding.
   -------------------------------------------------------------------------- */
.sph-srv {
   background: #fff;
   padding: 100px 0 150px
}

/* Breite und Rand kommen aus der Container-Regel in style.css. */
.sph-srv__row {
   display: flex;
   align-items: center;
   background: var(--sph-light);
   margin-bottom: 3%
}

.sph-srv__media {
   width: 315px;
   flex: none;
   align-self: stretch
}

.sph-srv__media a {
   display: block;
   height: 100%
}

.sph-srv__media img {
   width: 315px;
   height: 315px;
   object-fit: cover;
   border: 8px solid var(--sph-yellow);
   display: block
}

.sph-srv__body {
   flex: 1;
   min-width: 0;
   padding: 0 30px 0 50px
}

.sph-srv__row--rev .sph-srv__body {
   padding: 0 30px
}

.sph-srv__rule {
   width: 60px;
   height: 0;
   border-top: 4px solid var(--sph-yellow);
   margin-bottom: 18px
}

.sph-srv__body h3 {
   font-size: 2em;
   font-weight: 600;
   line-height: 1.3;
   color: var(--sph-gray);
   margin-bottom: 14px
}

.sph-srv__body h3 a {
   color: inherit;
   font-weight: inherit
}

.sph-srv__body h3 a:hover {
   color: var(--sph-yellow)
}

.sph-srv__body p {
   font-size: var(--sph-p-size);
   font-weight: 400;
   line-height: var(--sph-p-line);
   color: var(--sph-gray);
   margin-bottom: var(--sph-p-gap)
}

.sph-srv__body p:last-child {
   margin-bottom: 0
}

/* --------------------------------------------------------------------------
   P4 · TEXT-/BILD-BLÖCKE der Detailseiten
   -------------------------------------------------------------------------- */
.sph-txtimg {
   background: #fff;
   padding: 4% 0
}

.sph-txtimg--light {
   background: var(--sph-light)
}

.sph-txtimg--tight {
   padding: 0
}

/* Spalten je 50 % mit 1 % Eigenpadding (≈7px) wie in der Vorlage. */
.sph-txtimg__inner {
   display: flex;
   align-items: flex-start;
   gap: 50px;
}

.sph-txtimg__inner--top {
   align-items: flex-start
}

/* .sph-txtimg__inner--narrow bekommt Breite und Rand aus style.css. */
.sph-txtimg__text {
   width: 50%;
   padding: 7px;
   align-self: center;
}

.sph-txtimg__media {
   width: 50%;
   padding: 7px;
   display: flex;
   justify-content: flex-end
}

.sph-txtimg__media--start {
   justify-content: flex-start
}

/* Formularspalte: 68px Innenabstand links, wie im Original */
.sph-txtimg__form {
   width: calc(50% - 68px);
   flex: none;
   margin-left: 68px
}

.sph-txtimg h2 {
   font-size: 2.1em;
   font-weight: 600;
   line-height: 1.3;
   color: var(--sph-gray);
   margin-bottom: 20px
}

.sph-txtimg h2 .sph-hl {
   color: var(--sph-yellow)
}

.sph-txtimg p {
   font-size: var(--sph-p-size);
   font-weight: 400;
   line-height: var(--sph-p-line);
   color: var(--sph-gray);
   margin-bottom: var(--sph-p-gap)
}

.sph-txtimg p:last-child {
   margin-bottom: 0
}

.sph-txtimg strong {
   font-weight: 600
}

.sph-txtimg a {
   color: var(--sph-orange);
   font-weight: 600
}

.sph-txtimg em {
   font-style: italic
}

/* abgerundetes Foto mit gelbem Rahmen, wie in der Vorlage
   (box-sizing:border-box aus style.css, die Breite ist also die Außenkante) */
/* Die Vorlage rendert die Fotos in einem festen Rahmen von ~500px Außenkante
   (box-sizing:border-box aus style.css), unabhängig von der Bildeigengröße. */
/* Fotos in den Inhaltsspalten laufen ohne Rahmen und füllen ihre Spalte.
   Bis 1.1.0 stand hier .sph-frame: 500px breit, 8px gelber Rand, asymmetrische
   Ecken. Entfernt – die Regel hatte danach keine Verwendung mehr. */
.sph-photo {
   display: block;
   width: 100%;
   height: auto
}

/* großer gelber Telefonblock (globales Icon-List-Widget 616:
   Icon 59px, Text 2.7em/600 kursiv) */
.sph-telline {
   display: inline-flex;
   align-items: center;
   gap: 14px;
   margin-top: 8px
}

/* Das Symbol bringt seinen eigenen Verlauf mit (ic-hero-phone), deshalb hier
   keine fill-Vorgabe mehr. */
.sph-telline__icon {
   width: 59px;
   height: 59px;
   flex: none
}

/* Die Nummer wird über den Text ausgeschnitten, der Verlauf wandert dauerhaft
   darunter durch. color:transparent ist Pflicht, sonst deckt die Textfarbe. */
.sph-telline__num {
   font-size: 2.7em;
   font-weight: 600;
   font-style: italic;
   line-height: 1.2;
   color: transparent;
   -webkit-background-clip: text;
   background-clip: text;
   background-image: linear-gradient(-45deg, #f7b42c, #fc575e, #f9b022, #f37849);
   background-size: 1000% 600%;
   animation: sph-gradient 2s infinite linear both;
}

/* --------------------------------------------------------------------------
   P5 · "JETZT ANRUFEN"-BAND (globale Vorlage 619)
   -------------------------------------------------------------------------- */
/* Zwei Bilder übereinander, beide als <img> im Markup (components/call-band.php):
   unten das Motiv, darüber die zweite Aufnahme mit 82 % Deckkraft. Das Grau
   bleibt in beiden Ebenen als Grundfarbe stehen. */
.sph-callband {
   position: relative;
   overflow: hidden;
   padding: 3% 0;
   background: var(--sph-gray);
}

.sph-callband__overlay {
   position: absolute;
   inset: 0;
   z-index: 1;
   opacity: .82;
   background: var(--sph-gray);
}

.sph-callband__inner {
   position: relative;
   z-index: 2;
   display: flex;
   align-items: center;
   padding: 0 10px
}

.sph-callband__col {
   width: 57.691%
}

.sph-callband__side {
   width: 42.232%
}

.sph-callband__title {
   font-size: 2.5em;
   font-weight: 600;
   line-height: 1.3;
   color: var(--sph-yellow);
   margin-bottom: 20px
}

.sph-callband__text {
   font-size: var(--sph-p-size);
   line-height: var(--sph-p-line);
   color: #fff;
   margin-bottom: var(--sph-p-gap)
}

.sph-callband__usps {
   padding-bottom: 19px
}

.sph-callband__usps li {
   display: flex;
   align-items: center;
   gap: 12px;
   color: #fff;
   font-size: 1.1em;
   font-weight: 400;
   padding-bottom: 5.5px
}

.sph-callband__hook {
   width: 24px;
   height: 24px;
   fill: var(--sph-yellow);
   flex: none
}

.sph-callband__row {
   display: flex;
   align-items: center;
   gap: 40px;
   flex-wrap: wrap
}

/* --------------------------------------------------------------------------
   P6 · KONTAKTSEITE
   -------------------------------------------------------------------------- */
.sph-khero {
   background: var(--sph-bluegray);
   padding: 6% 0 5%
}

.sph-khero__inner {
   display: flex;
   align-items: center
}

.sph-khero__col {
   width: 53.17%;
   padding-left: 6%
}

.sph-khero__media {
   width: 46.738%
}

.sph-khero__title {
   font-size: 3.5em;
   font-weight: 600;
   color: var(--sph-gray);
   margin-bottom: 20px
}

.sph-khero__text {
   font-size: var(--sph-lead-size);
   font-weight: 400;
   line-height: var(--sph-p-line);
   color: var(--sph-gray);
   margin-bottom: var(--sph-p-gap)
}

.sph-kmain {
   padding: 5% 0 7%
}

.sph-kmain__inner {
   display: flex;
   align-items: flex-start;
   padding: 0 10px
}

.sph-kmain__info {
   width: 50%;
   padding: 2px 81px 2px 2px
}

.sph-kmain__list {
   padding: 1% 1% 7% 3%;
   border-bottom: 1px solid var(--sph-yellow)
}

.sph-kmain__list li {
   padding-block: 11.5px
}

.sph-kmain__list li:first-child {
   padding-top: 0
}

.sph-kmain__list a {
   display: flex;
   align-items: center;
   gap: 14px;
   font-size: 1.1em;
   font-weight: 600;
   color: var(--sph-gray)
}

.sph-kmain__list a:hover {
   color: var(--sph-orange)
}

.sph-kmain__icon {
   width: 33px;
   height: 33px;
   fill: var(--sph-gray);
   flex: none
}

.sph-kmain__list a:hover .sph-kmain__icon {
   fill: var(--sph-orange)
}

.sph-kmain__map {
   padding-top: 5%
}

.sph-kmain__map img,
.sph-kmain__map iframe {
   width: 100%;
   height: 431px;
   border: 0;
   object-fit: cover;
   display: block
}

/* Formularkarte – auf der Kontaktseite mit 32px Radius und Rand */
.sph-kmain__formcol {
   width: 50%
}

.sph-fbox {
   background: #F9B022AD;
   border-radius: 32px;
   padding: 15px
}

.sph-fbox__title {
   font-size: 2.4em;
   font-weight: 600;
   color: var(--sph-gray);
   text-align: center;
   margin: 18px 0 22px
}

.sph-fbox form {
   padding: 0 13px 13px
}

.sph-fbox label {
   display: block;
   font-size: .85em;
   font-weight: 400;
   color: var(--sph-gray);
   margin-bottom: 5px
}

/* display:block – als inline-block erzeugen die Felder zusätzliche Zeilen-
   durchschüsse und der Feldabstand wächst gegenüber der Vorlage um ~15px. */
.sph-fbox input[type=text],
.sph-fbox input[type=tel],
.sph-fbox input[type=email],
.sph-fbox textarea {
   display: block;
   width: 100%;
   background: #fff;
   border: 1px solid var(--sph-orange);
   border-radius: 10px;
   padding: 12px;
   margin-bottom: 6px;
   box-shadow: inset 0 0 10px rgba(249, 176, 34, .51);
   font-family: "Poppins", Sans-serif;
   font-size: .85em;
   line-height: 1.2;
   color: var(--sph-gray);
}

.sph-fbox textarea {
   resize: vertical;
   min-height: 96px
}

.sph-fbox ::placeholder {
   color: #b9b9b9
}



/* Feldaufteilung auf der Kontaktseite – dasselbe Bild wie auf den übrigen
   Formularen:

     Name | Telefon                eine Zeile, gleich breit
     E-Mail, Betreff, Nachricht,
     Zustimmung                    volle Breite

   Gezählt werden – wie in P21 auf der Anfrage-Seite – nur die **einfachen
   Textfelder**. E-Mail, Nachricht, Zustimmung und eine etwaige Auswahl fallen
   aus der Zählung und bekommen immer die ganze Zeile. Damit stimmt die
   Aufteilung auch dann, wenn dem Formular vorne ein Feld hinzugefügt wird.

   Die Seitenklasse setzt sperhake_body_class(); der Slug kommt aus dem Namen
   der Vorlage (template-kontakt.php → sph-page-kontakt). Genau so werden
   Ausnahmen für eine einzelne Seite gemacht, siehe Abschnitt 3 in context.md –
   keine Inline-Styles, kein zweiter Baustein.

   Die vielen :not() sind nicht nur Filter: sie heben die Spezifität über die
   Regeln aus Block 12a, die sonst gewönnen. */

/* 1. Grundform: alles über die volle Breite. */
body.sph-page-kontakt .sph-fbox .wpforms-field,
body.sph-page-standort .sph-fbox .wpforms-field,
body.sph-page-berlin-standort .sph-fbox .wpforms-field {
   flex: 0 0 100% !important;
   width: 100% !important;
   max-width: 100% !important;
}

/* 2. Einfache Textfelder: halbe Breite → Name | Telefon. */
body.sph-page-kontakt .sph-fbox .wpforms-field:not(.wpforms-field-hp):not(.wpforms-field-hidden):not(.wpforms-field-layout):not(.wpforms-field-radio):not(.wpforms-field-checkbox):not(.wpforms-field-textarea):not(.wpforms-field-email):not(.wpforms-field-select),
body.sph-page-standort .sph-fbox .wpforms-field:not(.wpforms-field-hp):not(.wpforms-field-hidden):not(.wpforms-field-layout):not(.wpforms-field-radio):not(.wpforms-field-checkbox):not(.wpforms-field-textarea):not(.wpforms-field-email):not(.wpforms-field-select),
body.sph-page-berlin-standort .sph-fbox .wpforms-field:not(.wpforms-field-hp):not(.wpforms-field-hidden):not(.wpforms-field-layout):not(.wpforms-field-radio):not(.wpforms-field-checkbox):not(.wpforms-field-textarea):not(.wpforms-field-email):not(.wpforms-field-select) {
   flex: 0 0 calc(50% - 7px) !important;
   width: calc(50% - 7px) !important;
   max-width: calc(50% - 7px) !important;
}

/* 3. Ab dem dritten gezählten Textfeld wieder volle Breite → Betreff. */
body.sph-page-kontakt .sph-fbox .wpforms-field:not(.wpforms-field-hp):not(.wpforms-field-hidden):not(.wpforms-field-layout):not(.wpforms-field-radio):not(.wpforms-field-checkbox):not(.wpforms-field-textarea):not(.wpforms-field-email):not(.wpforms-field-select)~.wpforms-field:not(.wpforms-field-hp):not(.wpforms-field-hidden):not(.wpforms-field-layout):not(.wpforms-field-radio):not(.wpforms-field-checkbox):not(.wpforms-field-textarea):not(.wpforms-field-email):not(.wpforms-field-select)~.wpforms-field:not(.wpforms-field-hp):not(.wpforms-field-hidden):not(.wpforms-field-layout):not(.wpforms-field-radio):not(.wpforms-field-checkbox):not(.wpforms-field-textarea):not(.wpforms-field-email):not(.wpforms-field-select),
body.sph-page-standort .sph-fbox .wpforms-field:not(.wpforms-field-hp):not(.wpforms-field-hidden):not(.wpforms-field-layout):not(.wpforms-field-radio):not(.wpforms-field-checkbox):not(.wpforms-field-textarea):not(.wpforms-field-email):not(.wpforms-field-select)~.wpforms-field:not(.wpforms-field-hp):not(.wpforms-field-hidden):not(.wpforms-field-layout):not(.wpforms-field-radio):not(.wpforms-field-checkbox):not(.wpforms-field-textarea):not(.wpforms-field-email):not(.wpforms-field-select)~.wpforms-field:not(.wpforms-field-hp):not(.wpforms-field-hidden):not(.wpforms-field-layout):not(.wpforms-field-radio):not(.wpforms-field-checkbox):not(.wpforms-field-textarea):not(.wpforms-field-email):not(.wpforms-field-select),
body.sph-page-berlin-standort .sph-fbox .wpforms-field:not(.wpforms-field-hp):not(.wpforms-field-hidden):not(.wpforms-field-layout):not(.wpforms-field-radio):not(.wpforms-field-checkbox):not(.wpforms-field-textarea):not(.wpforms-field-email):not(.wpforms-field-select)~.wpforms-field:not(.wpforms-field-hp):not(.wpforms-field-hidden):not(.wpforms-field-layout):not(.wpforms-field-radio):not(.wpforms-field-checkbox):not(.wpforms-field-textarea):not(.wpforms-field-email):not(.wpforms-field-select)~.wpforms-field:not(.wpforms-field-hp):not(.wpforms-field-hidden):not(.wpforms-field-layout):not(.wpforms-field-radio):not(.wpforms-field-checkbox):not(.wpforms-field-textarea):not(.wpforms-field-email):not(.wpforms-field-select) {
   flex: 0 0 100% !important;
   width: 100% !important;
   max-width: 100% !important;
}

/* Am Telefon und in der halben Spalte darunter steht alles untereinander –
   zwei Felder nebeneinander wären dort schmaler als ihr eigener Platzhalter. */
@media (max-width:767px) {

   body.sph-page-kontakt .sph-fbox .wpforms-field:not(.wpforms-field-hp):not(.wpforms-field-hidden):not(.wpforms-field-layout):not(.wpforms-field-radio):not(.wpforms-field-checkbox):not(.wpforms-field-textarea):not(.wpforms-field-email):not(.wpforms-field-select),
   body.sph-page-standort .sph-fbox .wpforms-field:not(.wpforms-field-hp):not(.wpforms-field-hidden):not(.wpforms-field-layout):not(.wpforms-field-radio):not(.wpforms-field-checkbox):not(.wpforms-field-textarea):not(.wpforms-field-email):not(.wpforms-field-select),
   body.sph-page-berlin-standort .sph-fbox .wpforms-field:not(.wpforms-field-hp):not(.wpforms-field-hidden):not(.wpforms-field-layout):not(.wpforms-field-radio):not(.wpforms-field-checkbox):not(.wpforms-field-textarea):not(.wpforms-field-email):not(.wpforms-field-select) {
      flex: 0 0 100% !important;
      width: 100% !important;
      max-width: 100% !important;
   }
}

/* --------------------------------------------------------------------------
   P7 · REFERENZEN-GALERIE (WordPress-Galerie, 3 Spalten, 15px Abstand)
   -------------------------------------------------------------------------- */
.sph-gallery {
   padding: 4% 0;
   background: #fff
}

.sph-gallery__title {
   font-size: 3em;
   font-weight: 600;
   color: var(--sph-gray);
   text-align: center;
   margin-bottom: 3%
}

.sph-gallery__grid {
   display: flex;
   flex-wrap: wrap;
   margin: 0 -15px -15px 0
}

/* min-width:0 ist nötig, sonst verhindert die Eigenbreite der Bilder das Schrumpfen. */
.sph-gallery__item {
   width: 33.3333%;
   min-width: 0;
   margin: 0;
   padding: 0 15px 15px 0
}

.sph-gallery__item img {
   width: 100%;
   height: auto;
   display: block
}

/* --------------------------------------------------------------------------
   P8 · STANDORTE-ÜBERSICHT
   -------------------------------------------------------------------------- */
.sph-locs {
   padding: 0 0 71px;
   background: #fff
}

.sph-locs__block {
   padding: 0 10px 0 86px
}

.sph-locs__block--first {
   padding-top: 90px
}

.sph-locs__title {
   font-size: 2em;
   font-weight: 600;
   line-height: 1.3;
   color: var(--sph-gray);
   margin-bottom: 12px
}

/* Der zweite Block trägt in der Vorlage einen größeren Abstand unter der Überschrift. */
.sph-locs__block--second .sph-locs__title {
   margin-bottom: 20px
}

.sph-locs__cols {
   display: flex;
   flex-wrap: wrap;
   padding-bottom: 7px
}

.sph-locs__col {
   width: 25%;
   padding-right: 10px
}

/* Zeilenabstand 51,5px wie im Original: 26,4px Textzeile + 2 × 12,5px */
.sph-locs__col li {
   padding-block: 12.5px
}

.sph-locs__col a {
   display: flex;
   align-items: center;
   gap: 10px;
   font-family: "Poppins", Sans-serif;
   font-size: 1em;
   font-weight: 400;
   color: var(--sph-gray)
}

.sph-locs__col a:hover {
   color: var(--sph-yellow)
}

/* Ortsmarke aus dem Sprite, gleiche Maße wie .sph-areas__pin. */
.sph-locs__pin {
   width: 17px;
   height: 23px;
   fill: var(--sph-yellow);
   flex: none
}

/* --------------------------------------------------------------------------
   P9 · STANDORT-DETAILSEITEN (Nauen, Berlin-Bezirke …)
   -------------------------------------------------------------------------- */
/* Hero: Bild randlos links, Text rechts. Der Verlauf ist die Elementor-Angabe
   linear-gradient(180deg,#F6F6F6 90%,#FFFFFF 18%) – der zweite Stop wird vom
   Browser auf 90% geklemmt, es entsteht also eine harte Kante bei 90%. */
.sph-lochero {
   background-image: linear-gradient(180deg, var(--sph-light) 100%, #fff 100%);
   padding: 0;
   /* min-height: 567px; */
}

.sph-lochero__inner {
   display: flex;
   align-items: flex-start;
   position: relative;
}

.sph-lochero__media {
   width: 50.42%;
   height: 100%;
}

.sph-lochero__media img {
   width: 50.42%;
   height: calc(100% + 70px);
   display: block;
   border-radius: 0 0 20px 0;
   box-shadow: 0 10px 40px -5px rgba(0, 0, 0, .3);
   object-fit: cover;
   position: absolute;
}

.sph-lochero__body {
   width: 49.58%;
   padding: 0 61px;
   min-height: 550px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
}

.sph-lochero__title {
   font-size: 30px;
   font-weight: 600;
   line-height: 35px;
   color: var(--sph-gray);
   margin: 0 0 30px 3px
}

.sph-lochero__title .sph-hl {
   color: var(--sph-yellow)
}

.sph-lochero__text {
   font-size: var(--sph-p-size);
   line-height: var(--sph-p-line);
   color: var(--sph-gray);
   margin-bottom: var(--sph-p-gap)
}

.sph-lochero__text strong {
   font-weight: 600
}

.sph-lochero__text a {
   color: var(--sph-yellow);
   font-weight: 600
}

.sph-imported ul>li::before {
   display: none !important;
}

.sph-ticks {
   margin-bottom: 20px
}

.sph-ticks li {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   font-size: var(--sph-li-size);
   line-height: var(--sph-p-line);
   color: var(--sph-gray);
   padding-block: 6px
}

.sph-tick {
   width: 19px;
   height: 19px;
   flex: none;
   margin-top: 4px;
   fill: var(--sph-orange)
}

/* Inhaltsabschnitte der Standortseiten: Container 1300px, Sektion 5% 0 4% */
.sph-locsec {
   padding: 4% 0 4%;
   background: #fff
}

.sph-locsec--light {
   background: var(--sph-light);
   padding: 4% 0
}

.sph-locsec--tight {
   padding: 4% 0
}

/* Kein zusätzliches Padding: die Spalten sind je 650px breit und bringen ihr
   eigenes Padding mit – sonst bricht der Text eine Zeile früher um. */
.sph-locsec__inner {
   display: flex;
   align-items: center;
   gap: 50px;
}

.sph-locsec__inner--form {
   align-items: flex-start
}

/* Die Zwei-Spalten-Sektion nutzt den Standard-Container (1340px), nicht 1300px. */
.sph-locsec__inner--two {
   max-width: var(--sph-container);
   align-items: flex-start
}

.sph-locsec__text {
   width: 50%;
   padding: 6px 6px 6px 6px;
}

.sph-locsec__media {
   width: 50%;
   display: flex;
   justify-content: center
}

.sph-locsec__form {
   width: 50%
}

.sph-locsec__half {
   width: 50%;
   padding: 0 10px
}

.sph-locsec__half--second {
   padding: 0 0 0 13px
}

.sph-locsec__title {
   font-size: 2em;
   font-weight: 600;
   line-height: 1.3em;
   color: var(--sph-gray);
   margin-bottom: 20px
}

.sph-locsec__title .sph-hl {
   color: var(--sph-yellow)
}

.sph-locsec p {
   font-size: var(--sph-p-size);
   line-height: var(--sph-p-line);
   color: var(--sph-gray);
   margin-bottom: var(--sph-p-gap)
}

.sph-locsec p:last-child {
   margin-bottom: 0
}

.sph-locsec strong {
   font-weight: 600
}

.sph-locsec a {
   color: var(--sph-yellow);
   font-weight: 600
}

.sph-locsec a:hover {
   color: var(--sph-orange)
}

div.wpforms-container-full input[type=text]:focus {
   border-color: transparent !important;
   box-shadow: none !important;
}

div.wpforms-container-full textarea:focus {
   box-shadow: none !important;
   border-color: transparent !important
}

/* FAQ-Überschrift der Unterseiten: 1.8em, gelb, zentriert */

/* --------------------------------------------------------------------------
   P10a · „MEHR LESEN"-BLOCK
   Sammelt die hinteren Abschnitte der Standortseiten (sections/
   imported-readmore.php). Der Kasten ist zugeklappt 450px hoch, der Text läuft
   nach unten in den grauen Hintergrund aus. Beschnitten wird nur optisch – der
   Inhalt steht vollständig im Markup.
   -------------------------------------------------------------------------- */
/* .sph-readmore__wrap bekommt Breite und Rand aus style.css. */
.sph-readmore__box {
   position: relative;
   max-height: 335px;
   overflow: hidden
}

.sph-readmore.is-open .sph-readmore__box {
   max-height: none
}

/* Weiche Kante statt harter Abschnittslinie. Die Farbe muss zum Hintergrund
   der Sektion passen (--sph-light), transparent oben wird in Safari sonst
   grau-schwarz gemischt – deshalb dieselbe Farbe mit Alpha 0. */
.sph-readmore__box::after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 170px;
   pointer-events: none;
   background: linear-gradient(to bottom, rgba(246, 246, 246, 0) 0%, var(--sph-light) 100%);
}

.sph-readmore.is-open .sph-readmore__box::after {
   display: none
}

.sph-readmore__item+.sph-readmore__item {
   margin-top: 34px
}

.sph-readmore__btn {
   display: inline-block;
   margin-top: 26px;
   cursor: pointer;
   border: 0;
   border-radius: 10px;
   background: #FF7B3C;
   color: #fff;
   font-family: "Poppins", Sans-serif;
   font-size: 1.1em;
   font-weight: 600;
   line-height: 1.5;
   padding: .3em 1.4em;
   transition: background .3s;
}

.sph-readmore__btn:hover {
   background: var(--sph-orange)
}

.sph-readmore__btn:focus-visible {
   outline: 3px solid var(--sph-navy);
   outline-offset: 3px
}

/* Nur eine der beiden Beschriftungen ist sichtbar. */
.sph-readmore__less,
.sph-readmore.is-open .sph-readmore__more {
   display: none
}

.sph-readmore.is-open .sph-readmore__less {
   display: inline
}

#wpforms-490-field_13 {
   display: grid !important;
   grid-template-columns: repeat(3, 1fr);
   gap: 12px;
   padding: 0;
   margin: 0;
   list-style: none;
}

#wpforms-490-field_13 .wpforms-image-choices-item {
   width: 100% !important;
   margin: 0 !important;
   padding: 0 !important;
}

#wpforms-490-field_13 .wpforms-field-label-inline {
   width: 100%;
   min-height: 150px;
   background: #fff;
   border-radius: 10px;
   border: none !important;
   display: flex !important;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 15px !important;
   box-sizing: border-box;
   cursor: pointer;
   text-align: center;
}

#wpforms-490-field_13 .wpforms-image-choices-image {
   width: 55px;
   height: 55px;
   display: flex;
   align-items: center;
   justify-content: center;
}

#wpforms-490-field_13 .wpforms-image-choices-image img {
   width: 55px !important;
   height: 55px !important;
   object-fit: contain;
}

#wpforms-490-field_13 .wpforms-image-choices-label {
   font-size: 14px;
   line-height: 1.3;
   font-weight: 400;
   color: #222;
   text-align: center;
}

#wpforms-490-field_13 .wpforms-image-choices-item:hover .wpforms-field-label-inline {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

#wpforms-490-field_13 .wpforms-image-choices-item.wpforms-selected .wpforms-field-label-inline {
   border: 2px solid #ff4b43 !important;
}



@media (max-width: 767px) {
   #wpforms-490-field_13 {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 10px;
   }

   #wpforms-490-field_13 .wpforms-field-label-inline {
      min-height: 115px;
      padding: 12px !important;
   }

   #wpforms-490-field_13 .wpforms-image-choices-image {
      width: 45px;
      height: 45px;
   }

   #wpforms-490-field_13 .wpforms-image-choices-image img {
      width: 45px !important;
      height: 45px !important;
   }

   #wpforms-490-field_13 .wpforms-image-choices-label {
      font-size: 13px;
   }
}

@media (max-width: 480px) {
   #wpforms-490-field_13 {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 8px;
   }

   #wpforms-490-field_13 .wpforms-field-label-inline {
      min-height: 110px;
   }
}

/* --------------------------------------------------------------------------
   P10b · GEDECKELTE TEXTSPALTE („Mehr lesen" als Textzeile)
   In den Abschnitten 2 bis 4 der Leistungs- und Standortseiten steht der Text
   neben einem Foto. Wird die Spalte deutlich höher als das Foto, kippt die
   Sektion optisch. Zwei Schwellen, gemessen wird der ganze Spalteninhalt –
   Überschrift und Text zusammen, also das, was .sph-txtimg__text
   beziehungsweise .sph-locsec__text hoch ist:

     bis 650px    bleibt stehen, kein Deckel, kein Schalter. Eine Spalte von
                  600px wegen 100px zu kürzen lohnt nicht.
     über 650px   wird auf 500px gedeckelt und bekommt darunter eine schlichte
                  Textzeile zum Aufklappen – bewusst kein Knopf, er soll den
                  Lesefluss nicht stören.

   Die 650px stehen auch als Ausgangswert hier: bis das Skript gemessen hat,
   sieht damit keine Spalte anders aus als hinterher, außer den wirklich
   langen. Sonst zuckte bei jeder mittleren Spalte einmal das Layout.

   Der Deckel hängt an .sph-js (siehe sperhake_js_flag()): ohne JavaScript
   bliebe der Text sonst unerreichbar.
   -------------------------------------------------------------------------- */
.sph-js .sph-clamp {
   position: relative;
   max-height: 650px;
   overflow: hidden
}

/* --fits: passt ohnehin. --cut: zu lang, auf 500px gedeckelt. */
.sph-js .sph-clamp.sph-clamp--fits {
   max-height: none;
   overflow: visible
}

.sph-js .sph-clamp.sph-clamp--cut {
   max-height: 500px
}

/* Steht nach --cut und gewinnt deshalb beim Aufklappen. */
.sph-js .sph-clamp.is-open {
   max-height: none;
   overflow: visible
}

/* Weiche Kante am Deckel. Die Farbe folgt dem Hintergrund der Sektion, sonst
   blendet der Text in Weiß aus, während die Sektion grau ist. */
.sph-clamp {
   --sph-clamp-bg: #fff
}

.sph-txtimg--light .sph-clamp,
.sph-locsec--light .sph-clamp {
   --sph-clamp-bg: var(--sph-light)
}

/* Nur die wirklich gedeckelten Spalten blenden aus. */
.sph-js .sph-clamp.sph-clamp--cut::after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 110px;
   pointer-events: none;
   background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--sph-clamp-bg));
}

.sph-js .sph-clamp.is-open::after {
   display: none
}

/* `display` aus dem Autoren-Stylesheet schlägt das display:none, das [hidden]
   nur aus dem Browser-Stylesheet mitbringt. Ohne diese Zeile stand der
   Schalter unter jeder Spalte – auch unter denen, die das Skript als kurz
   genug erkannt und wieder aufgedeckelt hatte. Die Attributauswahl ist
   spezifischer als die Regel darunter und gewinnt deshalb. */
.sph-clamp__toggle[hidden] {
   display: none
}

/* Schlichte Textzeile, kein Knopf-Aussehen. */
.sph-clamp__toggle {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   margin-top: 12px;
   padding: 0;
   border: 0;
   background: none;
   cursor: pointer;
   font-family: "Poppins", Sans-serif;
   font-size: 16px;
   font-weight: 600;
   line-height: 1.4;
   color: var(--sph-orange);
   transition: color .3s;
}

.sph-clamp__toggle:hover {
   color: var(--sph-yellow)
}

.sph-clamp__toggle:focus-visible {
   outline: 3px solid var(--sph-navy);
   outline-offset: 3px
}

/* Kleiner Pfeil, der beim Aufklappen kippt. */
.sph-clamp__toggle::after {
   content: "";
   width: 0;
   height: 0;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
   border-top: 6px solid currentColor;
   transition: transform .3s ease;
}

.sph-clamp__toggle[aria-expanded="true"]::after {
   transform: rotate(180deg)
}

.sph-clamp__less,
.sph-clamp__toggle[aria-expanded="true"] .sph-clamp__more {
   display: none
}

.sph-clamp__toggle[aria-expanded="true"] .sph-clamp__less {
   display: inline
}

/* --------------------------------------------------------------------------
   P11 · ZENTRIERTE ÜBERSCHRIFT ÜBER ZWEI TEXTSPALTEN
   -------------------------------------------------------------------------- */
.sph-twocol {
   padding: 4% 0;
   background: #fff
}

.sph-twocol__title {
   font-size: 2.5em;
   font-weight: 600;
   line-height: 1.3em;
   color: var(--sph-gray);
   text-align: center;
   margin-bottom: 30px
}

.sph-twocol__title .sph-hl {
   color: var(--sph-yellow)
}

.sph-twocol__cols {
   display: flex;
   align-items: flex-start
}

.sph-twocol__col {
   width: 50%;
   padding: 7px 20px
}

.sph-twocol__col p {
   font-size: var(--sph-p-size);
   line-height: var(--sph-p-line);
   color: var(--sph-gray);
   margin-bottom: var(--sph-p-gap)
}

.sph-twocol__col p:last-child {
   margin-bottom: 0
}

.sph-twocol__col strong {
   font-weight: 600
}

.sph-twocol__col a {
   color: var(--sph-yellow);
   font-weight: 600
}

.sph-twocol__col a:hover {
   color: var(--sph-orange)
}

/* Hero-Spalte der Soforthilfe-Seite (56.958 % statt 52.727 %) */
.sph-phero__col--wide {
   width: 56.958%
}

/* --------------------------------------------------------------------------
   P12 · BERLIN-BEZIRKSSEITE
   Hero mit Bezirksnamen (Poppins 55px / 72px) statt Fließtext.
   -------------------------------------------------------------------------- */
.sph-lochero__body--district {
   padding: 0 50px 0 50px;
}

.sph-lochero__district {
   font-size: 55px;
   font-weight: 600;
   line-height: 72px;
   color: var(--sph-gray);
   margin-bottom: 24px
}

.sph-locsec--pair {
   padding: 2% 0 4%
}

/* Aufzählung mit klassischen Punkten (Pannenursachen) */
.sph-bullets {
   list-style: disc;
   margin: 0 0 20px;
   padding-left: 28px
}

.sph-bullets li {
   font-size: var(--sph-li-size);
   color: var(--sph-gray);
   padding-block: 3px
}

.sph-txtimg__sub {
   font-size: 2em;
   font-weight: 600;
   line-height: 1.3;
   color: var(--sph-gray);
   margin-bottom: 20px
}

.sph-txtimg__sub .sph-hl {
   color: var(--sph-yellow)
}

/* --------------------------------------------------------------------------
   P10 · FAQ-ILLUSTRATION
   Die frühere FAQ-Variante der Unterseiten (components/faq.php) ist entfallen –
   die Unterseiten nutzen jetzt P14. Übrig bleibt die Bildregel, die noch für
   das FAQ der Startseite (sections/home-faq.php) gilt.
   -------------------------------------------------------------------------- */
.sph-faq__media img {
   max-width: 100%;
   height: auto
}

/* --------------------------------------------------------------------------
   P13 · IMPORTIERTE ABSCHNITTE der Leistungsseiten
   Die Inhalte kommen als fertiges HTML aus dem Backend und bringen eigene
   Überschriften, Absätze und Listen mit – ohne Theme-Klassen. Die Abschnitte
   selbst tragen .sph-txtimg, deshalb greifen P4-Regeln wie `.sph-txtimg h2`
   und `.sph-txtimg p` schon. Hier steht nur, was zusätzlich nötig ist.
   -------------------------------------------------------------------------- */
/* Ohne Bild und ohne Formular läuft der Text über die ganze Breite. */
.sph-txtimg__text--full {
   width: 100%
}

/* Die <div> des Shortcodes sind reine Hüllen ohne eigene Optik. */
.sph-imported__title,
.sph-imported__body {
   display: block
}

/* Abstand zwischen mehreren Textblöcken eines Abschnitts (description_2 …). */
.sph-imported__body+.sph-imported__body {
   margin-top: var(--sph-p-gap)
}

/* h2 kommt aus P4; h1, h3 und h6 stehen zusätzlich im Redaktionstext. */
.sph-imported h1 {
   font-size: 2.5em;
   font-weight: 600;
   line-height: 1.3;
   color: var(--sph-gray);
   margin-bottom: 20px
}

.sph-imported h3 {
   font-size: 1.6em;
   font-weight: 600;
   line-height: 1.3;
   color: var(--sph-gray);
   margin-bottom: 14px
}

.sph-imported h6 {
   font-size: 1.2em;
   font-weight: 600;
   line-height: 1.4;
   color: var(--sph-gray);
   margin-bottom: 12px
}

/* Den hervorgehobenen Teil markiert die Redaktion mit einem nackten <span> –
   in der Vorlage hieß diese Klasse .sph-hl. */
.sph-imported h1 span,
.sph-imported h2 span,
.sph-imported h3 span {
   color: var(--sph-yellow)
}

/* Listen im Redaktionstext. style.css nimmt allen Listen die Punkte; <ul>
   bekommt hier statt eines Punktes das Häkchen-Icon der Vorlage (siehe P15),
   <ol> behält seine Zahlen – ein Icon würde die Nummerierung ersetzen. */
.sph-imported ul,
.sph-imported ol {
   margin: 0 0 var(--sph-p-gap);
   padding-left: 0
}

.sph-imported ol {
   list-style: decimal;
   padding-left: 26px
}

.sph-imported li {
   font-size: var(--sph-li-size);
   line-height: var(--sph-p-line);
   color: var(--sph-gray);
   margin-bottom: 8px
}

/* <b> und <i> wie <strong>/<em>, damit der Fließtext eine Linie behält. */
.sph-imported b {
   font-weight: 600
}

.sph-imported i {
   font-style: italic
}

/* Bilder der importierten Abschnitte – wie .sph-photo rahmenlos und spaltenfüllend. */
.sph-imported__img {
   width: 100%;
   height: auto;
   display: block
}

/* Die Leistungs-Einzelseiten haben bis 1.3.32 als einzige ihre Beschriftungen
   ausgeblendet. Das ist entfallen: der Pflichtstern steckt *in* der
   Beschriftung, ohne sie gab es dort also auch keinen Stern. Jetzt zeigen alle
   Formulare der Seite dasselbe Bild – Beschriftung samt Stern über dem Feld,
   siehe Block 12a in style.css. */

/* Feldaufteilung von Formular 476 (nur Leistungs-Einzelseiten).

   Hier zählt das Theme die Felder NICHT ab. Formular 476 stellt „Name" und
   „Telefon" über ein **Layout-Feld** von WPForms nebeneinander – zwei Spalten
   innerhalb eines einzigen Feldes. Die Zeile kommt also schon aus dem Plugin.

   Genau daran ist die Paarung aus Block 12a gescheitert: dort gelten die ersten
   beiden Felder als Paar, und das Layout-Feld *ist* als Ganzes ein Feld. Gezählt
   wurde damit Layout (1), E-Mail (2), Betreff (3) – die beiden letzten landeten
   in der halben Breite, obwohl sie über die ganze gehören.

   Deshalb hier nur eine einzige Regel: **jedes** Feld über die volle Breite.
   Innerhalb des Layout-Feldes heißt „volle Breite" die volle Breite der Spalte,
   die zwei Spalten bleiben also nebeneinander. Wer die Aufteilung ändern will,
   tut das im Formular selbst (Layout-Feld in WPForms) und nicht hier. */
body.sph-page-service .sph-fbox .wpforms-field {
   flex: 0 0 100% !important;
   width: 100% !important;
   max-width: 100% !important;
}

/* Layout 'locsec' der Standortseiten: dort ist die Überschrift 2em (nicht 2.5em
   wie in P4) und heißt in der Vorlage .sph-locsec__title. Das importierte <h2>
   trägt keine Klasse, deshalb dieselben Werte hier über den Abschnitt. */
.sph-locsec.sph-imported h2 {
   font-size: 2em;
   font-weight: 600;
   line-height: 1.3em;
   color: var(--sph-gray);
   margin-bottom: 20px
}

.sph-locsec.sph-imported h1 {
   font-size: 2.4em;
   font-weight: 600;
   line-height: 1.3;
   color: var(--sph-gray);
   margin-bottom: 20px
}

.sph-locsec__text--full {
   width: 100%;
   padding: 6px
}

/* Bildspalte der Standortseiten bringt keinen eigenen Innenabstand mit. */
.sph-locsec.sph-imported .sph-locsec__media {
   padding: 6px
}

/* Hero der Standortseiten (.sph-lochero) mit Inhalt aus dem Backend.
   Überschrift, Text und die Leistungsliste tragen keine Theme-Klassen. */
.sph-lochero.sph-imported .sph-lochero__body {
   padding-block: 40px
}

.sph-lochero__body--full {
   width: 100%
}

.sph-lochero.sph-imported h1 {
   font-size: 30px;
   font-weight: 600;
   line-height: 35px;
   color: var(--sph-gray);
   margin: 0 0 30px 3px
}

.sph-lochero.sph-imported h2 {
   font-size: 30px;
   font-weight: 600;
   line-height: 35px;
   color: var(--sph-gray);
   margin: 0 0 30px 3px
}

.sph-lochero.sph-imported h1 span,
.sph-lochero.sph-imported h2 span {
   color: var(--sph-yellow)
}

/* Kleiner als im Rest der Seite (sonst 19px Absatz / 17px Liste): die Textspalte
   des Heros ist schmal und steht neben dem Foto. Bewusst feste Werte statt der
   Tokens – nur dieser eine Hero fällt aus der Reihe. */
.sph-lochero.sph-imported p {
   font-size: 17px;
   line-height: var(--sph-p-line);
   color: var(--sph-gray);
   margin-bottom: var(--sph-p-gap)
}

.sph-lochero.sph-imported a {
   color: var(--sph-yellow);
   font-weight: 600
}

.sph-lochero.sph-imported a:hover {
   color: var(--sph-orange)
}

.sph-lochero.sph-imported strong {
   font-weight: 600
}

/* Die Liste im Hero ist die Leistungsliste der Vorlage – Häkchen aus P15. */
.sph-lochero.sph-imported ul {
   margin: 0 0 var(--sph-p-gap);
   padding-left: 0
}

.sph-lochero.sph-imported li {
   font-size: 16px;
   line-height: var(--sph-p-line);
   color: var(--sph-gray);
   padding-block: 3px
}

.sph-lochero__img {
   width: 100%;
   height: auto;
   display: block;
   border-radius: 0 0 20px 0;
   box-shadow: 0 10px 40px -5px rgba(0, 0, 0, .3)
}

/* Hero: Überschrift und Einleitung kommen ebenfalls aus dem Backend und tragen
   keine Klassen. Dieselben Werte wie .sph-phero__title / .sph-phero__text. */
.sph-phero__col h1 {
   font-size: 3em;
   font-weight: 600;
   line-height: 1.2;
   color: #fff;
   margin-bottom: 29px
}

.sph-phero__col h1 span {
   background-image: linear-gradient(100deg, var(--sph-yellow) 0%, var(--sph-orange) 74%);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
}

.sph-phero__col p {
   font-size: var(--sph-lead-size);
   font-weight: 400;
   line-height: var(--sph-p-line);
   color: #fff;
   margin-bottom: var(--sph-p-gap)
}

.sph-phero__col p:last-child {
   margin-bottom: 0
}

/* --------------------------------------------------------------------------
   P14 · FAQ DER LEISTUNGSSEITEN ([page_faq] des Plugins)
   Das Plugin liefert Markup, Logik und ein eigenes <style> mit blauen Werten.
   Die Optik wird nicht neu gebaut, sondern über dessen CSS-Variablen auf die
   Sperhake-Farben gezogen. Alle Regeln brauchen zwei bzw. drei Klassen: das
   <style> des Plugins steht im Body und damit nach dieser Datei, bei gleicher
   Spezifität würde es gewinnen.
   -------------------------------------------------------------------------- */
.sph-pfaq {
   padding: 4% 0;
   background: #fff
}

.sph-pfaq__title {
   font-size: 1.8em;
   font-weight: 600;
   line-height: 1.3;
   color: var(--sph-yellow);
   text-align: center;
   margin-bottom: 30px
}

/* Zwei Spalten wie im FAQ der Vorlage (.sph-faq__inner, 52 % / 48 %):
   Fragen links, Illustration rechts. */
.sph-pfaq__inner {
   display: flex;
   align-items: flex-start;
   padding: 0 10px
}

.sph-pfaq__list {
   width: 52%;
   padding: 0 10px
}

.sph-pfaq__media {
   width: 48%;
   padding: 0 10px;
   display: flex;
   justify-content: center;
   align-items: flex-start
}

.sph-pfaq__media img {
   max-width: 100%;
   height: auto
}

/* Das Plugin stellt ab sieben Einträgen selbst auf zwei Spalten um. In der
   halbbreiten Spalte wäre das zu eng – deshalb hier wieder einspaltig.
   Vier Klassen, damit die Regel gegen die Media-Query des Plugins gewinnt. */
.sph-pfaq__list .page-faq-accordion.pfaq-split .pfaq-grid {
   grid-template-columns: 1fr
}

.sph-pfaq .page-faq-accordion {
   --pfaq-accent: var(--sph-yellow);
   --pfaq-border: #e2e2e2;
   --pfaq-bg: #fff;
   --pfaq-text: var(--sph-gray);
   --pfaq-muted: var(--sph-gray);
}

/* Frage als gelbe Leiste, offen dunkelgrau – wie das FAQ der Startseite. */
.sph-pfaq .page-faq-accordion .pfaq-item {
   border-radius: 10px
}

.sph-pfaq .page-faq-accordion .pfaq-question {
   font-family: "Poppins", Sans-serif;
   font-size: 1.2em;
   background: var(--sph-yellow);
   color: var(--sph-gray);
}

.sph-pfaq .page-faq-accordion .pfaq-question:hover {
   color: #000
}

.sph-pfaq .page-faq-accordion .pfaq-item.open .pfaq-question {
   background: var(--sph-gray);
   color: #fff
}

.sph-pfaq .page-faq-accordion .pfaq-item.open .pfaq-icon {
   background: #fff;
   color: var(--sph-gray)
}

.sph-pfaq .page-faq-accordion .pfaq-answer {
   font-family: "Poppins", Sans-serif;
   font-size: var(--sph-p-size);
   line-height: var(--sph-p-line);
   color: var(--sph-gray);
}

.sph-pfaq .page-faq-accordion .pfaq-answer p {
   margin-bottom: var(--sph-p-gap)
}

.sph-pfaq .page-faq-accordion .pfaq-answer p:last-child {
   margin-bottom: 0
}

/* --------------------------------------------------------------------------
   P18 · PLATZHALTER FÜR DAS PLUGIN-FORMULAR
   Erscheint nur, wenn der Shortcode aus dem Customizer von keinem Plugin
   beansprucht wird (siehe components/form-embed.php). Auf der fertigen Seite
   steht hier das Formular und diese Regeln greifen nie.
   -------------------------------------------------------------------------- */
.sph-formph {
   border: 2px dashed rgba(76, 76, 76, .45);
   border-radius: 10px;
   background: rgba(255, 255, 255, .55);
   padding: 24px;
   text-align: center;
}

.sph-formph__title {
   font-size: 1.1em;
   font-weight: 600;
   color: var(--sph-gray);
   margin-bottom: 8px
}

.sph-formph__text {
   font-size: .9em;
   line-height: var(--sph-p-line);
   color: var(--sph-gray);
   margin-bottom: 12px
}

.sph-formph__code {
   display: inline-block;
   font-family: monospace;
   font-size: .85em;
   background: #fff;
   color: var(--sph-gray);
   padding: 8px 12px;
   border-radius: 6px;
   word-break: break-all;
}

/* --------------------------------------------------------------------------
   P17 · LEUCHTKASTEN der Referenzen-Galerie
   Aufbau kommt aus assets/js/script.js, Abschnitt 7. Ohne JavaScript bleibt der
   Klick ein normaler Bildlink – diese Regeln greifen dann nie.
   -------------------------------------------------------------------------- */
/* cursor:zoom-in bleibt: er zeigt an, dass der Klick die große Ansicht öffnet.
   Der Zoom beim Überfahren ist entfernt, Bilder reagieren nicht mehr. */
.sph-gallery__link {
   display: block;
   line-height: 0;
   cursor: zoom-in;
   overflow: hidden
}

.sph-gallery__link:focus-visible {
   outline: 3px solid var(--sph-yellow);
   outline-offset: 3px
}

/* Solange der Leuchtkasten offen ist, scrollt die Seite darunter nicht mit. */
.sph-noscroll {
   overflow: hidden
}

.sph-lightbox {
   position: fixed;
   inset: 0;
   z-index: 9999;
   display: none;
   align-items: center;
   justify-content: center;
   gap: 10px;
   padding: 24px;
   background: rgba(7, 25, 46, .94);
}

.sph-lightbox.is-open {
   display: flex
}

.sph-lightbox__figure {
   margin: 0;
   max-width: min(1200px, 92vw);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 14px
}

.sph-lightbox__img {
   max-width: 100%;
   max-height: 78vh;
   width: auto;
   height: auto;
   display: block;
   border-radius: 6px
}

.sph-lightbox__caption {
   font-size: var(--sph-p-size);
   line-height: var(--sph-p-line);
   color: #fff;
   text-align: center;
   max-width: 70ch;
}

/* Bedienelemente in den Theme-Farben, gleiche Übergänge wie P16. */
.sph-lightbox__close,
.sph-lightbox__nav {
   flex: none;
   border: 0;
   cursor: pointer;
   background: var(--sph-yellow);
   color: var(--sph-gray);
   font-family: "Poppins", Sans-serif;
   line-height: 1;
   border-radius: 50%;
   transition: background .3s, color .3s, transform .3s;
}

.sph-lightbox__close:hover,
.sph-lightbox__nav:hover {
   background: var(--sph-orange);
   color: #fff;
   transform: scale(1.08)
}

.sph-lightbox__close:focus-visible,
.sph-lightbox__nav:focus-visible {
   outline: 3px solid #fff;
   outline-offset: 3px
}

.sph-lightbox__close {
   position: absolute;
   top: 18px;
   right: 18px;
   width: 46px;
   height: 46px;
   font-size: 30px
}

.sph-lightbox__nav {
   width: 52px;
   height: 52px;
   font-size: 34px;
   font-weight: 600
}

.sph-lightbox__counter {
   position: absolute;
   bottom: 18px;
   left: 0;
   right: 0;
   text-align: center;
   color: #fff;
   font-size: .9em;
}

/* --------------------------------------------------------------------------
   P15 · HÄKCHEN-ICON VOR LISTENPUNKTEN im Redaktionstext
   Die Aufzählungen im Seiteninhalt tragen dasselbe Icon wie die gepflegten
   Listen der Vorlage (components/tick-list.php, Symbol #ic-check-circle).
   Der Inhalt kommt als fertiges <ul><li> aus der Datenbank – dort lässt sich
   kein <svg> einfügen, deshalb als Maske auf ::before. Maske statt
   background-image, damit die Farbe weiter aus --sph-orange kommt und nicht
   in der Data-URI festgeschrieben ist.
   -------------------------------------------------------------------------- */
.sph-imported ul>li,
.sph-prose ul>li,
.sph-bullets>li {
   position: relative;
   list-style: none;
   padding-left: 31px;
}

.sph-imported ul>li:after,
.sph-prose ul>li:after,
.sph-bullets>li:after {
   content: "";
   position: absolute;
   left: 0;
   top: .1em;
   width: 19px;
   height: 19px;
   flex: none;
   background-color: var(--sph-orange);
   -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20512%20512%22%3E%3Cpath%20d=%22M504%20256c0%20136.967-111.033%20248-248%20248S8%20392.967%208%20256%20119.033%208%20256%208s248%20111.033%20248%20248zM227.314%20387.314l184-184c6.248-6.248%206.248-16.379%200-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628%200L216%20308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628%200l-22.627%2022.627c-6.248%206.248-6.248%2016.379%200%2022.627l104%20104c6.249%206.249%2016.379%206.249%2022.628.001z%22/%3E%3C/svg%3E") no-repeat center/contain;
   mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20512%20512%22%3E%3Cpath%20d=%22M504%20256c0%20136.967-111.033%20248-248%20248S8%20392.967%208%20256%20119.033%208%20256%208s248%20111.033%20248%20248zM227.314%20387.314l184-184c6.248-6.248%206.248-16.379%200-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628%200L216%20308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628%200l-22.627%2022.627c-6.248%206.248-6.248%2016.379%200%2022.627l104%20104c6.249%206.249%2016.379%206.249%2022.628.001z%22/%3E%3C/svg%3E") no-repeat center/contain;
}

/* Verschachtelte Listen etwas einrücken, Icon bleibt gleich. */
.sph-imported li>ul,
.sph-prose li>ul {
   margin: 8px 0 0;
   padding-left: 12px
}

/* --------------------------------------------------------------------------
   P16 · HOVER UND ÜBERGÄNGE
   style.css bringt schon `a{transition:color .3s}` und Übergänge auf .sph-btn,
   dem Absende-Button und dem FAQ-Kopf mit. Hier kommen die Elemente dazu, die
   bisher hart umgeschaltet oder gar nicht reagiert haben. Bewusst nur
   Eigenschaften, die der Compositor billig animiert (transform, opacity,
   background, color, box-shadow) – keine Layoutwerte.
   -------------------------------------------------------------------------- */
/* Der Anruf-Button trägt einen laufenden Farbverlauf (style.css) und bekommt
   deshalb keine Hover-Effekte mehr: kein Farbwechsel, kein Anheben, kein
   Schatten, kein Zoom auf dem Symbol. Der Fokusrahmen weiter unten bleibt. */

/* WhatsApp-Button unten rechts. */
.sph-wa {
   transition: transform .3s, box-shadow .3s
}

.sph-wa:hover {
   transform: scale(1.08);
   box-shadow: 0 10px 26px rgba(0, 0, 0, .3)
}

/* Die Rufnummer trägt überall einen Verlauf statt einer Farbe (siehe P4) und
   braucht deshalb keinen Farbübergang mehr. */

/* Bilder reagieren nicht mehr auf den Zeiger. Bis 1.2.0 hoben sich die Fotos
   in den Inhaltsspalten an, die Partnerlogos und die Bilder der Leistungs-
   karten zoomten leicht. Entfernt – die Karte selbst reagiert weiterhin. */

/* Bezirks- und Ortslisten. */
.sph-locs__col a,
.sph-areas__list a {
   transition: color .3s, padding-left .3s
}

.sph-locs__col a:hover,
.sph-areas__list a:hover {
   color: var(--sph-orange);
   padding-left: 4px
}

/* Leistungskarten der Übersicht: nur der Rahmen, das Foto bleibt ruhig. */
.sph-srv__row {
   transition: box-shadow .3s, transform .3s
}

.sph-srv__row:hover {
   box-shadow: 0 12px 30px rgba(0, 0, 0, .1);
   transform: translateY(-3px)
}

/* Fließtextseiten und importierte Abschnitte: Links wechseln nur die Farbe,
   unterstrichen wird auch beim Überfahren nichts. */
.sph-imported a,
.sph-prose a {
   transition: color .3s
}

.sph-imported a:hover,
.sph-prose a:hover {
   color: var(--sph-orange);
   text-decoration: none
}

/* Sichtbarer Tastaturfokus auch auf den neuen Flächen. */
.sph-callbtn:focus-visible,
.sph-wa:focus-visible {
   outline: 3px solid var(--sph-navy);
   outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   P21 · ANFRAGE-SEITE (template-anfrage.php)
   Eine mittige Karte, sonst nichts. Das Formular beginnt mit der Auswahl
   „Was können wir für Sie tun?"; deren Kacheln brauchen die volle Breite der
   Karte, eine Textspalte daneben gibt es deshalb nicht.
   -------------------------------------------------------------------------- */
.sph-anfrage {
   padding: 4% 0 5%;
   background: var(--sph-bluegray)
}

/* Schmaler als der Seitencontainer: eine Formularkarte über 1340px wäre nicht
   mehr zu lesen. Zentriert, der seitliche Abstand kommt wie überall aus
   --sph-gutter. */
.sph-anfrage__inner {
   width: 100%;
   max-width: 900px;
   margin-inline: auto;
   padding-inline: var(--sph-gutter);
}

.sph-anfrage__intro {
   margin-bottom: 26px;
   text-align: center
}

.sph-anfrage__intro p {
   font-size: var(--sph-p-size);
   line-height: var(--sph-p-line);
   color: var(--sph-gray)
}

/* Die Karte trägt hier mehr Innenabstand als in der schmalen Spalte der
   Standortseiten – sie steht allein und darf großzügiger sein. */
.sph-anfrage .sph-fbox {
   padding: 10px 24px 28px
}

/* Feldaufteilung von Formular 490.

   Ziel (siehe Entwurf):

     Was können wir für Sie tun?   volle Breite, Kacheln
     Name | Telefon                eine Zeile, gleich breit
     E-Mail, Betreff, Nachricht,
     Zustimmung                    volle Breite

   Die Paarung aus Block 12a taugt hier nicht: sie nimmt die ersten beiden
   Felder, und das erste ist die Auswahl – die stünde dann halbbreit neben
   „Name". Gezählt werden deshalb nur die **einfachen Textfelder**; Auswahl,
   E-Mail, Nachricht und Zustimmung fallen aus der Zählung und bekommen immer
   die ganze Zeile.

   Damit stimmt die Aufteilung auch dann noch, wenn „E-Mail" im Formular als
   gewöhnliches Textfeld angelegt ist: es wäre dann das dritte gezählte Feld –
   und ab dem dritten gilt ohnehin volle Breite.

   Die vielen :not() sind nicht nur Filter: sie heben die Spezifität über die
   Regeln aus Block 12a, die sonst gewönnen. */

/* 1. Grundform: alles über die volle Breite. */
body.sph-page-anfrage .sph-fbox .wpforms-field {
   flex: 0 0 100% !important;
   width: 100% !important;
   max-width: 100% !important;
}

/* 2. Einfache Textfelder: halbe Breite → Name | Telefon. */
body.sph-page-anfrage .sph-fbox .wpforms-field:not(.wpforms-field-hp):not(.wpforms-field-hidden):not(.wpforms-field-layout):not(.wpforms-field-radio):not(.wpforms-field-checkbox):not(.wpforms-field-textarea):not(.wpforms-field-email):not(.wpforms-field-select) {
   flex: 0 0 calc(50% - 7px) !important;
   width: calc(50% - 7px) !important;
   max-width: calc(50% - 7px) !important;
}

/* 3. Ab dem dritten gezählten Textfeld wieder volle Breite → Betreff. */
body.sph-page-anfrage .sph-fbox .wpforms-field:not(.wpforms-field-hp):not(.wpforms-field-hidden):not(.wpforms-field-layout):not(.wpforms-field-radio):not(.wpforms-field-checkbox):not(.wpforms-field-textarea):not(.wpforms-field-email):not(.wpforms-field-select)~.wpforms-field:not(.wpforms-field-hp):not(.wpforms-field-hidden):not(.wpforms-field-layout):not(.wpforms-field-radio):not(.wpforms-field-checkbox):not(.wpforms-field-textarea):not(.wpforms-field-email):not(.wpforms-field-select)~.wpforms-field:not(.wpforms-field-hp):not(.wpforms-field-hidden):not(.wpforms-field-layout):not(.wpforms-field-radio):not(.wpforms-field-checkbox):not(.wpforms-field-textarea):not(.wpforms-field-email):not(.wpforms-field-select) {
   flex: 0 0 100% !important;
   width: 100% !important;
   max-width: 100% !important;
}

/* Am Telefon steht auch „Name | Telefon" untereinander, und die Karte rückt
   näher an den Bildschirmrand. */
@media (max-width:767px) {
   body.sph-page-anfrage .sph-fbox .wpforms-field:not(.wpforms-field-hp):not(.wpforms-field-hidden):not(.wpforms-field-layout):not(.wpforms-field-radio):not(.wpforms-field-checkbox):not(.wpforms-field-textarea):not(.wpforms-field-email):not(.wpforms-field-select) {
      flex: 0 0 100% !important;
      width: 100% !important;
      max-width: 100% !important;
   }

   .sph-anfrage {
      padding: 8% 0 10%
   }

   .sph-anfrage .sph-fbox {
      padding: 6px 12px 18px
   }

   .sph-anfrage__intro {
      margin-bottom: 18px
   }
}

/* --------------------------------------------------------------------------
   P19 · INHALTE AUS DEN EDITOR-FELDERN (.sph-rich)
   Texte, die im Backend über einen Editor gepflegt werden, bringen ihre <p>
   selbst mit. Bis 1.2.2 standen an diesen Stellen einzelne Absätze, die die
   Vorlage selbst ausgab – ein <p class="sph-video__text">Text</p>. Ein <p> darf
   aber kein <p> enthalten: der Browser bricht das äußere Element beim ersten
   inneren auf, Klasse und Formatierung wären ab dort weg. Deshalb ist die Hülle
   jetzt ein <div> mit derselben Klasse plus .sph-rich.

   Die Klassen der Vorlage (Schriftgröße, Farbe, Ausrichtung) greifen weiter, die
   inneren <p> erben sie. Nur der Abstand zwischen zwei Absätzen fehlt: style.css
   nimmt allen <p> ihren Außenabstand (h1…p{margin:0}). Den gibt diese Regel
   zurück – und beim letzten Absatz wieder weg, sonst zählt er doppelt zum
   Abstand der Hülle nach unten.
   -------------------------------------------------------------------------- */
.sph-rich>p {
   margin-bottom: var(--sph-p-gap)
}

.sph-rich>p:last-child {
   margin-bottom: 0
}

.sph-rich>ul,
.sph-rich>ol {
   margin: 0 0 var(--sph-p-gap)
}

.sph-rich>ol {
   list-style: decimal;
   padding-left: 26px
}

.sph-rich>ul>li,
.sph-rich>ol>li {
   font-size: var(--sph-li-size);
   line-height: var(--sph-p-line);
   padding-block: 3px
}

/* --------------------------------------------------------------------------
   P20 · EIGENES HTML AUS DER META-BOX (Position „Ende des Seiteninhalts")
   Nur eine Kante, kein Innenabstand: enthält der Block ausschließlich ein
   <script> (der übliche Fall bei strukturierten Daten), hat die Hülle damit
   keine Höhe und fällt nicht auf. Sichtbares Markup steht dagegen an derselben
   linken und rechten Kante wie der Inhalt darüber.
   -------------------------------------------------------------------------- */
.sph-extrahtml {
   width: 100%;
   max-width: var(--sph-container);
   margin-inline: auto;
   padding-inline: var(--sph-gutter)
}

/* Wer Bewegung reduziert haben will, bekommt keine. */
@media (prefers-reduced-motion:reduce) {

   *,
   *::before,
   *::after {
      transition-duration: .01ms !important;
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important
   }

   /* Das Laufband hält an, statt auf seine Endposition zu springen. */
   .sph-partners__track {
      animation: none !important;
      transform: none !important
   }
}

/* --------------------------------------------------------------------------
   RESPONSIVE (Breakpoints der Vorlage: 1400 / 1024 / 767)
   -------------------------------------------------------------------------- */
@media (max-width:1400px) {

   /* Die Seitenabstände hängen jetzt an --sph-gutter (style.css); die früheren
     Einzelregeln je Container sind damit überflüssig. */
   .sph-locs__block {
      padding-left: 40px
   }

   /* Das Motiv liegt jetzt als <img> in der Ebene, deshalb object- statt
     background-position – gemeint ist derselbe Bildausschnitt wie vorher. */
   .sph-callband__overlay .sph-bgimg {
      object-position: center right
   }
}

@media (max-width:1024px) {

   /* FAQ der Standort- und Leistungsseiten stapelt wie das FAQ der Startseite. */
   .sph-pfaq__inner {
      flex-wrap: wrap
   }

   .sph-pfaq__list,
   .sph-pfaq__media {
      width: 100%
   }

   .sph-pfaq__media {
      margin-top: 24px
   }

   .sph-phero {
      padding: 14% 0
   }

   .sph-phero__inner {
      flex-wrap: wrap
   }

   .sph-phero__col {
      width: 100%
   }

   .sph-phero__title,
   .sph-phero__col h1 {
      font-size: 2.4em
   }

   /* Die Box ist am Desktop absolut positioniert und ragt in den Hero.
     Ab hier läuft sie im Fluss mit – Position UND feste Höhen zurücksetzen,
     sonst überlappt sie die Badges. */
   .sph-trust {
      height: auto;
      padding-bottom: 30px
   }

   .sph-trust__inner {
      flex-wrap: wrap;
      justify-content: center;
      gap: 24px;
      height: auto
   }

   .sph-trust__badges {
      width: 100%;
      justify-content: center
   }

   .sph-trust__box {
      position: static;
      width: 100%;
      height: auto;
      margin-top: 24px;
      padding: 26px 20px
   }

   .sph-srv {
      padding: 60px 0 90px
   }

   .sph-srv__row {
      flex-wrap: wrap
   }

   .sph-srv__row--rev {
      flex-direction: column-reverse
   }

   /* Bild über die volle Kartenbreite statt fester 315px. */
   .sph-srv__media,
   .sph-srv__body {
      width: 100%;
      flex: auto
   }

   .sph-srv__media img {
      width: 100%;
      height: auto;
      aspect-ratio: 1/1;
      object-fit: cover
   }

   .sph-srv__body {
      padding: 24px 20px 30px 20px
   }

   .sph-txtimg__inner {
      flex-wrap: wrap;
      padding-inline: 20px
   }

   .sph-txtimg__text,
   .sph-txtimg__media,
   .sph-txtimg__form {
      width: 100%;
      padding: 0;
      margin-left: 0
   }

   .sph-txtimg__media {
      margin-top: 26px;
      justify-content: center
   }

   .sph-callband__inner {
      flex-wrap: wrap
   }

   .sph-callband__col,
   .sph-callband__side {
      width: 100%
   }

   .sph-callband__overlay .sph-bgimg {
      object-position: center left
   }

   .sph-khero__inner,
   .sph-kmain__inner {
      flex-wrap: wrap
   }

   .sph-khero__col,
   .sph-khero__media,
   .sph-kmain__info,
   .sph-kmain__formcol {
      width: 100%;
      padding: 2%
   }

   .sph-khero__title {
      font-size: 2.6em
   }

   .sph-khero__text,
   .sph-phero__text,
   .sph-phero__col p {
      font-size: var(--sph-p-size)
   }

   .sph-fbox__title {
      font-size: 2em
   }

   .sph-twocol__cols {
      flex-wrap: wrap
   }

   .sph-twocol__col {
      width: 100%;
      padding: 7px 0
   }

   .sph-gallery__item {
      width: 50%
   }

   .sph-locs__col {
      width: 50%
   }

   .sph-lochero__inner {
      flex-wrap: wrap
   }

   .sph-lochero__media,
   .sph-lochero__body {
      width: 100%
   }

   .sph-lochero__body,
   .sph-lochero__body--district {
      padding: 26px 15px 40px;
   }

   .sph-lochero__district {
      font-size: 38px;
      line-height: 1.2
   }

   .sph-locsec__inner {
      flex-wrap: wrap;
      padding-inline: 15px;
   }

   .sph-locsec__text,
   .sph-locsec__media,
   .sph-locsec__form,
   .sph-locsec__half {
      width: 100%;
      padding: 2% 0
   }

   /* ------------------------------------------------------------------
     SCHRIFTGRÖSSEN BIS 1024px (Tablet)
     Dieselbe Skala wie im 1024er-Block von style.css: 2.5em → 2em,
     2em → 1.7em, 1.5em → 1.3em. Ab hier stehen Text und Bild
     übereinander, die Überschriften bekommen die volle Spaltenbreite
     und dürfen deshalb nicht mehr auf Desktop-Größe stehen.
     Die Tokens für Absätze und Listen setzt style.css.
     ------------------------------------------------------------------ */

   /* h2 – Sektionstitel (Desktop 2.4em/2.5em/3em) */
   .sph-txtimg h2,
   .sph-callband__title,
   .sph-twocol__title,
   .sph-imported h1,
   .sph-locsec.sph-imported h1 {
      font-size: 2em
   }

   .sph-gallery__title {
      font-size: 2.2em
   }

   /* h3 – Unterabschnitte (Desktop 2em). .sph-locsec.sph-imported h2 ist
     spezifischer als .sph-txtimg h2 und braucht seine eigene Zeile. */
   .sph-srv__body h3,
   .sph-locs__title,
   .sph-locsec__title,
   .sph-locsec.sph-imported h2,
   .sph-txtimg__sub {
      font-size: 1.7em
   }

   .sph-imported h3 {
      font-size: 1.45em
   }

   .sph-pfaq__title {
      font-size: 1.5em
   }

   /* h4/h5 – Karten, Fragen, Auszeichnungen */
   .sph-imported h6 {
      font-size: 1.1em
   }

   .sph-pfaq .page-faq-accordion .pfaq-question {
      font-size: 1.1em
   }

   .sph-trust__boxnum {
      font-size: 2.4em
   }

   .sph-trust__boxlabel {
      font-size: 1.3em
   }

   .sph-telline__num {
      font-size: 2.2em
   }

   .sph-telline__icon {
      width: 50px;
      height: 50px
   }

   /* Standort-Hero: feste Pixel in der Basisregel, deshalb auch hier fest.
     line-height muss mit, sonst bleiben die 35px aus der Basisregel und
     die Zeilen kleben bei kleinerer Schrift aneinander. */
   .sph-lochero__title,
   .sph-lochero.sph-imported h1,
   .sph-lochero.sph-imported h2 {
      font-size: 26px;
      line-height: 1.25
   }
}

@media (max-width:767px) {

   .sph-phero__title,
   .sph-phero__col h1 {
      font-size: 2em
   }

   .sph-btn {
      font-size: 1.1em
   }

   .sph-trust__badges {
      flex-wrap: wrap;
      gap: 20px
   }

   .sph-trust__badge {
      width: 100%;
      max-width: 100%
   }

   .sph-trust__box {
      padding: 5% 5%
   }

   .sph-trust__boxnum {
      font-size: 1.8em
   }

   .sph-trust__boxlabel {
      font-size: 1.2em
   }

   .sph-trust__boxicon {
      width: 47px;
      height: 47px;
      margin-right: 16px
   }

   .sph-gallery__item {
      width: 100%
   }

   /* Leuchtkasten am Telefon: Pfeile unter das Bild, damit es breit bleibt. */
   .sph-lightbox {
      flex-wrap: wrap;
      padding: 16px
   }

   .sph-lightbox__figure {
      order: 1;
      width: 100%
   }

   .sph-lightbox__nav {
      order: 2;
      width: 46px;
      height: 46px;
      font-size: 28px
   }

   .sph-lightbox__img {
      max-height: 64vh
   }

   .sph-locs__col {
      width: 100%
   }

   .sph-locs__block {
      padding-left: 20px
   }

   .sph-telline__num {
      font-size: 1.5em
   }

   .sph-telline__icon {
      width: 42px;
      height: 42px
   }

   /* ------------------------------------------------------------------
     SCHRIFTGRÖSSEN BIS 767px (Telefon)
     Zweite Stufe der Skala: 2em → 1.75em, 1.7em → 1.5em. Die
     Grundschrift steht hier auf 1rem, die em-Werte fallen dadurch
     zusätzlich um 9 %.
     ------------------------------------------------------------------ */

   /* h2 – Sektionstitel */
   .sph-txtimg h2,
   .sph-callband__title,
   .sph-twocol__title,
   .sph-imported h1,
   .sph-locsec.sph-imported h1 {
      font-size: 1.75em
   }

   .sph-gallery__title {
      font-size: 1.9em
   }

   .sph-khero__title {
      font-size: 2em
   }

   .sph-fbox__title {
      font-size: 1.6em
   }

   /* h3 – Unterabschnitte */
   .sph-srv__body h3,
   .sph-locs__title,
   .sph-locsec__title,
   .sph-locsec.sph-imported h2,
   .sph-txtimg__sub {
      font-size: 1.5em
   }

   .sph-imported h3 {
      font-size: 1.3em
   }

   .sph-pfaq__title {
      font-size: 1.35em
   }

   /* h4/h5 – Karten, Fragen. Unter 1.05em wäre der Unterschied zum
     Fließtext nicht mehr zu sehen, deshalb endet die Skala hier. */
   .sph-imported h6 {
      font-size: 1.1em
   }

   .sph-pfaq .page-faq-accordion .pfaq-question {
      font-size: 1.05em
   }

   /* Standort-Hero und die große Bezirkszeile darüber. */
   .sph-lochero__title,
   .sph-lochero.sph-imported h1,
   .sph-lochero.sph-imported h2 {
      font-size: 23px;
      line-height: 1.3;
      margin-bottom: 15px;
      margin-left: 0pc;
   }

   .sph-lochero__district {
      font-size: 28px;
      line-height: 1.25
   }
}

section#abschnitt-2.sph-locsec {
   padding-top: 8%;
}

.page-template-template-service.sph-page-service .sph-phero__col p {
   margin-bottom: 20px;
}

@media only screen and (max-width:1024px) {
   .sph-lochero__media img {
      position: relative;
      width: 100%;
   }
   .sph-lochero__body {
      min-height: unset;
   }
	.mob_top_pd {
		padding-top: 0;
	}
}


.back-to-top {
   position: fixed;
   right: 25px;
   bottom: 25px;
   width: 50px;
   height: 50px;
   border: none;
   border-radius: 50%;
   background: #ff703c;
   color: #fff;
   font-size: 24px;
   line-height: 1;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   visibility: hidden;
   transform: translateY(20px);
   transition: all 0.3s ease;
   z-index: 9999;
}

.back-to-top.show {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
}

.back-to-top:hover {
   background: #e85d2d;
}

@media (max-width: 767px) {
   .back-to-top {
      right: 16px;
      bottom: 72px;
      width: 50px;
      height: 50px;
      font-size: 20px;
   }
}


/* .page-id-155 .sph-js .sph-clamp {
    max-height: unset !important;
}

.page-id-155 .sph-js .sph-clamp::after {
    display: none !important;
}

.page-id-155 button.sph-clamp__toggle {
    display: none !important;
} */


.page-id-155 section#abschnitt-2 .sph-locsec__media, .page-id-197 section#abschnitt-2 .sph-locsec__media{
    max-width: 483px;
}

.page-id-155  section#abschnitt-2 .sph-locsec__inner, .page-id-197 section#abschnitt-2 .sph-locsec__inner {
    justify-content: space-between;
}