/* =========================================================================
   Startseite: Abschnitte unter dem Hero, übernommen von new.kfzgutachter-biesterfeldt.de
   (Seiten-CSS der Startseite, Post 17). Lädt nur auf der Startseite (Einstellung
   „Nur auf diesen Seiten“). Jeder Abschnitt ist ein HTML-Baustein mit dem Präfix hpl.

   Bisher: 2 Leistungen („Kompetente Gutachten für jede Situation.“) und
           3 Über uns („Persönlich. Unabhängig. An Ihrer Seite.“), 13.10.2026,
           4 Qualität („Qualität, auf die Sie sich verlassen können.“), 5 Partner („Starke
           Partner für Ihr gutes Recht.“), 6 Werkstatt („Eigene Werkstatt. Bessere
           Begutachtung.“), 7 Warum („Mehr Service. Mehr Sicherheit.“) und 8 Schlussband
           („Unfall gehabt? Jetzt persönlich beraten lassen.“), 14.10.2026.
   Die Kommentare stammen von new. und erklären, warum eine Regel so ist; viele Regeln
   überschreiben frühere (so sind die Abschnitte dort gewachsen). Gemeinsame Regeln stehen
   nur einmal (beim ersten Abschnitt). Je Abschnitt folgen die Anpassungen für final.:
   Schrift Archivo statt Inter/Sora, Texte und Symbole in den Vercel-Farben, Raster wie
   Kopf/Fuß von final.
   ========================================================================= */

/* =========================================================================
   2 Leistungen
   ========================================================================= */
/* ===== Startseite nach dem Layout vom 23.09.2026 =====
   Praefix hpl = HomePage Layout. Header und Footer gehoeren NICHT dazu.
   Jede Sektion ist EIN html-Widget in einer e-flexbox. Die Sektion steht auf
   display:block, damit die Widget-Huelle (die Elementor auf max-width:100%
   setzt) keine Rolle spielt - der innere Kasten zentriert sich selbst. */
/* Die Sektion bleibt trotz dieser Regel eine Flexbox - Elementor setzt display:flex
   auf .e-con mit hoeherer Spezifitaet durch. Folge war: das Widget wurde nur so breit
   wie sein Inhalt und klebte LINKS statt mittig; bei 1440px blieben rechts 175px leer.
   Statt dagegen anzurennen wird das Widget selbst auf volle Breite gezwungen - dann
   zentriert sich der innere Kasten wie vorgesehen, egal ob Block oder Flex. */
.elementor .hplsek{display:block;width:100%;position:relative}
/* Die vertikalen Abstaende sitzen am INNEREN Kasten, nicht an der Sektion.
   Grund: Elementor setzt auf der Sektionshuelle (.e-con.e-atomic-element) ein
   eigenes padding von 10px mit hoeherer Spezifitaet - meine Regel dort verlor.
   Am inneren Kasten gibt es diesen Streit nicht. */
.elementor .hpli{max-width:1308px;margin-inline:auto;padding-inline:14px;padding-block:76px}
.elementor .hplaug{font-family:var(--b-schrift),sans-serif;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-700,#0349AE);margin:0 0 16px}
.elementor .hplh2{font-family:var(--b-schrift-titel),sans-serif;font-weight:700;letter-spacing:-.025em;font-size:clamp(26px,3.2vw,40px);line-height:1.12;color:var(--navy-950,#03183D);margin:0 0 14px;text-wrap:balance}
.elementor .hplsub{margin:0;font-size:16.5px;line-height:1.6;color:var(--slate-600,#434B5B);max-width:62ch}
.elementor .hplkopf{max-width:780px;margin:0 0 40px}
/* ===== 2 Leistungen ===== */
.elementor .hplsek--leist{background:#F6F9FE}
.elementor .hplleist{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:auto;gap:22px}
.elementor .hplkarte{background:#fff;border:1px solid var(--slate-200,#D9E0EA);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:border-color .16s,box-shadow .16s,transform .16s}
.elementor .hplkarte:hover{border-color:var(--blue-200,#B9CFF3);box-shadow:0 16px 34px rgba(3,24,61,.09);transform:translateY(-2px)}
.elementor .hplkarte--gross{grid-row:span 2}
.elementor .hplkbild{aspect-ratio:16/10;background:repeating-linear-gradient(135deg,var(--blue-50,#EEF4FD),var(--blue-50,#EEF4FD) 12px,var(--blue-50,#EEF4FD) 12px,var(--blue-50,#EEF4FD) 24px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:#8CA3C6}
.elementor .hplkleib{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.elementor .hplkleib h3{font-family:var(--b-schrift-titel),sans-serif;font-size:18.5px;font-weight:600;color:var(--navy-950,#03183D);margin:0 0 8px;letter-spacing:-.01em}
.elementor .hplkarte--klein .hplkleib h3{font-size:16.5px}
.elementor .hplkleib p{margin:0 0 18px;font-size:14.5px;line-height:1.55;color:var(--slate-500,#5A6272)}
.elementor .hplmehr{margin-top:auto;font-size:14px;font-weight:600;color:var(--blue-700,#0349AE);display:inline-flex;align-items:center;gap:7px}
.elementor .hplksym{width:42px;height:42px;border-radius:11px;background:var(--blue-50,#EEF4FD);display:flex;align-items:center;justify-content:center;color:var(--blue-700,#0349AE);margin-bottom:14px}
/* hpl-keine-unterstreichung */
/* Das Astra-Theme unterstreicht Verweise im Inhalt mit der Spezifitaet 0,2,1 -
   dadurch waren ALLE Texte in den Leistungskarten unterstrichen, weil die ganze
   Karte ein Verweis ist. Dieselbe Falle wie bei der Tafel auf den Einsatzgebieten.
   Deshalb hier 0,3,1 und gezielt nur dort wieder unterstreichen, wo es hingehoert. */
.elementor .hplsek a.hplkarte,.elementor .hplsek a.hplkarte:hover{text-decoration:none}
.elementor .hplsek a.hplkarte:hover .hplmehr{text-decoration:underline}
/* ===== Leistungen auf blauem Grund, nach Vorlage (24.09.2026) =====
   Bild: Blaupausen-Autos des Auftraggebers. Rechts verankert wie in der Vorlage;
   darunter ein Verlauf im selben Ton, damit bei hohem Abschnitt links kein Bruch entsteht. */
.elementor .hplsek--leist{background-color:#0050B6}
/* Schrift auf Blau */
.elementor .hplsek--leist .hplaug{color:rgba(255,255,255,.82)}
.elementor .hplsek--leist .hplh2{color:#fff}
.elementor .hplsek--leist .hplsub{color:#D6E4FA}
/* Fotofeld der grossen Karten: Seitenverhaeltnis aus der Vorlage (2,26:1) */
.elementor .hplkbild{display:block;aspect-ratio:2.26/1;background:var(--blue-50,#EEF4FD);overflow:hidden}
.elementor .hplkbild img{width:100%;height:100%;object-fit:cover;display:block}
/* Trennlinien oben und unten am Leistungen-Abschnitt (24.09.2026) */
.elementor .hplsek--leist{position:relative}
.elementor .hplsek--leist::before,.elementor .hplsek--leist::after{content:"";position:absolute;left:0;right:0;height:6px;background:#fff;z-index:2;pointer-events:none}
.elementor .hplsek--leist::before{top:0}
.elementor .hplsek--leist::after{bottom:0}
/* ===== Leistungen: Raster und Karten nach Vorlage (24.09.2026, nachgemessen) =====
   Spalten 1,31:1 statt gleich breit; Symbol links neben dem Titel; Text auf Titelkante. */
.elementor .hplsek--leist .hpli{position:relative}
.elementor .hplsek--leist .hplkopf{max-width:none;margin:0 0 9px}
.elementor .hplzeile{display:flex;align-items:last baseline;justify-content:space-between;gap:40px;flex-wrap:wrap}
.elementor .hplsek--leist .hplaug{font-size:13.5px;letter-spacing:.11em;margin:0 0 2px;line-height:1.2}
.elementor .hplsek--leist .hplh2{margin:0;line-height:1.1}
.elementor .hplsek--leist .hplsub{margin:0;text-align:right;font-size:16px;line-height:1.45;max-width:34ch;flex:0 1 auto;color:rgba(255,255,255,.86)}
.elementor .hplleist{grid-template-columns:1.22fr 1.22fr 1.04fr 1.04fr;gap:17px 14px;max-width:92%}
.elementor .hplsek--leist .hplkarte{border:1px solid var(--slate-200,#D9E0EA);border-radius:6px;box-shadow:none}
.elementor .hplsek--leist .hplkarte:hover{border-color:var(--blue-200,#B9CFF3);box-shadow:none;transform:translateY(-2px)}
.elementor .hplkarte--gross .hplkbild{flex:1 1 auto;min-height:0;aspect-ratio:auto}
.elementor .hplkleib{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;padding:18px 18px 14px}
.elementor .hplkleib .hplksym{grid-column:1;grid-row:1;margin:0;width:42px;height:42px}
.elementor .hplkleib h3{grid-column:2;grid-row:1;margin:0;font-size:23.5px}
.elementor .hplkarte--klein .hplkleib h3{font-size:16.5px}
.elementor .hplkleib p{grid-column:2;grid-row:2;margin:11px 0 0;font-size:13px;line-height:1.45}
.elementor .hplkleib .hplmehr{grid-column:2;grid-row:3;justify-self:end;margin-top:25px}
/* Handschrift wie in der Vorlage: ganz rechts unten am ABSCHNITTSrand, nicht am
   Containerrand - dafuer mit --rand aus dem Container herausgeschoben. width:auto +
   nowrap, sonst brach sie in dem 8,6%-Streifen auf vier Zeilen um und lag mitten
   auf der Blaupause. Ausblendgrenze von 1200 auf 1320 px, weil der freie Streifen
   rechts darunter schmaler wird als der Text. */
/* KORREKTUR 25.09.2026: Nutzer meldet den Text am rechten Fensterrand anliegend bei
   3813px Fensterbreite (Brave), obwohl der eigene Test bei identischer Breite 31px Abstand
   zeigte und Server-Cache sowie Browser-Cache beide sauber waren. Wahrscheinlichste Ursache:
   100vw zaehlt in vielen Browsern die Breite einer eingeblendeten Scrollleiste mit, die dem
   Inhalt gar nicht zur Verfuegung steht - bei --rand (basiert auf 100vw) verschiebt das den
   Text um den Betrag der Leistenbreite zu weit nach rechts. Deutlich groesserer Sicherheits-
   abstand statt der rechnerischen Punktlandung auf 24px. */
.elementor .hplleisthw{position:absolute;right:calc(48px - var(--rand,24px));bottom:40px;width:auto;white-space:nowrap;font-family:"Kaushan Script",Georgia,serif;font-size:clamp(15px,1.15vw,30px);line-height:1.34;color:#fff;text-align:right;transform:rotate(-5deg);transform-origin:100% 100%;pointer-events:none;text-shadow:0 2px 14px rgba(0,36,88,.55)}
@media (max-width:1320px){
.elementor .hplleist{max-width:none}
.elementor .hplleisthw{display:none}
}
/* Feinschliff: gleich hohe Kartenzeilen, Foto auf die halbe Kartenhoehe,
   Pfeil an den Kartenboden (Vorlage: 49,2 % Foto / 50,8 % Koerper) */
/* KORREKTUR 25.09.2026: Die grosse Karte war 278x406 (Verhaeltnis 0,68) statt wie in der
   Originalvorlage 1185x1097 (Verhaeltnis 1,08 - fast quadratisch). Ursache: flex:0 0 50%
   zwang das Foto auf exakt die halbe Kartenhoehe statt auf sein eigenes Seitenverhaeltnis -
   dadurch wurde die ganze Karte in die Hoehe gezogen und das Icon wirkte klein, egal wie
   gross es war. Jetzt seitenverhaeltnis-basiert wie im Vorlagenmass gemessen (1185/541=2,19,
   passt zum Fotozuschnitt 2,26:1). */
/* KORREKTUR Teil 5 (25.09.2026): statt den Freiraum als Luecke im Text zu verteilen
   (space-between), waechst jetzt das FOTO um die fehlende Hoehe - text bleibt kompakt
   wie bei den kleinen Karten (align-content:start), das Bild gleicht per object-fit:cover
   die Differenz aus (mehr Bildausschnitt sichtbar statt Weissraum). */
.elementor .hplkarte--gross .hplkbild{flex:0 0 auto;aspect-ratio:2.26/1}
.elementor .hplkleib{align-content:start}
/* Rasterkinder duerfen schrumpfen (min-width:auto ist die Voreinstellung und
   liess 'Kostenvoranschlag' und 'Haftpflichtgutachten' aus der Karte laufen).
   Dazu Silbentrennung, weil deutsche Komposita sonst nicht umbrechen.
   Symbol kleiner (Vorlage: rund 33 px, nicht 42), damit dem Titel mehr Breite bleibt. */
.elementor .hplkleib>*{min-width:0}
.elementor .hplkleib h3,.elementor .hplkleib p{overflow-wrap:break-word;hyphens:auto}
.elementor .hplkleib .hplksym{width:34px;height:34px;border-radius:9px}
.elementor .hplkleib{column-gap:12px}
.elementor .hplkleib .hplmehr{white-space:nowrap}
/* KORREKTUR: Symbol wieder ueber den Titel.
   Die Vorlage setzt es daneben, aber ihre Woerter sind kuerzer. Bei 'Haftpflichtgutachten'
   und 'Kostenvoranschlag' bleiben neben einem 34-px-Symbol nur rund 127 px - das erzwingt
   einen Umbruch, und ohne funktionierende Silbentrennung bricht der Browser mitten im Wort
   ('Unfallgutachte/n'). Ueber dem Titel steht die volle Kartenbreite zur Verfuegung. */
.elementor .hplkleib{grid-template-columns:1fr}
.elementor .hplkleib .hplksym{grid-column:1;grid-row:1;margin:0 0 12px;width:38px;height:38px}
.elementor .hplkleib h3{grid-column:1;grid-row:2}
.elementor .hplkleib p{grid-column:1;grid-row:3;margin:9px 0 0}
.elementor .hplkleib .hplmehr{grid-column:1;grid-row:4;justify-self:start;margin-top:20px}
.elementor .hplkleib h3,.elementor .hplkleib p{overflow-wrap:normal;hyphens:manual}
/* Umbrueche NACH der neuen Rasterregel wiederholen.
   Die alten Medienabfragen stehen weiter oben in der Datei und wurden von der
   spaeteren Regel gleicher Spezifitaet ausgehebelt - bei 375 px standen dadurch
   weiter vier Spalten mit 55 px Breite. */
@media (max-width:1000px){
.elementor .hplleist{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:18px}
.elementor .hplkarte--gross{grid-row:auto}
/* KORREKTUR Teil 5 (25.09.2026): statt den Freiraum als Luecke im Text zu verteilen
   (space-between), waechst jetzt das FOTO um die fehlende Hoehe - text bleibt kompakt
   wie bei den kleinen Karten (align-content:start), das Bild gleicht per object-fit:cover
   die Differenz aus (mehr Bildausschnitt sichtbar statt Weissraum). */
.elementor .hplkarte--gross .hplkbild{flex:0 0 auto;aspect-ratio:2.26/1}
.elementor .hplkleib h3{font-size:18.5px}
}
@media (max-width:620px){
.elementor .hplleist{grid-template-columns:1fr}
}
/* ===== Symbol doch DANEBEN, nach der hochaufgeloesten Vorlage (24.09.2026) =====
   Es geht doch - zwei Dinge hatten es vorher verhindert:
   1) unser Symbol sass in einem 38-px-Kaestchen, die Vorlage zeigt die blanke Linienform (~26 px)
   2) die Titelgroessen 23,5/16,5 px waren zu gross gerechnet; die Vorlage liegt bei rund 19/14,5 px
   Gemessene Textbreiten (Sora 600): 'Haftpflichtgutachten' 207 px bei 19 px,
   'Kostenvoranschlag' 144 px bei 14,5 px, 'Oldtimer-Gutachten' 154 px bei 14,5 px. */
.elementor .hplleist{max-width:90%}
.elementor .hplkleib{grid-template-columns:auto 1fr;column-gap:4px;align-items:center;padding:8px 7px 7px}
.elementor .hplkleib .hplksym{grid-column:1;grid-row:1;width:41px;height:41px;background:none;border-radius:0;margin:0}
.elementor .hplkleib .hplksym svg{width:100%;height:100%}
.elementor .hplkleib h3{grid-column:2;grid-row:1;margin:0;font-size:19px;line-height:1.2}
.elementor .hplkarte--klein .hplkleib h3{font-size:14.5px}
.elementor .hplkleib p{grid-column:2;grid-row:2;margin:5px 0 0}
.elementor .hplkleib .hplmehr{grid-column:2;grid-row:3;justify-self:end;margin-top:8px}
.elementor .hplkleib h3,.elementor .hplkleib p{overflow-wrap:normal;hyphens:manual}
@media (max-width:1000px){
.elementor .hplleist{max-width:none;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:18px}
.elementor .hplkarte--gross{grid-row:auto}
/* KORREKTUR Teil 5 (25.09.2026): statt den Freiraum als Luecke im Text zu verteilen
   (space-between), waechst jetzt das FOTO um die fehlende Hoehe - text bleibt kompakt
   wie bei den kleinen Karten (align-content:start), das Bild gleicht per object-fit:cover
   die Differenz aus (mehr Bildausschnitt sichtbar statt Weissraum). */
.elementor .hplkarte--gross .hplkbild{flex:0 0 auto;aspect-ratio:2.26/1}
.elementor .hplkleib h3{font-size:18px}
.elementor .hplkarte--klein .hplkleib h3{font-size:16px}
}
@media (max-width:620px){
.elementor .hplleist{grid-template-columns:1fr}
}
/* ===== Breite Bildschirme: drei Fehler behoben (24.09.2026) =====
   1) NAHT: das Bild lief mit 'auto 100%' nur 3x so breit wie hoch. Bei 2560x624 waren das
      1871 px - links davon klaffte der Verlauf, Kante bei x=673 deutlich sichtbar.
      Jetzt ZWEI Ebenen desselben Bildes: oben scharf rechts verankert (Auto), darunter
      dasselbe Bild mit 'cover' - gleiche Farben, also keine Kante mehr.
   2) Das Auto klebte am Fensterrand statt neben den Karten. Jetzt ueber --rand an die
      Containerkante gebunden.
   3) Inhalt war nur 42 % breit. Container fuer diesen Abschnitt auf 1600 px. */
.elementor .hplsek--leist{--rand:max(24px,(100vw - 1308px)/2)}
/* RASTER (25.09.2026): Die Startseite steht jetzt auf demselben Raster wie Kopf, Fuss und alle Unterseiten:
   1280 px Inhalt, Kante max(24px,(Fensterbreite - 1280)/2) = .hpli 1308 + 14 Innenabstand + 10 Sektionsrand.
   Die Verbreiterung auf 1600 ab 1700 px ist entfallen (Auftraggeber sah den Versatz Schlussband/Fuss). */
/* ===== Hintergrund neu: Textur ohne Autos + freigestelltes Auto (24.09.2026) =====
   Die Zwei-Ebenen-Loesung von vorhin erzeugte drei senkrechte Baender und drei Autos,
   weil beide Ebenen dasselbe Bild in verschiedenen Massstaeben zeigten.
   Jetzt getrennt: aus dem Originalbild ist der autofreie Bereich (x 450..1650) als
   Textur ausgeschnitten - die fuellt mit 'cover' immer und hat keine Kante.
   Das rechte Auto ist als weisse Strichzeichnung mit Alpha freigestellt (7 KB) und
   liegt als eigene Ebene rechts. Die weissen Karten decken es ab, wo sie darueberliegen. */
/* ===== Auto an die KARTENKANTE haengen, nicht an den Bildschirmrand (24.09.2026) =====
   Als Hintergrundebene sass es rechts am Abschnitt und stand bei 2560 px 302 px von den
   Karten entfernt - in der Vorlage schliesst es direkt an sie an. Jetzt eigenes Element
   bei left:90% (= genau die rechte Kante des Rasters), nach rechts ueberstehend und vom
   Abschnitt beschnitten. */
.elementor .hplsek--leist{overflow:hidden}
/* Grund als CSS statt Bild: das 1200er Texturbild wurde von 'cover' auf 2560 px
   um Faktor 2,1 aufgeblasen - aus dem 55-px-Raster wurden 117 px, sichtbar als grobes
   Gitter am linken Rand. Toene 1:1 aus dem Bild gemessen (Mitte #015DCB, Rand #00459B),
   Raster 58 px fest - damit bei JEDER Breite gleich fein und scharf. */
/* Links ist in der Vorlage ebenfalls eine Blaupause angeschnitten - sie stammt aus
   dem Originalbild des Auftraggebers (dort x 0..350) und ist genauso freigestellt
   wie die rechte. Unter 1000 px ausgeblendet: erste Ebene none, damit die Datei dort gar nicht erst laedt (Pruefbericht 25.09.2026). */
.elementor .hplsek--leist{background-color:#0050B6;background-image:url('/wp-content/uploads/2026/09/leist-auto-links-v2.webp'),repeating-linear-gradient(to right,rgba(255,255,255,.03) 0 1px,transparent 1px 58px),repeating-linear-gradient(to bottom,rgba(255,255,255,.03) 0 1px,transparent 1px 58px),radial-gradient(55% 75% at 100% 100%,rgba(1,50,125,.35) 0%,rgba(1,50,125,0) 100%),linear-gradient(90deg,#0156B2 0%,#0156B2 76%,#01489D 90%,#01489D 100%);background-position:left -100px center,center center,center center,center center,center center;background-size:auto 115%,auto,auto,cover,cover;background-repeat:no-repeat,repeat,repeat,no-repeat,no-repeat}
@media (max-width:1000px){
.elementor .hplsek--leist{background-image:none,repeating-linear-gradient(to right,rgba(255,255,255,.03) 0 1px,transparent 1px 58px),repeating-linear-gradient(to bottom,rgba(255,255,255,.03) 0 1px,transparent 1px 58px),radial-gradient(55% 75% at 100% 100%,rgba(1,50,125,.35) 0%,rgba(1,50,125,0) 100%),linear-gradient(90deg,#0156B2 0%,#0156B2 76%,#01489D 90%,#01489D 100%);background-size:0 0,auto,auto,cover,cover}
}
/* Auto RECHTS am Abschnittsrand verankert (Auftraggeber: 'immer noch zu weit links').
   Die Bildkante des Ausschnitts liegt damit immer auf dem Bildschirmrand, nie sichtbar
   im Blau. Auf breiten Schirmen (Streifen breiter als das Auto) waechst das Bild ueber
   die Containerabfrage mit: 125cqw = 1,25 x Streifenbreite als Bildhoehe, so dass das
   Auto (Seitenverhaeltnis 522:724) den Streifen fast fuellt. Schmale Streifen: Auto in
   voller Hoehe, die Front verschwindet hinter den Karten wie das linke in der Vorlage. */
.elementor .hplleistauto{position:absolute;left:90%;right:calc(-1 * var(--rand,24px));top:-8%;bottom:-8%;width:auto;background:none;container-type:size;pointer-events:none;z-index:0}
.elementor .hplleistauto::before{content:"";position:absolute;inset:0;background:url('/wp-content/uploads/2026/09/leist-auto-v2.webp') right 78% no-repeat;background-size:auto 100%;background-size:auto max(100%,125cqw)}
.elementor .hplleist,.elementor .hplsek--leist .hplkopf{position:relative;z-index:1}
/* Handschrift bleibt absolut - relative wuerde sie in den Textfluss zurueckholen */
.elementor .hplleisthw{z-index:1}
@media (max-width:1000px){
.elementor .hplleistauto{display:none}
}
/* Zwischen 1000 und 1320 px ist die Handschrift ausgeblendet - dann darf das Raster
   die volle Containerbreite nutzen. Diese Regel MUSS hier ganz hinten stehen: die
   Regel .hplleist{max-width:90%} bei Offset ~27547 steht nach der 1320er-Abfrage und
   wuerde deren max-width:none sonst schlagen (gleiche Spezifitaet, spaeter gewinnt). */
@media (max-width:1320px){
.elementor .hplleist{max-width:none}
}
/* KORREKTUR 25.09.2026 Teil 2: .hplkleib{flex:1} aus der Basisregel (Zeile ~14204,
   von vor der Blau-Umstellung) liess den Textbereich JEDEN uebrigen Platz in der Karte
   auffuellen, statt sich nach seinem eigenen Inhalt zu richten - das hat die Karte
   zusaetzlich zur aspect-ratio-Korrektur oben in die Hoehe gezogen. Auf den eigenen
   Inhalt begrenzt. */
.elementor .hplsek--leist .hplkleib{flex:0 0 auto}
/* Grosse Karten: Foto und Textteil liegen per Subgrid in zwei gemeinsamen Rasterzeilen.
   Die Textzeile ist so hoch wie der laengere der beiden Texte, das Foto fuellt den Rest bis
   zur Unterkante der kleinen Karten - beide Fotos gleich gross, kein Leerraum. Die vier
   kleinen Karten stecken dafuer in .hplklein, die unter 1001px display:contents ist. */
@media (min-width:1001px){
.elementor .hplleist{grid-template-rows:1fr auto}
.elementor .hplsek--leist .hplkarte--gross{display:grid;grid-template-rows:subgrid;grid-row:span 2;row-gap:0}
.elementor .hplsek--leist .hplkarte--gross .hplkbild{aspect-ratio:2.26/1;align-self:stretch;height:auto}
.elementor .hplsek--leist .hplkarte--gross .hplkleib{align-content:start;grid-template-rows:auto auto 1fr}
.elementor .hplsek--leist .hplkarte--gross .hplkleib .hplmehr{align-self:end}
.elementor .hplklein{grid-column:3 / span 2;grid-row:1 / span 2;display:grid;grid-template-columns:subgrid;grid-template-rows:auto auto;row-gap:17px}
}
@media (max-width:1000px){
.elementor .hplklein{display:contents}
}
/* Leistungen: mehr Hintergrund wie in der Vorlage (24.09.2026 abends, gemessen): 1) duenne helle Schraeglinie oben links, 43 Grad, endet an der linken Kante der ersten Karte 30 px unter deren Oberkante (Vorlage: Luma +40, 1 Vorlagen-px); 2) Verlauf gleichmaessig #0156B2 bis 76 %, nach rechts dunkler #01489D, unten rechts #014092 (Vorlage #0154AF/#0156B2 links+Mitte, #01479C oben rechts, #024090 unten rechts); 3) Raster links schwach (.03), rechts ums Auto dichter (29 px, .07) - Vorlage: Linien alle 16-20 Vorlagen-px rechts, links nicht messbar. Die beiden weissen 6-px-Linien stecken jetzt zusammen im ::before, damit ::after das rechte Raster tragen kann. */
.elementor .hplsek--leist::before{top:0;bottom:0;height:auto;background:linear-gradient(#fff,#fff) top/100% 6px no-repeat,linear-gradient(#fff,#fff) bottom/100% 6px no-repeat}
.elementor .hplsek--leist::after{top:0;bottom:0;height:auto;z-index:0;background:repeating-linear-gradient(to right,rgba(255,255,255,.07) 0 1px,transparent 1px 29px) center center,repeating-linear-gradient(to bottom,rgba(255,255,255,.07) 0 1px,transparent 1px 29px) center center;-webkit-mask-image:linear-gradient(90deg,transparent 70%,#000 86%);mask-image:linear-gradient(90deg,transparent 70%,#000 86%)}
.elementor .hplsek--leist .hplleist::before{content:"";position:absolute;right:100%;top:-530px;width:600px;height:560px;background:linear-gradient(to top right,transparent calc(50% - 1px),rgba(255,255,255,.35) 50%,transparent calc(50% + 1px));pointer-events:none;z-index:-1}
@media (max-width:1000px){
.elementor .hplsek--leist::after,.elementor .hplsek--leist .hplleist::before{display:none}
}
/* ===== Endkontrolle 25.09.2026 (Pruefbericht mit Gegenpruefung, gemessen bei 375-3813 px) =====
   Nur bestaetigte Befunde. Kopf und Fuss unberuehrt. Kennungen wie im Bericht (A-L1 usw.). */
/* Leistungen: rechte Blaupause laeuft weich aus statt hart an der Kastenkante (A-L1) */
.elementor .hplleistauto::before{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 72px);mask-image:linear-gradient(90deg,transparent 0,#000 72px)}
/* Leistungen: Fotofeld der grossen Karten so breit wie die Karte. Vorher rechnete aspect-ratio die Breite
   aus der Subgrid-Hoehe, das Foto lief rechts aus der Karte und war nur links verankert (A-L2) */
@media (min-width:1001px){
.elementor .hplsek--leist .hplkarte--gross .hplkbild{width:100%;min-width:0}
}
/* Leistungen: beim Umbruch steht die Unterzeile naeher an der Ueberschrift als an den Karten (C-R13) */
.elementor .hplzeile{row-gap:8px}
/* Leistungen: kleine Kartentitel passen bei 1001-1060 px in die Karte (C-R4) */
@media (min-width:1001px) and (max-width:1060px){
.elementor .hplkarte--klein .hplkleib h3{font-size:13px}
}
/* Leistungen: Fokusring weiss statt blau auf Blau (E-T3) */
.elementor .hplsek--leist a.hplkarte:focus-visible{outline-color:#fff}
/* Umbrueche ohne Einzelwort in der letzten Zeile (B-T4, C-R14) */
.elementor .hplsub{text-wrap:pretty}
/* Leistungen 1321-1440 px: Kartenraster 88 statt 90 %, damit die Handschrift rechts unten nicht an der letzten Karte klebt (mit dem breiteren Raster sonst nur 1 px Abstand bei 1345) */
@media (min-width:1321px) and (max-width:1440px){
.elementor .hplleist{max-width:88%}
}

/* ----- Anpassungen für final. (Leistungen) ----- */
/* Raster wie Kopf, Fuß und Unterseiten von final. (Vercel): Inhalt höchstens 1240 px, Seitenrand
   --gutter (20–40 px); new. hatte 1280 (.hpli 1308 + 14). Gilt für alle Abschnitte (.hpli).
   --rand ist der Abstand vom inneren Kasten bis zum Abschnittsrand, daran hängen das rechte
   Auto und die Handschrift. */
.elementor .hpli{max-width:calc(1240px + 2 * var(--gutter,20px));padding-inline:var(--gutter,20px)}
.elementor .hplsek--leist{--rand:max(0px,(100vw - 1240px) / 2 - var(--gutter,20px))}
/* Der weiße Strich zwischen Hero und Leistungen sitzt auf final. schon am Hero
   (.start-hero::after, so abgenommen). Hier deshalb nur noch der Strich unten. */
.elementor .hplsek--leist::before{background:linear-gradient(#fff,#fff) bottom/100% 6px no-repeat}
/* =========================================================================
   3 Über uns
   ========================================================================= */
/* Wie in der Vorlage: vier Punkte in EINER Reihe, Inhalt ZENTRIERT unter einem
   freistehenden blauen Symbol - kein Kaestchen, keine Flaeche dahinter. */
.elementor .hplvico svg{width:clamp(28px,2.1vw,44px);height:clamp(28px,2.1vw,44px)}
/* ===== 3 Ueber uns ===== */
.elementor .hplsek--ueber{background:#fff}
.elementor .hplueber{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.elementor .hplmerk{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:34px}
.elementor .hplmerk .hplvico{width:40px;height:40px;border-radius:11px;margin-bottom:11px}
.elementor .hplmerk b{display:block;font-family:var(--b-schrift-titel),sans-serif;font-size:14.5px;font-weight:600;color:var(--navy-950,#03183D);margin-bottom:4px}
.elementor .hplmerk p{margin:0;font-size:13.5px;line-height:1.5;color:var(--slate-500,#5A6272)}
@media (max-width:920px){
.elementor .hplueber{grid-template-columns:1fr;gap:36px}
}
@media (max-width:640px){
.elementor .hplmerk{grid-template-columns:1fr;gap:18px}
}
/* Ueber uns: Bildcollage nach der Vorlage - grosses Foto schraeg geschnitten, kleines
   Foto gedreht mit weissem Rand, zwei Handschriften, blasse Autozeichnung. Lagen in
   Prozent der Collage, Schriftgroessen in cqw, damit alles mit der Breite skaliert. */
.elementor .hplueber{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:44px;align-items:center}
.elementor .hplcoll{position:relative;container-type:inline-size;align-self:stretch;justify-self:stretch;width:100%;aspect-ratio:1.7;min-height:100%}
.elementor .hplcoll-haupt img,.elementor .hplcoll-klein img{display:block;max-width:none}
.elementor .hplcoll-haupt{position:absolute;left:0;top:0;width:74%;height:100%;clip-path:polygon(19% 0,100% 0,81% 100%,0 100%);z-index:1;background:var(--blue-50,#EEF4FD)}
.elementor .hplcoll-haupt img{width:100%;height:100%;object-fit:cover;object-position:56% 30%}
.elementor .hplcoll-zeich{display:block;max-width:none;position:absolute;right:-1%;top:3%;width:40%;height:auto;opacity:.32;z-index:0}
.elementor .hplcoll-hw{margin:0;font-family:"Kaushan Script",Georgia,serif;color:var(--blue-700,#0349AE);line-height:1.14;position:absolute;z-index:3}
.elementor .hplcoll-hw--oben{right:0;top:29%;width:23%;font-size:clamp(13px,3.1cqw,25px);transform:rotate(-8deg);transform-origin:0 100%}
.elementor .hplcoll-klein{position:absolute;left:53%;bottom:1%;width:31%;margin:0;padding:.9cqw;background:#fff;border-radius:3px;box-shadow:0 14px 34px rgba(3,24,61,.24);transform:rotate(-3deg);z-index:2}
.elementor .hplcoll-klein img{width:100%;height:auto;aspect-ratio:1.28;object-fit:cover;object-position:60% 50%}
.elementor .hplcoll-hw--unten{left:70%;bottom:2%;font-size:clamp(12px,2.5cqw,21px);background:#fff;padding:.3em .55em .35em;border-radius:2px;box-shadow:0 6px 16px rgba(3,24,61,.12);transform:rotate(-7deg);white-space:nowrap}
@media (max-width:1100px){
.elementor .hplueber{grid-template-columns:1fr;gap:34px}
.elementor .hplcoll{aspect-ratio:2;min-height:0}
}
/* Telefon: hoeher, kleines Foto groesser; obere Handschrift und Zeichnung waeren zu klein. */
@media (max-width:699px){
.elementor .hplcoll{aspect-ratio:1.18}
.elementor .hplcoll-haupt{width:90%;height:80%;clip-path:polygon(12% 0,100% 0,88% 100%,0 100%)}
.elementor .hplcoll-klein{left:auto;right:1%;bottom:1%;width:48%;padding:1.4cqw}
.elementor .hplcoll-hw--oben,.elementor .hplcoll-zeich{display:none}
.elementor .hplcoll-hw--unten{left:auto;right:0;bottom:0;font-size:clamp(12px,3.9cqw,17px)}
}
/* Collage reicht wie in der Vorlage von Ober- bis Unterkante des Abschnitts (86px =
   76px Innenabstand + 10px Sektion). Die Zeichnung steht rechts NEBEN dem Foto. */
@media (min-width:1101px){
.elementor .hplcoll{margin-block:-86px}
}
/* Zeichnung und Handschrift wie in der Vorlage: die Zeichnung beginnt an der oberen
   Fotoecke und nutzt den freien Rand bis zum Fensterrand (dort leicht angeschnitten,
   hoechstens 520px breit); die Handschrift steht unter der Bodenlinie und waechst mit.
   --rand = Abstand Collage bis Sektionsrand (1280 Inhalt, 14+10 Innenabstand, Raster seit 25.09.2026). */
.elementor .hplsek--ueber{overflow-x:clip}
@media (min-width:1101px){
.elementor .hplcoll{--rand:calc((100vw - 20px - min(1308px,100vw - 20px)) / 2 + 24px)}
}
.elementor .hplcoll-zeich,.elementor .hplcoll-hw--oben{--zb:min(calc(23.5cqw + var(--rand,0px) + 30px),520px)}
.elementor .hplcoll-zeich{left:76.5%;right:auto;top:3.5%;width:var(--zb);opacity:.34}
.elementor .hplcoll-hw--oben{left:calc(76.5cqw + var(--zb) * .38);right:auto;top:calc(3.5% + var(--zb) / 2.52 * .97);width:auto;white-space:nowrap;font-size:max(14px,calc(var(--zb) * .066));line-height:1.2;transform:rotate(-9deg);transform-origin:0 100%}
.elementor .hplcoll-klein{bottom:4%}
/* Zweite, blassere Zeichnung unten rechts wie in der Vorlage - dieselbe Datei gespiegelt,
   beginnt hinter kleinem Foto und Etikett und laeuft rechts aus dem Bild. Nur zweispaltig. */
.elementor .hplcoll-zeich--2{left:72%;top:auto;bottom:3%;width:calc(var(--zb) * .85);opacity:.2;transform:scaleX(-1)}
@media (max-width:1100px){
.elementor .hplcoll-zeich--2{display:none}
}
/* Ueber uns links nach der Vorlage: drei Punkte mittig, Symbol oben (Personengruppe,
   Schild mit Haken, Handschlag), zweizeiliger Titel, kurze Unterzeile. Telefon: Zeilen. */
.elementor .hplueber .hplmerk{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:30px;max-width:560px}
.elementor .hplueber .hplmerk>div{text-align:center}
.elementor .hplueber .hplmerk .hplvico{display:flex;align-items:center;justify-content:center;width:auto;height:auto;margin:0 auto 10px;color:var(--blue-700,#0349AE);background:none;border-radius:0}
.elementor .hplueber .hplmerk .hplvico svg{width:44px;height:44px}
.elementor .hplueber .hplmerk b{font-size:14.5px;line-height:1.3;margin-bottom:5px}
.elementor .hplueber .hplmerk p{font-size:12.5px;line-height:1.45}
@media (max-width:560px){
.elementor .hplueber .hplmerk{grid-template-columns:1fr;gap:16px;max-width:none}
.elementor .hplueber .hplmerk>div{display:grid;grid-template-columns:44px 1fr;column-gap:14px;align-items:center;text-align:left}
.elementor .hplueber .hplmerk .hplvico{grid-row:1 / span 2;margin:0}
.elementor .hplueber .hplmerk .hplvico svg{width:36px;height:36px}
.elementor .hplueber .hplmerk b br{display:none}
.elementor .hplueber .hplmerk b{margin:0 0 2px;align-self:end}
.elementor .hplueber .hplmerk p{align-self:start}
}
/* Ueber uns: Schatten der Collage malen nicht mehr oben in den Qualitaetsabschnitt (C-R12) */
.elementor .hplsek--ueber{isolation:isolate}

/* ----- Anpassungen für final. (Über uns) ----- */
/* Augenbraue so hoch wie auf new.: dort erbt sie 26,4 px Zeilenhöhe vom Fließtext,
   auf final. wären es 29,2 px (Abschnitt sonst 3 px höher). */
.elementor .hplsek--ueber .hplaug{line-height:26.4px}
/* Die Collage läuft wie auf new. von Ober- bis Unterkante des Abschnitts. Auf final. hat der
   Abschnitt keinen eigenen 10-px-Rand, deshalb 76 statt 86 px. */
@media (min-width:1101px){
.elementor .hplcoll{margin-block:-76px}
/* --rand = Abstand der Collage bis zum Fensterrand, im Raster von final. (1240 + --gutter) */
.elementor .hplcoll{--rand:max(var(--gutter,20px),(100vw - 1240px) / 2)}
/* Kleines Foto mit der Handschrift „Präzise Analyse. Starke Ergebnisse.“ und die blasse
   Zeichnung dahinter 40 px höher (Auftraggeber 14.10.2026: „vom Bild mit dem Text Starke
   Ergebnisse … nach unten zu eng“). Das große Foto läuft weiter bis an die Unterkante
   („das Bild muss aber abschließen“). Gestapelt ist darunter genug Platz. */
.elementor .hplcoll-klein{bottom:calc(4% + 40px)}
.elementor .hplcoll-hw--unten{bottom:calc(2% + 40px)}
.elementor .hplcoll-zeich--2{bottom:calc(3% + 40px)}
}

/* =========================================================================
   4 Qualität
   ========================================================================= */
/* ===== 4 Qualitaet und Kompetenz ===== */
.elementor .hplsek--qual{background:#EEF5FD url("/wp-content/uploads/2026/09/qual-grund-2159.webp") right center/cover no-repeat}
/* Qualitaet nach der Vorlage: Kopf links, vier Nachweis-Platzhalter (Urkunde, Siegel,
   Urkunde, Pruefzeichen) und drei Punkte rechts. Echte Nachweise folgen - nichts nachgebildet. */
.elementor .hplqual .hplkopf{margin:0 0 30px;max-width:none}
.elementor .hplqual-reihe{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:44px;align-items:center}
.elementor .hplqual-nachweise{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;align-items:center}
.elementor .hplqual-punkte{list-style:none;margin:0;padding:0;display:grid;gap:24px}
.elementor .hplqual-punkte li{display:grid;grid-template-columns:44px 1fr;column-gap:16px;align-items:center}
.elementor .hplqp-ico{display:flex;color:var(--blue-700,#0349AE)}
.elementor .hplqp-ico svg{width:40px;height:40px}
.elementor .hplqual-punkte b{display:block;font-family:var(--b-schrift-titel),sans-serif;font-size:15px;font-weight:600;color:var(--navy-950,#03183D);margin-bottom:3px}
.elementor .hplqual-punkte li span:not(.hplqp-ico){font-size:13px;line-height:1.45;color:var(--slate-500,#5A6272)}
@media (max-width:1100px){
.elementor .hplqual-reihe{grid-template-columns:1fr;gap:34px}
.elementor .hplqual-punkte{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.elementor .hplqual-punkte li{grid-template-columns:1fr;row-gap:10px}
}
@media (max-width:700px){
.elementor .hplqual-nachweise{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:420px}
.elementor .hplqual-punkte{grid-template-columns:1fr}
.elementor .hplqual-punkte li{grid-template-columns:40px 1fr;column-gap:14px}
.elementor .hplqp-ico svg{width:34px;height:34px}
}
@media (min-width:701px) and (max-width:1100px){
.elementor .hplqual-punkte b{min-height:2.6em}
}
/* Nachbesserungen nach der Pruefung durch drei Pruefer (24.09.2026): Schraege verdeckte Handschrift
   (Partner 1101-1280), weisser Keil (Werkstatt 1101-1385), Textkante ab 1700, Fokus, Kontraste. */
.elementor .hplqual-punkte li span:not(.hplqp-ico){color:var(--slate-500,#5A6272)}
/* Grafiken des Auftraggebers (24.09.2026): Nachweise als Inline-SVG in gleicher Hoehe (Breite je Seitenverhaeltnis), Partner-Icons aus seinen SVGs, neues Werkstattfoto, freigestelltes Portraet, freigestelltes Unfallauto im Band. Ueberschriften in Marineblau wie die Vorlage (gemessen #0C1554). */
.elementor .hplqual-nachweise{display:flex;align-items:center;gap:clamp(14px,1.7vw,28px);max-width:780px}
.elementor .hplqn2{flex:var(--qa) 1 0;min-width:0;margin:0}
.elementor .hplqn2 svg{display:block;width:100%;height:auto;overflow:visible}
.elementor .hplqn2--1{--qa:.833}
.elementor .hplqn2--2{--qa:1}
.elementor .hplqn2--3{--qa:1.167}
.elementor .hplqn2--4{--qa:.882}
@media (max-width:700px){
.elementor .hplqual-nachweise{flex-wrap:wrap;justify-content:center;gap:18px;--qh:min(150px,38vw)}
.elementor .hplqn2{flex:0 0 calc(var(--qa)*var(--qh))}
}
/* Farbabgleich Qualitaet/Warum/Partner nach Vermessung (24.09.2026 abends). Ueberschrift var(--navy-950,#03183D), Unterzeile var(--slate-600,#434B5B), Punkt-Titel var(--navy-950,#03183D), Punkt-Unterzeilen var(--slate-500,#5A6272) - geprueft per Simulation (Verkleinerung 1:1,894 + JPEG) gegen Kernpixel und Farbsummen der Vorlage. */
.elementor .hplsek--qual .hplqp-ico{color:var(--blue-700,#0349AE)}
@media (max-width:1100px){
.elementor .hplsek--qual{background-image:none}
}
/* Qualitaet: Nachweise und Liste wie im Layout gleich hoch und dicht beieinander, kein Loch ab 1700 px (A-Q1) */
@media (min-width:1101px){
.elementor .hplqual .hplkopf{margin-bottom:18px}
.elementor .hplqual-reihe{grid-template-columns:minmax(0,860px) max-content;gap:36px;justify-content:start}
.elementor .hplqual-nachweise{max-width:none}
.elementor .hplqual-punkte{gap:8px}
.elementor .hplsek--qual .hplqp-ico svg{width:44px;height:44px}
}
/* Qualitaet Tablet: die drei Punkte stehen auf einer Linie (C-R2) */
@media (min-width:701px) and (max-width:1100px){
.elementor .hplqual-punkte li{align-content:start}
.elementor .hplqual-punkte b{line-height:1.35;min-height:2.7em}
}

/* ----- Anpassungen für final. (Qualität) ----- */
/* Zeilenhöhe wie auf new.: dort erben Augenbraue und die drei Punkte 26,4 px vom Fließtext
   (16,5 px), auf final. wären es 29,2 px (18 px), jeder Punkt 5 px höher. Damit ist der
   Abschnitt bei 1440 und 1100 px genau so hoch wie auf new. ohne dessen 10-px-Rand. */
.elementor .hplsek--qual{line-height:26.4px}

/* =========================================================================
   5 Partner
   ========================================================================= */
/* Anpassungen für final. sind direkt in den Regeln: kein −10-px-Rand wie auf new. (dort Elementor-Innenabstand),
   Textkante im Raster von Kopf und Fuß (1240 + --gutter), Schrift Archivo, Texte und Symbole in den Vercel-Farben. */
/* ===== 5 Starke Partner (blaues Band) ===== */
.elementor .hplsek--part{background:linear-gradient(135deg,var(--blue-700,#0349AE) 0%,#0A4CBE 55%,#083A93 100%);color:#fff}
.elementor .hplsek--part .hplaug{color:#AECBFB}
.elementor .hplsek--part .hplh2{color:#fff}
.elementor .hplsek--part .hplsub{color:#CFE0FC}
/* Partner nach der Vorlage: blaue Seitenfelder (links Waage + Handschrift, rechts Dokument,
   Handschlag + Handschrift), in der Mitte ein weisses Parallelogramm mit der Ablaufkette.
   margin:-10px holt die Flaeche an die Sektionskanten (Elementor-Innenabstand 10px). */
.elementor .hplpart{position:relative;display:grid;grid-template-columns:minmax(170px,1fr) minmax(0,780px) minmax(170px,1fr);margin:0;color:#fff}
.elementor .hplpart-mitte{position:relative;padding:56px 34px 52px}
.elementor .hplpart-mitte::before{content:"";position:absolute;top:0;bottom:0;left:-72px;right:-60px;background:#fff;clip-path:polygon(72px 0,100% 0,calc(100% - 60px) 50%,100% 100%,0 100%);z-index:0}
.elementor .hplpart-mitte>*{position:relative;z-index:1}
.elementor .hplpart .hplkopf{margin:0 0 32px;max-width:none}
.elementor .hplsek--part .hplpart .hplaug{color:var(--blue-700,#0349AE)}
.elementor .hplsek--part .hplpart .hplh2{color:var(--navy-950,#03183D)}
.elementor .hplsek--part .hplpart .hplsub{color:var(--slate-600,#434B5B)}
.elementor .hplpart-weg{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.elementor .hplpart-weg li{position:relative;text-align:center}
.elementor .hplpw-ico{display:flex;justify-content:center;color:var(--blue-700,#0349AE);margin-bottom:10px}
.elementor .hplpw-ico svg{width:44px;height:44px}
.elementor .hplpart-weg b{display:block;font-family:var(--b-schrift-titel),sans-serif;font-size:14px;font-weight:600;color:var(--navy-950,#03183D);margin-bottom:4px}
.elementor .hplpart-weg li>span:not(.hplpw-ico){display:block;font-size:12.5px;line-height:1.45;color:var(--slate-500,#5A6272)}
.elementor .hplpart-weg li:not(:last-child)::after{content:"";position:absolute;top:12px;right:-22px;width:22px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%230349AE%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4 12h15M13 6l6 6-6 6%27/%3E%3C/svg%3E") no-repeat center/contain}
.elementor .hplpart-seite{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:40px 18px;text-align:center;color:#fff}
.elementor .hplpart-seite svg{display:block;color:#fff;height:auto;stroke-width:1.1}
.elementor .hplpart-waage{width:clamp(64px,5.8vw,96px)}
.elementor .hplpart-hw{margin:4px 0 0;font-family:"Kaushan Script",Georgia,serif;font-size:clamp(17px,1.55vw,28px);line-height:1.15;color:#fff;transform:rotate(-8deg)}
@media (max-width:1100px){
.elementor .hplpart{grid-template-columns:1fr}
.elementor .hplpart-mitte{padding:46px 24px}
.elementor .hplpart-mitte::before{left:0;right:0;clip-path:none}
.elementor .hplpart-seite{flex-direction:row;gap:24px;padding:26px 24px}
.elementor .hplpart-waage{width:60px}
.elementor .hplpart-hw{font-size:21px;margin:0}
}
@media (max-width:700px){
.elementor .hplpart-weg{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
.elementor .hplpart-weg li::after{display:none}
.elementor .hplpart-mitte{padding:40px 18px}
.elementor .hplpart-waage{width:50px}
.elementor .hplpart-hw{font-size:19px}
}
/* Nachbesserungen nach der Pruefung durch drei Pruefer (24.09.2026): Schraege verdeckte Handschrift
   (Partner 1101-1280), weisser Keil (Werkstatt 1101-1385), Textkante ab 1700, Fokus, Kontraste. */
.elementor .hplpart-seite--links{grid-column:1;grid-row:1}
@media (min-width:1101px){
.elementor .hplpart{grid-template-columns:clamp(260px,19vw,340px) minmax(0,1fr) clamp(260px,19vw,340px)}
.elementor .hplpart-mitte{padding-inline:max(34px,calc(50% - 356px))}
.elementor .hplpart-seite--links{padding-right:68px}
.elementor .hplpart-seite--rechts{padding-left:58px;padding-right:32px}
}
/* Weisse durchgezogene Linie an der Unterkante des Partner-Abschnitts - wie unter dem Hero
   (Leistungen ::before/::after, 6px). Trennt die blauen Seitenfelder vom blauen Werkstattfeld. */
.elementor .hplsek--part::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:#fff;z-index:2;pointer-events:none}
/* Grafiken des Auftraggebers (24.09.2026): Nachweise als Inline-SVG in gleicher Hoehe (Breite je Seitenverhaeltnis), Partner-Icons aus seinen SVGs, neues Werkstattfoto, freigestelltes Portraet, freigestelltes Unfallauto im Band. Ueberschriften in Marineblau wie die Vorlage (gemessen #0C1554). */
.elementor .hplpart-dochand{width:clamp(72px,6.4vw,108px)}
@media (max-width:1100px){
.elementor .hplpart-dochand{width:64px}
}
@media (max-width:700px){
.elementor .hplpart-dochand{width:54px}
}
/* Partner-Seitenfelder mit den schraegen Facetten der Vorlage (gemessen 24.09.2026: links hell #0152AE / dunkel #013D8B / Streifen an der weissen Schraege #014BA1; rechts heller Winkel an der Pfeilkante, dunkle Mitte #044391, helle Flaeche oben rechts #0150AC). Werkstattfeld mit dem Blaupausen-Muster des Auftraggebers (Datei 11, ohne die feste Schraege). */
.elementor .hplsek--part{background:#013F8E}
@media (min-width:1101px){
.elementor .hplpart-seite--links{background:linear-gradient(104deg,#0152AE 0,#0152AE 15%,#01408F 17%,#013D8B 100%)}
.elementor .hplpart-seite--rechts{background:linear-gradient(72deg,rgba(1,80,172,0) 0,rgba(1,80,172,0) 72%,#0150AC 73.5%,#0150AC 100%),linear-gradient(106deg,#0152AE 0,#0152AE 30%,#044391 32%,#034596 100%) left top/100% 50% no-repeat,linear-gradient(74deg,#0152AE 0,#0152AE 30%,#044391 32%,#034596 100%) left bottom/100% 50% no-repeat}
}
@media (max-width:1100px){
.elementor .hplpart-seite--links{background:linear-gradient(104deg,#0152AE 0,#0152AE 10%,#013D8B 12%,#013D8B 86%,#014BA1 88%)}
.elementor .hplpart-seite--rechts{background:linear-gradient(104deg,#0152AE 0,#0152AE 10%,#044391 12%,#044391 80%,#0150AC 82%)}
}
/* Partner: Farbverlauf an der Kante zum weissen Feld (Vorlage gemessen: 3-4 px heller Rand #0567CE direkt am Weiss, davor ca. 30 Vorlagen-px weich heller, links wie rechts an der Pfeilspitze). Als Schein der weissen Form: zwei harte Schatten waagerecht = Rand, ein weicher (20px nach links versetzt, damit links kraeftig, rechts nur leicht) = Verlauf. Links kein heller Streifen davor, damit der Verlauf auf dem dunklen Blau sichtbar wird. overflow:hidden haelt den Schein aus Qualitaet/Werkstatt heraus. */
@media (min-width:1101px){
.elementor .hplpart{overflow:hidden}
.elementor .hplpart-mitte{filter:drop-shadow(-7px 0 0 #0567CE) drop-shadow(7px 0 0 #0567CE) drop-shadow(-20px 0 60px rgba(0,107,219,.55))}
}
/* Umbrueche ohne Einzelwort in der letzten Zeile (B-T4, C-R14) */
.elementor .hplsek--part .hplsub{max-width:555px}
.elementor .hplpart-weg li>span:not(.hplpw-ico){text-wrap:balance}
/* Partner: Unfallaufnahme wird bei 1101-1109 px nicht mitten im Wort getrennt (C-R5) */
.elementor .hplpart-weg b{overflow-wrap:normal}
/* Partner gestapelt: Textkante 24 px wie alle Abschnitte, Kopf und Unterseiten (Raster 25.09.2026) */
@media (max-width:1100px){
.elementor .hplpart-mitte{padding-inline:var(--gutter,20px)}
}

/* =========================================================================
   6 Werkstatt
   ========================================================================= */
/* ===== 6 Eigene Werkstatt ===== */
.elementor .hplsek--werk{background:#fff}
/* Werkstatt nach der Vorlage: blaues Feld links mit schraeger Kante ueber dem Foto, vier
   Punkte, Foto rechts mit Handschrift-Etikett. Inhalt haengt an der Bestaetigung (Hinweis). */
.elementor .hplwerk{position:relative;margin:0;min-height:440px;display:flex;align-items:stretch}
.elementor .hplwerk-foto{position:absolute;top:0;bottom:0;right:0;width:44%;overflow:hidden;background:#DCE5F2}
.elementor .hplwerk-foto img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:72% 50%}
.elementor .hplwerk-feld{position:relative;z-index:1;width:64%;background:linear-gradient(135deg,var(--blue-700,#0349AE) 0%,#0A4CBE 60%,#083A93 100%);clip-path:polygon(0 0,100% 0,calc(100% - 110px) 100%,0 100%);color:#fff;display:flex;align-items:center}
.elementor .hplwerk-feld::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:58px 58px;pointer-events:none}
.elementor .hplwerk-inhalt{position:relative;padding:56px 130px 52px max(var(--gutter,20px),calc((100vw - 1240px) / 2))}
.elementor .hplsek--werk .hplwerk .hplaug{color:rgba(255,255,255,.8)}
.elementor .hplsek--werk .hplwerk .hplh2{color:#fff}
.elementor .hplsek--werk .hplwerk .hplsub{color:#D6E4FA;max-width:58ch}
.elementor .hplwerk-punkte{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.elementor .hplwp-ico{display:flex;color:#fff;margin-bottom:10px}
.elementor .hplwp-ico svg{width:40px;height:40px}
.elementor .hplwerk-punkte b{display:block;font-family:var(--b-schrift-titel),sans-serif;font-size:13px;overflow-wrap:normal;word-break:normal;hyphens:manual;font-weight:600;line-height:1.3;color:#fff;margin-bottom:4px}
.elementor .hplwerk-punkte li>span:not(.hplwp-ico){display:block;font-size:12.5px;line-height:1.45;color:#C9DBF8}
.elementor .hplwerk-hw{position:absolute;right:4%;bottom:7%;margin:0;padding:.45em .7em .5em;background:#fff;border-radius:3px;box-shadow:0 10px 26px rgba(3,24,61,.22);font-family:"Kaushan Script",Georgia,serif;font-size:clamp(17px,1.6vw,26px);line-height:1.18;color:var(--blue-700,#0349AE);transform:rotate(-7deg)}
@media (max-width:1100px){
.elementor .hplwerk{display:block;min-height:0}
.elementor .hplwerk-feld{width:auto;clip-path:none}
.elementor .hplwerk-inhalt{padding:48px 24px 44px}
.elementor .hplwerk-foto{position:relative;width:auto;aspect-ratio:16/8}
.elementor .hplwerk-punkte{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:700px){
.elementor .hplwerk-punkte{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px}
.elementor .hplwerk-inhalt{padding:40px 18px 38px}
.elementor .hplwerk-foto{aspect-ratio:4/3}
.elementor .hplwerk-foto img{object-position:60% 50%}
.elementor .hplwerk-hw{font-size:17px}
}
@media (min-width:1101px) and (max-width:1299px){
.elementor .hplwerk-punkte{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px}
}
/* Nachbesserungen nach der Pruefung durch drei Pruefer (24.09.2026): Schraege verdeckte Handschrift
   (Partner 1101-1280), weisser Keil (Werkstatt 1101-1385), Textkante ab 1700, Fokus, Kontraste. */
@media (min-width:1101px){
.elementor .hplwerk-foto{width:max(44%,calc(36% + 112px))}
}
.elementor .hplsek--werk .hplwerk .hplaug{color:#fff}
.elementor .hplsek--werk .hplwerk .hplsub{color:#E3EDFD}
.elementor .hplwerk-punkte li>span:not(.hplwp-ico){color:#E3EDFD}
/* Textkante wie die uebrigen Abschnitte (Raster 25.09.2026): 24 px, ab 1101 px gilt die cqw-Regel weiter unten. */
@media (max-width:1100px){
.elementor .hplwerk-inhalt{padding-left:var(--gutter,20px);padding-right:var(--gutter,20px)}
}
/* Grafiken des Auftraggebers (24.09.2026): Nachweise als Inline-SVG in gleicher Hoehe (Breite je Seitenverhaeltnis), Partner-Icons aus seinen SVGs, neues Werkstattfoto, freigestelltes Portraet, freigestelltes Unfallauto im Band. Ueberschriften in Marineblau wie die Vorlage (gemessen #0C1554). */
.elementor .hplwerk-foto img{object-position:80% 50%}
@media (max-width:700px){
.elementor .hplwerk-foto img{object-position:90% 50%}
}
/* Farbabgleich nach Vermessung der Vorlage (24.09.2026) - Werkstatt und Schlussband. Werte aus Pixelmessung der Vorlage, Umrechnung 710 px zu 1345 px. */
.elementor .hplsek--werk .hplwerk-feld{background:linear-gradient(102deg,#033A83 0%,#033C87 30%,#034391 38%,#03499B 46%,#024CA0 53%,#024EA3 60%,#024EA4 100%)}
.elementor .hplsek--werk .hplwerk-feld::before{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 40px,transparent 72px);mask-image:linear-gradient(90deg,#000 0,#000 40px,transparent 72px)}
.elementor .hplsek--werk .hplwerk .hplh2{font-size:clamp(24px,2.2vw,30px)}
.elementor .hplsek--werk .hplwerk .hplaug{color:#A6C5F8}
.elementor .hplsek--werk .hplwerk .hplsub{font-size:14.5px;line-height:1.36;color:#B6CFFA}
.elementor .hplsek--werk .hplwerk-punkte li>span:not(.hplwp-ico){font-size:11px;color:#B6CFFA}
.elementor .hplsek--werk .hplwerk-punkte b{line-height:1.48;color:#E3EDFD}
.elementor .hplsek--werk .hplwp-ico svg{width:48px;height:48px;stroke-width:1.5}
/* Partner-Seitenfelder mit den schraegen Facetten der Vorlage (gemessen 24.09.2026: links hell #0152AE / dunkel #013D8B / Streifen an der weissen Schraege #014BA1; rechts heller Winkel an der Pfeilkante, dunkle Mitte #044391, helle Flaeche oben rechts #0150AC). Werkstattfeld mit dem Blaupausen-Muster des Auftraggebers (Datei 11, ohne die feste Schraege). */
@media (min-width:1101px){
.elementor .hplsek--werk .hplwerk-feld::after{content:"";position:absolute;top:0;bottom:0;right:0;width:110px;background:linear-gradient(to bottom right,transparent calc(50% - 2px),rgba(216,236,255,.5) 50%,transparent calc(50% + 2px));pointer-events:none}
}
.elementor .hplsek--werk .hplwerk-feld{background:#05366D url("/wp-content/uploads/2026/09/werkstatt-feld-muster.svg") left center/cover no-repeat}
.elementor .hplsek--werk .hplwerk-feld::before{display:none}
/* Werkstatt-Etikett durchscheinend wie in der Vorlage (gemessen 24.09.2026: innen ca. 80-90 % Deckkraft, leicht blaeulich, rechter Rand ca. 50-60 %, die blaue Saeule scheint durch; kaum Schatten). Milchglas-Unschaerfe 2 px haelt die Schrift lesbar. */
.elementor .hplsek--werk .hplwerk-hw{background:linear-gradient(90deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.82) 60%,rgba(246,249,255,.6) 100%);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);box-shadow:0 8px 20px rgba(3,24,61,.1);border-radius:2px}
/* Umbrueche ohne Einzelwort in der letzten Zeile (B-T4, C-R14) */
.elementor .hplwerk-punkte b{text-wrap:balance}
/* Werkstatt und Schlussband: Textkante aus der Containerbreite (cqw) statt aus 100vw. Stimmt damit auch bei
   ueberlagernden Scrollleisten (macOS, iPadOS, Firefox unter Windows 11) mit der Kante der anderen Abschnitte (B-T2) */
@media (min-width:1101px){
.elementor .hplwerk{container-type:inline-size}
.elementor .hplwerk-inhalt{padding-left:max(var(--gutter,20px),calc((100cqw - 1240px) / 2))}
}
/* Werkstatt ab 1300 px: blaues Feld und Schraege wie im Layout (oben 59 %, unten 51 % statt 64/56 %) (B-T3) */
@media (min-width:1300px){
.elementor .hplwerk-feld{width:60%;clip-path:polygon(0 0,100% 0,86.3% 100%,0 100%)}
.elementor .hplwerk-inhalt{padding-right:calc(13.7% + 10px)}
.elementor .hplsek--werk .hplwerk-feld::after{width:13.7%}
.elementor .hplwerk-foto{width:calc(48.8% + 12px)}
}
/* Werkstatt: Unterzeilen der Punkte etwas heller, damit sie auch auf dem hellen Musterteil 4,5:1 erreichen (E-T6) */
.elementor .hplsek--werk .hplwerk-punkte li>span:not(.hplwp-ico){color:#D6E6FD}

/* =========================================================================
   7 Warum
   ========================================================================= */
/* ===== 7 Warum Biesterfeldt ===== */
.elementor .hplsek--warum{background:#FFFFFF}
/* Warum Biesterfeldt nach der Vorlage: Kopf oben links, Portraet mit Handschrift unten links
   (buendig mit der Sektionsunterkante: 76 Innenabstand + 10 Sektion), Tabelle in der Mitte,
   Karte rechts. Die Spalte 'Viele Standardanbieter' ist seit 24.09.2026 auf Wunsch des Auftraggebers drin, Freigabe steht aus (siehe unten). */
.elementor .hplsr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.elementor .hplwarum{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.65fr) minmax(0,.7fr);grid-template-areas:"kopf kopf ." "bild mitte karte";column-gap:38px;row-gap:22px;align-items:end}
.elementor .hplwarum .hplkopf{grid-area:kopf;margin:0;max-width:none;align-self:start}
.elementor .hplwarum-bild{grid-area:bild;position:relative;margin-bottom:-76px;align-self:end}
.elementor .hplwarum-bild img{display:block;width:100%;max-width:300px;height:auto;border-radius:6px 6px 0 0}
.elementor .hplwarum-hw{position:absolute;left:40%;top:61%;margin:0;font-family:"Kaushan Script",Georgia,serif;font-size:clamp(18px,1.75vw,27px);line-height:1.16;color:var(--blue-700,#0349AE);transform:rotate(-10deg);transform-origin:0 100%;white-space:nowrap;text-shadow:0 0 12px rgba(255,255,255,.9),0 0 3px #fff}
.elementor .hplwarum-strich{display:block;width:115%;height:.4em;margin-top:.12em;overflow:visible}
.elementor .hplwarum-mitte{grid-area:mitte;align-self:end}
.elementor .hplwarum-tab{width:100%;border:0;border-collapse:separate;border-spacing:0;margin:0;font-family:var(--b-schrift),sans-serif;background:none}
.elementor .hplwarum-tab th,.elementor .hplwarum-tab td{border:0;padding:14px 18px;font-size:14px;line-height:1.35;vertical-align:middle}
.elementor .hplwarum-tab thead th{background:none;padding:0}
.elementor .hplwarum-tab thead th:nth-child(2){background:linear-gradient(160deg,#1672D6 0%,#0346A8 100%);color:#fff;font-family:var(--b-schrift-titel),sans-serif;font-size:14.5px;font-weight:600;text-align:center;padding:15px 26px;border-radius:6px 6px 0 0;width:32%}
.elementor .hplwarum-tab tbody th{text-align:left;font-weight:500;color:var(--slate-600,#434B5B);background:#EEF3FB;border-radius:4px 0 0 4px}
.elementor .hplwarum-tab tbody tr:nth-child(even) th{background:#F8FAFE}
.elementor .hplwarum-tab tbody td{text-align:center;background:#fff;border-left:1px solid var(--slate-200,#D9E0EA);border-right:1px solid var(--slate-200,#D9E0EA)}
.elementor .hplwarum-tab tbody tr:last-child td{border-bottom:1px solid var(--slate-200,#D9E0EA);border-radius:0 0 6px 6px}
.elementor .hplwarum-tab td svg{display:inline-block;width:26px;height:26px;vertical-align:middle}
.elementor .hplwarum-karte{grid-area:karte;align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;background:#fff;border:1px solid var(--slate-200,#D9E0EA);border-radius:8px;padding:30px 22px;box-shadow:0 14px 34px rgba(3,24,61,.06)}
.elementor .hplwarum-kico{display:flex;color:var(--blue-700,#0349AE)}
.elementor .hplwarum-kico svg{width:64px;height:64px}
.elementor .hplwarum-karte h3{margin:0;font-family:var(--b-schrift-titel),sans-serif;font-size:clamp(17px,1.4vw,21px);font-weight:700;line-height:1.25;color:var(--navy-950,#03183D)}
.elementor .hplwarum-karte p{margin:0;font-size:14px;line-height:1.4;color:var(--slate-600,#434B5B);max-width:24ch}
@media (max-width:1100px){
.elementor .hplwarum{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-areas:"kopf kopf" "bild mitte" "karte karte";row-gap:28px}
.elementor .hplwarum-bild{margin-bottom:0}
.elementor .hplwarum-bild img{border-radius:6px}
.elementor .hplwarum-karte{flex-direction:row;text-align:left;justify-content:flex-start;gap:20px;padding:24px}
.elementor .hplwarum-karte p{max-width:none}
}
@media (max-width:700px){
.elementor .hplwarum{grid-template-columns:1fr;grid-template-areas:"kopf" "bild" "mitte" "karte"}
.elementor .hplwarum-bild{justify-self:center;width:min(260px,80%)}
.elementor .hplwarum-tab th,.elementor .hplwarum-tab td{padding:12px 12px;font-size:13.5px}
.elementor .hplwarum-tab thead th:nth-child(2){padding:13px 14px;width:34%}
.elementor .hplwarum-karte{flex-direction:column;text-align:center}
.elementor .hplwarum-kico svg{width:52px;height:52px}
}
.elementor .hplwarum-tab thead th:first-child{border:0;background:none}
/* Nachbesserungen nach der Pruefung durch drei Pruefer (24.09.2026): Schraege verdeckte Handschrift
   (Partner 1101-1280), weisser Keil (Werkstatt 1101-1385), Textkante ab 1700, Fokus, Kontraste. */
.elementor .hplwarum-bild{max-width:300px}
/* Grafiken des Auftraggebers (24.09.2026): Nachweise als Inline-SVG in gleicher Hoehe (Breite je Seitenverhaeltnis), Partner-Icons aus seinen SVGs, neues Werkstattfoto, freigestelltes Portraet, freigestelltes Unfallauto im Band. Ueberschriften in Marineblau wie die Vorlage (gemessen #0C1554). */
.elementor .hplwarum-bild img{border-radius:0}
.elementor .hplwarum-hw{left:62%;top:8%}
/* Farbabgleich Qualitaet/Warum/Partner nach Vermessung (24.09.2026 abends). Ueberschrift var(--navy-950,#03183D), Unterzeile var(--slate-600,#434B5B), Punkt-Titel var(--navy-950,#03183D), Punkt-Unterzeilen var(--slate-500,#5A6272) - geprueft per Simulation (Verkleinerung 1:1,894 + JPEG) gegen Kernpixel und Farbsummen der Vorlage. */
.elementor .hplsek--warum .hplh2{font-size:clamp(26px,2.45vw,33px)}
.elementor .hplwarum-tab tbody tr:nth-child(odd) td{background:#EEF3FB}
.elementor .hplwarum-tab td svg circle{fill:var(--blue-700,#0349AE)}
.elementor .hplwarum-hw{color:var(--blue-700,#0349AE)}
.elementor .hplwarum-karte{background:#EEF4FB;border-color:#EEF4FB;box-shadow:none}
.elementor .hplwarum-kico{color:var(--blue-700,#0349AE)}
.elementor .hplwarum-kico svg{stroke-width:1.2}
@media (min-width:701px){
.elementor .hplwarum-kico svg{width:72px;height:72px}
}
/* Warum: zweite Tabellenspalte "Viele Standardanbieter" wie im Layout (Auftraggeber: "im Layout waren aber 2 nebeneinander"). Gemessen: Kopf #F0F6FB mit dunkler Schrift, Zeilenstreifen laufen durch (#E9F1FA/weiss), mittig ein grau-blauer Strich, Spalte ohne eigenen Rahmen, Breiten Text 49 / Biesterfeldt 24 / Standard 27 %. HINWEIS: pauschaler Vergleich mit Mitbewerbern - vor Livegang von Herrn Biesterfeldt absegnen lassen. */
.elementor .hplwarum-tab thead th:nth-child(2){width:24%}
.elementor .hplwarum-tab thead th:nth-child(3){width:27%;background:#F0F6FB;color:var(--slate-600,#434B5B);font-family:var(--b-schrift-titel),sans-serif;font-size:12.5px;font-weight:600;line-height:1.25;text-align:center;padding:12px 6px;border-radius:6px 6px 0 0}
.elementor .hplwarum-tab tbody td:nth-child(3){border-left:0;border-right:0;border-radius:0 4px 4px 0}
.elementor .hplwarum-tab tbody tr:last-child td:nth-child(3){border-bottom:0;border-radius:0 4px 4px 0}
.elementor .hplwarum-minus{display:inline-block;width:18px;height:2.5px;border-radius:2px;background:var(--slate-500,#5A6272);vertical-align:middle}
@media (max-width:700px){
.elementor .hplwarum-tab thead th:nth-child(2),.elementor .hplwarum-tab thead th:nth-child(3){font-size:12.5px;padding:11px 6px;width:27%}
}
/* Warum: Kasten "Vertrauen macht den Unterschied" wie im Layout nur so hoch wie die Tabelle (Oberkante = Tabellenkopf, Unterkante = Tabellenende) und schmaler; Tabelle dadurch breiter; Kastentitel etwas kleiner, damit er wie im Layout zweizeilig bleibt. */
@media (min-width:1101px){
.elementor .hplwarum-karte{padding:26px 16px}
.elementor .hplwarum-karte h3{font-size:clamp(15px,1.25vw,19px)}
}
/* Umbrueche ohne Einzelwort in der letzten Zeile (B-T4, C-R14) */
.elementor .hplsek--warum .hplsub{text-wrap:balance}
/* Warum: Tabellenkopf und Karte wie im Layout neben der Unterzeile (B-T1), Kartentext linksbuendig (B-T5),
   Handschrift-Schwung endet vor der Tabelle (B-T6) */
@media (min-width:1101px){
.elementor .hplwarum .hplkopf{margin-bottom:-60px;position:relative;z-index:1}
.elementor .hplsek--warum .hplkopf .hplsub{max-width:62%}
.elementor .hplwarum-karte p{text-align:left}
.elementor .hplwarum-strich{width:100%}
}
@media (min-width:1101px) and (max-width:1699px){
.elementor .hplwarum-hw{font-size:clamp(18px,1.75vw,23.5px)}
}

/* =========================================================================
   8 Schlussband
   ========================================================================= */
/* ===== 8 Abschlussband ===== */
.elementor .hplsek--band{background:linear-gradient(135deg,var(--navy-950,#03183D) 0%,#0B2A56 58%,#0D3E86 100%);color:#fff}
.elementor .hplsek--band .hplh2{color:#fff}
/* Schlussband nach der Vorlage: blauer Grund, Text links, zwei Pillen-Knoepfe, Auto rechts
   schraeg angeschnitten mit Handschrift. Kontaktliste entfaellt (steht in Kopf und Fuss). */
.elementor .hplsek--band{background:linear-gradient(120deg,var(--blue-700,#0349AE) 0%,#0A4CBE 55%,#083A93 100%)}
/* Farbabgleich nach Vermessung der Vorlage (24.09.2026) - Werkstatt und Schlussband. Werte aus Pixelmessung der Vorlage, Umrechnung 710 px zu 1345 px. */
.elementor .hplsek--band{background:linear-gradient(59deg,#1A73D1 0,#1A73D1 37px,rgba(26,115,209,0) 40px) calc(var(--bl) - 68.5px) 0/300px 100% no-repeat,linear-gradient(59deg,rgba(11,101,197,0) 0,rgba(11,101,197,0) 38px,#0B65C5 40px,#0B65C5 61px,rgba(11,101,197,0) 66px) calc(var(--bl) - 68.5px) 0/300px 100% no-repeat,linear-gradient(114deg,#0754AC 0,#0150B0 calc((var(--bl) + var(--bw) * 0.0904) * .9135 + var(--bx0)),#034FA5 calc((var(--bl) + var(--bw) * 0.1425) * .9135 + var(--bx0)),#0249A2 calc((var(--bl) + var(--bw) * 0.1845) * .9135 + var(--bx0)),#014698 calc((var(--bl) + var(--bw) * 0.2262) * .9135 + var(--bx0)),#00469B calc((var(--bl) + var(--bw) * 0.2893) * .9135 + var(--bx0)),#024AA1 calc((var(--bl) + var(--bw) * 0.3519) * .9135 + var(--bx0)),#03499E calc((var(--bl) + var(--bw) * 0.4567) * .9135 + var(--bx0)),#014CA1 calc((var(--bl) + var(--bw) * 0.5821) * .9135 + var(--bx0)),#024EA2 calc((var(--bl) + var(--bw) * 0.7078) * .9135 + var(--bx0)),#0252AA calc((var(--bl) + var(--bw) * 0.8334) * .9135 + var(--bx0)),#0253AA calc((var(--bl) + var(--bw) * 0.9799) * .9135 + var(--bx0)),#0254AA calc((var(--bl) + var(--bw) + var(--bg) + 17.6px) * .9135 + var(--bx0)),#0255AE calc((var(--bl) + var(--bw) + var(--bg) + 64.7px) * .9135 + var(--bx0)),#0457B0 calc((var(--bl) + var(--bw) + var(--bg) + 111.6px) * .9135 + var(--bx0)),#065BB5 calc((var(--bl) + var(--bw) + var(--bg) + 150.8px) * .9135 + var(--bx0)),#0860B9 calc((var(--bl) + var(--bw) + var(--bg) + 190px) * .9135 + var(--bx0)),#0D64BD calc((var(--bl) + var(--bw) + var(--bg) + 229px) * .9135 + var(--bx0)),#1166BF calc((var(--bl) + var(--bw) + var(--bg) + 252.6px) * .9135 + var(--bx0)),#0F64BD calc((var(--bl) + var(--bw) + var(--bg) + 283.9px) * .9135 + var(--bx0)),#0E62BA calc((var(--bl) + var(--bw) + var(--bg) + 330.8px) * .9135 + var(--bx0)),#0D60B8 calc((var(--bl) + var(--bw) + var(--bg) + 370px) * .9135 + var(--bx0)),#0F63BA calc((var(--bl) + var(--bw) + var(--bg) + 409.1px) * .9135 + var(--bx0)),#1162B8 calc((var(--bl) + var(--bw) + var(--bg) + 432.6px) * .9135 + var(--bx0)),#0A5AB1 calc((var(--bl) + var(--bw) + var(--bg) + 440.4px) * .9135 + var(--bx0)),#0C5DB3 calc((var(--bl) + var(--bw) + var(--bg) + 487.5px) * .9135 + var(--bx0)),#1863B5 calc((var(--bl) + var(--bw) + var(--bg) + 510.9px) * .9135 + var(--bx0)),#2067B4 calc((var(--bl) + var(--bw) + var(--bg) + 534.4px) * .9135 + var(--bx0)),#2365AC calc((var(--bl) + var(--bw) + var(--bg) + 550.1px) * .9135 + var(--bx0)),#2365AC 100%)}
/* ===== Schlussband 1:1 nach Vorlage (neu geschrieben 24.09.2026 abends, alle alten hplband2-Regeln entfernt) ===== Grund in .hplsek--band: Verlauf 114 Grad mit 30 Stopps, gemessen entlang der Lichtbahnen der Vorlage (Bahnen steigen mit 66 Grad nach rechts; hellste Bahn zwischen den Knoepfen #1166BF, harte Kante hinter dem Telefonknopf #1162B8 auf #0A5AB1; Positionen auf unsere Knopflage bei 1345 px umgerechnet), links zwei parallele Schraegbahnen (58 Grad): heller Keil unten #1A73D1 und darueber mittelhelle Bahn #0B65C5 (Vorlage pixelgenau), an der linken Inhaltskante verankert; vor dem Foto heller Schleier (Toenung im ::before). 
   Vorlage auf 1345 px umgerechnet: Band 152 px hoch; Text links (2 Zeilen, erste groesser, Unterzeile); zwei Pillen-Knoepfe NEBENEINANDER (236x54 / 251x54, voll = kraeftiges Blau, Telefon = dunkel getoent); rechts Foto aus dem Werkstattbild des Auftraggebers, weich aus dem Blau eingeblendet und blaeulich getoent; ganz rechts durchgehender blauer Schraegstreifen (/) mit heller Kantenlinie, darauf die Handschrift, -18 Grad. */
.elementor .hplband2{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);margin:0;min-height:clamp(140px,11.3vw,220px);color:#fff;overflow:hidden}
.elementor .hplband2-inhalt{position:relative;z-index:1;display:flex;align-items:center;gap:clamp(20px,2.2vw,40px);padding:22px 20px 22px max(var(--gutter,20px),calc((100vw - 1240px) / 2))}
.elementor .hplband2-text{flex:0 0 auto;width:clamp(250px,27.8vw,470px);min-width:0}
.elementor .hplsek--band .hplband2 .hplh2{color:#fff;font-size:clamp(19px,1.75vw,29px);line-height:1.12;margin:0 0 8px}
.elementor .hplsek--band .hplband2 .hplh2::first-line{font-size:1.28em}
.elementor .hplband2-zeile{margin:0;font-size:clamp(13px,1.1vw,16px);color:rgba(255,255,255,.92)}
.elementor .hplband2-knoepfe{display:flex;flex-direction:row;align-items:center;gap:clamp(12px,1.3vw,20px);flex:0 0 auto}
.elementor .hplband2-btn{display:inline-flex;align-items:center;gap:10px;min-height:54px;padding:8px 20px;border-radius:999px;border:1.5px solid rgba(255,255,255,.6);color:#fff;text-decoration:none;font-family:var(--b-schrift),sans-serif;line-height:1.25;transition:background .2s,border-color .2s}
.elementor .hplband2-btn--voll{background:linear-gradient(to bottom right,#1B7CE2 0%,#055CD0 50%,#0447B6 100%)}
.elementor .hplband2-btn:where(:not(.hplband2-btn--voll)){background:rgba(0,30,100,.28)}
.elementor .hplband2-btn:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.16)}
.elementor .hplband2-btn--voll:hover{background:linear-gradient(to bottom right,#338BEA 0%,#0F68DA 50%,#0852C2 100%)}
.elementor .hplsek--band .hplband2-btn:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:999px;border-color:#fff}
.elementor .hplband2-btn svg{flex:0 0 auto;width:24px;height:24px}
.elementor .hplband2-btn .hplband2-pfeil{width:20px;height:20px}
.elementor .hplband2-btn[href^="tel:"] svg{width:28px;height:28px;fill:currentColor}
.elementor .hplband2-btn b{display:block;font-size:clamp(13px,1.05vw,15px);font-weight:700;white-space:nowrap}
.elementor .hplband2-btn i{display:block;font-style:normal;font-size:10.5px;opacity:.85;white-space:nowrap}
.elementor .hplband2-bild{position:relative;min-width:0;background:url("/wp-content/uploads/2026/09/band-grund-1400.webp") 100% 60%/auto 165% no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
.elementor .hplband2-bild::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(25,115,222,.8) 0%,rgba(25,115,222,.45) 30%,rgba(12,90,200,.22) 60%,rgba(12,90,200,.14) 100%);pointer-events:none}
.elementor .hplband2-bild::after{content:"";position:absolute;top:0;bottom:0;right:0;width:142px;z-index:1;background:linear-gradient(to bottom right,transparent calc(50% - 1.5px),rgba(255,255,255,.35) 50%,transparent calc(50% + 1.5px)) left top/47% 100% no-repeat,linear-gradient(114deg,#1467C6 0%,#1467C6 32%,#0B5DBC 40%,#0654AE 60%,#024CA2 80%,#014A9E 100%);clip-path:polygon(47% 0,100% 0,100% 100%,0 100%);pointer-events:none}
.elementor .hplband2-hw{position:absolute;z-index:2;right:12px;top:50%;margin:0;font-family:"Kaushan Script",Georgia,serif;font-size:clamp(17px,1.7vw,28px);line-height:1.15;color:#fff;white-space:nowrap;transform:translateY(-50%) rotate(-18deg);text-shadow:0 2px 10px rgba(0,20,60,.45)}
@media (max-width:1100px){
.elementor .hplband2{grid-template-columns:1fr}
.elementor .hplband2-text{width:auto}
.elementor .hplband2-inhalt{flex-direction:column;align-items:flex-start;gap:22px;padding:40px var(--gutter,20px) 32px}
.elementor .hplband2-knoepfe{flex-wrap:wrap}
.elementor .hplband2-bild{aspect-ratio:16/6;background-image:url("/wp-content/uploads/2026/09/band-grund-2171.webp");background-size:cover;background-position:100% 60%;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%);mask-image:linear-gradient(180deg,transparent 0,#000 22%)}
.elementor .hplband2-bild::before,.elementor .hplband2-bild::after{display:none}
.elementor .hplband2-hw{top:auto;bottom:14%;right:4%;transform:rotate(-18deg)}
}
@media (max-width:700px){
.elementor .hplband2-bild{display:none}
.elementor .hplband2-knoepfe{width:100%;flex-direction:column;align-items:stretch}
.elementor .hplband2-btn{justify-content:center}
.elementor .hplband2-btn i{white-space:normal}
}
/* Band-Lichtbahnen am INHALT verankert statt an der Bandbreite (Auftraggeber sah auf breitem Schirm keine Bahnen - in Prozent zogen sie sich ueber die ganze Breite). --bl = linke Inhaltskante, --bw = Textblockbreite, --bg = Abstand Text/Knoepfe, --bx0 = Hoehenanteil der 114-Grad-Linie. Stopps im Textbereich wachsen mit --bw, im Knopfbereich feste px hinter den Knoepfen. */
.elementor .hplsek--band{--bl:max(var(--gutter,20px),calc((100vw - 1240px) / 2));--bw:clamp(250px,27.8vw,470px);--bg:clamp(20px,2.2vw,40px);--bx0:calc(clamp(140px,11.3vw,220px) * .2034)}
/* ===== Schlussband ab 1101 px = Bild aus dem Layout (24.09.2026 spaet) =====
   Auftraggeber hat den Layout-Ausschnitt als Bild geliefert (Photos_esgAmJPtAQ.png, 2721x318). Band zugeschnitten (x17-2713, y7-300), Schrift/Knoepfe/Zeiger/Handschrift herausgerechnet (Luecken entlang der Lichtbahnen 66 Grad bzw. der Streifenkante 56 Grad aufgefuellt) -> band-layout-2697.webp. Band hat das Seitenverhaeltnis des Layouts; Text, Knoepfe und Handschrift in Prozent/cqw an den Layout-Stellen, damit es bei jeder Breite gleich aussieht. Unter 1101 px bleibt der gestapelte Aufbau mit CSS-Verlauf. */
@media (min-width:1101px){
.elementor .hplsek--band{background:#0A56B5 url("/wp-content/uploads/2026/09/band-layout-ohneauto-2697.webp") center/100% 100% no-repeat}
.elementor .hplband2{display:block;min-height:0;aspect-ratio:2697/294;container-type:inline-size}
.elementor .hplband2-inhalt{position:absolute;inset:0;padding:0 0 0 var(--bl);display:flex;align-items:center;gap:clamp(28px,3cqw,64px);z-index:1}
.elementor .hplband2-text{position:static;width:calc(max(17px,min(1.48cqw,30px)) * 15.8);transform:none;flex:0 0 auto}
.elementor .hplsek--band .hplband2 .hplh2{font-size:max(17px,min(1.48cqw,30px));margin:0 0 .4cqw;white-space:nowrap}
.elementor .hplband2-zeile{font-size:max(11.5px,min(.94cqw,17px));white-space:nowrap}
.elementor .hplband2-knoepfe{position:static;display:flex;align-items:center;gap:16px;flex:0 0 auto}
.elementor .hplband2-btn{position:static;height:min(3.43cqw,62px);min-height:0;box-sizing:border-box;padding:0 min(1.2cqw,22px);gap:min(.65cqw,12px);justify-content:center;transform:none}
.elementor .hplband2-btn--voll{min-width:min(15.2cqw,290px)}
.elementor .hplband2-btn[href^="tel:"]{min-width:min(16.1cqw,305px);justify-content:flex-start}
.elementor .hplband2-btn svg{width:min(1.55cqw,26px);height:min(1.55cqw,26px)}
.elementor .hplband2-btn .hplband2-pfeil{width:min(1.3cqw,22px);height:min(1.3cqw,22px)}
.elementor .hplband2-btn[href^="tel:"] svg{width:min(1.8cqw,30px);height:min(1.8cqw,30px)}
.elementor .hplband2-btn b{font-size:max(12px,min(.92cqw,16px))}
.elementor .hplband2-btn i{font-size:max(9.5px,min(.68cqw,12px))}
.elementor .hplband2-bild{position:static;background:none;-webkit-mask-image:none;mask-image:none}
.elementor .hplband2-bild::before,.elementor .hplband2-bild::after{display:none}
.elementor .hplband2-hw{left:88.6%;right:auto;top:43%;bottom:auto;font-size:max(15px,1.62cqw);transform:rotate(-17deg);transform-origin:0 0}
}
/* Schlussband: scharfes Foto statt des hochgerechneten Layout-Autos (Layout-Bild ohne Auto: band-layout-ohneauto-2697, Fotoflaeche blau aufgefuellt; Autofront bei 73 %, Auto ~85 % der Bandhoehe) (Auftraggeber: "das Auto-Foto ist irgendwie verpixelt"). Fotoflaeche im Layout-Bild: ab ~72 % weich aus dem Blau, rechts bis zur Streifenkante (oben 94,3 %, unten 86,9 %). Darin sein Werkstattbild (band-grund-2171), links ausgeblendet, rechts an der Kante abgeschnitten, leicht aufgehellt wie das milchige Layout-Foto. */
@media (min-width:1101px){
.elementor .hplband2-bild::before{display:block;content:"";position:absolute;left:69%;right:0;top:0;bottom:0;z-index:0;background:linear-gradient(rgba(200,222,248,.14),rgba(200,222,248,.14)),url("/wp-content/uploads/2026/09/band-grund-2171.webp") -24.07cqw -2.73cqw/47.8cqw auto no-repeat;filter:brightness(1.08) contrast(.93) saturate(.82);clip-path:polygon(0 0,80.8% 0,57% 100%,0 100%);-webkit-mask-image:linear-gradient(133deg,transparent 0,transparent 23%,#000 34%),linear-gradient(90deg,#000 0,#000 72%,transparent 78%);-webkit-mask-composite:source-in;mask-image:linear-gradient(133deg,transparent 0,transparent 23%,#000 34%),linear-gradient(90deg,#000 0,#000 72%,transparent 78%);mask-composite:intersect;pointer-events:none}
}
/* Werkstatt und Schlussband: Textkante aus der Containerbreite (cqw) statt aus 100vw. Stimmt damit auch bei
   ueberlagernden Scrollleisten (macOS, iPadOS, Firefox unter Windows 11) mit der Kante der anderen Abschnitte (B-T2) */
@media (min-width:1101px){
.elementor .hplband2-inhalt{padding-left:max(var(--gutter,20px),calc((100cqw - 1240px) / 2))}
}
/* Schlussband: Unterzeile im Knopf mindestens 11 px (C-R6), Knoepfe bei 1400-1699 px schmaler, damit sie
   nicht ins Foto laufen (C-R8), Handschrift in der gestapelten Fassung lesbar (C-R10) */
.elementor .hplband2-btn i{font-size:11px}
@media (min-width:1101px){
.elementor .hplband2-btn i{font-size:max(11px,min(.68cqw,12px))}
}
@media (min-width:1400px){
.elementor .hplband2-inhalt{gap:clamp(20px,1.5cqw,40px)}
.elementor .hplband2-btn{padding:0 min(.9cqw,22px)}
.elementor .hplband2-btn--voll{min-width:0}
}
@media (max-width:1100px){
.elementor .hplband2-hw{text-shadow:0 1px 3px rgba(0,20,60,.85),0 2px 14px rgba(0,20,60,.7)}
}

/* ----- Anpassungen für final. (Partner, Werkstatt, Warum, Schlussband) ----- */
/* Zeilenhöhe wie auf new.: dort 16,5/26,4 px Fließtext, auf final. 18/29,2 px. Augenbrauen und
   Unterzeilen erben sie, sonst wären Partner 5 px und Warum 3 px höher als auf new. */
.elementor .hplsek--part,.elementor .hplsek--werk,.elementor .hplsek--warum,.elementor .hplsek--band{line-height:26.4px}
/* Werkstatt: Unterzeile so breit wie auf new. Die 58ch sind in Archivo 49 px schmaler als in
   Inter, der Text bräche dreizeilig statt zweizeilig um. */
.elementor .hplsek--werk .hplwerk .hplsub{max-width:531px}

/* ----- Tabelle „Warum Biesterfeldt?“ (Auftraggeber 24.10.2026) ----- */
/* Spaltenköpfe „KFZ-Sachverständigenbüro Biesterfeldt“ und „Gutachter der Versicherung“. Der erste wie im Logo:
   „KFZ-Sachverständigenbüro“ klein und ohne Umbruch über dem Namen, auf Handys kleiner, damit die Tabelle
   bis 320 px in die Spalte passt (lange Wörter haben dafür Trennstellen im Markup). */
.elementor .hplwarum-tab .hplwarum-firma{display:block;margin-bottom:1px;font-size:11px;font-weight:500;line-height:1.25;color:rgba(255,255,255,.88);white-space:nowrap}
.elementor .hplwarum-tab thead th:nth-child(2){width:auto;padding-left:10px;padding-right:10px}
@media (max-width:700px){
.elementor .hplwarum-tab .hplwarum-firma{font-size:10px}
.elementor .hplwarum-tab thead th:nth-child(2){width:auto;padding-left:8px;padding-right:8px}
}
@media (max-width:400px){
.elementor .hplwarum-tab .hplwarum-firma{font-size:9px}
.elementor .hplwarum-tab th,.elementor .hplwarum-tab td{padding-left:8px;padding-right:8px}
}

/* ----- Qualität: drei Nachweise (Auftraggeber 25.10.2026) ----- */
/* Mitte das Meister-Siegel, links und rechts Platzhalter mit „Demnächst“. --qa = Seitenverhältnis des Bildes, so sind alle
   gleich hoch. Oben bündig, damit die Unterschrift die Mitte nicht verschiebt. Ab 1101 px höchstens 760 px breit, so bleiben
   die drei etwa so groß wie vorher die vier. Am Handy steht das Siegel allein oben, die Platzhalter darunter nebeneinander. */
.elementor .hplqual-nachweise--drei{align-items:flex-start}
.elementor .hplqn2 img{display:block;width:100%;height:auto}
.elementor .hplqn2--platz{--qa:1.359}
.elementor .hplqn2--rund{--qa:1.019}
.elementor .hplqn2 .hplqn2-demnaechst{margin:8px 0 0;font-family:var(--b-schrift),sans-serif;font-size:15px;font-weight:500;line-height:1.3;letter-spacing:.02em;text-align:center;color:#5E7592}
@media (min-width:1101px){
.elementor .hplqual-nachweise--drei{max-width:760px}
}
@media (max-width:700px){
.elementor .hplqual-nachweise--drei{--qh:min(130px,33vw)}
.elementor .hplqual-nachweise--drei .hplqn2--2{order:-1;flex-basis:100%}
.elementor .hplqual-nachweise--drei .hplqn2--2 img{width:min(150px,40vw);margin:0 auto}
.elementor .hplqn2 .hplqn2-demnaechst{font-size:13px}
}


/* Drei Knoepfe im Kopfbereich in einer Reihe (Pixel Kreativ, 30.10.2026)
   Am Computer Textspalte etwas breiter (48 statt 42 %) und Knoepfe kompakter.
   Rueckgaengig: diesen Block loeschen; Sicherung in .versionen/startseite-vor-knopfreihe-20261030.css */
@media (min-width: 1280px) {
	.elementor .seite .start-hero-text { max-width: min(760px, 48%); }
	.elementor .seite .start-hero .knopf-reihe { gap: 10px; }
	.elementor .seite .start-hero .knopf-reihe > .knopf:has(.knopf-beschriftung) { padding: 6px 16px; gap: 9px; min-height: 54px; }
	.elementor .seite .start-hero .knopf-reihe > .knopf:has(.knopf-beschriftung)::before { width: 20px; height: 20px; }
	.elementor .seite .start-hero .knopf-reihe .knopf-beschriftung > .e-paragraph-base:first-child { font-size: 1rem; }
	.elementor .seite .start-hero .knopf-reihe .knopf-sub { font-size: .6875rem; }
}