/*
Theme Name:   Sperhake Abschleppdienst
Theme URI:    https://abschleppdienst-sperhake.de/
Author:       List&Sell
Author URI:   https://listandsell.de/
Description:  Maßgeschneidertes Theme für die Abschleppdienst Sperhake GmbH in Berlin. Nachbau der Elementor-Seite mit eigenen Klassen (sph-*), ohne Page-Builder. Enthält Seitenvorlagen für Startseite, Leistungen, Pannenhilfe, Soforthilfe, Kontakt, Referenzen, Standorte und Standort-Detailseiten.
Version:      1.2.2
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  sperhake
Tags:         custom-menu, featured-images, translation-ready, block-styles
*/

/* Diese Datei ist der Basis-Stylesheet des Themes. Die Sektionen der
   Unterseiten stehen in assets/css/pages.css und werden zusätzlich geladen. */
/* ==========================================================================
   Abschleppdienst Sperhake – Rebuild
   Eigene Klassen, kein Elementor. Tailwind wird nur ergänzend geladen.
   ========================================================================== */

:root{
  --sph-yellow:#F9B022;
  --sph-orange:#FF703C;
  --sph-gray:#4C4C4C;
  --sph-navy:#23364D;
  --sph-dark:#07192E;
  --sph-light:#F6F6F6;
  --sph-bluegray:#F5F6FA;
  --sph-footer:#001C38;
  --sph-container:1340px;
  /* Seitlicher Abstand innerhalb des Containers. Steht an einer Stelle, damit
     Kopfzeile und alle Sektionen dieselbe Kante haben; die Breakpoints setzen
     ihn weiter unten neu. */
  --sph-gutter:10px;

  /* Fließtext – eine Quelle für alle Absätze im ganzen Theme.
     Feste Pixelwerte: Absätze und Listen sollen überall gleich groß sein,
     unabhängig davon, wie groß die Schrift des umgebenden Blocks ist. */
  --sph-p-size:19px;             /* Absätze */
  --sph-li-size:17px;            /* Aufzählungen im Seiteninhalt */
  --sph-p-line:1.5;
  --sph-p-gap:20px;              /* Abstand zwischen zwei Absätzen */
  --sph-lead-size:1.2em;         /* Vorspann in den Heroes */
}

*,*::before,*::after{box-sizing:border-box}

html{font-size:16px;scroll-behavior:smooth}

body{
  margin:0;
  font-family:"Poppins",Sans-serif;
  font-size:1.1rem;              /* 17.6px – Basisgröße der Vorlage */
  font-weight:400;
  line-height:1.5;
  color:var(--sph-gray);
  background:#fff;
  overflow-x:hidden;
  /* Lange Komposita wie „Güterschadenhaftpflichtversicherung" oder
     „Datenschutzerklärung" sprengen sonst schmale Spalten. */
  overflow-wrap:break-word;
}

img{max-width:100%;height:auto;display:block}

/* Flächendeckendes Bild hinter dem Inhalt einer Sektion.
   Hintergrundbilder stehen im Theme als <img> im Markup, nicht als
   background-image im CSS: nur so tragen sie einen Alternativtext, lassen sich
   vorziehen (fetchpriority) oder nachladen (loading="lazy") und erscheinen in
   der Bildersuche. object-fit:cover leistet dasselbe wie background-size:cover,
   object-position dasselbe wie background-position.

   Bedingungen an der Sektion: position:relative (sonst legt sich das Bild über
   die ganze Seite) und ein positionierter Inhalt darüber – absolut Positioniertes
   liegt sonst über allem, was im Fluss steht. Deshalb tragen die Inhaltshüllen
   position:relative und z-index.

   height:100% muss hier stehen, weil die Regel darüber allen Bildern
   height:auto gibt. */
.sph-bgimg{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center center;
}
a{color:var(--sph-yellow);font-weight:600;text-decoration:none;transition:color .3s}
/* Links werden nie unterstrichen – auch nicht beim Überfahren. */
a:hover{color:var(--sph-orange);text-decoration:none}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,h4,h5,h6,p{margin:0}
/* Geladen sind nur 400, 600 und 900 (siehe assets/fonts/fonts.css). Ohne diese
   Zeile landet jedes ungestylte <strong>, <b> oder <th> auf dem Browser-Wert
   „bold" (700) – und den ordnet der Browser mangels 700er-Schnitt dem 900er zu,
   also der schwersten Poppins. Alles Fette der Seite gehört auf 600. */
b,strong,th,h1,h2,h3,h4,h5,h6,dt,legend,optgroup{font-weight:600}

.sph-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ==========================================================================
   CONTAINER – eine Breite für die ganze Seite
   Bis 1.2.0 hatte fast jede Sektion ihre eigene Maximalbreite (1143, 1250,
   1300, 1321, 1450 …). Die Ränder liefen dadurch von Abschnitt zu Abschnitt
   unterschiedlich weit nach außen. Jetzt teilen sich alle diese Regel, damit
   Kopfzeile und Inhalt dieselbe linke und rechte Kante haben.
   Wer eine Sektion bewusst schmaler will, setzt die Breite auf dem *inneren*
   Element – nicht auf dem Container.
   ========================================================================== */
.sph-container,
.sph-phero__inner,
.sph-khero__inner,
.sph-srv__list,
.sph-txtimg__inner--narrow,
.sph-locsec__inner,
.sph-readmore__wrap,
.sph-steps__grid,
.sph-services__grid,
.sph-gallery__grid{
  width:100%;max-width:var(--sph-container);margin-inline:auto;
  padding-inline:var(--sph-gutter);
}

/* ==========================================================================
   01 · TOPBAR
   ========================================================================== */
.sph-topbar{background:var(--sph-navy)}
/* Seitlicher Abstand kommt aus .sph-container, damit die Zeile exakt so weit
   außen steht wie der Inhalt darunter. */
.sph-topbar__inner{display:flex;align-items:center;justify-content:space-between;padding-block: 10px;}

.sph-topbar__contact{display:flex;align-items:center;gap:18px}
.sph-topbar__contact a{display:inline-flex;align-items:center;gap:10px;color:#fff;font-size:15px;font-weight:400}
.sph-topbar__contact a:hover{color:var(--sph-yellow)}
.sph-topbar__icon{width:14px;height:14px;fill:var(--sph-yellow);flex:none;transition:fill .3s}
.sph-topbar__contact a:hover .sph-topbar__icon{fill:#fff}

.sph-topbar__cta{display:flex;align-items:center;gap:15px}
.sph-topbar__label{color:#fff;font-size:15px;font-weight:600}
.sph-topbar__arrow{width:24px;height:24px;fill:#fff;flex:none}
.sph-topbar__btn{
  position:relative;
  display:inline-flex;align-items:center;gap:10px;
  background:var(--sph-yellow);color:#000;
  font-family:"Poppins",Sans-serif;font-size:17px;font-weight:600;line-height:1;
  padding:13px 35px;
}
/* Navy-Keil an der linken Kante, der in die gelbe Fläche schneidet. */
.sph-topbar__btn::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:0;
  border-left:14px solid var(--sph-navy);
  border-top:23px solid transparent;
  border-bottom:21px solid transparent;
}
.sph-topbar__btn:hover{background:#fff;color:#000}
.sph-topbar__btnicon{width:17px;height:17px;fill:currentColor;flex:none}

/* ==========================================================================
   02 · HAUPTNAVIGATION
   ========================================================================== */
.sph-nav{background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.102);position:relative;z-index:30}
.sph-nav__inner{display:flex;align-items:center;padding: 15px 10px;/* min-height:107px; */justify-content: space-between;}

/* Logo bündig zur linken Containerkante, Hotline bündig zur rechten – beide
   ohne eigenen Außenabstand, der Rand kommt von .sph-container. */
.sph-nav__brand{width:10.575%;padding:0;position:relative;align-self:stretch;flex-basis: 140px;}
.sph-nav__logo{position:absolute;top: -5px;left:0;width: 119px;max-width:none}

.sph-nav__menuwrap{/* width:61.671%; */padding:0 10px;border-right:1px solid var(--sph-yellow);display:flex;justify-content:flex-end;width: auto;margin-left: auto;}
.sph-nav__menu{display:flex;align-items:center;height:41px}
.sph-nav__menu > li{position:relative}
.sph-nav__menu > li > a{
  display:flex;align-items:center;gap:6px;
  font-size:18px;font-weight:400;text-transform:uppercase;color:#000;padding:0 15px;
}
.sph-nav__menu > li > a:hover,
.sph-nav__menu > li > a.is-current{color:#707070}
.sph-nav__caret{width:11px;height:11px;fill:#101010;flex:none}

.sph-nav__sub{
  position:absolute;top:100%;left:0;min-width:260px;background:#fff;
  padding:15px 0;box-shadow:0 10px 28px rgba(0,0,0,.18);border:1px solid #218DAB;
  opacity:0;visibility:hidden;transform:translateY(10px);transition:.25s;z-index:40;
}
.sph-nav__has-sub:hover .sph-nav__sub{opacity:1;visibility:visible;transform:translateY(0)}

/* --------------------------------------------------------------------------
   MEGA-MENÜ unter „Leistungen" (header/mega-menu.php)
   Der Eintrag steht auf position:static, damit sich das Panel nicht an ihm
   ausrichtet, sondern an .sph-nav – nur so läuft es über die volle Breite.
   Aufklappen ohne JavaScript: :hover für die Maus, :focus-within für Tastatur.
   -------------------------------------------------------------------------- */
.sph-nav__menu > li.sph-nav__has-sub{position:static}
.sph-nav__mega{
  position:absolute;top:100%;left:0;right:0;z-index:40;
  background:#fff;
  border-top:3px solid var(--sph-yellow);
  box-shadow:0 18px 40px rgba(0,0,0,.16);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s ease,transform .25s cubic-bezier(.2,.8,.2,1),visibility .25s;
}
.sph-nav__has-sub:hover .sph-nav__mega,
.sph-nav__has-sub:focus-within .sph-nav__mega{opacity:1;visibility:visible;transform:translateY(0)}

.sph-nav__megainner{display:flex;align-items:stretch;gap:30px;padding-block:28px}
.sph-nav__megacol{flex:1 1 0;min-width:0}
.sph-nav__megacol li + li{margin-top:4px}
.sph-nav__megacol a{
  display:flex;align-items:center;gap:14px;
  padding:10px 12px;border-radius:10px;
  color:#000;font-size:16px;font-weight:400;
  transition:background .25s,color .25s;
}
.sph-nav__megacol a:hover{background:var(--sph-light);color:var(--sph-orange)}
/* Heller Kreis hinter dem farbigen Symbol, damit die Zeilen eine Kante haben. */
.sph-nav__megaicon{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;background:var(--sph-light);
  transition:background .25s,transform .25s cubic-bezier(.2,.8,.2,1);
}
.sph-nav__megaicon img{width:30px;height:30px}
.sph-nav__megacol a:hover .sph-nav__megaicon{background:#fff;transform:scale(1.08)}

/* Dritte Spalte: Handlungsaufruf */
.sph-nav__megacta{
  flex:0 0 360px;
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  background:var(--sph-navy);border-radius:14px;
  padding:24px 22px;
}
.sph-nav__megactalabel{font-size:21px;font-weight:600;line-height:1.3;color:#fff}
.sph-nav__megactatext{font-size:15px;line-height:1.5;color:rgba(255,255,255,.82)}
.sph-nav__megactabtn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--sph-yellow);color:#000;
  font-family:"Poppins",Sans-serif;font-size:16px;font-weight:600;line-height:1;
  padding:13px 24px;border-radius:8px;
  transition:background .3s;
}
.sph-nav__megactabtn:hover{background:#fff;color:#000}
.sph-nav__megactaicon{width:16px;height:16px;fill:currentColor;flex:none}
/* Der Anruf-Knopf ist für die schmale Spalte gebaut – Pfeilspitze weg. */
.sph-nav__megacta .sph-callbtn{width:100%;clip-path:none;border-radius:8px}
.sph-nav__sub a{display:flex;align-items:center;gap:12px;padding:12px 20px;color:#000;font-size:16px;font-weight:400}
.sph-nav__sub a:hover{color:#707070}
.sph-nav__subicon{width:16px;height:16px;fill:var(--sph-yellow);flex:none}

.sph-nav__hotline{/* width:27.418%; */padding:0 0 0 10px;display:flex;align-items:center;gap:16px;flex-basis: 258px;}
.sph-nav__hotline-icon{width:40px;flex:none}
.sph-nav__hotline-body{display:block}
.sph-nav__hotline-label{display:block;font-size:18px;font-weight:400;color:var(--sph-gray);line-height:1.4}
.sph-nav__hotline-number{display:block;font-size:24px;font-weight:600;font-style:italic;color:var(--sph-yellow);line-height:1.3}
.sph-nav__hotline:hover .sph-nav__hotline-number{color:var(--sph-orange)}

.sph-nav__burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.sph-nav__burger span{display:block;width:26px;height:3px;margin:4px 0;background:rgba(0,0,0,.5)}

/* Anfrage-Knopf der schmalen Kopfzeile – erst ab 1024px abwärts sichtbar
   (siehe Responsive-Block). Gleiche Form und Maße wie der Anfrage-Knopf der
   Topbar (.sph-topbar__btn in 01): Rechteck mit Kerbe links, keine Pfeilspitze
   rechts. Die Topbar legt die Kerbe als navyfarbenes Dreieck darüber – das geht
   nur auf ihrem eigenen Grund. Hier schneidet sie clip-path aus dem Knopf, damit
   sie auf dem weißen Grund der Kopfzeile genauso aussieht. */
.sph-nav__cta{
  display:none;align-items:center;gap:10px;
  background:var(--sph-yellow);color:#000;
  font-family:"Poppins",Sans-serif;font-size:17px;font-weight:600;line-height:1;
  padding:13px 35px;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%,14px 50%);
  transition:background .3s;
}
/* Der Topbar-Knopf wird beim Überfahren weiß – auf der weißen Kopfzeile bliebe
   davon nur die Schrift übrig, deshalb hier das dunklere Gelb. */
.sph-nav__cta:hover{background:#F5A50C;color:#000}
.sph-nav__ctaicon{width:17px;height:17px;fill:currentColor;flex:none}

/* ==========================================================================
   03 · HERO
   ========================================================================== */
/* Das Foto liegt als <img class="sph-bgimg"> im Markup, siehe sections/home-hero.php. */
.sph-hero{
  position:relative;overflow:hidden;
  padding:7% 0 10%;
}
.sph-hero__overlay{
  position:absolute;inset:0;
  background:linear-gradient(130deg,#07192E 41%,#07192EA1 100%);
  opacity:.71;
}
.sph-hero__inner{position:relative;z-index:2;display:flex}
.sph-hero__col{width:56.958%;padding:0 10px}

.sph-hero__welcome{font-size:26px;font-weight:600;line-height:1.5;color:#fff;margin-bottom:20px}
.sph-hero__title{
  font-size:3.1em;font-weight:900;line-height:1.2;margin-bottom:20px;
  background-image:linear-gradient(100deg,var(--sph-yellow) 0%,var(--sph-orange) 74%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sph-hero__usps{margin-bottom:20px}
.sph-hero__usps li{display:flex;align-items:center;gap:12px;color:#fff;font-size:1.2em;font-weight:400;padding-block:7px}
.sph-hero__hook{width:24px;height:24px;fill:var(--sph-yellow);flex:none}

/* Die Rufnummer im Hero ist derselbe Baustein wie auf allen Unterseiten:
   components/tel-line.php mit .sph-telline (Regeln in pages.css, P4). Bis
   1.2.0 stand hier eine eigene, fast gleiche Fassung als .sph-hero__phone. */

.sph-hero__badges{display:flex;align-items:center;gap:26px;padding-top:16px}
.sph-hero__badges img{max-height:98px;width:auto}
.sph-hero__badge-google{border-radius:20px}

/* ==========================================================================
   04 · USP-BOXEN (überlappend)
   ========================================================================== */
.sph-usp{padding-left:40%;margin-top:-120px;position:relative;z-index:5}
.sph-usp__inner{display:flex;align-items:stretch}
.sph-usp__box{
  width:33.3333%;min-height:243px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;
  padding:38px;text-align:center;
  background-image:linear-gradient(60deg,var(--sph-yellow) 0%,var(--sph-orange) 100%);
}
.sph-usp__box--first{border-radius:40px 0 0 40px}
.sph-usp__box--last{border-radius:0 40px 40px 0}
/* Das Abschlepp-Icon bringt eine schwarze Grundfüllung mit – hier wird,
   wie in der Vorlage, durchgehend weiß gezeichnet. */
.sph-usp__icon{width:44px;height:44px;fill:#fff;flex:none}
.sph-usp__icon *{fill:#fff}
.sph-usp__box h3{font-size:1.1em;font-weight:600;line-height:1.5;color:#fff}

/* ==========================================================================
   05 · WARUM WIR
   ========================================================================== */
.sph-why{padding:5% 0;background:#fff}
.sph-why__inner{padding:0 10px}
.sph-why__title{font-size:2.5em;font-weight:600;line-height:1.3;color:var(--sph-gray);text-align:center;margin-bottom:20px}
.sph-why__subtitle{font-size:1.5em;font-weight:400;line-height:1.3;color:var(--sph-gray);text-align:center;margin-bottom:20px}
.sph-why__text{font-size:var(--sph-p-size);font-weight:400;line-height:var(--sph-p-line);color:var(--sph-gray);text-align:center;margin-bottom:var(--sph-p-gap)}
.sph-why__text strong{font-weight:600}

.sph-why__grid{display:flex;flex-wrap:wrap;margin-top:10px}
.sph-why__card{width:25%;padding: 7px;position:relative;text-align:center}
.sph-why__card::before{
  content:"";position:absolute;inset:15px;border-radius:15px;background:#fff;
  box-shadow:0 10px 60px rgba(0,0,0,.1);
}
.sph-why__card > *{position:relative;z-index:1}
.sph-why__icon{margin:30px auto 0;display:block;height:auto}
.sph-why__card h3{font-size:1.3em;font-weight:600;line-height:1.2;color:var(--sph-gray);margin:15px 30px}
.sph-why__card p{font-size: 16px;font-weight:400;line-height:var(--sph-p-line);color: #00000096;margin:0 30px 30px}

/* ==========================================================================
   06 · BEKANNT AUS
   ========================================================================== */
.sph-press{padding: 0 0 70px;}
.sph-press__box{
  width:79.664%;
  margin-inline:auto;
  padding:36px;
  box-shadow: 3px 4px 33px rgb(0 0 0 / 9%);
  background:#fff;
  text-align:center;
  border-radius: 20px;
}
.sph-press__title{font-size:1.5em;font-weight:600;color:var(--sph-yellow);margin-bottom:20px}
.sph-press__text{font-size:var(--sph-p-size);line-height:var(--sph-p-line);color:var(--sph-gray);margin-bottom:var(--sph-p-gap)}
.sph-press__logo{display:inline-block;margin-inline:auto;height:62px;width:auto}

/* ==========================================================================
   07 · VIDEO / UNTERSTÜTZUNG
   ========================================================================== */
.sph-video{background:#fff}
.sph-video__band{background:var(--sph-gray);padding: 60px 0 124px;}
.sph-video__title{font-size:2.5em;font-weight:600;line-height:1.3;color:var(--sph-yellow);text-align:center;margin-bottom:20px;padding:0 10px}
.sph-video__text{font-size:var(--sph-p-size);line-height:var(--sph-p-line);color:#fff;text-align:center;padding:0 10px;max-width:1100px;margin-inline:auto}

.sph-video__player{
  position:relative;width:100%;max-width:940px;margin:-77px auto 40px;
  aspect-ratio:16/9;overflow:hidden;background:#000;cursor:pointer;
}
.sph-video__player img,
.sph-video__player iframe{width:100%;height:100%;object-fit:cover;border:0;display:block}
.sph-video__play{
  position:absolute;inset:0;margin:auto;width:68px;height:48px;
  background:none;border:0;padding:0;cursor:pointer;
}
.sph-video__play svg{width:68px;height:48px}
.sph-video__play-bg{fill:#212121;fill-opacity:.8;transition:fill .2s}
.sph-video__play:hover .sph-video__play-bg{fill:#f00;fill-opacity:1}

/* ==========================================================================
   08 · WIE WIR ARBEITEN
   ========================================================================== */
.sph-steps{background:var(--sph-bluegray)}
.sph-steps__head{padding:3% 10px 1%;text-align:center}
.sph-steps__title{font-size:2.5em;font-weight:600;line-height:1.3;color:var(--sph-gray);margin-bottom:10px}
.sph-steps__subtitle{font-size:1.5em;font-weight:400;line-height:1.3;color:var(--sph-gray)}

.sph-steps__wrap{padding:5% 0 11%}
.sph-steps__grid{display:flex;align-items:flex-start}
.sph-steps__col{width:25%;position:relative}
.sph-steps__col > .sph-steps__item{padding: 1% 1% 1% 9%;}
.sph-steps__col--down > .sph-steps__item{padding-top: 12%;}
.sph-steps__col--up{/* margin-top:-55px; */}
.sph-steps__col--down2 > .sph-steps__item{padding-top: 8%;}

.sph-steps__item{margin:0;text-align:center}
.sph-steps__img{width:80%;margin:0 auto 15px;border-radius:100%;aspect-ratio:1/1;object-fit:cover}
.sph-steps__item h5{font-size:1.2em;font-weight:600;color:var(--sph-gray);margin-bottom:8px}
.sph-steps__item p{font-size: var(--sph-p-size);line-height:var(--sph-p-line);color:var(--sph-gray)}

.sph-steps__arrow{position:absolute;pointer-events:none;z-index:2}
.sph-steps__arrow--1{top:-11px;right:-30%;width: 150px;}
.sph-steps__arrow--2{top: 400px;right:-30%;width: 150px;}
.sph-steps__arrow--3{top:-20px;right:-30%;width: 150px;}

/* ==========================================================================
   09 · CTA + ZAHLEN
   ========================================================================== */
.sph-stats{background:var(--sph-gray)}
.sph-stats__inner{display:flex;align-items:center;padding:0 10px}
.sph-stats__cta{width:41.194%;padding-block:55px}
.sph-stats__spacer{width:4.458%}
.sph-stats__title{font-size:2.5em;font-weight:600;line-height:1.3;color:var(--sph-yellow);margin-bottom:20px}
.sph-stats__text{font-size:var(--sph-p-size);line-height:var(--sph-p-line);color:#fff;margin-bottom:var(--sph-p-gap)}

.sph-stats__grid{width:54.302%;display:flex}
.sph-stats__group{width:50%;display:flex;flex-direction:column;align-items:center;gap:40px}
.sph-stats__box{
  width:230px;
  padding:14px 10px;
  text-align:center;
  border-radius:10px;
  background:rgba(0,0,0,.05);
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  background: linear-gradient(145deg, #444444, #515151);
  box-shadow: 9px 9px 18px #3c3c3c, -9px -9px 18px #5c5c5c;
  border-radius: 30px !important;
}
.sph-stats__num{display:block;font-size:1.7em;font-weight:600;line-height:1.5;color:var(--sph-yellow)}
.sph-stats__label{display:block;font-size:1.1em;font-weight:600;line-height:1.4;color:#fff}

/* Anruf-Button (in mehreren Sektionen verwendet)
   Doppelter Pfeil: Spitze rechts, Kerbe links. Der Verlauf wandert dauerhaft,
   deshalb gibt es hier bewusst keinen Hover-Zustand mehr – die Fläche ist
   ohnehin ständig in Bewegung. Das Orange bleibt als Rückfallfarbe stehen.
   sph-gradient steht in assets/css/pages.css, die immer mitgeladen wird. */
.sph-callbtn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  background:var(--sph-orange);
  color:#fff;
  padding: 13px 30px 12px 35px;
  clip-path:polygon(90% 0%,100% 50%,90% 100%,0% 100%,10% 50%,0% 0%);
  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;
}
.sph-callbtn__icon{width:34px;height:34px;fill:#fff;flex:none}
.sph-callbtn__body{display:block;line-height:1.15}
.sph-callbtn__number{display:block;font-family:"Poppins",Sans-serif;font-size:1.5em;font-weight:600;font-style:italic;color:#fff}
.sph-callbtn__hint{display:block;font-family:"Poppins",Sans-serif;font-size:.85em;font-weight:400;font-style:italic;color:#fff}

/* ==========================================================================
   10 · UNSERE LEISTUNGEN
   ========================================================================== */
/* Foto als <img class="sph-bgimg"> im Markup, siehe sections/home-services.php. */
.sph-services{position:relative;overflow:hidden;background: #F6F4FC;}
.sph-services__head{position:relative;z-index:1;padding:5% 10px 0;text-align:center}
.sph-services__title{font-size:2.5em;font-weight:600;line-height:1.3;color:var(--sph-gray);margin-bottom:10px}
.sph-services__subtitle{font-size:1.5em;font-weight:400;line-height:1.3;color:var(--sph-gray)}

.sph-services__wrap{position:relative;z-index:1;padding:40px 0 5%}
.sph-services__grid{display:flex;flex-wrap:wrap}
.sph-services__card{width:25%;padding: 0 20px 20px;text-align:center}

/* Blob-Form + Icon exakt wie im Original: 150x150-SVG mit Farbverlauf,
   das Leistungs-Icon liegt mittig darüber. */
.sph-services__blob{
  display:block;position:relative;
  width:150px;height:150px;margin:0 auto 21px;
}
.sph-services__blobshape{width:150px;height:150px;display:block}
.sph-services__blobicon{
  position:absolute;left:52.5%;top:53.5%;transform:translate(-50%,-50%);
  width:48px;height:48px;fill:#fff;
}
.sph-services__blob:hover .sph-services__blobshape{transform:scale(1.05);transition:transform .3s}
.sph-services__card h3{font-size:1.4em;font-weight:600;color:var(--sph-gray);margin-bottom:12px}
.sph-services__card h3 a{color:inherit;font-weight:inherit}
.sph-services__card h3 a:hover{color:var(--sph-yellow)}
.sph-services__card p{font-size: 16px;font-weight:400;line-height:var(--sph-p-line);color: #00000096;}

/* ==========================================================================
   11 · CTA MIT ABSCHLEPPWAGEN
   ========================================================================== */
/* Grau bleibt als Grundfarbe stehen, das Motiv ist ein <img class="sph-bgimg">
   im Markup (components/cta-truck.php). */
.sph-ctatruck{position:relative;overflow:hidden;background:var(--sph-gray)}
.sph-ctatruck__inner{position:relative;z-index:1;display:flex;padding:0 10px}
.sph-ctatruck__col{width:50.018%;padding:67px 67px 67px 0}
.sph-ctatruck__title{font-size:2.5em;font-weight:600;line-height:1.3;color:var(--sph-yellow);margin-bottom:20px}
.sph-ctatruck__text{font-size:var(--sph-p-size);line-height:var(--sph-p-line);color:#fff;margin-bottom:var(--sph-p-gap)}

/* ==========================================================================
   12 · KONTAKT + ANGEBOT
   ========================================================================== */
.sph-contact{background:var(--sph-bluegray);padding:4.9% 0}
.sph-contact__inner{display:flex;align-items:flex-start;padding:0 10px}

.sph-contact__formcol{width:44.85%;margin-right:4.78%}
.sph-contact__form{background:rgba(249,176,34,.68);padding:38px 40px 44px;border-radius:6px}
.sph-contact__title{font-size:2.4em;font-weight:600;color:var(--sph-gray);text-align:center;margin-bottom:24px}
.sph-contact__form input[type=text],
.sph-contact__form input[type=email],
.sph-contact__form textarea{
  width:100%;background:#fff;border:1px solid #e2e2e2;border-radius:4px;
  padding:11px 14px;margin-bottom:16px;
  font-family:"Poppins",Sans-serif;font-size:.85em;color:var(--sph-gray);
}
.sph-contact__form textarea{resize:vertical;min-height:110px}
.sph-contact__form ::placeholder{color:#9b9b9b}

/* --------------------------------------------------------------------------
   12a · DAS PLUGIN-FORMULAR (WPForms) – GILT AUF ALLEN FORMULARPLÄTZEN
   Zwei Felder in der ersten Zeile, weiße Kästen mit 10px Radius,
   Zustimmungszeile und der dunkelgraue „Senden"-Knopf.

   Der Block steht in style.css und nicht in pages.css, weil er für *jeden*
   Formularplatz der Seite gilt – die drei Hüllen aus Abschnitt 8 in context.md:

     .sph-contact      gelbe Karte der Startseite (sections/home-contact.php)
     .sph-fbox         Kontaktseite, Leistungs- und Standortseiten
                       (components/contact-form.php)
     .sph-modal__body  Rückruf-Fenster (components/callback-modal.php)

   Ein weiterer Platz kommt in die Liste unten, sonst nirgends – die Regeln
   stehen genau einmal da.

   Bewusst *keine* --wpforms-*-Variablen: WPForms schreibt seine Werte in ein
   <style>-Element im Body und adressiert es mit der id des Formulars
   (`#wpforms-468{…}`). Eine ID schlägt jede Klassenregel, gegen sie käme man nur
   mit !important an. Direkte Eigenschaften sind davon unberührt – die
   Variablen des Plugins füllen nur dessen eigene Klassenregeln, und die haben
   höchstens zwei Klassen. Mit einer der Hüllen davor gewinnen die Regeln hier.
   Gleiche Überlegung wie bei P14 (FAQ-Plugin) in pages.css.

   :is() hält die Liste an einer Stelle, statt jeden Selektor dreimal zu
   schreiben. Die Spezifität ist die des stärksten Arguments, also eine Klasse –
   gerechnet wird hier folglich wie mit `.sph-contact` davor.
   -------------------------------------------------------------------------- */
/* Das Plugin bringt eigene Außenabstände und eine Höchstbreite mit. */
:is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-container,
:is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-form{margin:0;width:100%;max-width:none}

/* Layout-Hülle. Je nach Fassung des Plugins liegen die Felder in
   `.wpforms-field-container` oder direkt im <form> – deshalb werden beide zum
   Flex-Container. Die Hülle, die keine Felder enthält, hat nur ein Kind und tut
   damit nichts. Flex statt Grid, weil sich so beide Fälle mit denselben Regeln
   erschlagen lassen. */
:is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-form,
:is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-field-container{
  display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px;
}
/* Alles, was keine Feldzeile ist (Kopf, Absendezeile, versteckte Elemente),
   läuft über die volle Breite. */
:is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-form > *,
:is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-field-container > *{flex:0 0 100%;max-width:100%}

/* WPForms bringt zwei eigene Breitensysteme mit: die Feldgrößen aus den
   Feldoptionen (.wpforms-field-small = 25 %, -medium = 60 %) und die
   „CSS-Ready"-Klassen (.wpforms-one-half, .wpforms-first) mit Float und
   Außenabstand. Beide ergeben ein schmales „Name" und ein eingerücktes
   „Telefon". Hier entscheidet die Karte über die Breite, nicht das Plugin –
   deshalb !important, das Plugin setzt diese Werte über eigene Klassen- und
   ID-Regeln. */
/* Grundform: jedes Feld belegt eine halbe Zeile – die ersten beiden stehen
   dadurch nebeneinander (Name | Telefon). Die volle Breite bekommen sie gleich
   darunter wieder. */
:is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-field{
  float:none !important;clear:none !important;
  margin:0 !important;padding:0 !important;
  flex:0 0 calc(50% - 7px);
  width:calc(50% - 7px) !important;
  max-width:calc(50% - 7px) !important;
}

/* Ab dem dritten *sichtbaren* Feld über die ganze Breite: E-Mail, Betreff,
   Nachricht, Zustimmung.

   Gezählt wird über Geschwister, nicht über die Position:
   `A ~ A ~ A` trifft jedes Feld, vor dem schon zwei stehen – also das dritte
   und alles danach. Das `:not(.wpforms-field-hp)` in der Kette lässt den
   Honigtopf beim Zählen aus.

   Warum nicht :nth-child(1)/(2): WPForms schiebt seinen Honigtopf
   (.wpforms-field-hp) an eine *zufällige* Stelle zwischen die Felder. Er ist
   unsichtbar, zählt für :nth-child aber mit – landet er auf Platz 2, bekommt
   er die halbe Breite und „Telefon" rutscht in die nächste Zeile. Genau das
   war der Fehler.
   Warum nicht über den Feldtyp: „Name" und „Betreff" sind beide gewöhnliche
   Textfelder und tragen dieselbe Klasse (.wpforms-field-text).
   `:nth-child(… of …)` wäre die kürzeste Fassung, kann aber noch nicht jeder
   Browser – die Geschwisterkette dagegen ist CSS3 und läuft überall.

   Nicht mitgezählt werden neben dem Honigtopf auch versteckte Felder
   (`.wpforms-field-hidden`, etwa ein vorbelegtes Feld für den Seitentitel) und
   alles, was ausdrücklich `sph-full` trägt. Sonst verschiebt ein solches Feld
   das Paar: „Leistungen" und „Name" stünden nebeneinander und „Telefon" fiele
   in die nächste Zeile. Genau dafür ist `sph-full` gedacht – ein Feld ganz
   oben, das die volle Breite bekommt *und* aus der Zählung fällt.

   Von Hand steuern (Feldoptionen → Erweitert → CSS-Klassen), falls die Vorlage
   einmal anders aussehen soll:
     sph-half   dieses Feld halbe Breite, auch weiter hinten
     sph-full   dieses Feld volle Breite und aus der Zählung heraus */
:is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-field:not(.wpforms-field-hp):not(.wpforms-field-hidden):not(.sph-full) ~ .wpforms-field:not(.wpforms-field-hp):not(.wpforms-field-hidden):not(.sph-full) ~ .wpforms-field:not(.wpforms-field-hp):not(.wpforms-field-hidden):not(.sph-half),
:is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-field.sph-full{
  flex:0 0 100%;
  width:100% !important;
  max-width:100% !important;
}
/* Honigtopf gegen Spam – steht im Markup, darf aber keine Zeile belegen. */
:is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-field-hp{display:none !important}

/* Keine sichtbaren Beschriftungen: was ins Feld gehört, steht als Platzhalter
   darin – inklusive Stern bei Pflichtfeldern („Name *").

   Der Stern kommt damit aus dem **Platzhaltertext** des Formulars und nicht
   mehr aus `.wpforms-required-label`; letzterer steckt in der Beschriftung und
   ist mit ihr unsichtbar.

   Versteckt statt entfernt (`clip`, nicht `display:none`): Vorlesegeräte
   brauchen den Feldnamen weiterhin, und ein Platzhalter allein ist dafür kein
   Ersatz – er verschwindet, sobald jemand tippt. */
:is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-field > .wpforms-field-label{
  position:absolute !important;
  width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}
/* Die Unterbeschriftungen (z. B. „Vorname"/„Nachname" unter einem Namensfeld)
   tragen keinen Stern und bleiben versteckt – sie wiederholen nur, was schon
   im Platzhalter steht. */
:is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-field-sublabel{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}

/* `sph-no-label` gibt es weiterhin als CSS-Klasse am Feld, wirkt aber nicht
   mehr besonders: seit 1.3.42 sind ohnehin alle Beschriftungen ausgeblendet.
   Die Klasse schadet nicht und kann in den Formularen stehen bleiben.

   Der Pflichtstern `.wpforms-required-label` steckt in der Beschriftung und ist
   damit unsichtbar – bei Pflichtfeldern gehört der Stern jetzt in den
   Platzhaltertext. */
/* Die Zustimmungszeile ist die Beschriftung *am* Ankreuzfeld und bleibt. */
:is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-field-checkbox .wpforms-field-label-inline{
  position:static;width:auto;height:auto;margin:0;
  overflow:visible;clip:auto;clip-path:none;white-space:normal;
}

/* Die weißen Kästen. Die Größenklassen des Plugins sitzen am Eingabefeld selbst
   (.wpforms-field-small/-medium/-large als max-width in Prozent) – ohne
   !important bleibt „Name" bei 25 % seiner Zeile stehen.

   Der Rand ist --sph-orange (#FF703C) wie auf der Kontaktseite (P6 in
   pages.css) – nur ohne deren Schlagschatten nach innen. Die Regeln hier sind
   spezifischer und gewinnen; die P6-Regeln bleiben als Rückfall für den Fall
   ohne Plugin stehen. Die Farbe kommt aus :root und wird nicht als Zahl
   wiederholt (siehe Abschnitt 3 in context.md). */
:is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-field input[type=text],
:is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-field input[type=tel],
:is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-field input[type=email],
:is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-field input[type=url],
:is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-field input[type=number],
:is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-field select,
:is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-field textarea{
  width:100% !important;max-width:100% !important;height:auto;
  background:#fff;border:1px solid var(--sph-orange);border-radius:10px;
  padding:15px 18px;margin:0;
  font-family:"Poppins",Sans-serif;font-size:16px;font-weight:400;line-height:1.4;
  color:var(--sph-gray);
  box-shadow:none;
  transition:border-color .3s,box-shadow .3s;
}
:is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-field textarea{min-height:120px;resize:vertical}
/* Der Platzhalter ist die einzige Beschriftung, die man sieht – er muss also
   lesbar sein und darf nicht zu blass werden.

   VORAUSSETZUNG im Formular: je Feld ein Platzhaltertext, bei Pflichtfeldern
   mit Stern – „Name *", „Telefon *", „E-Mail *". Ohne Platzhalter steht der
   Kasten leer da, denn die Beschriftung ist ausgeblendet. */
:is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-field ::placeholder{
  color:#8A8A8A !important;
  opacity:1 !important;
}
/* Kein Fokus-Zustand an den Eingabefeldern: der Rand bleibt beim Anklicken
   genau so, wie er ist.

   Zwei Quellen mussten dafür weg:
   1. `input:focus-visible{outline:3px solid var(--sph-orange)}` aus
      assets/css/wordpress.css. Textfelder erfüllen :focus-visible **auch beim
      Klick mit der Maus** – anders als Knöpfe oder Links, denn sie nehmen
      Tastatureingaben entgegen. Der Rahmen erschien also bei jedem Hineinklicken.
   2. der eigene Fokus-Zustand von WPForms (Randfarbe und Schatten).

   Bewusste Abwägung: der sichtbare Fokus entfällt hier auf Wunsch. Vertretbar,
   weil das Feld beim Tippen ohnehin einen Textcursor zeigt und der orangene
   Rand kräftig genug ist, um das Feld vom Hintergrund abzuheben. Ankreuzfeld
   und „Senden"-Knopf behalten ihren Fokusrahmen – dort gibt es keinen Cursor,
   der die Stelle verrät. */
:is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-field input:focus,
:is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-field input:focus-visible,
:is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-field select:focus,
:is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-field select:focus-visible,
:is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-field textarea:focus,
:is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-field textarea:focus-visible{
  border-color:var(--sph-orange) !important;
  box-shadow:none !important;
  outline:none !important;
}
/* Das Ankreuzfeld der Zustimmungszeile ist ausgeblendet (siehe unten) und
   braucht deshalb keinen Fokusrahmen mehr. */

/* --------------------------------------------------------------------------
   BILDAUSWAHL („Was können wir für Sie tun?")
   WPForms-Feldart „Bildauswahl", moderne Fassung:
   <ul class="wpforms-image-choices wpforms-image-choices-modern">.
   Steht derzeit nur im Formular der Anfrage-Seite, die Regeln gelten aber für
   jedes Formular – ein zweites Vorkommen sieht damit von selbst gleich aus.
   -------------------------------------------------------------------------- */
/* Die Frage darüber ist die einzige Beschriftung, die sichtbar bleibt: ein
   Auswahlfeld hat keinen Platzhalter, ohne sie stünden die Kacheln ohne Frage
   da. Gilt nur für Auswahlfelder (.wpforms-field-radio) – die Zustimmungszeile
   ist ein Ankreuzfeld und bleibt ohne Überschrift. */
:is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-field-radio > .wpforms-field-label{
  position:static !important;
  width:auto;height:auto;margin:0 0 12px;padding:0;
  overflow:visible;clip:auto;clip-path:none;white-space:normal;
  font-family:"Poppins",Sans-serif;font-size:15px;font-weight:600;line-height:1.4;
  color:var(--sph-gray);
}
/* Bei einem Pflichtfeld steht der Stern hier wieder sichtbar dahinter – der
   Platzhalter-Umweg der Textfelder greift bei einer Auswahl ja nicht. */
:is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-field-radio > .wpforms-field-label .wpforms-required-label{
  display:inline !important;margin-left:3px;color:var(--sph-orange);
}

/* Vier Kacheln je Zeile, gleich hoch. Grid statt Float: so bleiben die Kacheln
   einer Zeile gleich hoch, auch wenn ein Text zweizeilig umbricht. */
:is(.sph-contact,.sph-fbox,.sph-modal__body) ul.wpforms-image-choices{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  margin:0;padding:0;list-style:none;
}
:is(.sph-contact,.sph-fbox,.sph-modal__body) ul.wpforms-image-choices > li{
  margin:0;padding:0;list-style:none;
}
/* Die Kachel selbst ist das <label> – damit ist die ganze Fläche klickbar. */
:is(.sph-contact,.sph-fbox,.sph-modal__body) ul.wpforms-image-choices > li label{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  height:100%;margin:0;padding:18px 10px;cursor:pointer;
  background:#fff;border:2px solid transparent;border-radius:10px;
  font-family:"Poppins",Sans-serif;font-size:15px;font-weight:400;line-height:1.3;
  color:var(--sph-gray);text-align:center;
  transition:border-color .3s,box-shadow .3s,transform .3s;
}
:is(.sph-contact,.sph-fbox,.sph-modal__body) ul.wpforms-image-choices .wpforms-image-choices-image{
  display:block;margin:0;
}
:is(.sph-contact,.sph-fbox,.sph-modal__body) ul.wpforms-image-choices img{
  width:44px;height:44px;object-fit:contain;margin:0 auto;display:block;
}
:is(.sph-contact,.sph-fbox,.sph-modal__body) ul.wpforms-image-choices .wpforms-image-choices-label{
  display:block;font-weight:400;
}
/* Das Auswahlknöpfchen selbst wird nicht gezeigt – die Kachel ist der Zustand.
   Nicht display:none: sonst ließe sich die Auswahl nicht mehr mit der Tastatur
   ansteuern. */
:is(.sph-contact,.sph-fbox,.sph-modal__body) ul.wpforms-image-choices input[type=radio],
:is(.sph-contact,.sph-fbox,.sph-modal__body) ul.wpforms-image-choices input[type=checkbox]{
  position:absolute;width:1px;height:1px;opacity:0;margin:0;
}
:is(.sph-contact,.sph-fbox,.sph-modal__body) ul.wpforms-image-choices > li label:hover{
  border-color:var(--sph-orange);
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  transform:translateY(-2px);
}
/* Gewählte Kachel – WPForms hängt .wpforms-selected an das <li>. */
:is(.sph-contact,.sph-fbox,.sph-modal__body) ul.wpforms-image-choices > li.wpforms-selected label,
:is(.sph-contact,.sph-fbox,.sph-modal__body) ul.wpforms-image-choices > li label:has(input:checked){
  border-color:var(--sph-orange);
  box-shadow:0 8px 20px rgba(255,112,60,.25);
}
/* Tastaturbedienung: der Rahmen sitzt an der Kachel, nicht am unsichtbaren
   Knöpfchen. */
:is(.sph-contact,.sph-fbox,.sph-modal__body) ul.wpforms-image-choices > li label:focus-within{
  outline:3px solid var(--sph-navy);outline-offset:2px;
}

/* Zustimmungszeile: **ohne Kästchen**, nur der Hinweistext.

   Das Ankreuzfeld ist ausgeblendet, die Beschriftung daneben bleibt und läuft
   über die ganze Zeile.

   ACHTUNG – das ist reine Optik. Ist das Feld in WPForms als *Pflichtfeld*
   angelegt, lässt sich das Formular danach nicht mehr absenden: die Prüfung
   verlangt einen Haken, den niemand mehr setzen kann. Wer die Zeile wirklich
   nur als Hinweis will, ersetzt das Ankreuzfeld in WPForms durch ein Feld der
   Art „HTML" bzw. „Inhalt" – dann gibt es gar kein Pflichtfeld mehr. Diese
   Regel hier ist der Notnagel für den Fall, dass das Formular nicht angefasst
   werden soll. */
:is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-field-checkbox ul{display:flex;flex-direction:column;gap:8px}
:is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-field-checkbox li{display:flex;align-items:flex-start;gap:0;margin:0}
:is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-field-checkbox input[type=checkbox]{
  display:none !important;
}
:is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-field-checkbox .wpforms-field-label-inline{
  font-size:15px;font-weight:400;line-height:1.4;color:var(--sph-gray);
}
/* „Datenschutzerklärung" steht in der Vorlage fett, aber nicht farbig. */
:is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-field-checkbox a{color:inherit;font-weight:600;text-decoration:none}
:is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-field-checkbox a:hover{color:var(--sph-orange)}

/* Absende-Knopf: dunkelgrau, links ausgerichtet, gleiche Rundung wie die Felder.
   Das Blau ist die Grundfarbe von WPForms und kommt aus dessen eigener
   Stilvorlage bzw. den Formulareinstellungen – beides überschreibt eine
   gewöhnliche Klassenregel, deshalb hier !important. */
:is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-submit-container{padding:0;margin-top:18px;text-align:left}
:is(.sph-contact,.sph-fbox,.sph-modal__body) button[type=submit],
:is(.sph-contact,.sph-fbox,.sph-modal__body) input[type=submit],
:is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-submit{
  display:inline-block;width:auto;min-width:270px;max-width:100%;height:auto;
  background:var(--sph-gray) !important;background-image:none !important;
  border:0 !important;border-radius:10px !important;
  color:#fff !important;
  font-family:"Poppins",Sans-serif;font-size:20px;font-weight:600;line-height:1.4;
  padding:16px 40px;cursor:pointer;
  transition:background .3s;
}
:is(.sph-contact,.sph-fbox,.sph-modal__body) button[type=submit]:hover,
:is(.sph-contact,.sph-fbox,.sph-modal__body) input[type=submit]:hover,
:is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-submit:hover{background:var(--sph-navy) !important;color:#fff !important}
:is(.sph-contact,.sph-fbox,.sph-modal__body) button[type=submit]:focus-visible,
:is(.sph-contact,.sph-fbox,.sph-modal__body) input[type=submit]:focus-visible,
:is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-submit:focus-visible{outline:3px solid var(--sph-navy);outline-offset:3px}

/* Fehlermeldungen des Plugins in den Theme-Farben. */
:is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-field label.wpforms-error{
  display:block;margin-top:6px;font-size:14px;font-weight:400;color:#B32D2E;
}
:is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-field input.wpforms-error,
:is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-field textarea.wpforms-error{border-color:#B32D2E}

/* Am Telefon steht auch die erste Zeile untereinander – zwei halbe Felder sind
   dort schmaler als ihr eigener Platzhalter. Der Block steht hier und nicht im
   Responsive-Teil, damit die Ausnahme neben der Regel steht, die sie aufhebt.

   Oberhalb von 767px reicht der Platz überall: die halbbreiten Karten der
   Leistungs- und Standortseiten stehen ab 1024px abwärts ohnehin über die
   volle Breite (siehe .sph-locsec__form / .sph-txtimg__form in pages.css). */
/* Tablet: die Karten stehen ab hier über die volle Spaltenbreite (siehe die
   1024er-Blöcke in pages.css), zwei Felder nebeneinander haben also Platz.
   Nur die Innenabstände der Karten werden knapper – 40px links und rechts
   kosten auf einem 768px-Gerät ein Viertel der Zeile. */
@media (max-width:1024px){
  .sph-contact__form{padding:28px 24px 32px}
  .sph-fbox{padding:12px}
  .sph-fbox form{padding:0 8px 8px}
  .sph-modal__box{padding:28px 22px 24px}
}

@media (max-width:767px){
  /* Gleiche Spezifität wie die Grundregel oben, steht aber später – damit
     gewinnt sie für die ersten beiden Felder. Die Regel für das dritte Feld
     aufwärts sagt ohnehin schon „volle Breite" und kommt sich nicht ins
     Gehege. */
  :is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-field{
    flex:0 0 100%;
    width:100% !important;
    max-width:100% !important;
  }

  /* Am Telefon zählt jeder Millimeter Zeilenbreite. */
  .sph-contact__form{padding:22px 16px 26px}
  .sph-fbox{padding:10px}
  .sph-fbox form{padding:0 6px 6px}
  .sph-modal__box{padding:24px 16px 20px}

  /* Felder und Beschriftungen eine Spur kompakter, aber NICHT unter 16px:
     Safari zoomt beim Hineintippen in ein Feld mit kleinerer Schrift die
     ganze Seite heran, und dann steht das Formular schief. */
  :is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-field input[type=text],
  :is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-field input[type=tel],
  :is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-field input[type=email],
  :is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-field input[type=url],
  :is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-field input[type=number],
  :is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-field select,
  :is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-field textarea{
    padding:13px 14px;font-size:16px;
  }
  :is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-field textarea{min-height:100px}
  /* Etwas enger zwischen den Feldern – gestapelt sind es sonst sehr viele
     Zeilen bis zum Absende-Knopf. */
  :is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-form,
  :is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-field-container{gap:10px}
  :is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-submit-container{margin-top:14px}
  :is(.sph-contact,.sph-fbox,.sph-modal__body) button[type=submit],
  :is(.sph-contact,.sph-fbox,.sph-modal__body) input[type=submit],
  :is(.sph-contact,.sph-fbox,.sph-modal__body) .wpforms-submit{width:100%;min-width:0;font-size:18px}
}

.sph-contact__textcol{width:50.37%;padding:6px 6px 6px 13px}
.sph-contact__heading{font-size:2.5em;font-weight:600;line-height:1.3;color:var(--sph-gray);margin-bottom:20px}
.sph-contact__textcol p{font-size:var(--sph-p-size);line-height:var(--sph-p-line);color:var(--sph-gray);margin-bottom:var(--sph-p-gap)}
.sph-contact__textcol p:last-child{margin-bottom:0}
.sph-contact__textcol a{color:var(--sph-orange);font-weight:600}

/* ==========================================================================
   13 · IMMER FÜR SIE DA
   ========================================================================== */
/* Navy bleibt als Grundfarbe stehen, das Foto ist ein <img class="sph-bgimg">
   im Markup (sections/home-about.php). */
.sph-about{
  position:relative;overflow:hidden;padding:4% 0;
  background:var(--sph-navy);
}
.sph-about__overlay{position:absolute;inset:0;background:var(--sph-navy);opacity:.78}
.sph-about__inner{position:relative;z-index:2;padding:0 10px}
.sph-about__title{font-size:2.5em;font-weight:600;line-height:1.3;color:var(--sph-yellow);text-align:center;margin-bottom:20px}
.sph-about__cols{display:flex}
.sph-about__col:first-child{width:49.318%;padding:13px 33px 13px 13px}
.sph-about__col:last-child{width:50.682%;padding:14px 14px 14px 34px}
.sph-about__col p{font-size:var(--sph-p-size);line-height:var(--sph-p-line);color:#fff;margin-bottom:var(--sph-p-gap)}
.sph-about__col p:last-child{margin-bottom:0}
.sph-about__col a{color:var(--sph-yellow)}

/* ==========================================================================
   14 · EINSATZGEBIETE
   ========================================================================== */
/* Hellgrau bleibt als Grundfarbe stehen, das Muster ist ein
   <img class="sph-bgimg"> im Markup (components/areas.php). */
.sph-areas{
  position:relative;overflow:hidden;background:#F7F7F7;
  padding:3% 0 4%;
}
.sph-areas__inner{position:relative;z-index:1;display:flex;align-items:center;padding:0 10px}
.sph-areas__content{width: 65%;}
/* Stand bis 1.2.1 in Righteous 400. Die Auszeichnungsschrift ist raus (nur noch
   Poppins), 400 wäre für eine 38px-Überschrift zu dünn – deshalb 600. */
.sph-areas__title{
  font-family:"Poppins",Sans-serif;font-size:38px;font-weight:600;line-height:1.4;
  color:var(--sph-yellow);padding-bottom:30px;
}
.sph-areas__cols{display:flex}
.sph-areas__list{width:33.333%;padding-right:10px}
.sph-areas__list li{padding-block:7px}
.sph-areas__list a{display:flex;align-items:center;gap:10px;font-family:"Poppins",Sans-serif;font-size: 16px;font-weight:400;color:var(--sph-gray)}
.sph-areas__list a:hover{color:var(--sph-yellow)}
/* Ortsmarke: die Glyphe war 25px hoch, das SVG ist schmaler als hoch (384×512). */
.sph-areas__pin{width:17px;height:23px;fill:var(--sph-yellow);flex:none}
.sph-areas__mapcol{width: 35%;display:flex;justify-content:center}

/* ==========================================================================
   15 · FAQ
   ========================================================================== */
.sph-faq{padding:4% 0;background:#fff}
.sph-faq__title{font-size:2.5em;font-weight:600;color:var(--sph-gray);text-align:center;margin-bottom:1%;padding:0 10px}
.sph-faq__inner{display:flex;align-items:flex-start;padding:0 10px}
.sph-faq__list{width:52%;padding:0 10px}
.sph-faq__media{width:48%;padding:0 10px;display:flex;justify-content:center;align-items:flex-start}

.sph-faq__item{margin-bottom:15px}
.sph-faq__head{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--sph-yellow);border:0;border-radius:10px;cursor:pointer;
  font-family:"Poppins",Sans-serif;font-size:1.2em;font-weight:600;color:var(--sph-gray);
  text-align:left;padding:14px 20px;transition:background .3s,color .3s;
}
.sph-faq__item.is-open .sph-faq__head{background:var(--sph-gray);color:#fff}
/* Ein Symbol für beide Zustände: zugeklappt zeigt der Pfeil nach unten, offen
   dreht ihn diese Regel. Vorher waren es zwei Glyphen der Iconfont, die das
   Skript getauscht hat (siehe script.js 2). */
.sph-faq__icon{width:16px;height:16px;fill:currentColor;flex:none;margin:0 13px 0 10px;transition:transform .3s}
.sph-faq__item.is-open .sph-faq__icon{transform:rotate(180deg)}
.sph-faq__body{display:none;padding:25px}
.sph-faq__item.is-open .sph-faq__body{display:block}
.sph-faq__body p{font-size:var(--sph-p-size);line-height:var(--sph-p-line);color:var(--sph-gray);margin-bottom:var(--sph-p-gap)}
.sph-faq__body p:last-child{margin-bottom:0}

/* ==========================================================================
   16 · PARTNER-LOGOS
   ========================================================================== */
.sph-partners{padding:82px 0 84px;overflow:hidden;background:#fff}
/* Die Liste steht zweimal im Markup, die Animation schiebt um -50 % – also um
   genau einen Durchlauf, dadurch der nahtlose Übergang. Die Laufzeit kommt aus
   partner-logos.php (Sekunden pro Logo), damit lange und kurze Listen gleich
   schnell laufen. Der Wert hier greift nur, falls die Variable fehlt. */
.sph-partners__track{display:flex;align-items:center;gap:110px;width:max-content;animation:sph-marquee var(--sph-marquee-time,104s) linear infinite}
/* Feste 99x99-Kachel je Logo. object-fit:contain lässt jedes Bild in seinem
   Seitenverhältnis, es wird nur eingepasst – nichts verzerrt. Fast alle Dateien
   sind quadratisch und füllen die Kachel; breite Logos sitzen mittig darin. */
.sph-partners__track img{width:99px;height:99px;object-fit:contain;flex:none}
@keyframes sph-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ==========================================================================
   17 · FOOTER
   ========================================================================== */
/* Original (post-2208.css, Sektion 651ae4ab): padding 127px oben / 40px unten.
   Der Wellen-Trenner liegt absolut über dem oberen Innenabstand. */
.sph-footer{position:relative;background:var(--sph-footer);padding-top:127px}
.sph-footer__wave{position:absolute;top:0;left:0;width:100%;line-height:0;direction:ltr}
/* 1px Überbreite gegen die Subpixel-Lücke am Rand, nach links versetzt, damit
   rechts kein horizontaler Überlauf entsteht. */
.sph-footer__wave svg{width:calc(100% + 2px);margin-left:-1px;height:98px;display:block;transform:rotateY(180deg)}
.sph-footer__wave svg path{fill:#fff}

.sph-footer__grid{display:flex;padding:0 10px 40px}
.sph-footer__brand{width:23%;padding:0 10px}
.sph-footer__col{width:24%;padding:0 10px}
.sph-footer__col:nth-of-type(3){width:25%}
.sph-footer__col:last-child{width:28%}

.sph-footer__logo{width:125px;margin: 0 0 22px;}
.sph-footer__contact li{margin-bottom:18px}
.sph-footer__contact a{display:flex;align-items:flex-start;gap:12px;color:#fff;font-size:15px;font-weight:400;line-height:1.5}
.sph-footer__contact a:hover{color:var(--sph-yellow)}
.sph-footer__ci{width:16px;height:16px;fill:var(--sph-yellow);flex:none;margin-top:5px}

/* Original (post-2208.css): 24px/600 – nicht 20px. */
.sph-footer__heading{font-size:24px;font-weight:600;color:var(--sph-yellow);margin-bottom:18px}
.sph-footer__heading--second{margin-top:28px}
.sph-footer__links li{margin-bottom:20px}
.sph-footer__links a{display:flex;align-items:center;gap:10px;color:#fff;font-size:16px;font-weight:400}
.sph-footer__links a:hover{color:var(--sph-yellow)}
.sph-footer__hook{width:14px;height:14px;fill:var(--sph-yellow);flex:none}

.sph-footer__hours li{display:flex;align-items:center;gap:10px;color:#fff;font-size:16px;margin-bottom:20px}
.sph-footer__clock{width:16px;height:16px;fill:var(--sph-yellow);flex:none}
.sph-footer__seals{display:flex;align-items:center;gap:22px;margin-top:26px}
.sph-footer__seals img{height:104px;width:auto}
/* ProvenExpert liefert das Bewertungssiegel nur an die Live-Domain aus –
   im Original-Screenshot bleibt an dieser Stelle ebenfalls eine weiße Fläche.
   Die Abstände sind an der Vorlage abgemessen: die Fläche beginnt 190px über
   dem Spaltenende, darunter folgen 18px bis zur Trennlinie der unteren Leiste. */
.sph-footer__pe{display:block;margin-top:42px;margin-bottom:18px}
.sph-footer__pe-box{display:block;width:200px;height:190px;background:#fff}

.sph-footer__bottom{border-top:1px solid #30475D;position:relative}
.sph-footer__bottom-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 10px;gap:20px}
.sph-footer__emergency{
  position:absolute;left:20px;top:-25px;
  display:inline-flex;align-items:center;gap:10px;
  background:var(--sph-orange);color:#fff;border-radius:999px;
  font-size:15px;font-weight:600;padding:12px 26px;
}
.sph-footer__emergency:hover{color:#fff;background:#ff5a1f}
.sph-footer__emergency-icon{width:15px;height:15px;fill:#fff;flex:none}
.sph-footer__copy{color:#fff;font-size:14px;font-weight:400}
/* Impressum und Datenschutz in der unteren Leiste – dieselbe Größe wie das
   Copyright daneben, damit die Zeile ruhig bleibt. */
.sph-footer__legal{display:flex;align-items:center;gap:10px;color:#fff;font-size:14px}
.sph-footer__legal a{color:#fff;font-weight:400}
.sph-footer__legal a:hover{color:var(--sph-yellow)}
.sph-footer__legal span{opacity:.5}
.sph-footer__credit{color:#fff;font-size:14px}
.sph-footer__credit a{color:#fff;font-weight:400}
.sph-footer__credit a:hover{color:var(--sph-yellow)}

/* ==========================================================================
   18 · WHATSAPP-BUTTON
   ========================================================================== */
.sph-wa{
  position:fixed;right:15px;bottom:22px;z-index:60;
  width:55px;height:55px;border-radius:50%;background:#25D366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.sph-wa svg{width:32px;height:32px;fill:#fff}

/* ==========================================================================
   19 · NOTDIENST-BUTTON UNTEN LINKS
   Zwei Zustände auf demselben Ankerpunkt (components/floating-call.php):
   zugeklappt die orangene Pille, aufgeklappt die gelbe Karte mit dem runden
   Schließen-Knopf darunter. Der WhatsApp-Knopf klebt rechts, dieser links.
   ========================================================================== */
/* Der Anker ist nur so groß wie der runde Schließen-Knopf. Pille und Karte
   hängen absolut daran, damit beim Umschalten nichts umbricht und beide
   Zustände übereinander ein- und ausblenden können. */
.sph-fcall{
  position:fixed;
  left:22px;
  bottom:22px;
  z-index:60;
  width:52px;
  height:52px;
  display: block;
}

/* Pille im zugeklappten Zustand.
   nowrap ist Pflicht: der Anker ist nur 52px breit, ohne die Angabe bräche die
   Beschriftung nach jedem Wort um. */
.sph-fcall__toggle{
  position:absolute;left:0;bottom:0;
  display:inline-flex;align-items:center;gap:12px;cursor:pointer;
  border:0;border-radius:999px;white-space:nowrap;
  background:#FF7B3C;color:#fff;
  font-family:"Poppins",Sans-serif;font-size:17px;font-weight:600;line-height:1;
  padding:16px 26px;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  transition:background .3s,opacity .25s ease,transform .25s ease,visibility .25s;
}
.sph-fcall__toggle:hover{background:var(--sph-orange)}
.sph-fcall__icon{width:18px;height:18px;fill:currentColor;flex:none}

/* Karte im aufgeklappten Zustand. Sie steht über dem Knopf und wächst beim
   Aufklappen aus dessen unterer linker Ecke heraus – daher transform-origin.
   visibility statt display, sonst gäbe es nichts zu überblenden; sie nimmt den
   Kasten außerdem aus Tabreihenfolge und Klickfläche. */
.sph-fcall__panel{
  position:absolute;left:0;bottom:calc(100% + 14px);
  width:290px;max-width:calc(100vw - 44px);
  border-radius:22px;background:var(--sph-yellow);
  padding:26px 24px;text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  opacity:0;visibility:hidden;
  transform:translateY(14px) scale(.94);transform-origin:0 100%;
  transition:opacity .3s ease,transform .3s cubic-bezier(.2,.7,.3,1),visibility .3s;
}
.sph-fcall__title{
  font-size:16px;font-weight:600;line-height:1.45;
  text-transform:uppercase;color:var(--sph-navy);
  margin-bottom:18px;
}
.sph-fcall__lead{font-size:15px;font-weight:600;line-height:1.4;color:var(--sph-navy)}
.sph-fcall__note{font-size:15px;font-weight:400;line-height:1.4;color:var(--sph-navy);margin-bottom:18px}

/* Rufnummer als dunkle Schaltfläche in der Karte */
.sph-fcall__num{
  display:flex;align-items:center;justify-content:center;gap:10px;
  border-radius:999px;background:var(--sph-navy);color:#fff;
  font-size:17px;font-weight:600;line-height:1;
  padding:14px 18px;
  transition:background .3s;
}
.sph-fcall__num:hover{background:var(--sph-dark);color:#fff}

/* Runder Schließen-Knopf unter der Karte. Liegt genau auf der Pille und
   erscheint, während die verschwindet. */
.sph-fcall__close{
  position:absolute;left:0;bottom:0;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;border:0;
  width:52px;height:52px;border-radius:50%;
  background:var(--sph-orange);color:#fff;
  font-family:"Poppins",Sans-serif;font-size:26px;line-height:1;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  opacity:0;visibility:hidden;transform:scale(.6) rotate(-90deg);
  transition:background .3s,opacity .25s ease,transform .25s ease,visibility .25s;
}
.sph-fcall__close:hover{background:#FF5A1F}

/* Umschalten. Die Karte startet eine Spur später als der Knopfwechsel, dadurch
   wirkt die Bewegung wie eine Bewegung und nicht wie zwei. */
.sph-fcall.is-open .sph-fcall__panel{
  opacity:1;visibility:visible;transform:none;transition-delay:.06s;
}
.sph-fcall.is-open .sph-fcall__close{opacity:1;visibility:visible;transform:none}
.sph-fcall.is-open .sph-fcall__toggle{
  opacity:0;visibility:hidden;transform:scale(.85);
}

.sph-fcall__toggle:focus-visible,
.sph-fcall__close:focus-visible,
.sph-fcall__num:focus-visible{outline:3px solid var(--sph-navy);outline-offset:3px}

/* ==========================================================================
   20 · SEITENMENÜ RECHTS (ab 1025px)
   Drei Reiter am rechten Rand, senkrecht mittig; dahinter fährt die Karte
   heraus. Nachbau von side-menu.html.
   ========================================================================== */
.sph-side{
  position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:70;
  display:flex;align-items:center;
}
.sph-side__tabs{display:flex;flex-direction:column;gap:12px;order:2;padding:10px 0}
.sph-side__item{position:relative;display:flex;align-items:center;justify-content:flex-end}

.sph-side__tab{
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;cursor:pointer;border:0;
  width:68px;height:68px;padding:0;
  border-radius:22px 0 0 22px;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 8px 24px rgba(0,0,0,.14);
  transition:width .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease;
}
/* Der Farbverlauf wächst beim Überfahren von unten in den Knopf hinein und
   wandert dabei weiter – dieselbe Bewegung wie auf der 24/7-Box. */
.sph-side__tab::before{
  content:"";position:absolute;inset:0;z-index:0;
  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;
  transform:translateY(101%);
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.sph-side__tab:hover::before,.sph-side__tab.is-active::before{transform:translateY(0)}
.sph-side__tab:hover,.sph-side__tab.is-active{width:80px;box-shadow:0 14px 32px rgba(0,0,0,.24)}

/* Weiße Scheibe hinter dem Symbol. Ohne sie verschwinden die orangenen Icons
   im orangenen Verlauf, sobald der hochwächst – sie haben fast dieselbe Farbe.
   So bleibt die mehrfarbige Zeichnung erhalten, statt sie weiß einzufärben. */
.sph-side__tab::after{
  content:"";position:absolute;left:50%;top:50%;z-index:1;
  width:54px;height:54px;margin:-27px 0 0 -27px;
  border-radius:50%;background:#fff;
  transform:scale(.2);opacity:0;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .25s ease;
}
.sph-side__tab:hover::after,.sph-side__tab.is-active::after{transform:scale(1);opacity:1}

/* Das Symbol wippt dauerhaft leicht (eigene translate-Eigenschaft, damit es
   sich nicht mit dem transform des Überfahrens beißt) und springt beim
   Überfahren kurz an. */
.sph-side__icon{
  position:relative;z-index:2;display:block;width:40px;height:40px;
  animation:sph-side-bob 3.2s ease-in-out infinite;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),filter .35s ease;
}
.sph-side__tab:hover .sph-side__icon{
  transform:scale(1.16) rotate(-8deg);
  filter:drop-shadow(0 5px 10px rgba(0,0,0,.28));
}
.sph-side__tab.is-active .sph-side__icon{transform:scale(1.08)}
/* Versetzt starten, sonst wippen alle drei im Gleichschritt. */
.sph-side__item:nth-child(2) .sph-side__icon{animation-delay:-1.1s}
.sph-side__item:nth-child(3) .sph-side__icon{animation-delay:-2.2s}
@keyframes sph-side-bob{0%,100%{translate:0 0}50%{translate:0 -5px}}

/* Beschriftung fährt beim Überfahren nach links aus dem Knopf heraus. */
.sph-side__label{
  position:absolute;right:100%;margin-right:10px;white-space:nowrap;
  background:var(--sph-navy);color:#fff;
  font-size:14px;font-weight:600;line-height:1;
  padding:9px 14px;border-radius:8px;
  box-shadow:0 8px 20px rgba(0,0,0,.2);
  opacity:0;visibility:hidden;transform:translateX(10px);pointer-events:none;
  transition:opacity .3s ease,transform .3s cubic-bezier(.2,.8,.2,1),visibility .3s;
}
.sph-side__item:hover .sph-side__label{opacity:1;visibility:visible;transform:translateX(0)}

/* Die Karten liegen übereinander; sichtbar ist immer höchstens eine. */
.sph-side__panels{position:relative;order:1;width:300px}
.sph-side__panel{
  position:absolute;right:0;top:50%;transform:translate(24px,-50%) scale(.96);
  transform-origin:100% 50%;
  width:300px;
  background:#fff;border-radius:18px;
  box-shadow:0 18px 46px rgba(0,0,0,.22);
  padding:26px 22px 22px;text-align:center;
  opacity:0;visibility:hidden;
  transition:opacity .35s ease,transform .35s cubic-bezier(.2,.8,.2,1),visibility .35s;
}
.sph-side__panel.is-active{opacity:1;visibility:visible;transform:translate(0,-50%) scale(1)}
/* Inhalt kommt eine Spur nach der Karte – dadurch wirkt das Öffnen gestaffelt. */
.sph-side__panel > *{opacity:0;transform:translateY(8px);transition:opacity .3s ease .1s,transform .3s ease .1s}
.sph-side__panel.is-active > *{opacity:1;transform:none}
.sph-side__close{
  position:absolute;right:10px;top:6px;cursor:pointer;border:0;background:none;
  color:var(--sph-gray);font-family:"Poppins",Sans-serif;font-size:22px;line-height:1;
  padding:4px 6px;transition:color .3s;
}
.sph-side__close:hover{color:var(--sph-orange)}
.sph-side__text{font-size:15px;line-height:1.5;color:var(--sph-gray);margin-bottom:18px}
.sph-side__map{margin-bottom:18px;border-radius:10px;overflow:hidden}
.sph-side__map iframe{display:block;width:100%;height:180px;border:0}
.sph-side__btn{
  display:inline-block;border-radius:8px;
  background:var(--sph-yellow);color:var(--sph-navy);
  font-size:15px;font-weight:600;line-height:1.4;
  padding:10px 20px;transition:background .3s,color .3s;
}
.sph-side__btn:hover{background:var(--sph-navy);color:#fff}
.sph-side__tab:focus-visible,.sph-side__btn:focus-visible,
.sph-side__close:focus-visible{outline:3px solid var(--sph-navy);outline-offset:3px}

/* ==========================================================================
   20a · MITTIGES FENSTER (Rückruf)
   Ausgelöst von jedem Element mit data-modal="…". Sichtbarkeit hängt an zwei
   Klassen: .is-visible hängt es ein (display), .is-open blendet es über –
   display allein ließe sich nicht animieren.
   ========================================================================== */
.sph-modal{
  display:none;
  position:fixed;inset:0;z-index:100;
  align-items:center;justify-content:center;
  padding:20px;
}
.sph-modal.is-visible{display:flex}
.sph-modal__backdrop{
  position:absolute;inset:0;
  background:rgba(7,25,46,.62);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .3s ease;
}
.sph-modal.is-open .sph-modal__backdrop{opacity:1}

.sph-modal__box{
  position:relative;
  width:min(560px,100%);max-height:calc(100vh - 40px);overflow-y:auto;
  background:#fff;border-radius:18px;
  box-shadow:0 26px 60px rgba(0,0,0,.35);
  padding:34px 30px 30px;
  opacity:0;transform:translateY(18px) scale(.96);
  transition:opacity .3s ease,transform .35s cubic-bezier(.2,.8,.2,1);
}
.sph-modal.is-open .sph-modal__box{opacity:1;transform:none}

.sph-modal__close{
  position:absolute;right:14px;top:10px;cursor:pointer;border:0;background:none;
  color:var(--sph-gray);font-family:"Poppins",Sans-serif;font-size:30px;line-height:1;
  padding:2px 8px;transition:color .3s;
}
.sph-modal__close:hover{color:var(--sph-orange)}
.sph-modal__close:focus-visible{outline:3px solid var(--sph-navy);outline-offset:2px}
.sph-modal__title{font-size:1.8em;font-weight:600;line-height:1.3;color:var(--sph-gray);margin-bottom:10px;padding-right:30px}
.sph-modal__text{font-size:var(--sph-p-size);line-height:var(--sph-p-line);color:var(--sph-gray);margin-bottom:22px}
/* Das Formular bringt seine eigene Karte mit, hier also kein zweiter Rahmen. */
.sph-modal__body .sph-fbox{padding:0;background:none;box-shadow:none}

/* ==========================================================================
   21 · KLEBENDE HAUPTNAVIGATION
   Der Platzhalter (.sph-nav__slot) bekommt beim Festkleben per JS die Höhe der
   Leiste, damit der Inhalt darunter nicht nach oben springt.
   ========================================================================== */
.sph-nav.is-stuck{
  position:fixed;top:0;left:0;right:0;z-index:80;
  box-shadow:0 6px 22px rgba(0,0,0,.16);
  animation:sph-navdrop .3s ease both;
}
@keyframes sph-navdrop{from{transform:translateY(-100%)}to{transform:translateY(0)}}

/* Bis 1024px verhält sich die Kopfzeile wie in Apps: beim Herunterscrollen
   fährt sie aus dem Bild, beim Hochscrollen sofort wieder herein. Die Regel
   steht bewusst hier und nicht im Responsive-Block, damit sie direkt neben dem
   Klebe-Zustand steht, zu dem sie gehört. */
@media (max-width:1024px){
  .sph-nav.is-stuck{
    /* Die Einblend-Animation würde jedes Umschalten überschreiben. */
    animation:none;
    transition:transform .32s cubic-bezier(.2,.8,.2,1);
  }
  .sph-nav.is-hidden{transform:translateY(0%)}
}

/* ==========================================================================
   22 · LEISTE AM UNTEREN RAND (bis 1024px)
   Drei Spalten: Hotline, Leistungen, Menü – siehe tab-mobile-footer.PNG.
   ========================================================================== */
.sph-mbar{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:75;
  height:64px;
  box-shadow:0 -4px 18px rgba(0,0,0,.18);
}
.sph-mbar__call{
  flex:1 1 auto;min-width:0;
  display:flex;align-items:center;gap:12px;
  background:var(--sph-navy);color:#fff;
  padding:0 14px;
}
.sph-mbar__callicon{width:26px;height:26px;fill:var(--sph-yellow);flex:none}
.sph-mbar__callbody{display:block;min-width:0}
.sph-mbar__calllabel{
  display:block;
  font-size:13px;
  font-weight:600;
  line-height:1.3;
  color:#fff;
  overflow:hidden;
  /* text-overflow:ellipsis; */
  white-space: normal;
}
.sph-mbar__callnum{
  display:block;font-family:"Poppins",Sans-serif;
  font-size:19px;font-weight:600;font-style:italic;line-height:1.2;color:var(--sph-yellow);
}
.sph-mbar__btn{
  flex:0 0 92px;cursor:pointer;border:0;border-left:1px solid rgba(0,0,0,.12);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:var(--sph-yellow);color:var(--sph-navy);
  font-family:"Poppins",Sans-serif;font-size:12px;font-weight:600;line-height:1;
  transition:background .3s;
}
.sph-mbar__btn:hover{background:#F5A50C}
.sph-mbar__icon{width:20px;height:20px;fill:var(--sph-navy)}
/* Drei Punkte übereinander, wie in der Vorlage. */
.sph-mbar__dots{display:flex;flex-direction:column;gap:3px;height:20px;justify-content:center}
.sph-mbar__dots span{width:4px;height:4px;border-radius:50%;background:var(--sph-navy)}

/* ==========================================================================
   23 · VOLLBILD-EBENEN VON MENÜ UND LEISTUNGEN (bis 1024px)
   mobile-menu.PNG und mobile-leistungen.PNG.
   ========================================================================== */
.sph-mpanel{
  display:none;
  position:fixed;inset:0;z-index:90;
  background:var(--sph-light);
  overflow-y:auto;overscroll-behavior:contain;
  padding:18px 18px 90px;
  opacity:0;transform:translateY(16px);
  transition:opacity .3s ease,transform .3s cubic-bezier(.2,.7,.3,1);
}
.sph-mpanel.is-visible{display:block}
.sph-mpanel.is-open{opacity:1;transform:none}

.sph-mpanel__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.sph-mpanel__logo{flex:1 1 auto;display:flex;justify-content:center}
.sph-mpanel__logo img{width:120px;height:auto}
.sph-mpanel__close{
  flex:none;cursor:pointer;border:0;background:none;
  color:var(--sph-orange);font-family:"Poppins",Sans-serif;font-size:34px;line-height:1;
  padding:0 4px;transition:color .3s;
}
.sph-mpanel__close:hover{color:var(--sph-yellow)}

.sph-mpanel__tel{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin:18px 0 26px;
}
.sph-mpanel__telicon{width:44px;height:44px;flex:none}
.sph-mpanel__tel span{
  font-family:"Poppins",Sans-serif;font-size:34px;font-weight:600;font-style:italic;
  line-height:1.1;color:var(--sph-orange);
}

/* Menü: eine weiße Karte, Einträge durch Haarlinien getrennt. */
.sph-mpanel__links{background:#fff;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.08);overflow:hidden}
.sph-mpanel__links li + li{border-top:1px solid #ECECEC}
.sph-mpanel__links a{
  display:flex;align-items:center;gap:10px;
  padding:15px 18px;font-size:18px;font-weight:400;color:var(--sph-gray);
}
.sph-mpanel__links a:hover{color:var(--sph-orange)}
.sph-mpanel__linkicon{width:16px;height:16px;flex:none}

/* Leistungen: zwei Spalten weißer Kacheln. */
.sph-mpanel__grid{display:flex;flex-wrap:wrap;gap:14px}
.sph-mpanel__card{
  width:calc(50% - 7px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:#fff;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.08);
  padding:22px 10px;text-align:center;
  font-size:15px;font-weight:400;color:var(--sph-gray);
  transition:transform .3s,box-shadow .3s;
}
.sph-mpanel__card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.14);color:var(--sph-gray)}
.sph-mpanel__cardicon{width:46px;height:46px}

/* Anfrage-Schaltfläche am Fuß beider Ebenen, Pfeilform wie in der Vorlage. */
.sph-mpanel__cta{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin:30px auto 0;width:min(320px,100%);
  padding:16px 26px;
  color:#fff;font-size:21px;font-weight:600;font-style:italic;line-height:1;
  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;
  clip-path:polygon(calc(100% - 22px) 0,100% 50%,calc(100% - 22px) 100%,0 100%,14px 50%,0 0);
}
.sph-mpanel__cta:hover{color:#fff}
.sph-mpanel__ctaicon{width:22px;height:22px;fill:#fff;flex:none}
.sph-mpanel__close:focus-visible,.sph-mbar__btn:focus-visible{outline:3px solid var(--sph-navy);outline-offset:-3px}
.sph-faq__body p {
    font-size: 16px;
    margin-bottom: 10px;
}
/* Das Sperren des Hintergrund-Scrollens erledigt .sph-noscroll aus pages.css,
   dieselbe Klasse benutzt schon der Leuchtkasten der Galerie. */

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1400px){
  /* Ein Wert, alle Container folgen ihm – siehe die Container-Regel oben. */
  :root{--sph-gutter:20px}
  .sph-usp{padding-left:30%}
}

@media (max-width:1024px){
  /* Bis 1024px trägt die Kopfzeile nur noch Logo links und Anfrage rechts.
     Menü, Hotline und die obere Leiste wandern in die Leiste am unteren Rand
     (siehe Abschnitt 22) – so wie in components/tab-mobile-header.PNG. */
  .sph-topbar{display:none}
  .sph-nav__inner{justify-content:space-between;min-height:0;padding:10px 10px}
  .sph-nav__brand{width:auto;align-self:center}
  .sph-nav__logo{position:static;width: 99px;margin-bottom: -43px;}
  .sph-nav__menuwrap,.sph-nav__hotline{display:none}
  .sph-nav__cta{display:inline-flex}

  /* Seitenmenü rechts aus, Leiste unten an. */
  .sph-side{display:none}
  .sph-mbar{display:flex}
  /* Platz für die Leiste, sonst verdeckt sie das Ende jeder Seite. */
  body{padding-bottom:64px}
  /* Die schwebenden Knöpfe rücken über die Leiste. */
  .sph-wa{bottom:130px !important;}
  .sph-fcall{bottom:78px;display: none;}

  .sph-hero__col{width:100%;padding: 0px 0px;}
  .sph-usp{padding-left:0;margin-top:0}
  .sph-usp__inner{flex-wrap:wrap;padding-top: 20px;}
  .sph-usp__box{width:100%;border-radius:0;min-height:0}
  .sph-usp__box--first{border-radius:20px 20px 0 0}
  .sph-usp__box--last{border-radius:0 0 20px 20px}

  .sph-why__card{width:50%}
  .sph-steps__grid{flex-wrap:wrap}
  .sph-steps__col{width:50%;padding:2%;margin:0}
  .sph-steps__col--down,.sph-steps__col--down2{padding-top:2%}
  .sph-steps__arrow{display:none}

  .sph-stats__inner{flex-wrap:wrap;padding-block:6%}
  .sph-stats__cta{width:100%;padding:0 0 30px}
  .sph-stats__grid{width:100%;justify-content:flex-start}

  .sph-services__card{width:50%}
  .sph-ctatruck__col{width:100%;padding:8% 0;max-width: 489px;}
  .sph-contact__inner{flex-wrap:wrap}
  .sph-contact__formcol,.sph-contact__textcol{width:100%;padding:0}
  .sph-contact__textcol{margin-top:36px}
  .sph-about__cols{flex-wrap:wrap}
  .sph-about__col{width: 100% !important;padding:2% 0 !important}
  .sph-areas__inner{flex-wrap:wrap}
  .sph-areas__content,.sph-areas__mapcol{width:100%}
  .sph-faq__inner{flex-wrap:wrap}
  .sph-faq__list,.sph-faq__media{width:100%}
  .sph-footer__grid{flex-wrap:wrap;gap:30px 0}
  /* Die Breiten der Basisregeln stehen auf :nth-of-type/:last-child und sind
     damit spezifischer – hier mit gleicher Spezifität überschreiben, sonst
     bleiben die Spalten auch am Handy bei 25 %. */
  .sph-footer__brand,.sph-footer__col,
  .sph-footer__col:nth-of-type(3),
  .sph-footer__col:last-child{width:50%}
  .sph-footer__bottom-inner{flex-wrap:wrap;justify-content:center;text-align:center;padding-top:46px}
  .sph-footer__emergency{left:50%;transform:translateX(-50%)}
  .sph-footer__copy,.sph-footer__credit{margin:0}
  /* Gestapelt zentriert wie die Nachbarzeilen. */
  .sph-footer__legal{justify-content:center;width:100%}

  /* ------------------------------------------------------------------
     SCHRIFTGRÖSSEN BIS 1024px (Tablet)
     Die Titel der Vorlage stehen in em und hängen damit an der
     Grundschrift (1.1rem = 17.6px). Die ändert sich erst bei 767px –
     bis dahin blieben alle Überschriften so groß wie am Desktop: 2.5em
     sind 44px, und die stehen ab hier in einer einspaltigen Kolumne
     statt in einer halben Bildschirmbreite.
     Sortiert nach Rolle, nicht nach Sektion: was am Desktop dieselbe
     Ebene ist, bleibt es auch hier – ein Wert je Ebene.
     ------------------------------------------------------------------ */

  /* Fließtext: eine Quelle für alle Absätze und Listen (siehe :root). */
  :root{--sph-p-size:18px;--sph-li-size:16.5px;--sph-lead-size:1.15em}

  /* h1 – Hero der Startseite */
  .sph-hero__title{font-size:2.6em}
  .sph-hero__welcome{font-size:22px}
  .sph-hero__usps li{font-size:1.1em}

  /* h2 – Sektionstitel (Desktop 2.4em/2.5em) */
  .sph-why__title,
  .sph-video__title,
  .sph-steps__title,
  .sph-stats__title,
  .sph-services__title,
  .sph-ctatruck__title,
  .sph-contact__title,
  .sph-contact__heading,
  .sph-about__title,
  .sph-faq__title{font-size:2em}
  /* Feste Pixel in der Basisregel, deshalb auch hier fest. */
  .sph-areas__title{font-size:30px;line-height:1.3}

  /* h3 – Untertitel unter einem Sektionstitel (Desktop 1.5em) */
  .sph-why__subtitle,
  .sph-steps__subtitle,
  .sph-services__subtitle,
  .sph-press__title{font-size:1.3em}
  .sph-modal__title{font-size:1.5em}

  /* h3/h4/h5 – Überschriften in Karten und Kacheln */
  .sph-why__card h3,
  .sph-services__card h3{font-size:1.2em}
  .sph-usp__box h3,
  .sph-steps__item h5{font-size:1.05em}
  .sph-faq__head{font-size:1.1em}

  /* Zahlen und Auszeichnungen */
  .sph-stats__num{font-size:1.5em}
  .sph-stats__label{font-size:1em}
  .sph-callbtn__number{font-size:1.3em}
  .sph-footer__heading{font-size:21px}
}

@media (max-width:767px){
  body{font-size:1rem}
  /* Logos am Telefon kleiner, Abstand enger – sonst läuft je Bildschirm
     nur noch ein Logo durchs Bild. */
  .sph-partners__track{gap:50px}
  .sph-partners__track img{width:72px;height:72px}
  .sph-topbar__contact{flex-direction:column;gap:6px}

  /* Logo, Burger und Hotline passen unter ~500px nicht in eine Zeile.
     Zeile 1: Logo + Burger, Zeile 2: Hotline über die volle Breite. */
  .sph-nav__inner{flex-wrap:wrap;justify-content:space-between;min-height:0;padding: 7px 10px;}
  /* .sph-nav__brand{order:1} */
  .sph-nav__menuwrap{order:2}
  .sph-nav__logo{width:110px}
  .sph-nav__hotline{order:3;width:100%;justify-content:center;padding-top:10px}
  .sph-nav__hotline-icon{width:32px}
  .sph-nav__hotline-label{font-size:13px}
  .sph-nav__hotline-number{font-size:19px}
  .sph-nav__menu{width:min(320px,calc(100vw - 40px))}
  .sph-hero{padding:14% 0 18%}
  .sph-hero__title{font-size: 2em;}
  .sph-why__card{width:100%}
  .sph-steps__col{width:100%}
  .sph-services__card{width:100%}
  /* Zwei verschachtelte 50%-Spalten ergeben am Handy 25%-Kacheln, in denen
     „Großeinsätze Berlin" nicht mehr umbrechen kann. */
  .sph-stats__grid{flex-wrap:wrap;gap:20px}
  .sph-stats__group{width:100%;gap:20px}
  .sph-stats__box{width:100%;max-width:340px}
  .sph-press__box{width:100%}
  .sph-footer__brand,.sph-footer__col,
  .sph-footer__col:nth-of-type(3),
  .sph-footer__col:last-child{width:100%}
  .sph-areas__cols{flex-wrap:wrap}
  .sph-areas__list{width:100%}
  .sph-faq__head{font-size:1em}
  /* Kopfzeile und untere Leiste am Telefon: Am schmalsten Gerät (320px) bleiben
     sonst weder für die Hotline-Zeile noch neben dem Logo genug Platz. */
  .sph-nav__logo{width: 90px;margin-bottom: -37px;}
  .sph-nav__cta{font-size:15px;padding:12px 22px}
  .sph-mbar__btn{flex:0 0 78px;font-size:11px}
  .sph-mbar__call{gap:9px;padding:0 10px}
  .sph-mbar__calllabel{font-size:11.5px}
  .sph-mbar__callnum{font-size:12px}
  /* Rufnummer in den Vollbild-Ebenen: 34px passen nicht in 320px. */
  .sph-mpanel__tel{gap:10px;margin:14px 0 20px}
  .sph-mpanel__tel span{font-size:27px}
  .sph-mpanel__telicon{width:36px;height:36px}
  .sph-mpanel__links a{font-size:16px;padding:13px 15px}
  .sph-mpanel__cardicon{width:38px;height:38px}
  .sph-mpanel__cta{font-size:18px;padding:14px 22px}

  /* Notdienst-Knopf näher an die Ecke, damit er weniger Inhalt verdeckt.
     Der Anker ist so groß wie der Schließen-Knopf, siehe Abschnitt 19. */
  .sph-fcall{left:16px;bottom:16px;width:46px;height:46px}
  .sph-fcall__toggle{font-size:15px;padding:14px 20px}
  .sph-fcall__close{width:46px;height:46px;font-size:24px}
  .sph-fcall__panel{max-width:calc(100vw - 32px);bottom:calc(100% + 12px)}

  /* ------------------------------------------------------------------
     SCHRIFTGRÖSSEN BIS 767px (Telefon)
     Die Grundschrift steht hier auf 1rem, alle em-Titel schrumpfen
     dadurch schon um 9 %. Bei einem 44px-Titel sind das immer noch
     40px – zu viel für 320px Bildschirmbreite. Zweite Stufe derselben
     Skala wie im 1024er-Block, wieder eine Größe je Ebene.
     ------------------------------------------------------------------ */

  :root{--sph-p-size:17px;--sph-li-size:16px;--sph-lead-size:1.1em}

  /* h1 – .sph-hero__title steht weiter oben in diesem Block (2.2em). */
  .sph-hero__welcome{font-size:19px}
  .sph-hero__usps li{font-size: 15px;}

  /* h2 – Sektionstitel */
  .sph-why__title,
  .sph-video__title,
  .sph-steps__title,
  .sph-stats__title,
  .sph-services__title,
  .sph-ctatruck__title,
  .sph-contact__title,
  .sph-contact__heading,
  .sph-about__title,
  .sph-faq__title{font-size:1.75em}
  .sph-areas__title{font-size:25px;line-height:1.3;padding-bottom:10px;}

  /* h3 – Untertitel */
  .sph-why__subtitle,
  .sph-steps__subtitle,
  .sph-services__subtitle,
  .sph-press__title{font-size:1.2em}
  .sph-modal__title{font-size:1.35em}

  /* h3/h4/h5 – Karten und Kacheln. Unter 1.1em wird der Unterschied
     zum Fließtext unlesbar, deshalb endet die Skala hier. */
  .sph-why__card h3,
  .sph-services__card h3{font-size:1.15em}
  .sph-usp__box h3,
  .sph-steps__item h5{font-size:1.05em}

  /* Zahlen und Auszeichnungen */
  .sph-stats__num{font-size:1.4em}
  .sph-stats__label{font-size:1em}
  .sph-callbtn__number{font-size:1.25em}
  .sph-footer__heading{font-size:20px}
}
section.sph-services img.sph-bgimg {
    object-fit: contain;
    object-position: left top;
}
@media only screen and (max-width:768px){
  .sph-hero__badges img {
    width: 138px;
    height: auto;
    max-height: unset;
}
.sph-ctatruck .sph-bgimg {
    display: none;
}
h2.sph-about__title {
    text-align: left;
}
}