/* ==========================================================
   Testicon – Mobilansicht (Handy)
   Wird nur bis 767 px Breite geladen (media-Attribut im <link>).
   Desktop bleibt davon unberührt.
   !important ist nötig, weil viele Werte als style="…" im HTML stehen.
   Gehört zusammen mit mobile.js.
   ========================================================== */

/* ---------- 01 Kopfzeile ---------- */
.kopf-cta{display:none !important}                 /* „Prüfung anfragen“ nur im Hero und im Menü */
.kopf{padding:10px 12px 10px 21px !important}       /* Logo-Bild hat 3 px Rand: Schild steht so bündig mit dem Text darunter (24 px) */
.kopf>a:first-child img{height:36px !important}
.burger{border:none !important;width:44px !important;height:44px !important;margin-left:auto}

/* ---------- 01 Hero ---------- */
/* Füllt genau den ersten Bildschirm unter der Kopfzeile (Kopfzeile = 65 px: 10 + 44 + 10 + 1 Linie) */
main>section:first-child:has(.hero-c){min-height:calc(100vh - 65px) !important;min-height:calc(100svh - 65px) !important}
.hero-c{padding:40px 24px 96px !important}         /* unten mehr Luft = Inhalt optisch leicht über der Mitte */

/* ---------- 02 Leistungen ---------- */
#leistungen > div{padding:56px 24px 56px !important;gap:28px !important}
.leist-raster{gap:12px !important;grid-template-columns:minmax(0,1fr) !important}   /* minmax(0,…): Wischreihe darf das Raster nicht verbreitern */
.leist-raster > div[style*="grid-column"]{margin:36px 0 0 !important}          /* Zwischenüberschriften */
.leist-raster > p[style*="grid-column"]{margin:-4px auto 4px !important;font-size:15px !important}
.leist-raster > article{box-shadow:none !important}

/* Wischkarten: je Gruppe eine Reihe zum seitlichen Wischen (Aufbau durch mobile.js) */
.m-wisch-an .m-wisch{grid-column:1/-1;min-width:0;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -24px;padding:2px 24px 4px;scroll-padding:0 24px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.m-wisch-an .m-wisch::-webkit-scrollbar{display:none}
.m-wisch-an .m-wisch > article{flex:0 0 84%;scroll-snap-align:start}
.m-wisch-an #leistungen .m-wisch > article > div[role="img"]{height:140px !important}
.m-wisch-an .m-punkte{grid-column:1/-1;display:flex;justify-content:center;gap:8px;padding-top:6px}
.m-wisch-an .m-punkte span{width:7px;height:7px;border-radius:50%;background:#C9D6E6;transition:background .2s ease,width .2s ease}
.m-wisch-an .m-punkte span.an{background:#0F2C5C;width:20px;border-radius:4px}

/* ---------- 03 Ablauf: senkrechte Zeitleiste ---------- */
#ablauf{min-height:0 !important}                   /* nicht künstlich auf Bildschirmhöhe strecken */
#ablauf > div{padding:56px 24px 64px !important;gap:36px !important}
#ablauf .ablauf-linie{display:none !important}     /* waagerechte Desktop-Linie */
#ablauf ol[aria-label="Ablauf einer Prüfung"]{grid-template-columns:minmax(0,1fr) !important;gap:24px !important;max-width:420px;margin:0 auto !important;width:100%}
#ablauf ol li{position:relative;display:grid !important;grid-template-columns:44px minmax(0,1fr);column-gap:16px;row-gap:2px !important;align-items:start !important;text-align:left !important}
#ablauf ol li > div:nth-child(1){grid-row:1 / span 2;width:44px !important;height:44px !important;font-size:14px !important;position:relative;z-index:1}
#ablauf ol li > div:nth-child(2){grid-column:2;padding-top:9px;font-size:17px !important;hyphens:manual !important;overflow-wrap:normal !important}
#ablauf ol li > div:nth-child(3){grid-column:2;font-size:15px !important}
/* Verbindungslinie zum nächsten Schritt: grau, füllt sich beim Hineinscrollen dunkelblau (wie am Desktop) */
#ablauf ol li:not(:last-child)::before,#ablauf ol li:not(:last-child)::after{content:"";position:absolute;left:21px;top:44px;bottom:-24px;width:2px;background:#E4E9F0}
#ablauf ol li:not(:last-child)::after{background:#0F2C5C;transform-origin:top center;transform:scaleY(0);transition:transform .35s ease}
#ablauf.laeuft ol li:not(:last-child)::after{transform:scaleY(1)}
#ablauf.laeuft ol li:nth-child(1)::after{transition-delay:.10s}
#ablauf.laeuft ol li:nth-child(2)::after{transition-delay:.25s}
#ablauf.laeuft ol li:nth-child(3)::after{transition-delay:.40s}
#ablauf.laeuft ol li:nth-child(4)::after{transition-delay:.55s}
#ablauf.laeuft ol li:nth-child(5)::after{transition-delay:.70s}
@media (prefers-reduced-motion:reduce){#ablauf ol li::after{transform:none !important;transition:none !important}}

/* ---------- 04 Qualifikation ---------- */
:is(#qualifikation,#schritt-qualifikation){min-height:0 !important}
:is(#qualifikation,#schritt-qualifikation) > div{padding:56px 24px 64px !important;gap:36px !important}

/* Kennzahlen: 2 × 2 statt 4 untereinander */
:is(#qualifikation,#schritt-qualifikation) .kennz-raster{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:0 !important;background:#FFFFFF;border:1px solid #DCE5F0;border-radius:14px;overflow:hidden}
:is(#qualifikation,#schritt-qualifikation) .kennz-raster > div{padding:18px 10px !important;gap:4px !important;border:0 !important}
:is(#qualifikation,#schritt-qualifikation) .kennz-raster > div:nth-child(odd){border-right:1px solid #E4E9F0 !important}
:is(#qualifikation,#schritt-qualifikation) .kennz-raster > div:nth-child(-n+2){border-bottom:1px solid #E4E9F0 !important}
:is(#qualifikation,#schritt-qualifikation) .kennz-raster > div > div:first-child{font-size:25px !important;line-height:1.2}
:is(#qualifikation,#schritt-qualifikation) .kennz-raster > div > div:last-child{font-size:13px !important;line-height:1.4 !important}

/* Person: Foto klein neben Name und Rolle, Text darunter */
#qualifikation .quali-grid{grid-template-columns:140px minmax(0,1fr) !important;column-gap:16px !important;row-gap:20px !important;align-items:center !important}
#qualifikation .quali-grid > img{grid-column:1;grid-row:1 !important;width:140px !important;height:175px !important;min-height:0 !important;aspect-ratio:auto !important;border-radius:10px !important}
#qualifikation .quali-grid > div:not(.quali-werdegang){display:contents !important}
#qualifikation .quali-grid > div:not(.quali-werdegang) > div:first-child{grid-column:2;grid-row:1}
#qualifikation .quali-grid > div:not(.quali-werdegang) > div:first-child > div:first-child{font-size:23px !important}
#qualifikation .quali-grid > div:not(.quali-werdegang) > div:first-child > div:last-child{font-size:11.5px !important;letter-spacing:.09em !important;line-height:1.45;overflow-wrap:anywhere}
#qualifikation .quali-grid > div:not(.quali-werdegang) > p{grid-column:1 / -1;margin:0 !important;font-size:16px !important;line-height:1.65 !important}
/* „Weiterlesen“: Text erst gekürzt (Knopf kommt aus mobile.js) */
.m-kurz-an #qualifikation .quali-grid p.m-gekuerzt{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.m-weiter{grid-column:1 / -1;justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:-14px;padding:0;border:0;background:none;font:inherit;font-size:15px;font-weight:600;color:#0F2C5C;cursor:pointer;-webkit-tap-highlight-color:transparent}
.m-weiter::after{content:"";width:12px;height:8px;background:no-repeat center/12px 8px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1.3 5 4.7 9 1.3' stroke='%233C6FA6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");transition:transform .25s ease}
.m-weiter[aria-expanded="true"]::after{transform:rotate(180deg)}
.m-weiter:focus-visible{outline:3px solid rgba(94,147,201,.5);outline-offset:2px;border-radius:3px}

/* Werdegang: kleine Zeitleiste (gleiche Linie wie beim Ablauf) */
#qualifikation .quali-werdegang{grid-column:1 / -1 !important;padding:22px 20px 18px !important;gap:16px !important}
#qualifikation .quali-werdegang ul{display:flex !important;flex-direction:column !important;gap:0 !important}
#qualifikation .quali-werdegang li{position:relative;border:0 !important;padding:0 0 16px 26px !important;font-size:15px !important;line-height:1.45 !important}
#qualifikation .quali-werdegang li:last-child{padding-bottom:0 !important}
#qualifikation .quali-werdegang li > span:first-child{position:absolute;left:0;top:5px;width:12px;height:12px;border-radius:50%;background:#0F2C5C;font-size:0 !important;z-index:1}
#qualifikation .quali-werdegang li:not(:first-child) > span:first-child{background:#FFFFFF;border:2px solid #0F2C5C;box-sizing:border-box}
#qualifikation .quali-werdegang li:not(:last-child)::before{content:"";position:absolute;left:5px;top:17px;bottom:-5px;width:0;border-left:2px dashed #C9D6E6}

/* ---------- 05 Referenzen: Schlagworte (Pillen) statt Kacheln ---------- */
#referenzen{min-height:0 !important;overflow-x:hidden;overflow-x:clip}   /* unsichtbare Infofenster dürfen keine Seitenbreite erzeugen */
#referenzen > div{padding:56px 24px 64px !important;gap:28px !important}
#referenzen .m-tipp-hinweis{margin:-12px 0 0 !important;text-align:center;font-size:13.5px !important;line-height:1.4 !important;color:#5B6672 !important}
#referenzen .ref-raster{display:flex !important;flex-wrap:wrap;justify-content:center;gap:8px 6px !important}
#referenzen .sb-kachel{gap:7px !important;padding:0 13px 0 10px !important;min-height:40px;border-radius:999px !important;box-sizing:border-box}
#referenzen .sb-kachel > span:first-child{width:18px !important;height:18px !important}
#referenzen .sb-kachel > span:nth-child(2){font-size:13.5px !important;white-space:nowrap !important}
/* Infofenster: Lage wird von mobile.js so verschoben, dass es immer im Bildschirm bleibt */

/* ---------- 06 Expertenwissen: eine Liste statt vier großer Karten ---------- */
#expertenwissen{min-height:0 !important}
#expertenwissen > div{padding:56px 24px 64px !important;gap:28px !important}
#expertenwissen .ew-raster{grid-template-columns:minmax(0,1fr) !important;gap:0 !important;background:#FFFFFF;border:1px solid #DCE5F0;border-radius:14px;overflow:hidden}
#expertenwissen .ew-raster > a{position:relative;border:0 !important;border-radius:0 !important;border-bottom:1px solid #E4E9F0 !important;padding:16px 48px 16px 18px !important;gap:3px !important;transform:none !important;box-shadow:none !important}
#expertenwissen .ew-raster > a:last-child{border-bottom:0 !important}
#expertenwissen .ew-raster > a:active{background:#F5F8FC}
#expertenwissen .ew-raster > a > span:nth-child(1){font-size:11px !important}
#expertenwissen .ew-raster > a > span:nth-child(2){font-size:17px !important;line-height:1.3}
#expertenwissen .ew-raster > a > span:nth-child(3){font-size:14px !important;line-height:1.5 !important}
/* „Öffnen →“ wird zum Pfeil rechts in der Zeile */
#expertenwissen .ew-mehr{position:absolute;right:18px;top:50%;margin:0 !important;transform:translateY(-50%);font-size:0 !important}
#expertenwissen .ew-mehr i{font-size:19px;color:#0F2C5C}
#expertenwissen .ew-raster + a{align-self:stretch !important;text-align:center;padding:15px 24px !important}

/* ---------- 07 Kontakt ---------- */
:is(#kontakt,#schritt-kontakt-formular){min-height:0 !important}
:is(#kontakt,#schritt-kontakt-formular) > div{padding:56px 24px 64px !important;gap:28px !important}
:is(#kontakt,#schritt-kontakt-formular) .kontakt-grid{gap:28px !important}
/* Direktkontakt nach oben: Anrufen und E-Mail als zwei große Kacheln */
:is(#kontakt,#schritt-kontakt-formular) .kontakt-neben{order:-1;display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px !important;border:0 !important;padding:0 !important}
:is(#kontakt,#schritt-kontakt-formular) .kontakt-neben > div:first-child{grid-column:1 / -1;margin-bottom:2px}
:is(#kontakt,#schritt-kontakt-formular) .kontakt-neben > div:nth-child(2),:is(#kontakt,#schritt-kontakt-formular) .kontakt-neben > div:nth-child(3){position:relative;background:#FFFFFF;border:1px solid #C9D6E6;border-radius:10px;padding:46px 14px 14px !important;gap:2px !important}
:is(#kontakt,#schritt-kontakt-formular) .kontakt-neben > div:nth-child(2) > a,:is(#kontakt,#schritt-kontakt-formular) .kontakt-neben > div:nth-child(3) > a{font-size:14.5px !important;white-space:nowrap}
:is(#kontakt,#schritt-kontakt-formular) .kontakt-neben > div:nth-child(2) > a::after,:is(#kontakt,#schritt-kontakt-formular) .kontakt-neben > div:nth-child(3) > a::after{content:"";position:absolute;inset:0;border-radius:10px}   /* ganze Kachel antippbar */
:is(#kontakt,#schritt-kontakt-formular) .kontakt-neben > div:nth-child(2):active,:is(#kontakt,#schritt-kontakt-formular) .kontakt-neben > div:nth-child(3):active{background:#F5F8FC}
:is(#kontakt,#schritt-kontakt-formular) .kontakt-neben > div:nth-child(2)::before,:is(#kontakt,#schritt-kontakt-formular) .kontakt-neben > div:nth-child(3)::before{content:"";position:absolute;left:14px;top:14px;width:22px;height:22px;background:no-repeat center/22px 22px}
:is(#kontakt,#schritt-kontakt-formular) .kontakt-neben > div:nth-child(2)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F2C5C' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 6.5 8.5 6.5 8.5-6.5'/%3E%3C/svg%3E")}
:is(#kontakt,#schritt-kontakt-formular) .kontakt-neben > div:nth-child(3)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F2C5C' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h3.5l1.7 4.3-2.2 1.4a11 11 0 0 0 6.3 6.3l1.4-2.2L20 15.5V19a1.5 1.5 0 0 1-1.6 1.5A16.5 16.5 0 0 1 3.5 5.6 1.5 1.5 0 0 1 5 4z'/%3E%3C/svg%3E")}
:is(#kontakt,#schritt-kontakt-formular) .kontakt-neben > div:nth-child(4){grid-column:1 / -1;flex-direction:row !important;align-items:baseline;gap:10px !important;padding:2px 2px 0}
:is(#kontakt,#schritt-kontakt-formular) .kontakt-neben > div:nth-child(4) > span:last-child{font-size:14.5px !important}
.m-oder{display:flex;align-items:center;gap:14px;margin:4px 0 -6px;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#3C6FA6}
.m-oder::before,.m-oder::after{content:"";flex:1;height:1px;background:#D7E0EB}
/* Formular etwas dichter, Auswahlfelder als gleichmäßiges 2er-Raster */
:is(#kontakt,#schritt-kontakt-formular) form{gap:18px !important}
:is(#kontakt,#schritt-kontakt-formular) form div[style*="flex-wrap:wrap"]{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px !important}
:is(#kontakt,#schritt-kontakt-formular) form div[style*="flex-wrap:wrap"] > label{padding:10px 10px !important;font-size:13.5px !important;line-height:1.3;min-height:44px;box-sizing:border-box}
:is(#kontakt,#schritt-kontakt-formular) form button[type="submit"]{align-self:stretch !important;width:100%}
/* Telefon zuerst (am Handy der schnellste Weg); Name und Firma nebeneinander */
:is(#kontakt,#schritt-kontakt-formular) .kontakt-neben > div:nth-child(1){order:-3}
:is(#kontakt,#schritt-kontakt-formular) .kontakt-neben > div:nth-child(3){order:-2}
:is(#kontakt,#schritt-kontakt-formular) .kontakt-neben > div:nth-child(2){order:-1}
:is(#kontakt,#schritt-kontakt-formular) form > div:nth-child(2){grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px !important}
/* iPhone zoomt bei Eingabefeldern unter 16 px automatisch hinein – deshalb 16 px */
:is(#kontakt,#schritt-kontakt-formular) form input[type="text"],:is(#kontakt,#schritt-kontakt-formular) form input[type="email"],:is(#kontakt,#schritt-kontakt-formular) form input[type="tel"],:is(#kontakt,#schritt-kontakt-formular) form textarea{font-size:16px !important}

/* ---------- Sehr schmale Handys (bis 370 px) ---------- */
@media (max-width:370px){
  #qualifikation .quali-grid{grid-template-columns:120px minmax(0,1fr) !important;column-gap:14px !important}
  #qualifikation .quali-grid > img{width:120px !important;height:150px !important}
  #qualifikation .quali-grid > div:not(.quali-werdegang) > div:first-child > div:first-child{font-size:21px !important}
  #qualifikation .quali-grid > div:not(.quali-werdegang) > div:first-child > div:last-child{font-size:11px !important;letter-spacing:.06em !important}
}

/* ==========================================================
   Ergonomie-Runde (nur Handy)
   ========================================================== */

/* ---------- Allgemein ---------- */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
section[id],#kontakt,#top,[id^="schritt-"]{scroll-margin-top:66px !important}       /* Kopfzeile ist mobil 65 px hoch, nicht 92 */
a,button,label,[role="button"]{-webkit-tap-highlight-color:transparent}
h1,h2{text-wrap:balance}                                            /* keine einzelnen Wörter in der letzten Zeile */
#top p,#leistungen p,#ablauf p,#qualifikation p,#referenzen p,#expertenwissen p,#kontakt p{text-wrap:pretty}
html.m-menue-offen,html.m-menue-offen body{overflow:hidden}         /* Seite dahinter steht, solange das Menü offen ist */

/* ---------- Kopfzeile: Menü-Symbol wird zum Kreuz ---------- */
.burger svg path{transition:transform .25s ease,opacity .15s ease;transform-origin:12px 12px}
.burger[aria-expanded="true"] svg path:nth-child(1){transform:rotate(45deg) translateY(5px)}
.burger[aria-expanded="true"] svg path:nth-child(2){opacity:0}
.burger[aria-expanded="true"] svg path:nth-child(3){transform:rotate(-45deg) translateY(-5px)}

/* ---------- Menü: Vollbild unter der Kopfzeile, Untermenüs zum Aufklappen ---------- */
#hauptnav.offen{position:fixed !important;top:65px;left:0;right:0;bottom:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 24px 32px !important;border-bottom:0 !important;box-shadow:none !important}
#hauptnav.offen > a,#hauptnav.offen .nav-drop > a{font-size:17px !important;padding:16px 0 !important;min-height:56px;box-sizing:border-box;display:flex !important;align-items:center}
#hauptnav.offen .nav-drop > a{position:relative;padding-right:44px !important;border-bottom:1px solid #EEF2F7}
#hauptnav.offen .nav-drop > a > span{position:absolute;right:0;top:50%;margin:-16px 0 0 !important;width:32px;height:32px;justify-content:center;transition:transform .25s ease}
#hauptnav.offen .nav-drop > a > span svg{width:12px;height:8px}
#hauptnav.offen .nav-drop.m-auf > a > span{transform:rotate(180deg)}
#hauptnav.offen .nav-drop:not(.m-auf) .nav-drop-menu{display:none !important}
#hauptnav.offen .nav-drop-menu{padding:4px 0 10px 16px !important;border-bottom:1px solid #EEF2F7}
#hauptnav.offen .nav-drop-menu a{padding:11px 0 !important;min-height:44px;box-sizing:border-box;justify-content:center}
#hauptnav.offen .nav-drop-menu a > span{margin-top:1px}
#hauptnav.offen > a:last-of-type{min-height:52px;margin-top:20px !important;font-size:16px !important;justify-content:center;border-bottom:none !important}
.m-menue-kontakt{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.m-menue-kontakt a{display:flex;align-items:center;justify-content:center;gap:9px;min-height:50px;border:1.5px solid #C9D6E6;border-radius:4px;font-size:15px;font-weight:600;color:#0F2C5C;text-decoration:none}
.m-menue-kontakt a svg{width:18px;height:18px;flex:none}
.m-menue-kontakt a:active{background:#F5F8FC}

/* ---------- Hero: kleine Zusicherung unter dem Knopf ---------- */
.m-hero-hinweis{display:flex;align-items:center;gap:8px;width:100%;margin:2px 0 0;font-size:13.5px;line-height:1.4;color:#5B6672}
.m-hero-hinweis svg{width:16px;height:16px;flex:none}

/* ---------- Aktionsleiste unten: Anrufen + Prüfung anfragen ---------- */
.m-leiste{position:fixed;left:0;right:0;bottom:0;z-index:890;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid #E4E9F0;box-shadow:0 -8px 24px rgba(15,44,92,.08);transform:translateY(110%);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.m-leiste{background:#FFFFFF}}
.m-leiste.sichtbar{transform:none}
html.m-menue-offen .m-leiste{transform:translateY(110%)}
.m-leiste a{display:flex;align-items:center;justify-content:center;gap:9px;min-height:48px;border-radius:4px;font-size:15px;font-weight:600;text-decoration:none;box-sizing:border-box}
.m-leiste a svg{width:18px;height:18px;flex:none}
.m-leiste-tel{border:1.5px solid #0F2C5C;color:#0F2C5C;background:#FFFFFF}
.m-leiste-cta{background:#0F2C5C;color:#FFFFFF}
.m-leiste a:active{opacity:.85}
@media (prefers-reduced-motion:reduce){.m-leiste{transition:none}}
/* Hilfe-Knopf rückt über die Leiste, solange sie zu sehen ist */
.hd5{transition:border-color .3s ease,box-shadow .3s ease,opacity .3s ease,transform .35s cubic-bezier(.2,.8,.2,1),bottom .3s cubic-bezier(.2,.8,.2,1) !important}
html.m-leiste-sichtbar .hd5{bottom:calc(80px + env(safe-area-inset-bottom)) !important}

/* ---------- Referenzen: Schlagworte als volle Tippfläche ---------- */
#referenzen .sb-kachel{min-height:44px}

/* ---------- Footer: kompakt, Links als Tippflächen ---------- */
footer > div{padding:40px 24px 0 !important}
footer > div > div:first-child{gap:14px !important;padding-bottom:4px !important}
footer > div > div:first-child img{height:38px !important}
footer .fuss-raster{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:28px 20px !important;padding:28px 0 28px !important}
footer .fuss-raster > div:nth-child(1){grid-column:1 / -1;order:1}
footer .fuss-raster > div:nth-child(3){order:2}
footer .fuss-raster > div:nth-child(4){order:3}
footer .fuss-raster > div:nth-child(2){grid-column:1 / -1;order:4;flex-direction:row !important;flex-wrap:wrap;align-items:center;gap:0 22px !important;padding-top:20px;border-top:1px solid rgba(255,255,255,.15)}
footer .fuss-raster > div:nth-child(2) > div:first-child{width:100%;margin-bottom:2px}
footer .fuss-raster > div:nth-child(2) > a{padding:11px 0 !important;margin:0 !important;min-height:44px;box-sizing:border-box;display:flex !important;align-items:center}
footer address a{display:inline-block;padding:4px 0}
footer .fuss-raster > div:nth-child(1) > div:last-child{gap:10px !important}
footer .fuss-raster > div:nth-child(1) > div:last-child a{min-height:44px;display:inline-flex;align-items:center;padding:0 16px !important;font-size:14px !important}
footer > div > div:last-child{padding:18px 0 calc(18px + env(safe-area-inset-bottom)) !important}
html.m-menue-offen .hd5{opacity:0;pointer-events:none}             /* Hilfe-Knopf nicht über dem offenen Menü */

/* ---------- Hero, ruhige Fassung: mittig, klare Typografie, viel Luft ---------- */
main>section:first-child:has(.hero-c){background:linear-gradient(180deg,#F3F6FA 0%,#FFFFFF 58%)}
main .hero-c{align-items:center !important;text-align:center !important;padding:16px 28px 72px !important;gap:0 !important}
/* Kennzeile: klein, normale Schreibweise, ohne Rahmen */
main .hero-c>div:first-child{justify-content:center !important;text-align:center !important;margin:0 0 18px;font-size:13.5px !important;font-weight:500;letter-spacing:0 !important;text-transform:none !important;line-height:1.4;color:#3C6FA6}
main .hero-c>div:first-child span{white-space:normal}
/* Überschrift: drei Zeilen, eng und ruhig */
main#top .hero-c h1{font-size:clamp(24px,calc((100vw - 56px) / 12.5),30px) !important;line-height:1.12 !important;letter-spacing:-.022em !important;margin:0 0 22px !important;max-width:100%}
/* Unterzeile */
main .hero-c p:not(.m-hero-hinweis){font-size:19px !important;line-height:1.45 !important;font-weight:400;color:#5B6672;margin:0 0 36px !important;max-width:30ch}
/* Knopf mittig mit fester Breite, darunter die Zusicherung als stille Zeile */
main .hero-c>div:nth-child(4){width:100% !important;flex-direction:column;align-items:center;justify-content:center !important;gap:14px !important;margin:0 !important}
main .hero-c .hero-cta{display:inline-flex !important;align-items:center;justify-content:center;width:auto !important;min-width:236px;padding:15px 30px !important;font-size:16px !important;box-shadow:0 8px 20px -10px rgba(15,44,92,.45)}
main .hero-c p.m-hero-hinweis{justify-content:center;width:auto;margin:0 0 22px !important;font-size:13px !important;line-height:1.4 !important;color:#7A8694}
main .hero-c p.m-hero-hinweis svg{display:none}
@media (max-width:370px){
  main .hero-c{padding-left:22px !important;padding-right:22px !important}
  main .hero-c>div:first-child{font-size:12.5px !important}
  main .hero-c p:not(.m-hero-hinweis){font-size:17.5px !important}
}

/* ---------- Abschnitts-Kennzeilen überall wie im Hero: klein, normale Schreibweise ---------- */
main section > div > div[data-reveal] > div[style*="letter-spacing:0.22em"]{font-size:13.5px !important;font-weight:500 !important;letter-spacing:0 !important;text-transform:none !important;color:#3C6FA6}
main section > div > div[data-reveal] > h2{font-size:28px !important;line-height:1.15 !important;letter-spacing:-.02em !important}
main section > div > div[data-reveal] > p{font-size:16px !important;line-height:1.55 !important}

/* ---------- Leistungen, bereinigt ---------- */
/* Prüfarten als kleine Schlagworte statt vier Zeilen */
#leistungen .pruefarten{flex-direction:row !important;flex-wrap:wrap;justify-content:center;gap:8px 8px !important;margin-top:6px !important;font-size:13.5px !important;line-height:1.3 !important}
#leistungen .pruefarten > span:not([aria-hidden]){padding:7px 12px;border:1px solid #D7E0EB;border-radius:999px;background:#FFFFFF;color:#1E2530;font-weight:500}
#leistungen .pruefarten > span[aria-hidden]{display:none}
/* Zwischenüberschriften ohne Seitenlinien */
#leistungen .leist-raster > div[style*="grid-column"]{margin:40px 0 0 !important;gap:0 !important}
#leistungen .leist-raster > div[style*="grid-column"] > span:first-child,#leistungen .leist-raster > div[style*="grid-column"] > span:last-child{display:none}
#leistungen .leist-raster > div[style*="grid-column"] > span{font-size:19px !important;letter-spacing:-.01em !important;text-transform:none !important;white-space:normal !important;text-align:center;width:100%}
#leistungen .leist-raster > p[style*="grid-column"]{margin:8px auto 6px !important;font-size:15px !important;line-height:1.5 !important}
/* Karten: weichere Ecken, Bild etwas höher, kein Strich unter dem Titel, eigene Höhe je Karte */
.m-wisch-an .m-wisch{align-items:stretch;gap:12px}
/* Partner-Karte: die drei Anlagenlisten als Schlagworte, sonst wird die Reihe sehr hoch */
#leistungen article[aria-label^="Vermittlung"] > div > div[style*="gap:18px"]{gap:12px !important}
#leistungen article[aria-label^="Vermittlung"] > div > div[style*="gap:18px"] > div{gap:6px !important}
#leistungen article[aria-label^="Vermittlung"] > div > div[style*="gap:18px"] > div > span{font-size:11px !important;letter-spacing:.08em !important}
#leistungen article[aria-label^="Vermittlung"] ul{display:block !important}
#leistungen article[aria-label^="Vermittlung"] li{display:inline !important;font-size:14.5px !important;line-height:1.55 !important;color:#444C57}
#leistungen article[aria-label^="Vermittlung"] li > span:first-child{display:none}
#leistungen article[aria-label^="Vermittlung"] li:not(:last-child)::after{content:" · ";color:#5E93C9;font-weight:700}
#leistungen article[aria-label^="Vermittlung"] > div > div:last-child{padding-top:2px !important}
.m-wisch-an .m-wisch > article{flex-basis:86%;border-radius:12px !important;border-color:#E4E9F0 !important;box-shadow:0 2px 12px rgba(15,44,92,.06) !important}
.m-wisch-an #leistungen .m-wisch > article > div[role="img"]{height:150px !important}
#leistungen .leist-raster article > div[role="img"] + div{padding:18px 20px 22px !important;gap:12px !important}
#leistungen .leist-raster article > div[role="img"] + div > div:first-child{padding-bottom:0 !important;border-bottom:0 !important;gap:10px !important}
#leistungen .leist-raster article > div[role="img"] + div > div:first-child > span:first-child{font-size:12px !important}
#leistungen .leist-raster article h3{font-size:19px !important;line-height:1.25 !important}
#leistungen .leist-raster article ul{gap:7px !important}
#leistungen .leist-raster article li{font-size:15px !important;line-height:1.5 !important}
#leistungen .leist-raster article p{font-size:15px !important;line-height:1.55 !important}
/* Karten ohne Bild (Über Partner) */
#leistungen .leist-raster article > div:first-child:not([role]){padding:20px 20px 22px !important;gap:12px !important}

/* ---------- Ablauf, bereinigt: Schritte in einer Karte, kleinere Marken ---------- */
#ablauf > div{gap:28px !important;padding-bottom:56px !important}
#ablauf ol[aria-label="Ablauf einer Prüfung"]{gap:0 !important;background:#FFFFFF;border:1px solid #E4E9F0;border-radius:14px;box-shadow:0 2px 12px rgba(15,44,92,.05);padding:6px 20px 6px 18px !important;box-sizing:border-box;max-width:none}
#ablauf ol li{grid-template-columns:36px minmax(0,1fr);column-gap:16px;padding:14px 0;align-items:center !important}
#ablauf ol li:not(:last-child){border-bottom:1px solid #EEF2F7}
#ablauf ol li > div:nth-child(1){width:36px !important;height:36px !important;font-size:13px !important;letter-spacing:.02em}
#ablauf ol li > div:nth-child(2){padding-top:0;font-size:16.5px !important;line-height:1.3 !important}
#ablauf ol li > div:nth-child(3){font-size:14.5px !important;line-height:1.45 !important;color:#5B6672 !important}
/* Verbindungslinie zwischen den Marken: mittig unter dem Kreis, bis zum nächsten */
#ablauf ol li > div:nth-child(1){align-self:start}                         /* Kreis oben: Mitte liegt fest 32 px unter der Zeilenoberkante */
#ablauf ol li:not(:last-child)::before,#ablauf ol li:not(:last-child)::after{left:17px;top:32px;bottom:-33px}   /* bis zur Mitte des nächsten Kreises (1 px Trennlinie) */
#ablauf ol li > div:nth-child(2){margin-top:6px}

/* ---------- Qualifikation, bereinigt ---------- */
/* Kennzahlen: dunkle Karte, Zahlen weiß */
:is(#qualifikation,#schritt-qualifikation) .kennz-raster{background:#0F2C5C !important;border:0 !important;border-radius:14px;box-shadow:0 10px 28px -14px rgba(15,44,92,.55);gap:0 !important}
:is(#qualifikation,#schritt-qualifikation) .kennz-raster > div{padding:20px 12px 18px !important;gap:5px !important}
:is(#qualifikation,#schritt-qualifikation) .kennz-raster > div:nth-child(odd){border-right:1px solid rgba(255,255,255,.14) !important}
:is(#qualifikation,#schritt-qualifikation) .kennz-raster > div:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.14) !important}
:is(#qualifikation,#schritt-qualifikation) .kennz-raster > div > div:first-child{color:#FFFFFF !important;font-size:26px !important;letter-spacing:-.01em !important}
:is(#qualifikation,#schritt-qualifikation) .kennz-raster > div > div:last-child{color:#A9C4E2 !important;font-size:12.5px !important;line-height:1.35 !important}
/* Foto: volle Breite wie die Karte darüber, Name und Rolle darunter */
#qualifikation .quali-grid{grid-template-columns:minmax(0,1fr) !important;row-gap:18px !important;column-gap:0 !important}
#qualifikation .quali-grid > img{grid-column:1 !important;grid-row:auto !important;width:100% !important;max-width:none !important;height:auto !important;aspect-ratio:1 / 1 !important;object-position:50% 18% !important;border-radius:14px !important;box-shadow:0 2px 12px rgba(15,44,92,.08)}
#qualifikation .quali-grid > div:not(.quali-werdegang) > div:first-child{grid-column:1 !important;grid-row:auto !important;gap:5px !important;margin-top:-2px}
#qualifikation .quali-grid > div:not(.quali-werdegang) > div:first-child > div:first-child{font-size:24px !important;letter-spacing:-.01em}
#qualifikation .quali-grid > div:not(.quali-werdegang) > div:first-child > div:last-child{font-size:12.5px !important;letter-spacing:.08em !important}
#qualifikation .quali-grid > div:not(.quali-werdegang) > p{grid-column:1 !important}
.m-weiter{grid-column:1 !important}
/* Werdegang: ruhiger Zeitstrahl mit Ringmarken, oben „heute“ */
#qualifikation .quali-werdegang{border-radius:14px !important;box-shadow:0 2px 12px rgba(15,44,92,.05);padding:22px 20px 20px !important}
#qualifikation .quali-werdegang > div:first-child{font-size:12.5px !important}
#qualifikation .quali-werdegang li{padding:0 0 20px 30px !important;font-size:15px !important;line-height:1.45 !important;color:#444C57 !important}
#qualifikation .quali-werdegang li:first-child{color:#0F2C5C !important;font-weight:600}
#qualifikation .quali-werdegang li:first-child > span:last-child::after{content:"heute";display:inline-block;margin-left:8px;padding:2px 7px;border-radius:999px;background:#E6EFF8;color:#3C6FA6;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;vertical-align:2px}
#qualifikation .quali-werdegang li > span:first-child{left:0;top:4px;width:14px;height:14px;background:#0F2C5C !important;border:0 !important;box-shadow:0 0 0 3px #FFFFFF,0 0 0 4.5px #C9D6E6}
#qualifikation .quali-werdegang li:not(:first-child) > span:first-child{background:#FFFFFF !important;box-shadow:inset 0 0 0 2.5px #5E93C9,0 0 0 3px #FFFFFF}
#qualifikation .quali-werdegang li:not(:last-child)::before{left:6px;top:18px;bottom:-4px;width:0;background:none;border-left:2px dashed #C9D6E6}

/* ---------- Kennzahlen hell: vier eigene Kacheln ---------- */
:is(#qualifikation,#schritt-qualifikation) .kennz-raster{background:none !important;border:0 !important;border-radius:0;box-shadow:none !important;overflow:visible !important;gap:10px !important}
:is(#qualifikation,#schritt-qualifikation) .kennz-raster > div{background:#FFFFFF;border:1px solid #E4E9F0 !important;border-radius:12px;box-shadow:0 2px 12px rgba(15,44,92,.05);padding:20px 12px 18px !important;gap:5px !important}
:is(#qualifikation,#schritt-qualifikation) .kennz-raster > div > div:first-child{color:#0F2C5C !important;font-size:26px !important;letter-spacing:-.01em !important}
:is(#qualifikation,#schritt-qualifikation) .kennz-raster > div > div:last-child{color:#5B6672 !important;font-size:12.5px !important;line-height:1.35 !important}

/* ---------- Ablauf ohne Zeitstrahl: eine Karte, sechs Zeilen, helle Nummernmarken ---------- */
#ablauf ol li::before,#ablauf ol li::after{display:none !important;content:none !important}
#ablauf ol li{align-items:center !important}
#ablauf ol li > div:nth-child(1){align-self:center;background:#E6EFF8 !important;color:#0F2C5C !important;font-size:13px !important}
#ablauf ol li > div:nth-child(2){margin-top:0}

/* ---------- Ablauf: Marken mit feiner gestrichelter Verbindung, ohne Zeilenlinien ---------- */
#ablauf ol li{border-bottom:0 !important;padding:12px 0}
#ablauf ol li > div:nth-child(1){align-self:start}
#ablauf ol li:not(:last-child)::before{display:block !important;content:"" !important;left:17px;top:55px;bottom:-25px;width:0;background:none;border-left:1.5px dashed #C9D6E6}
#ablauf ol li::after{display:none !important}
#ablauf ol li > div:nth-child(2){margin-top:6px}

/* ---------- Kennzahlen: Reihe zum Wischen ---------- */
:is(#qualifikation,#schritt-qualifikation) .kennz-raster{display:flex !important;gap:10px !important;overflow-x:auto !important;overflow-y:hidden !important;scroll-snap-type:x mandatory;margin:0 -24px -8px;padding:8px 24px 16px;scroll-padding:0 24px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
:is(#qualifikation,#schritt-qualifikation) .kennz-raster::-webkit-scrollbar{display:none}
:is(#qualifikation,#schritt-qualifikation) .kennz-raster > div{flex:0 0 46%;scroll-snap-align:start;justify-content:center}

/* ---------- Foto mit Name und Rolle als Bildunterschrift im Bild ---------- */
#qualifikation .quali-grid > img{grid-row:1 !important}
#qualifikation .quali-grid > div:not(.quali-werdegang) > div:first-child{grid-row:1 !important;align-self:end;z-index:1;margin:0 !important;padding:72px 20px 18px;border-radius:0 0 14px 14px;background:linear-gradient(to top,rgba(15,44,92,.82) 0%,rgba(15,44,92,.55) 45%,rgba(15,44,92,0) 100%);gap:3px !important}
#qualifikation .quali-grid > div:not(.quali-werdegang) > div:first-child > div:first-child{color:#FFFFFF !important;font-size:24px !important;text-shadow:0 1px 2px rgba(0,0,0,.2)}
#qualifikation .quali-grid > div:not(.quali-werdegang) > div:first-child > div:last-child{color:#DCE8F4 !important;font-size:12px !important;letter-spacing:.08em !important}
#qualifikation .quali-grid > div:not(.quali-werdegang) > p{margin-top:4px !important}

/* ---------- Foto: Hochformat 4:5, längerer Verlauf, Unterschrift mit feiner Linie ---------- */
#qualifikation .quali-grid > img{aspect-ratio:4 / 5 !important;object-position:50% 12% !important;border-radius:16px !important}
#qualifikation .quali-grid > div:not(.quali-werdegang) > div:first-child{padding:120px 22px 22px;border-radius:0 0 16px 16px;background:linear-gradient(to top,rgba(10,30,64,.88) 0%,rgba(10,30,64,.6) 38%,rgba(10,30,64,.25) 68%,rgba(10,30,64,0) 100%);gap:8px !important}
#qualifikation .quali-grid > div:not(.quali-werdegang) > div:first-child > div:first-child{font-size:27px !important;line-height:1.1;letter-spacing:-.015em !important;text-shadow:0 1px 3px rgba(0,0,0,.25)}
#qualifikation .quali-grid > div:not(.quali-werdegang) > div:first-child > div:last-child{position:relative;padding-top:10px;font-size:11.5px !important;letter-spacing:.1em !important;color:#E6EFF8 !important}
#qualifikation .quali-grid > div:not(.quali-werdegang) > div:first-child > div:last-child::before{content:"";position:absolute;left:0;top:0;width:28px;height:1.5px;background:#5E93C9;border-radius:1px}

/* ---------- Ablauf: Verbindung als Punktlinie, oben und unten gleich weit von den Marken ---------- */
#ablauf ol li:not(:last-child)::before{left:17px;top:54px;bottom:-6px;border-left:2px dotted #C9D6E6}

/* ---------- Leistungen: Prüfarten als eine Zeile zum Wischen ---------- */
#leistungen .pruefarten{flex-wrap:nowrap !important;justify-content:flex-start !important;max-width:none !important;width:calc(100% + 48px);margin:4px -24px 0 !important;padding:2px 24px 6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;box-sizing:border-box}
#leistungen .pruefarten::-webkit-scrollbar{display:none}
#leistungen .pruefarten > span:not([aria-hidden]){flex:0 0 auto;white-space:nowrap}

/* ---------- Referenzen: Karten mit Inhalt, zwei Reihen zum Wischen, kein Infofenster ---------- */
#referenzen > div{gap:24px !important}
#referenzen .ref-raster{display:grid !important;grid-auto-flow:column;grid-template-columns:none !important;grid-template-rows:repeat(2,minmax(0,1fr));grid-auto-columns:66%;gap:10px !important;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;margin:0 -24px !important;padding:4px 24px 12px;scroll-padding:0 24px;scrollbar-width:none;-webkit-overflow-scrolling:touch;max-width:none !important;width:auto !important;justify-content:start}
#referenzen .ref-raster::-webkit-scrollbar{display:none}
#referenzen .sb-kachel{scroll-snap-align:start;flex-direction:column !important;align-items:stretch !important;gap:10px !important;min-height:0;padding:14px 14px 14px !important;border:1px solid #E4E9F0 !important;border-radius:12px !important;background:#FFFFFF !important;box-shadow:0 2px 12px rgba(15,44,92,.05);position:static !important;z-index:auto !important;transform:none !important}
#referenzen .sb-kachel.offen,#referenzen .sb-kachel:focus-within{border-color:#E4E9F0 !important}
#referenzen .sb-kachel > span:first-child{width:26px !important;height:26px !important}
#referenzen .sb-kachel > span:nth-child(2){font-size:15.5px !important;font-weight:700 !important;white-space:normal !important;line-height:1.25 !important;color:#0F2C5C}
/* Das frühere Infofenster wird zur Liste in der Karte */
#referenzen .sb-pop{position:static !important;width:auto !important;opacity:1 !important;transform:none !important;pointer-events:auto;background:none !important;border:0 !important;box-shadow:none !important;padding:8px 0 0 !important;gap:0 !important;border-top:1px solid #EEF2F7 !important;transition:none !important;filter:none !important}
#referenzen .sb-pop-h,#referenzen .sb-pop-k{display:none !important}
#referenzen .sb-pop-l{gap:5px !important}
#referenzen .sb-pop-l > span{opacity:1 !important;transform:none !important;transition:none !important;font-size:13px !important;line-height:1.35 !important;color:#444C57 !important;gap:7px !important;align-items:flex-start !important}
#referenzen .sb-pop-l > span::before{width:13px !important;height:13px !important;border-radius:0 !important;background:no-repeat center/13px 13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E93C9' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") !important;margin-top:2px}
#referenzen .m-tipp-hinweis{display:none !important}
@media (max-width:360px){#referenzen .ref-raster{grid-auto-columns:78%}#referenzen .sb-kachel > span:nth-child(2){hyphens:auto}#referenzen .sb-pop-l > span{hyphens:auto;overflow-wrap:anywhere}}

/* ---------- Menü: Kontaktkacheln ohne die Trennlinie der Menüpunkte ---------- */
#hauptnav.offen .m-menue-kontakt a{border:1.5px solid #C9D6E6 !important;border-radius:4px;padding:0 12px !important;min-height:50px}

/* ---------- Hero: Unterzeile als stiller Beisatz ---------- */
main .hero-c p:not(.m-hero-hinweis){font-size:14px !important;line-height:1.4 !important;color:#6B7785 !important;margin:0 0 28px !important}

/* ==========================================================
   Unterseiten (Hilfe, Expertenwissen)
   ========================================================== */
/* Kennzeilen und Schritt-Titel in normaler Schreibweise */
main [style*="letter-spacing:0.22em"]:not(.hero-c > div),main .rw-kicker{font-size:13.5px !important;font-weight:500 !important;letter-spacing:0 !important;text-transform:none !important}
main span[style*="letter-spacing:0.18em"]{font-size:14px !important;letter-spacing:0 !important;text-transform:none !important}
main h1.rw-h1{font-size:30px !important;line-height:1.12 !important;letter-spacing:-.022em !important}
main section > div > h2,main section h2[style*="clamp"]{font-size:28px !important;line-height:1.15 !important;letter-spacing:-.02em !important}
main section{min-height:0 !important}
main section > div{padding-left:24px !important;padding-right:24px !important}
/* Hilfe: Rollenwahl als Reihe, Einleitung links wie der Rest */
.rollen-wahl{gap:8px !important}
.rollen-wahl a{min-height:44px;display:inline-flex;align-items:center;padding:0 16px !important;font-size:14.5px !important}
/* Hilfe: Foto volle Breite mit Unterschrift im Bild, Werdegang wie auf der Startseite */
#schritt-qualifikation .person-grid{display:grid !important;grid-template-columns:minmax(0,1fr) !important;gap:16px !important;align-items:start !important}
#schritt-qualifikation .person-medien{grid-column:1;grid-row:1;flex:none !important;max-width:none !important;width:100%}
#schritt-qualifikation .person-medien img{aspect-ratio:4 / 5;height:auto !important;object-position:50% 12% !important;border-radius:16px !important;box-shadow:0 2px 12px rgba(15,44,92,.08)}
#schritt-qualifikation .person-text{display:contents !important}
#schritt-qualifikation .person-text > *{grid-column:1}
#schritt-qualifikation .person-text > div:first-child{grid-column:1;grid-row:1;align-self:end;z-index:1;padding:120px 22px 22px;border-radius:0 0 16px 16px;background:linear-gradient(to top,rgba(10,30,64,.88) 0%,rgba(10,30,64,.6) 38%,rgba(10,30,64,.25) 68%,rgba(10,30,64,0) 100%);gap:8px !important}
#schritt-qualifikation .person-text > div:first-child > div:first-child{color:#FFFFFF !important;font-size:27px !important;line-height:1.1;letter-spacing:-.015em;text-shadow:0 1px 3px rgba(0,0,0,.25)}
#schritt-qualifikation .person-text > div:first-child > div:last-child{position:relative;padding-top:10px;font-size:11.5px !important;letter-spacing:.1em !important;color:#E6EFF8 !important}
#schritt-qualifikation .person-text > div:first-child > div:last-child::before{content:"";position:absolute;left:0;top:0;width:28px;height:1.5px;background:#5E93C9;border-radius:1px}
#schritt-qualifikation .person-text p{font-size:16px !important;line-height:1.65 !important;max-width:none !important}
#schritt-qualifikation .person-werdegang{margin-top:4px !important;padding:22px 20px 20px !important;background:#FFFFFF !important;border-radius:14px !important;box-shadow:0 2px 12px rgba(15,44,92,.05)}
#schritt-qualifikation .person-werdegang > div:first-child{font-size:12.5px !important}
#schritt-qualifikation .person-werdegang ul{gap:0 !important}
#schritt-qualifikation .person-werdegang li{position:relative;border:0 !important;padding:0 0 20px 30px !important;font-size:15px !important;line-height:1.45 !important;color:#444C57 !important}
#schritt-qualifikation .person-werdegang li:last-child{padding-bottom:0 !important}
#schritt-qualifikation .person-werdegang li:first-child{color:#0F2C5C !important;font-weight:600}
#schritt-qualifikation .person-werdegang li:first-child > span:last-child::after{content:"heute";display:inline-block;margin-left:8px;padding:2px 7px;border-radius:999px;background:#E6EFF8;color:#3C6FA6;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;vertical-align:2px}
#schritt-qualifikation .person-werdegang li > span:first-child{position:absolute;left:0;top:4px;width:14px;height:14px;border-radius:50%;background:#0F2C5C;font-size:0 !important;z-index:1;box-shadow:0 0 0 3px #FFFFFF,0 0 0 4.5px #C9D6E6}
#schritt-qualifikation .person-werdegang li:not(:first-child) > span:first-child{background:#FFFFFF;box-shadow:inset 0 0 0 2.5px #5E93C9,0 0 0 3px #FFFFFF}
#schritt-qualifikation .person-werdegang li:not(:last-child)::before{content:"";position:absolute;left:6px;top:18px;bottom:-4px;width:2px;background:linear-gradient(#5E93C9,#C9D6E6)}
/* Expertenwissen: Kapitelliste und Zeilen als Tippflächen */
.kapitelliste a,.wissen-zeile{min-height:56px}
.faq-toggle{min-height:52px}
/* Hilfe: Einstieg kompakt, kein Bildschirmhöhen-Zwang */
main > section:first-child:has(.rollen-wahl){min-height:0 !important}
main > section:first-child:has(.rollen-wahl) > div{padding:44px 24px 40px !important;gap:12px !important}
main > section:first-child:has(.rollen-wahl) > div > p[style*="text-transform:uppercase"]{margin-top:22px !important;font-size:12.5px !important;letter-spacing:0 !important;text-transform:none !important;font-weight:500 !important}
.rollen-wahl{margin-top:8px !important}
main > section:first-child:has(.rollen-wahl) .rw-info{font-size:14px !important;color:#5B6672;margin-top:4px}
.rw-kicker,.rw-h1,.rw-intro,.rw-info{min-height:0 !important}   /* die Seite reserviert sonst Platz für den längsten Rollentext */

/* ---------- Abfragekatalog und Bauamt-Finder: ruhige Karten, kleinere Schrift, Schritte 1–3 ---------- */
.m-werkzeug{border-radius:14px !important;box-shadow:0 2px 14px rgba(15,44,92,.06) !important;padding:20px 18px 18px !important;gap:16px !important}
.m-werkzeug > div:first-child{gap:4px !important}
.m-werkzeug > div:first-child > span:first-child{font-size:12px !important;letter-spacing:0 !important;text-transform:none !important;font-weight:500 !important}
.m-werkzeug h2,.m-werkzeug h3{font-size:19px !important;line-height:1.25 !important}
.m-werkzeug > div:first-child > p{font-size:13.5px !important;line-height:1.5 !important}
.m-werkzeug > p:last-child{font-size:11.5px !important;line-height:1.5 !important;color:#7A8694 !important;padding-top:12px !important}
/* Fragen: untereinander, mit Nummer 1–3 vor jeder Angabe */
#pp-fragen{grid-template-columns:minmax(0,1fr) !important;gap:14px !important;padding-top:16px !important;counter-reset:frage}
#pp-fragen > div{gap:6px !important;counter-increment:frage}
#pp-fragen label{min-height:0 !important;align-items:center !important;gap:8px;font-size:12.5px !important;font-weight:500 !important;letter-spacing:0 !important;text-transform:none !important;line-height:1.3 !important;color:#1E2530 !important}
#pp-fragen label::before{content:counter(frage);flex:none;width:20px;height:20px;border-radius:50%;background:#E6EFF8;color:#0F2C5C;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
#pp-fragen select{padding:12px 40px 12px 14px !important;font-size:15px !important;min-height:46px;border-radius:8px !important}
#pp-fragen select:focus{outline:none;border-color:#0F2C5C !important;box-shadow:0 0 0 3px rgba(94,147,201,.25)}
/* Bauamt */
details#bauamt.m-werkzeug{padding:0 !important;gap:0 !important}   /* Abstände kommen hier von Summary und Inhalt, nicht doppelt */
#bauamt summary{padding:18px 18px !important;font-size:17px !important;line-height:1.3 !important;gap:12px !important}
#ba-suche::placeholder{font-size:14px;color:#9AA5B1}
#bauamt summary .faq-toggle{font-size:20px !important}
details#bauamt.faq-frage > div:not(summary){padding:0 18px 20px !important;gap:14px !important}
details#bauamt.faq-frage > div > p:first-child{padding-top:16px}
details#bauamt > div > p:first-child,.bauamt-karte > div:first-child > p{font-size:13.5px !important;line-height:1.5 !important}
#bauamt label[for="ba-suche"],.bauamt-karte label[for="ba-suche"]{font-size:12.5px !important;font-weight:500 !important;letter-spacing:0 !important;text-transform:none !important;color:#1E2530 !important}
#ba-suche{max-width:none !important;min-height:46px !important;border-radius:8px !important;padding:12px 14px !important}
#ba-suche:focus{outline:none;border-color:#0F2C5C !important;box-shadow:0 0 0 3px rgba(94,147,201,.25)}
#ba-liste{max-width:none !important;border-radius:0 0 8px 8px !important}
details#bauamt > div > p:last-child,.bauamt-karte > p:last-child{font-size:11.5px !important;line-height:1.5 !important;color:#7A8694 !important;padding-top:12px !important}
#bauamt[open] summary{border-bottom:1px solid #EEF2F7}

/* ---------- Hilfe, Schritt 1: Themenwahl als helle Reihe, Inhalt in einer ruhigen Karte ---------- */
.vA{display:flex !important;flex-direction:column;gap:14px}
.vA-nav.vd-karte{box-sizing:border-box;width:100vw;min-width:0;position:static !important;flex-direction:row !important;background:none !important;border:0 !important;box-shadow:none !important;border-radius:0 !important;padding:2px 24px 6px !important;margin:0 -24px !important;gap:8px !important;overflow-x:auto !important;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.vA-nav::-webkit-scrollbar{display:none}
.vA-nav button{flex:0 0 auto !important;display:inline-flex !important;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 10px !important;margin:0 !important;border-radius:999px !important;background:#FFFFFF !important;border:1px solid #DCE5F0;scroll-snap-align:start;transition:background .2s ease,border-color .2s ease,color .2s ease}
.vA-nav button .nr{grid-row:auto !important;padding:0 !important;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#EEF2F7;color:#5B6672 !important;font-size:11px !important;letter-spacing:0 !important;font-weight:700}
.vA-nav button .k{font-size:14px !important;font-weight:600 !important;letter-spacing:0 !important;text-transform:none !important;color:#3D4752 !important;white-space:nowrap}
.vA-nav button .t{display:none !important}
.vA-nav button[aria-selected="true"]{background:#FFFFFF !important;border-color:#0F2C5C !important;box-shadow:0 0 0 1px #0F2C5C inset}
.vA-nav button[aria-selected="true"] .nr{background:#0F2C5C;color:#FFFFFF !important}
.vA-nav button[aria-selected="true"] .k{color:#0F2C5C !important}
.vA-panel.vd-karte{box-sizing:border-box;width:100%;min-width:0;max-width:100%;overflow:hidden;padding:22px 18px 20px !important;min-height:0 !important;border-radius:14px !important;box-shadow:0 2px 14px rgba(15,44,92,.06) !important;gap:10px !important}
.vA-panel .vd-kick{font-size:12px !important;letter-spacing:0 !important;text-transform:none !important;font-weight:500 !important}
.vA-panel h2{font-size:20px !important;line-height:1.25 !important;letter-spacing:-.01em}
.vA-panel .vd-inhalt{gap:14px !important}
.vA-panel .vd-inhalt > p{font-size:15px !important;line-height:1.6 !important}
.vA-panel .vd-inhalt > span{font-size:12.5px !important;letter-spacing:0 !important;text-transform:none !important;font-weight:600 !important;color:#0F2C5C !important;margin-top:2px !important}
.vA-panel .vd-inhalt > ul{gap:0 !important}
.vA-panel .vd-inhalt > ul > li{font-size:14.5px !important;line-height:1.5 !important;padding:10px 0 !important;gap:10px !important}
.vA-panel .vd-inhalt > a{align-self:stretch !important;text-align:center;padding:14px 20px !important;border-radius:8px !important;font-size:15px !important}
/* Erfahrungswerte: die lange Liste als Karten zum Wischen (zwei Reihen) */
.vA-panel .vd-inhalt > ul.m-reihe{display:grid !important;grid-template-columns:none !important;width:calc(100vw - 48px);box-sizing:border-box;min-width:0;grid-auto-flow:column;grid-template-rows:auto auto;grid-auto-columns:78%;gap:12px !important;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-left:26px;margin:4px -18px 0 !important;padding:4px 26px 8px !important;-webkit-overflow-scrolling:touch;counter-reset:ew}
.vA-panel .vd-inhalt > ul.m-reihe::-webkit-scrollbar{display:none}
.vA-panel .vd-inhalt > ul.m-reihe > li{counter-increment:ew;position:relative;box-sizing:border-box;display:block !important;scroll-snap-align:start;background:#F5F8FC;border:1px solid #E4E9F0;border-radius:12px;padding:12px 14px 12px 42px !important;font-size:13.5px !important;line-height:1.5 !important;color:#444C57 !important;border-bottom:1px solid #E4E9F0 !important}
.vA-panel .vd-inhalt > ul.m-reihe > li::before{content:counter(ew);position:absolute;left:12px;top:12px;width:22px;height:22px;border-radius:50%;background:#FFFFFF;border:1px solid #DCE5F0;color:#0F2C5C;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.vA-panel .vd-inhalt > ul.m-reihe > li > strong{display:block;font-size:14.5px !important;line-height:1.3 !important;margin-bottom:4px !important}
.vA-panel .vd-inhalt > ul.m-reihe > li > span:first-child{display:none}   /* der Gedankenstrich ist durch die Nummer ersetzt */
.vA-panel .vd-inhalt > ul.m-reihe > li > span{font-size:inherit !important;line-height:inherit !important}
.vA-panel .vd-inhalt > .m-punkte{margin-top:-4px}
/* Kennzahlen (Startseite und Hilfe): gleich breit, gleich hoch, zweite Kachel ganz im Bild */
:is(#qualifikation,#schritt-qualifikation) .kennz-raster{align-items:stretch !important}
:is(#qualifikation,#schritt-qualifikation) .kennz-raster > div{flex:0 0 42% !important;box-sizing:border-box}
.m-punkte{display:flex;justify-content:center;gap:8px;padding-top:6px}
.m-punkte span{width:7px;height:7px;border-radius:50%;background:#C9D6E6;transition:background .2s ease,width .2s ease}
.m-punkte span.an{background:#0F2C5C;width:20px;border-radius:4px}

/* ---------- Expertenwissen ---------- */
/* Kapitel 01–04 als Karten statt Zeilen; Tippen hebt die Karte nur leicht an */
.kapitelliste{border-top:0 !important;gap:10px}
.kapitelliste a{grid-template-columns:28px minmax(0,1fr) auto !important;align-items:center !important;gap:12px !important;padding:14px 14px 14px 16px !important;background:#FFFFFF !important;border:1px solid #DCE5F0 !important;border-bottom:1px solid #DCE5F0 !important;border-radius:12px;box-shadow:0 2px 10px rgba(15,44,92,.05);transition:background .15s ease,border-color .15s ease,transform .15s ease}
.kapitelliste a:hover{background:#FFFFFF !important}
.kapitelliste a:active{background:#F5F8FC !important;border-color:#C9D6E6 !important;transform:scale(.99)}
.kapitelliste a > span:first-child{width:28px;height:28px;border-radius:50%;background:#E6EFF8;color:#0F2C5C !important;font-size:11.5px !important;letter-spacing:0 !important;display:inline-flex;align-items:center;justify-content:center}
.kapitelliste a > span:nth-child(2){gap:2px !important}
.kapitelliste a > span:nth-child(2) > span:first-child{font-size:16px !important;line-height:1.25 !important}
.kapitelliste a > span:nth-child(2) > span:last-child{font-size:13px !important;line-height:1.4 !important}
.kapitelliste a > span:last-child{width:30px;height:30px;border-radius:50%;background:#F5F8FC;display:inline-flex;align-items:center;justify-content:center;font-size:15px !important;color:#0F2C5C !important}
/* Zwischentitel („Prüfpflicht klären“, „Intervall ablesen“, „Bauamt finden“) in normaler Schreibweise */
#prueffristen span[style*="letter-spacing:0.18em"]{font-size:13.5px !important;font-weight:600 !important;letter-spacing:0 !important;text-transform:none !important;color:#0F2C5C !important}
/* Intervall ablesen: ruhige Karte, Frist als Marke */
.fristen-karte{background:#FFFFFF !important;border:1px solid #D7E0EB !important;border-radius:14px !important;box-shadow:0 2px 14px rgba(15,44,92,.06);padding:16px 18px 14px !important}
.fristen-karte th{font-size:11.5px !important;letter-spacing:0 !important;text-transform:none !important;font-weight:600 !important;color:#7A8694 !important;padding:0 0 8px !important;white-space:normal !important}
.fristen-karte th:last-child{padding-left:12px !important}
.fristen-karte td{font-size:14px !important;line-height:1.4 !important;padding:11px 0 !important}
.fristen-karte td:last-child{padding-left:12px !important}
.fristen-karte td:last-child{font-size:0 !important}
.fristen-karte td:last-child::before{content:attr(data-frist);display:inline-block;padding:4px 10px;border-radius:999px;background:#E6EFF8;color:#0F2C5C;font-size:12.5px;font-weight:700;white-space:nowrap}
.fristen-karte > p{margin:10px 0 4px !important;padding-top:12px !important;font-size:11.5px !important;line-height:1.5 !important;color:#7A8694 !important}
.fristen-karte > p strong{color:#5B6672 !important}
/* Behördenfinder-Karte wie auf der Betreiber-Seite */
.bauamt-karte.m-werkzeug{padding:20px 18px 18px !important;gap:16px !important}
.bauamt-karte > div:nth-child(2){padding-top:16px !important;gap:6px !important}
/* FAQ: kompakte Themenkarten, Kopf bleibt beim Lesen oben sichtbar */
#faq > div{gap:32px !important}
#faq > div > div:last-child{gap:10px !important}
.faq-thema{border-radius:12px !important;scroll-margin-top:66px}   /* kein overflow:hidden – sonst klebt der Kopf nicht am Seitenrand */
.faq-thema > div{border-radius:0 0 12px 12px}
.faq-kopf{display:flex !important;align-items:center !important;gap:12px !important;padding:14px 16px 14px 18px !important;position:sticky;top:65px;z-index:2;background:#FFFFFF;border-radius:12px}
.faq-kopf > span:first-child{display:flex !important;flex-direction:column;gap:2px;min-width:0;flex:1}
.faq-kopf > span:first-child > span:first-child{font-size:11.5px !important;letter-spacing:0 !important;text-transform:none !important;font-weight:500 !important}
.faq-kopf > span:first-child > span:nth-child(2){font-size:15.5px !important;line-height:1.3 !important}
.faq-kopf .faq-toggle{width:30px;height:30px;min-height:0;flex:none;border-radius:50%;background:#F5F8FC;display:inline-flex;align-items:center;justify-content:center;font-size:18px !important;color:#0F2C5C !important}
.faq-thema[open] > .faq-kopf{border-bottom:1px solid #EEF2F7;border-radius:12px 12px 0 0}
.faq-thema[open] > .faq-kopf .faq-toggle{background:#E6EFF8}
.faq-thema > div{padding:0 16px 6px !important}
.faq-frage:not(#bauamt){padding-bottom:0 !important}
.faq-frage:not(#bauamt) > summary{padding:13px 0 !important;font-size:14.5px !important;line-height:1.4 !important;gap:12px !important;align-items:center !important}
.faq-frage:not(#bauamt) > summary .faq-toggle{min-height:0;line-height:1;width:24px;text-align:center}
.faq-frage:not(#bauamt) > summary .faq-toggle{font-size:18px !important}
.faq-frage[open]:not(#bauamt) > summary{margin-bottom:0 !important;border-bottom:0 !important;color:#0F2C5C !important}
.faq-frage:not(#bauamt) > :not(summary){padding:0 0 8px !important;font-size:14.5px !important;line-height:1.6 !important;max-width:none !important}
.faq-frage:not(#bauamt) > :not(summary):last-child{padding-bottom:16px !important}
.faq-frage:not(#bauamt) > ul,.faq-frage:not(#bauamt) > ol{padding-left:20px !important}

/* ---------- Hilfe, Schritt 1: Themenwahl als Schieber in einer hellen Leiste (Variante 3) ---------- */
.vA-nav.vd-karte{background:#E9EEF4 !important;border-radius:999px !important;padding:4px !important;margin:0 !important;width:100% !important;gap:2px !important;scroll-snap-type:none}
.vA-nav button{border:0 !important;background:transparent !important;min-height:38px;padding:0 14px 0 8px !important;border-radius:999px !important}
.vA-nav button .nr{background:transparent;color:#8A96A3 !important;width:18px;height:18px}
.vA-nav button .k{color:#5B6672 !important;font-weight:500 !important}
.vA-nav button[aria-selected="true"]{background:#FFFFFF !important;border:0 !important;box-shadow:0 1px 4px rgba(15,44,92,.14),0 0 0 .5px rgba(15,44,92,.06) !important}
.vA-nav button[aria-selected="true"] .nr{background:transparent;color:#3C6FA6 !important}
.vA-nav button[aria-selected="true"] .k{color:#0F2C5C !important;font-weight:600 !important}

/* Kennzahlen: Punkte unter der Wischreihe */
:is(#qualifikation,#schritt-qualifikation) .kennz-raster + .m-punkte{padding-top:10px}

/* ---------- Korrekturen nach iPhone-Test ---------- */
/* Kennzahlen: nur Rahmen, kein Schatten (der wurde in der Wischreihe abgeschnitten und sah wie ein doppelter Rand aus) */
:is(#qualifikation,#schritt-qualifikation) .kennz-raster{padding:4px 24px 6px !important;margin-bottom:0 !important}
:is(#qualifikation,#schritt-qualifikation) .kennz-raster > div{box-shadow:none !important;border:1px solid #DCE5F0 !important}
/* Menü: immer eine Spalte untereinander, nie in eine zweite Spalte umbrechen */
#hauptnav.offen{flex-wrap:nowrap !important}
/* Menü offen: Kopfzeile fest oben, Seite dahinter eingefroren (iOS-sicher) */
html.m-menue-offen header{position:fixed !important;top:0;left:0;right:0;z-index:50}
html.m-menue-offen body{position:fixed;left:0;right:0;width:100%;overflow:hidden}
/* Werdegang: keine Trennlinie über dem letzten Eintrag */
#schritt-qualifikation .person-werdegang ul li:nth-last-child(2),#qualifikation .quali-werdegang ul li:nth-last-child(2){border-bottom:0 !important}
/* Kennzahlen: Rahmen an allen vier Seiten gleich (alte Regeln der verworfenen dunklen Karte hatten rechts/unten fast unsichtbare Linien gesetzt) */
:is(#qualifikation,#schritt-qualifikation) .kennz-raster > div:nth-child(n){border:1px solid #D7E0EB !important;border-radius:12px !important;box-shadow:none !important}

/* ---------- 02 Leistungen: geführte Auswahl ---------- */
.m-lw-an .leist-raster{display:none !important}
.m-lw-an #leistungen .pruefarten{display:none !important}
.m-lw-an #leistungen h2{font-size:28px !important;line-height:1.15 !important;letter-spacing:-.015em !important}
.m-lw-lead{margin:0 auto;text-align:center;font-size:15px;line-height:1.55;color:#5B6672;max-width:330px}
.m-lw-an #leistungen > div{gap:22px !important}
.m-lw{display:grid;gap:12px}
.m-lw-k{all:unset;cursor:pointer;position:relative;box-sizing:border-box;height:148px;border-radius:16px;overflow:hidden;background:#DCE8F4 center/cover no-repeat;display:flex;flex-direction:column;justify-content:flex-end;padding:16px 18px;color:#FFFFFF;box-shadow:0 6px 18px -10px rgba(15,44,92,.45);-webkit-tap-highlight-color:transparent}
.m-lw-k::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,24,52,.88) 0%,rgba(8,24,52,.42) 42%,rgba(8,24,52,0) 68%)}
.m-lw-k b{position:relative;font-size:21px;font-weight:700;letter-spacing:-.012em;line-height:1.1;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.m-lw-k small{position:relative;font-size:13px;color:#DCE8F4;margin-top:5px;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.m-lw-k i{position:absolute;right:14px;top:14px;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;transition:transform .25s ease,background .2s ease}
.m-lw-k i svg{width:14px;height:14px}
.m-lw-k.an{border-radius:16px 16px 0 0}
.m-lw-k.an i{background:#FFFFFF;color:#0F2C5C;transform:rotate(180deg)}
.m-lw-k:focus-visible{outline:3px solid rgba(94,147,201,.6);outline-offset:2px}
.m-lw-p{margin-top:-12px}
.m-lw-pi{background:#FFFFFF;border:1px solid #D7E0EB;border-top:0;border-radius:0 0 16px 16px;padding:18px 18px 18px;box-shadow:0 6px 18px -10px rgba(15,44,92,.3)}
.m-lw-kick{font-size:12.5px;color:#3C6FA6;font-weight:500}
.m-lw-pi h3{margin:4px 0 10px !important;font-size:18px !important;color:#0F2C5C}
.m-lw-pi ul{margin:0 0 4px !important;padding:0 !important;list-style:none;display:grid !important;gap:7px !important;font-size:14.5px !important;line-height:1.45 !important;color:#444C57}
.m-lw-pi li,.m-lw-zi li{position:relative;padding:0 0 0 18px !important;border:0 !important;font-size:14.5px !important;line-height:1.45 !important;display:block !important}
.m-lw-pi li::before,.m-lw-zi li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:#5E93C9}
.m-lw-pi li > span:first-child,.m-lw-zi li > span:first-child{display:none}   /* der Gedankenstrich */
.m-lw-pi p,.m-lw-zi p{margin:0 0 10px !important;font-size:14.5px !important;line-height:1.55 !important;color:#444C57}
.m-lw-arten{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 18px}
.m-lw-arten span{font-size:12.5px;padding:5px 10px;border-radius:999px;background:#E6EFF8;color:#0F2C5C;font-weight:500}
.m-lw-cta,.m-lw-zi a{display:flex !important;align-items:center;justify-content:center;gap:8px;min-height:50px;border-radius:8px !important;background:#0F2C5C !important;color:#FFFFFF !important;font-weight:600;font-size:15.5px !important;text-decoration:none;margin-top:6px;padding:0 16px !important;border:0 !important}
.m-lw-mehr{margin:-4px 0 0 !important;text-align:center;font-size:14px;line-height:1.5;color:#5B6672}
.m-lw-mehr a{color:#0F2C5C;font-weight:600}
.m-lw-liste{background:#FFFFFF;border:1px solid #D7E0EB;border-radius:14px;overflow:hidden}
.m-lw-z{all:unset;cursor:pointer;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:12px;padding:13px 16px;border-top:1px solid #EEF2F7;color:#3C6FA6;-webkit-tap-highlight-color:transparent}
.m-lw-z:first-child{border-top:0}
.m-lw-z i{width:48px;height:48px;border-radius:12px;background:#E6EFF8 center/cover no-repeat;flex:none}
.m-lw-z i.leer{background:#E6EFF8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F2C5C' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h3.5l1.7 4.3-2.2 1.4a11 11 0 0 0 6.3 6.3l1.4-2.2L20 15.5V19a1.5 1.5 0 0 1-1.6 1.5A16.5 16.5 0 0 1 3.5 5.6 1.5 1.5 0 0 1 5 4z'/%3E%3C/svg%3E") center/22px no-repeat}
.m-lw-z > span{flex:1;min-width:0}
.m-lw-z b{display:block;font-size:15.5px;color:#0F2C5C;font-weight:600;line-height:1.25}
.m-lw-z small{display:block;font-size:13px;color:#5B6672;margin-top:2px}
.m-lw-z > svg{width:22px;height:22px;flex:none;transition:transform .25s ease}
.m-lw-z.an > svg{transform:rotate(180deg)}
.m-lw-zi{background:#F8FAFD;padding:16px 16px 18px 76px;border-top:1px solid #EEF2F7}
.m-lw-zi > span:first-child,.m-lw-zi > div:first-child > span:first-child{margin-top:0 !important}
.m-lw-zi ul{margin:0 !important;padding:0 !important;list-style:none;display:grid !important;gap:6px !important}
.m-lw-zi a{min-height:44px;font-size:14.5px !important;margin-top:10px}
.m-lw-zi > span,.m-lw-zi > div > span{display:block;font-size:12px;letter-spacing:0;text-transform:none;color:#3C6FA6;font-weight:600;margin:10px 0 4px}
.m-lw-zi span[style*="letter-spacing"],.m-lw-pi span[style*="letter-spacing"]{display:block;font-size:12.5px !important;letter-spacing:0 !important;text-transform:none !important;color:#3C6FA6 !important;font-weight:600 !important;margin:10px 0 4px}

/* ---------- 04 Referenzen: altes Raster aus ---------- */
.m-rf-an #referenzen .ref-raster{display:none !important}
.m-rf-an #referenzen > div{gap:22px !important}

/* Hero-Knopf: kein Puls-Ring mobil – der überschrieb den Schatten und ließ ihn erst nach der Animation erscheinen */
main .hero-c .hero-cta{animation:none !important}
/* Leistungen: Karten starten eingeklappt; „Prüfumfang“-Pille (dunkles Milchglas) unten rechts zeigt das Aufklappen */
.m-lw-k{height:150px;padding-right:138px}
.m-lw-k b{font-size:20px}
.m-lw-k i{top:auto;bottom:14px;right:14px;width:auto;height:36px;padding:0 12px 0 14px;border-radius:999px;gap:7px;font-size:13px;font-weight:600;font-style:normal;color:#FFFFFF;background:rgba(10,30,64,.38);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);transform:none;transition:background .2s ease}
.m-lw-k i svg{width:12px;height:12px;transition:transform .25s ease}
.m-lw-k.an i{background:rgba(10,30,64,.55);color:#FFFFFF;transform:none}
.m-lw-k.an i svg{transform:rotate(180deg)}
.m-lw-k.an{padding-right:138px}
/* Hilfe-Knopf („?“) nur im Hero – danach ausgeblendet */
html.m-hero-weg .hd5{opacity:0 !important;pointer-events:none !important;transform:translateY(12px)}

/* Leistungen mobil – Animation (v2.40) */
.m-lc{margin:12px -24px 0}
/* Maße aus dem Video: Karte 67 % der Breite, Abstand 3,7 %, Bild 1,22 : 1 */
.m-lc-buehne{position:relative;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;transition:height .45s cubic-bezier(.22,.61,.36,1)}
.m-lc-s{position:absolute;left:0;top:0;width:var(--wc);will-change:transform;cursor:pointer}
/* Fenster: feste Höhe, Breite wächst/schrumpft – das Bild darin bleibt gleich groß und mittig, so wird mehr davon sichtbar */
.m-lc-fenster{position:relative;height:var(--h);border-radius:6px;overflow:hidden;will-change:width}
.m-lc-bild{position:absolute;top:0;left:50%;width:var(--wc);height:100%;transform:translateX(-50%);background:#E6EFF8 center/cover no-repeat}
.m-lc-fenster i{position:absolute;inset:0;background:#F6F9FC;opacity:.6;pointer-events:none}
.m-lc-txt{padding:20px 0 0;width:var(--wc);opacity:0}
.m-lc-s h3{margin:0 0 9px!important;font-size:18px!important;font-weight:700!important;letter-spacing:-.01em;line-height:1.22;color:#0F2C5C!important;hyphens:manual}
.m-lc-s p{margin:0!important;font-size:14px!important;line-height:1.55!important;color:#45536A!important}
.m-lc-pkt{display:flex;justify-content:center;gap:6px;margin:22px 0 0}
.m-lc-pkt button{all:unset;width:6px;height:6px;border-radius:999px;background:#C9D6E6;transition:width .3s ease,background .3s ease;cursor:pointer}
.m-lc-pkt button.an{width:20px;background:#0F2C5C}
/* Milchglas-Pille auf dem Bild (Variante 5) */
.m-lc-tog{all:unset;box-sizing:border-box;position:absolute;right:10px;bottom:10px;z-index:2;display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border-radius:999px;background:rgba(10,30,64,.42);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font-size:13px;font-weight:600;cursor:pointer;opacity:0;-webkit-tap-highlight-color:transparent}
.m-lc-tog b{width:7px;height:7px;flex:none;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;border-radius:0 0 1.5px 0;transform:translateY(-2px) rotate(45deg);transition:transform .35s ease}
.offen .m-lc-tog b{transform:translateY(2px) rotate(-135deg)}
/* Aufklappen in der Karte */
.m-lc-mehr{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.22,.61,.36,1)}
.offen .m-lc-mehr{grid-template-rows:1fr}
.m-lc-mi{overflow:hidden;min-height:0;opacity:0;transition:opacity .25s ease}
.offen .m-lc-mi{opacity:1;transition:opacity .35s ease .1s}
.m-lc-mi > :first-child{margin-top:16px!important}
.m-lc-mi ul{margin:0 0 14px!important;padding:0!important;list-style:none;display:grid!important;gap:5px!important}
.m-lc-mi li{position:relative;padding:0 0 0 16px!important;border:0!important;font-size:14px!important;line-height:1.45!important;color:#45536A!important;display:block!important}
.m-lc-mi li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:#5E93C9}
.m-lc-mi li > span:first-child{display:none}
.m-lc-mi p{font-size:14px!important;margin:0 0 10px!important}
.m-lc-mi .m-lw-arten{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.m-lc-mi .m-lw-arten span{font-size:11.5px;font-weight:600;color:#0F2C5C;background:#E6EFF8;border-radius:999px;padding:5px 10px}
.m-lc-mi .m-lw-cta{display:flex!important;align-items:center;justify-content:center;min-height:48px;border-radius:4px!important;background:#0F2C5C!important;color:#fff!important;font-weight:600;font-size:15px!important;text-decoration:none;margin:0 0 4px}
.m-lc-mi span[style*="letter-spacing"]{display:block;font-size:12px!important;letter-spacing:0!important;text-transform:none!important;color:#3C6FA6!important;font-weight:600!important;margin:6px 0 4px}

/* Referenzen mobil – Kacheln in einer Reihe (v2.42) */
/* Referenzen mobil – Kacheln in einer Reihe */
#referenzen .m-rr{margin:-6px -24px 0}
/* Innenabstand oben/unten groß genug, damit der Schatten nicht vom Scrollbereich abgeschnitten wird */
.m-rr-reihe{display:grid;grid-auto-flow:column;grid-auto-columns:46%;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding:0 24px;padding:10px 24px 26px;scrollbar-width:none;-webkit-overflow-scrolling:touch;text-align:left}
.m-rr-reihe::-webkit-scrollbar{display:none}
.m-rr-k{scroll-snap-align:start;background:#FFFFFF;border:1px solid #E9EEF4;border-radius:14px;padding:16px 16px 18px;box-shadow:0 1px 2px rgba(15,44,92,.04),0 8px 20px -10px rgba(15,44,92,.16)}
.m-rr-t{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:#EEF3F9;margin:0 0 14px}
.m-rr-i{display:block;width:21px;height:21px;background:#0F2C5C;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.m-rr-k b{font-size:15px;font-weight:700;line-height:1.25;letter-spacing:-.005em;color:#0F2C5C;hyphens:manual;margin:0 0 12px;min-height:2.5em;display:flex;align-items:flex-end}
.m-rr-k ul{margin:0;padding:10px 0 0;border-top:1px solid #EEF2F7;list-style:none;display:grid;gap:4px}
.m-rr-k li{position:relative;padding:0 0 0 12px;font-size:13px;line-height:1.4;color:#5B6672;border:0!important}
.m-rr-k li::before{content:"";position:absolute;left:0;top:7.5px;width:4px;height:4px;border-radius:50%;background:#5E93C9}
.m-rr-bahn{position:relative;width:96px;height:3px;margin:2px auto 0;border-radius:3px;background:#E1E8F1;overflow:hidden}
.m-rr-bahn i{position:absolute;left:0;top:0;bottom:0;background:#0F2C5C;border-radius:3px}