.n100{--blau:#0064AF;--tief:#00457A;--hellblau:#E8F1F9;--gelb:#FDC300;--tinte:#383838;--grau:#5A6774;--linie:#D9E2E9;--nebel:#F1F5F8;--dunkel:#003A63;font-family:Mulish,"Helvetica Neue",Arial,sans-serif;color:var(--tinte);line-height:1.65;text-align:left;font-size:18px;}
.n100 *{box-sizing:border-box;}
.n100 .n100-spur{max-width:1200px;margin:0 auto;padding:0 24px;}
.n100 h1,.n100 h2,.n100 h3{margin:0;line-height:1.08;letter-spacing:-.015em;text-transform:none;}
.n100 p{margin:0;text-align:left;}
.n100 h2,.n100 h3{text-align:left;}
.n100 .n100-hero h1,.n100 .n100-hero p{text-align:center;}
.n100 img{max-width:100%;display:block;}
.n100 a{color:inherit;}
.n100 .n100-band{padding:clamp(52px,7vw,92px) 0;background:#fff;}
.n100 .n100-hell{background:#fff;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);}
.n100 .n100-grau{background:var(--nebel);}
.n100 .n100-kicker{display:block;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--blau);margin:0 0 14px;}
.n100 .n100-kicker.gelb{color:#7A5C00;}
.n100 h2.n100-gross{font-size:clamp(30px,4.2vw,52px);font-weight:800;}
.n100 .n100-lead{font-size:clamp(18px,1.5vw,21px);color:var(--grau);max-width:62ch;line-height:1.55;}
.n100 .n100-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:2px;border:2px solid transparent;font-weight:800;font-size:16px;text-decoration:none;transition:transform .15s ease,background .15s ease,color .15s ease;}
.n100 .n100-btn:hover{transform:translateY(-1px);}
.n100 .n100-btn-gelb{background:var(--gelb);color:#12212C;}
.n100 .n100-btn-gelb:hover{background:#FFD233;color:#12212C;}
.n100 .n100-btn-weiss{background:#fff;color:var(--blau);}
.n100 .n100-btn-weiss:hover{background:var(--gelb);color:#12212C;}
.n100 .n100-btn-rand{border-color:#fff;color:#fff;}
.n100 .n100-btn-rand:hover{background:#fff;color:var(--blau);}
.n100 .n100-btn-linie{border-color:var(--blau);color:var(--blau);}
.n100 .n100-btn-linie:hover{background:var(--blau);color:#fff;}
.n100 .n100-btn-blau{background:var(--blau);color:#fff;}
.n100 .n100-btn-blau:hover{background:var(--tief);color:#fff;}
.n100 .n100-pf{width:20px;height:12px;flex:none;transition:transform .15s ease;}
.n100 .n100-aktionen{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:34px;}

.n100 .n100-hero{position:relative;background:var(--blau);overflow:hidden;text-align:center;}
.n100 .n100-hero-bild{position:absolute;top:0;right:0;bottom:0;left:0;}
.n100 .n100-hero-bild img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;}
.n100 .n100-schleier{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,rgba(0,100,175,.80) 0%,rgba(0,88,155,.85) 52%,rgba(0,69,122,.91) 100%);}
.n100 .n100-hero .n100-spur{position:relative;z-index:2;max-width:940px;padding-top:clamp(52px,7vw,96px);padding-bottom:clamp(52px,7vw,96px);}
.n100 .n100-hero-jubi{display:flex;flex-direction:column;align-items:center;gap:14px;margin:0 0 26px;}
.n100 .n-signet{height:clamp(84px,9vw,124px);width:auto;margin:0 auto;}
.n100 .n100-jahre{display:block;color:rgba(255,255,255,.82);font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;}
.n100 .n100-hero h1{font-size:clamp(31px,4.4vw,56px);font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1.07;max-width:18ch;margin:0 auto;}
.n100 .n100-marke{background:#fff;color:var(--blau);padding:0 .14em .03em;display:inline-block;}
.n100 .n100-hero p{color:rgba(255,255,255,.9);margin:20px auto 0;font-size:clamp(17px,1.4vw,20px);max-width:56ch;text-align:center;}
.n100 .n100-hero-fuss{position:relative;height:clamp(20px,2.6vw,34px);background:var(--gelb);-webkit-clip-path:polygon(0 100%,100% 0,100% 100%);clip-path:polygon(0 100%,100% 0,100% 100%);}

.n100 .n100-termin{background:var(--blau);color:#fff;}
.n100 .n100-termin .n100-spur{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;padding-top:clamp(34px,4.5vw,54px);padding-bottom:clamp(34px,4.5vw,54px);}
.n100 .n100-termin h2{font-size:clamp(26px,3.4vw,40px);font-weight:800;color:#fff;}
.n100 .n100-termin h2 em{font-style:normal;color:var(--gelb);}
.n100 .n100-termin p{color:rgba(255,255,255,.86);margin-top:8px;max-width:52ch;}

.n100 .n100-raster{display:grid;gap:18px;}
.n100 .n100-r4{grid-template-columns:repeat(4,1fr);}
.n100 .n100-r3{grid-template-columns:repeat(3,1fr);}
@media (max-width:980px){.n100 .n100-r4,.n100 .n100-r3{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.n100 .n100-r4,.n100 .n100-r3{grid-template-columns:1fr;}}
.n100 .n100-kachel{background:#fff;border:1px solid var(--linie);border-radius:3px;padding:26px 24px 24px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;transition:border-color .15s ease,transform .15s ease;}
.n100 .n100-kachel:hover{border-color:var(--blau);transform:translateY(-2px);}
.n100 .n100-ic{width:46px;height:46px;color:var(--blau);}
.n100 .n100-ic svg{width:100%;height:100%;fill:currentColor;display:block;}
.n100 .n100-kachel h3{font-size:19px;font-weight:800;margin-top:4px;}
.n100 .n100-kachel p{font-size:16.5px;color:var(--grau);line-height:1.5;}
.n100 .n100-mehr{margin-top:auto;padding-top:14px;font-weight:800;font-size:15.5px;color:var(--blau);display:inline-flex;align-items:center;gap:9px;}
.n100 .n100-kachel:hover .n100-pf,.n100 .n100-teaser:hover .n100-pf{transform:translateX(4px);}
.n100 .n100-hinweis{margin-top:24px;font-size:15.5px;color:var(--grau);}
.n100 .n100-hinweis a{color:var(--blau);font-weight:800;}

.n100 .n100-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center;}
@media (max-width:900px){.n100 .n100-split{grid-template-columns:1fr;}}
.n100 .n100-split img{border-radius:3px;width:100%;height:auto;max-height:420px;object-fit:cover;}
.n100 .n100-haken{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px;}
.n100 .n100-haken li{position:relative;padding-left:22px;color:var(--grau);line-height:1.5;text-align:left;}
.n100 .n100-haken li:before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;background:var(--gelb);border-radius:1px;}
.n100 .n100-haken li b{color:var(--tinte);font-weight:800;}

.n100 .n100-zahlen{background:var(--dunkel);color:#fff;}
.n100 .n100-zahlen .n100-spur{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding-top:clamp(40px,5vw,66px);padding-bottom:clamp(40px,5vw,66px);}
@media (max-width:760px){.n100 .n100-zahlen .n100-spur{grid-template-columns:repeat(2,1fr);}}
.n100 .n100-zahl{border-left:3px solid var(--gelb);padding-left:18px;}
.n100 .n100-zahl b{display:block;font-size:clamp(34px,4.4vw,54px);font-weight:800;line-height:1;color:#fff;}
.n100 .n100-zahl span{display:block;margin-top:8px;font-size:15px;color:rgba(255,255,255,.74);font-weight:600;}

.n100 .n100-film{margin-top:32px;max-width:900px;}
.n100 .n100-film-box{position:relative;padding-top:56.25%;background:var(--dunkel) url(/fileadmin/user_upload/Kfz_Service_Kacheln_Ausgeblendet/2016_Werkstatt.jpg) no-repeat center/cover;border-radius:3px;overflow:hidden;cursor:pointer;}
.n100 .n100-film-box:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(0,58,99,.62);}
.n100 .n100-film-box iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;}
.n100 .n100-play{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);width:0;height:0;border-left:30px solid var(--gelb);border-top:19px solid transparent;border-bottom:19px solid transparent;z-index:2;}
.n100 .n100-filmtext{position:absolute;top:62%;left:0;right:0;text-align:center;color:#fff;font-weight:800;font-size:18px;z-index:2;}
.n100 .n100-film-box p{position:absolute;left:0;right:0;bottom:16px;text-align:center;color:rgba(255,255,255,.8);font-size:13.5px;padding:0 18px;z-index:2;}

.n100 .n100-jubikante{position:relative;}
.n100 .n100-jubikante:before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--gelb);}
.n100 .n100-tl{list-style:none;margin:38px 0 0;padding:0 0 0 26px;border-left:2px solid var(--linie);display:grid;gap:30px;}
.n100 .n100-tl li{position:relative;}
.n100 .n100-tl li:before{content:"";position:absolute;left:-33px;top:8px;width:12px;height:12px;background:var(--gelb);border-radius:50%;box-shadow:0 0 0 3px #fff;}
.n100 .n100-grau .n100-tl li:before{box-shadow:0 0 0 3px var(--nebel);}
.n100 .n100-jahr{display:block;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--blau);margin-bottom:6px;}
.n100 .n100-tl h3{font-size:20px;font-weight:800;margin-bottom:6px;}
.n100 .n100-tl p{color:var(--grau);font-size:16.5px;line-height:1.55;}

.n100 .n100-teaser{background:#fff;border:1px solid var(--linie);border-radius:3px;overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:border-color .15s ease,transform .15s ease;}
.n100 .n100-teaser:hover{border-color:var(--blau);transform:translateY(-2px);}
.n100 .n100-teaser img{width:100%;height:190px;object-fit:cover;}
.n100 .n100-teaser .n100-txt{padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1;}
.n100 .n100-teaser h3{font-size:19px;font-weight:800;}
.n100 .n100-teaser p{font-size:16.5px;color:var(--grau);line-height:1.5;}

.n100 .n100-standorte{background:var(--nebel);border-top:1px solid var(--linie);padding:clamp(44px,5.5vw,72px) 0 clamp(30px,4vw,48px);}
.n100 .n100-standorte h2{font-size:clamp(28px,3.6vw,44px);font-weight:800;}
.n100 .n100-standorte .n100-lead{margin-top:16px;}
.n100 .n100-standorte .n100-aktionen{justify-content:flex-start;margin-top:26px;}
.n100 ul.n100-haken{display:block;text-align:left;}
.n100 ul.n100-haken li{display:block!important;width:auto!important;max-width:none!important;margin:0 0 12px!important;padding:0 0 0 22px!important;text-align:left!important;position:relative!important;left:auto!important;}
.n100 ul.n100-haken li:before{content:""!important;position:absolute!important;transform:none!important;left:0!important;top:9px!important;width:9px!important;height:9px!important;background:var(--gelb)!important;border-radius:1px!important;margin:0!important;}
.n100 ul.n100-tl{display:block;text-align:left;}
.n100 ul.n100-tl li{display:block!important;width:auto!important;max-width:none!important;margin:0 0 30px!important;padding:0!important;text-align:left!important;position:relative!important;}
.n100 ul.n100-tl li:before{content:""!important;position:absolute!important;transform:none!important;left:-33px!important;top:8px!important;width:12px!important;height:12px!important;background:var(--gelb)!important;border-radius:50%!important;box-shadow:0 0 0 3px var(--nebel)!important;margin:0!important;}

/* ---------- Bausteine für Unterseiten ---------- */
.n100 .n100-kopf{background:var(--blau);color:#fff;position:relative;overflow:hidden;}
.n100 .n100-kopf-bild{position:absolute;top:0;right:0;bottom:0;left:0;}
.n100 .n100-kopf-bild img{width:100%;height:100%;object-fit:cover;}
.n100 .n100-kopf-schleier{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,rgba(0,100,175,.84) 0%,rgba(0,69,122,.92) 100%);}
.n100 .n100-kopf .n100-spur{position:relative;z-index:2;padding-top:clamp(44px,6vw,80px);padding-bottom:clamp(44px,6vw,80px);}
.n100 .n100-kopf h1{font-size:clamp(30px,4.6vw,54px);font-weight:800;color:#fff;max-width:20ch;}
.n100 .n100-kopf p{color:rgba(255,255,255,.9);margin-top:18px;max-width:62ch;font-size:clamp(17px,1.5vw,20px);line-height:1.55;}
.n100 .n100-kopf .n100-kicker{color:rgba(255,255,255,.8);}
.n100 .n100-kopf .n100-aktionen{justify-content:flex-start;margin-top:28px;}
.n100 .n100-kopf-fuss{position:relative;height:clamp(18px,2.4vw,32px);background:var(--gelb);-webkit-clip-path:polygon(0 100%,100% 0,100% 100%);clip-path:polygon(0 100%,100% 0,100% 100%);}

.n100 .n100-leistungen{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));border-top:1px solid var(--linie);border-left:1px solid var(--linie);border-radius:3px;overflow:hidden;margin-top:34px;}
.n100 .n100-leistung{background:#fff;padding:22px 20px;display:flex;align-items:flex-start;gap:14px;text-decoration:none;color:inherit;border-right:1px solid var(--linie);border-bottom:1px solid var(--linie);}
.n100 a.n100-leistung:hover{background:var(--hellblau);}
.n100 .n100-leistung .n100-ic{width:34px;height:34px;flex:none;}
.n100 .n100-leistung b{display:block;font-size:17px;font-weight:800;margin-bottom:4px;}
.n100 .n100-leistung span{font-size:16px;color:var(--grau);line-height:1.45;display:block;}
.n100 .n100-grau .n100-leistung{background:#fff;}

.n100 .n100-schritte{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linie);border:1px solid var(--linie);margin-top:34px;}
@media (max-width:860px){.n100 .n100-schritte{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.n100 .n100-schritte{grid-template-columns:1fr;}}
.n100 .n100-schritt{background:#fff;padding:24px 20px;}
.n100 .n100-schritt-nr{display:block;font-size:13px;letter-spacing:.14em;color:var(--blau);font-weight:800;margin-bottom:10px;}
.n100 .n100-schritt h3{font-size:18px;font-weight:800;margin-bottom:8px;}
.n100 .n100-schritt p{font-size:16.5px;color:var(--grau);line-height:1.5;}

.n100 .n100-split-links{grid-template-columns:.95fr 1.05fr;}
.n100 .n100-split-links .n100-bild{order:-1;}
@media (max-width:900px){.n100 .n100-split-links .n100-bild{order:0;}}

.n100 .n100-info{background:var(--hellblau);border-left:4px solid var(--blau);padding:20px 22px;border-radius:2px;margin-top:26px;}
.n100 .n100-info p{font-size:16.5px;color:var(--tinte);}
.n100 .n100-info p + p{margin-top:8px;}

.n100 .n100-krumen{font-size:14.5px;color:rgba(255,255,255,.85);margin-bottom:14px;}
.n100 .n100-krumen a{color:rgba(255,255,255,.85);text-decoration:none;}
.n100 .n100-krumen a:hover{color:var(--gelb);}
.n100 .n100-krumen span{margin:0 8px;opacity:.6;}

.n100 .n100-liste{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px;}
.n100 .n100-liste li{position:relative;padding-left:22px;color:var(--grau);line-height:1.5;text-align:left;}
.n100 .n100-liste li:before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;background:var(--blau);border-radius:50%;}
.n100 .n100-liste li b{color:var(--tinte);font-weight:800;}

/* CI-Icons als Maske, damit sie die Markenfarbe annehmen */
.n100 .n100-icon{width:46px;height:46px;flex:none;background:var(--blau);
  -webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;}
.n100 .n100-leistung .n100-icon{width:34px;height:34px;}
.n100 .n100-kachel .n100-icon{margin-bottom:4px;}