@font-face{font-family:"Manrope";font-style:normal;font-display:swap;font-weight:200 800;src:url("https://cdn.jsdelivr.net/fontsource/fonts/manrope:vf@5.3.0/latin-wght-normal.woff2") format("woff2-variations")}
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:100 900;src:url("https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@5.3.0/latin-wght-normal.woff2") format("woff2-variations")}
:root{
  --white:#FFFFFF;
  --anthracite:#3B3A3A;
  --darkgray:#575757;
  --red:#C8102E;
  --lightgray:#D9D9D9;
  --midgray:#AEAEAE;
  --max:1240px;
  --font-heading:"Manrope",Arial,sans-serif;
  --font-body:"Inter",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);font-size:18px;color:var(--anthracite);background:var(--white);line-height:1.7;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.icon{width:1em;height:1em;display:inline-block;vertical-align:-.125em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.header-meta{display:inline-flex;align-items:center;gap:6px}
.header-meta .icon{width:14px;height:14px}
.service-copy a,.text-link{display:inline-flex;align-items:center;gap:8px}
.service-copy a .icon,.text-link .icon{transition:transform .2s ease}
.service-copy a:hover .icon,.service-copy a:focus-visible .icon,.text-link:hover .icon,.text-link:focus-visible .icon{transform:translateX(3px)}
.container{width:min(calc(100% - 44px),var(--max));margin:auto}
.narrow{max-width:980px}

.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.98);border-bottom:1px solid var(--lightgray)}
.header-top{background:var(--anthracite);color:var(--white);font-size:14px}
.header-top-inner{min-height:38px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.header-top-inner>div{display:flex;align-items:center;gap:14px}
.header-top a{font-weight:700;color:var(--white)}
.nav-wrap{min-height:88px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.brand img{width:62px;height:62px;object-fit:contain}
.main-nav{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:18px;flex-wrap:wrap;font-size:16px;font-weight:700;color:var(--anthracite)}
.main-nav a{white-space:nowrap}
.main-nav a:hover,.main-nav a:focus-visible{color:var(--red);text-decoration:underline;text-underline-offset:5px}
.menu-toggle{display:none;margin-left:auto;border:0;background:transparent;width:44px;height:44px;padding:9px;cursor:pointer;color:var(--anthracite)}
.menu-toggle .icon{width:26px;height:26px}
.menu-toggle .close-icon{display:none}
.menu-toggle[aria-expanded="true"] .menu-icon{display:none}
.menu-toggle[aria-expanded="true"] .close-icon{display:block}

.hero{min-height:720px;position:relative;display:flex;align-items:flex-end;background:url('../images/Startseite Hero/DSC03161_opt_2000.jpg') center/cover no-repeat;color:var(--white)}
.hero-overlay{position:absolute;inset:0;background:rgba(59,58,58,.54)}
.hero-content{position:relative;padding:125px 0 78px}
.hero h1{font:800 clamp(46px,6.2vw,82px)/1.05 var(--font-heading);letter-spacing:-.04em;margin:0 0 14px;max-width:900px;color:var(--white)}
.hero h1 span{display:block}
.hero h2{font:600 clamp(23px,2.8vw,34px)/1.3 var(--font-heading);margin:0 0 30px;max-width:900px;color:var(--white)}
.hero p{margin:5px 0;font-size:18px;color:var(--white)}
.hero-phone-btn{display:inline-flex;align-items:center;justify-content:center;gap:11px;min-height:56px;font-size:18px;margin-top:4px;padding:0 22px;border:2px solid var(--white);background:var(--red);color:var(--white);font-weight:800;line-height:1;transition:opacity .2s ease,transform .2s ease}
.hero-phone-btn .icon{width:20px;height:20px}
.hero-phone-btn:hover,.hero-phone-btn:focus-visible{color:var(--white);opacity:.92;transform:translateY(-1px)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;font-size:17px;padding:0 24px;margin-top:24px;border:1px solid var(--red);background:var(--red);color:var(--white);font-weight:800;cursor:pointer;transition:opacity .2s ease}
.btn:hover,.btn:focus-visible{background:var(--red);border-color:var(--red);color:var(--white);opacity:.9}
.btn-dark{background:var(--red);border-color:var(--red);color:var(--white)}

.section{padding:105px 0}
.section-title,.section-heading h2,.detailed-services h2{font:800 clamp(36px,4.6vw,60px)/1.1 var(--font-heading);letter-spacing:-.035em;margin:0;color:var(--anthracite)}
.section-heading{margin-bottom:48px}
.section-heading p{font:600 clamp(20px,2vw,25px)/1.45 var(--font-heading);margin:12px 0 0;color:var(--darkgray)}

.info-section{background:var(--white);border-bottom:1px solid var(--lightgray)}
.info-section .section-title{margin-bottom:48px}
.info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.info-grid article{padding:10px 28px;border-left:1px solid var(--lightgray);scroll-margin-top:145px}
.info-grid article:first-child{border-left:0;padding-left:0}
.info-grid h3{font:800 22px/1.3 var(--font-heading);margin:0 0 14px;color:var(--anthracite)}
.info-grid p{margin:6px 0;font-size:17px;color:var(--darkgray)}
.info-grid a{color:var(--anthracite)}
.info-grid a:hover,.info-grid a:focus-visible{color:var(--red)}
.info-grid .address-link span{display:block}
.info-contact .email-link{white-space:nowrap}


.services{background:var(--white)}
.service-list{display:grid;gap:28px}
.service-row{display:grid;grid-template-columns:1fr 1fr;min-height:420px;background:var(--white);border:1px solid var(--lightgray);scroll-margin-top:145px}
.service-row.reverse .service-copy{order:2}
.service-row.reverse img{order:1}
.service-row img{width:100%;height:100%;min-height:420px;object-fit:cover}
.service-copy{display:flex;flex-direction:column;justify-content:center;padding:56px}
.service-copy h3{font:800 clamp(30px,3.2vw,44px)/1.12 var(--font-heading);margin:0 0 18px;color:var(--anthracite)}
.service-copy p{color:var(--darkgray);margin:0 0 22px;font-size:18px}
.service-copy a,.text-link{font-weight:800;color:var(--anthracite)}
.service-copy a:hover,.service-copy a:focus-visible,.text-link:hover,.text-link:focus-visible{color:var(--red)}

.about{background:var(--lightgray)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:76px;align-items:center}
.about-grid>img{width:100%;height:660px;object-fit:cover}
.about h2{font:800 clamp(34px,3.8vw,54px)/1.12 var(--font-heading);letter-spacing:-.03em;margin:0 0 24px;color:var(--anthracite)}
.about h3{font:800 22px/1.35 var(--font-heading);margin:0 0 18px;color:var(--anthracite)}
.about h4{font:800 26px/1.35 var(--font-heading);margin:4px 0;color:var(--anthracite)}
.about p{color:var(--darkgray);margin:18px 0;font-size:18px}

.detailed-services{background:var(--white)}
.detailed-services h2{margin-bottom:32px}
.detailed-services p{font-size:18px;color:var(--darkgray);margin:0 0 22px}
.detailed-services .text-link{display:inline-block;margin-top:8px}

.gallery{background:var(--white);border-top:1px solid var(--lightgray);border-bottom:1px solid var(--lightgray)}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gallery-item{border:0;background:var(--lightgray);padding:0;aspect-ratio:4/3;overflow:hidden;cursor:pointer}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.gallery-item:hover img{transform:scale(1.035)}


.contact-visual{position:relative;min-height:620px;color:var(--white)}
.contact-image{position:absolute;inset:0;background:url('../images/Startseite Hero/Werkstatt_Luftaufnahme_Termin.jpg') center/cover no-repeat}
.contact-image:after{content:"";position:absolute;inset:0;background:rgba(59,58,58,.52)}
.contact-overlay-content{position:relative;min-height:620px;display:flex;align-items:center}
.contact-box{background:rgba(59,58,58,.94);padding:48px;max-width:510px}
.contact-box h2{font:800 clamp(36px,4.6vw,60px)/1.1 var(--font-heading);margin:0 0 14px;color:var(--white)}
.contact-box h3{font:800 22px/1.35 var(--font-heading);margin:30px 0 5px;color:var(--white)}
.contact-box a{display:block;font:700 22px/1.5 var(--font-body);color:var(--white)}
.contact-box a:hover,.contact-box a:focus-visible{color:var(--red)}

.form-section{background:var(--white);border-top:1px solid var(--lightgray)}
.form-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:90px;align-items:start}
.form-heading{margin:0}
.form-intro{margin-top:18px;font-size:16px;line-height:1.65;color:var(--darkgray);max-width:44ch}
.contact-form{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;background:var(--white);padding:38px;border:1px solid var(--lightgray)}
.contact-form-group{min-width:0;margin:0;padding:0 0 26px;border:0;border-bottom:1px solid var(--lightgray)}
.contact-form-group legend{width:100%;margin:0 0 18px;padding:0;font:800 20px/1.35 var(--font-heading);color:var(--anthracite)}
.contact-form-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.form-field{display:grid;min-width:0;gap:8px;font-size:16px;font-weight:700;color:var(--anthracite)}
.form-field--full,.form-field--message{grid-column:1/-1}
.form-label{display:block}.form-optional{font-size:14px;font-weight:500;color:var(--darkgray)}
.contact-form input,.contact-form textarea,.contact-form select{width:100%;min-height:52px;border:1px solid var(--midgray);border-radius:0;background:var(--white);color:var(--anthracite);padding:14px;font:inherit;outline:none}
.contact-form textarea{min-height:170px;resize:vertical;line-height:1.55}
.contact-form select{appearance:auto}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{border-color:var(--anthracite);box-shadow:0 0 0 2px rgba(59,58,58,.08)}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#777;opacity:1}
.privacy-consent{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;font-size:15px;line-height:1.6;font-weight:500;color:var(--darkgray)}
.privacy-consent input{width:20px;height:20px;min-height:0;margin:3px 0 0;accent-color:var(--red)}
.privacy-consent a{font-weight:800;color:var(--anthracite);text-decoration:none}
.privacy-consent a:hover,.privacy-consent a:focus-visible{color:var(--red);text-decoration:none}
.form-note{margin:-8px 0 0;font-size:14px;line-height:1.55;color:var(--darkgray)}
.contact-form .btn{justify-self:start;margin-top:0}
.hp{display:none!important}

.site-footer{background:var(--anthracite);color:var(--white);padding:74px 0}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:56px}
.footer-grid>div{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.footer-grid h3{color:var(--white);font:800 20px/1.35 var(--font-heading);margin:0 0 14px}
.footer-grid p{margin:0;font-size:16px;color:var(--white)}
.footer-grid a{font-size:16px;color:var(--white)}
.footer-grid a:hover,.footer-grid a:focus-visible{color:var(--red)}
.footer-logo-wrap{padding-top:56px}
.footer-brand{color:var(--white)}
.footer-brand img{width:72px;height:72px}

.lightbox{position:fixed;inset:0;z-index:100;background:rgba(59,58,58,.96);display:none;place-items:center;padding:54px 112px}
.lightbox.show{display:grid}
.lightbox img{max-width:min(1200px,calc(100vw - 224px));max-height:84vh;object-fit:contain}
.lightbox-close{position:absolute;right:28px;top:18px;border:0;background:transparent;color:var(--white);width:48px;height:48px;padding:10px;cursor:pointer}
.lightbox-close .icon{width:28px;height:28px}
.lightbox-close:hover,.lightbox-close:focus-visible{color:var(--red)}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;display:grid;place-items:center;width:68px;height:96px;border:1px solid rgba(255,255,255,.72);background:rgba(20,20,20,.5);color:var(--white);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.lightbox-prev{left:24px}
.lightbox-next{right:24px}
.lightbox-nav .icon{width:34px;height:34px}
.lightbox-nav:hover,.lightbox-nav:focus-visible{background:var(--red);border-color:var(--white);color:var(--white);outline:none}
body.lightbox-open{overflow:hidden}

@media(max-width:1100px){
  .main-nav{position:fixed;top:126px;left:0;right:0;display:none;max-height:calc(100vh - 126px);overflow:auto;background:var(--white);padding:28px 24px 36px;flex-direction:column;align-items:flex-start;font-size:18px;border-bottom:1px solid var(--lightgray)}
  .main-nav.open{display:flex}
  .menu-toggle{display:block}
  .info-grid{grid-template-columns:1fr 1fr;gap:28px}
  .info-grid article{border:0;padding:0}
  .gallery-grid{grid-template-columns:repeat(3,1fr)}
  .form-grid{grid-template-columns:1fr;gap:38px}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .container{width:min(calc(100% - 28px),var(--max))}
  .header-top{display:none}
  .nav-wrap{min-height:76px}
  .brand img{width:52px;height:52px}
  .main-nav{top:76px;max-height:calc(100vh - 76px)}
  .hero{min-height:620px}
  .hero-content{padding:100px 0 48px}
  .section{padding:76px 0}
  .info-grid{grid-template-columns:1fr}
  .service-row,.service-row.reverse{grid-template-columns:1fr}
  .service-row.reverse .service-copy,.service-row.reverse img{order:initial}
  .service-row img{min-height:0;height:290px}
  .service-copy{padding:32px}
  .about-grid{grid-template-columns:1fr;gap:38px}
  .about-grid>img{height:420px}
  .gallery-grid{grid-template-columns:1fr 1fr}
  .contact-visual,.contact-overlay-content{min-height:520px}
  .contact-box{padding:32px}
  .contact-form{grid-template-columns:1fr;padding:26px}
  .contact-form-fields{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .lightbox{padding:20px 74px}
  .lightbox img{max-width:calc(100vw - 148px);max-height:82vh}
  .lightbox-nav{width:52px;height:76px}
  .lightbox-prev{left:10px}
  .lightbox-next{right:10px}
  .lightbox-nav .icon{width:28px;height:28px}
}
@media(max-width:440px){
  .gallery-grid{grid-template-columns:1fr}
  .hero h1{font-size:44px}
  .contact-box a{font-size:19px}
}

/* Typografie-System */
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading)}
button,input,textarea,select,nav,.main-nav,.header-top,.site-footer{font-family:var(--font-body)}

/* Clickable address links open Google Maps directions */
.address-link{text-decoration:none;text-underline-offset:3px}
.address-link:hover,.address-link:focus-visible{text-decoration:underline}

/* Link-Hover: keine Unterstreichungen außerhalb der Hauptnavigation */
a:hover,a:focus-visible{text-decoration:none}
.main-nav a:hover,.main-nav a:focus-visible{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px}
.main-nav a.active{color:var(--red);text-decoration:none}
.address-link:hover,.address-link:focus-visible{text-decoration:none}

/* Unterseiten */
.subpage-hero{position:relative;min-height:640px;display:flex;align-items:flex-end;background-position:center;background-size:cover;color:var(--white)}
.subpage-hero--services{background-image:url('../images/Leistungen/DSC02612_opt_2000.jpg')}
.subpage-hero--about{background-image:url('../images/ueber-uns/DSC02922_opt_2000.avif');background-position:center 42%}
.subpage-hero--route{background-image:url('../images/Luftbild_01.avif')}
.subpage-hero--contact{background-image:url('../images/Galerie/DSC02953_opt_2000.jpg')}
.subpage-hero--legal{background-image:url('../images/Luftbild_01.avif')}
.subpage-hero-overlay{position:absolute;inset:0;background:rgba(59,58,58,.62)}
.subpage-hero-content{position:relative;padding:92px 0 58px}
.subpage-hero h1{font:800 clamp(44px,6vw,76px)/1.05 var(--font-heading);letter-spacing:-.04em;margin:0;color:var(--white)}
.subpage-hero-content>p:not(.eyebrow){font-size:21px;line-height:1.5;max-width:760px;margin:16px 0 0;color:var(--white)}
.eyebrow{margin:0 0 10px;font-size:15px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.subpage-hero .eyebrow{color:var(--white)}
.subpage-intro{padding-bottom:48px}
.subpage-intro h2,.content-split h2,.route-grid h2,.contact-cards h2,.legal-page h2{font:800 clamp(32px,4vw,50px)/1.12 var(--font-heading);letter-spacing:-.03em;margin:0 0 20px}
.subpage-intro p,.content-split p,.route-grid p,.legal-page p,.legal-page li{font-size:18px;color:var(--darkgray)}

.service-detail-list{padding-top:40px}
.service-detail-list>.container{display:grid;gap:34px}
.service-detail{display:grid;grid-template-columns:1.05fr .95fr;border:1px solid var(--lightgray);background:var(--white);scroll-margin-top:145px}
.service-detail.reverse>div{order:2}
.service-detail.reverse>img{order:1}
.service-detail>div{padding:52px}
.service-detail>img{width:100%;height:100%;min-height:520px;object-fit:cover}
.service-detail h2{font:800 clamp(32px,3.6vw,48px)/1.1 var(--font-heading);margin:0 0 10px}
.service-detail h3{font:700 21px/1.45 var(--font-heading);margin:0 0 18px;color:var(--darkgray)}
.service-detail p,.service-detail li{font-size:18px;color:var(--darkgray)}
.service-detail ul{padding-left:22px;margin:20px 0 0}
.service-detail li{margin:8px 0}
.service-detail .btn{margin-top:24px}

.content-split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.content-split>img{width:100%;height:620px;object-fit:cover}
.team-section{background:var(--lightgray)}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.team-grid article{background:var(--white);padding-bottom:26px}
.team-image{aspect-ratio:596/618;overflow:hidden;background:var(--lightgray)}
.team-image img{width:100%;height:100%;object-fit:cover;object-position:center center}
.team-grid h3{font:800 26px/1.2 var(--font-heading);margin:24px 24px 6px}
.team-grid p{font-size:17px;margin:0 24px;color:var(--darkgray)}

.route-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}
.route-grid>img{width:100%;height:560px;object-fit:cover}
.route-grid h2:not(:first-child){font-size:30px;margin-top:38px}
.route-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:30px}
.route-actions .btn{margin-top:0;gap:9px}
.route-actions .text-link{font-size:18px}

.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.contact-cards article{border:1px solid var(--lightgray);padding:34px;min-width:0}
.contact-cards h2{font-size:28px;margin-bottom:18px}
.contact-cards a{display:flex;align-items:center;gap:12px;font-weight:700;color:var(--anthracite);font-size:18px;min-width:0}
.contact-cards a:hover,.contact-cards a:focus-visible{color:var(--red)}
.contact-cards .email-link{white-space:nowrap;font-size:16px}

.legal-layout{display:grid;grid-template-columns:1fr .8fr;gap:70px;align-items:start}
.legal-layout>img{width:100%;height:520px;object-fit:cover;position:sticky;top:150px}
.legal-page h2{font-size:38px;margin-top:0}
.legal-page h3{font:800 23px/1.35 var(--font-heading);margin:34px 0 10px}
.legal-page a{font-weight:700}
.legal-page a:hover,.legal-page a:focus-visible{color:var(--red)}
.legal-meta{margin-top:36px;font-weight:700}
.legal-copy h2{font-size:30px;margin-top:42px}
.legal-copy h2:first-of-type{margin-top:0}
.legal-copy ul{margin:12px 0 24px;padding-left:24px}
.legal-copy li+li{margin-top:6px}
.legal-note{padding:24px 28px;border-left:4px solid var(--red);background:#f5f5f5;margin-bottom:44px;font-size:16px;line-height:1.6}

@media(max-width:980px){
  .service-detail,.service-detail.reverse,.content-split,.route-grid,.legal-layout{grid-template-columns:1fr}
  .service-detail.reverse>div,.service-detail.reverse>img{order:initial}
  .service-detail>img{min-height:0;height:400px}
  .content-split>img,.route-grid>img,.legal-layout>img{height:430px;position:static}
  .team-grid,.contact-cards{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .subpage-hero{min-height:500px}
  .subpage-hero-content{padding:72px 0 42px}
  .subpage-hero-content>p:not(.eyebrow){font-size:18px}
  .service-detail>div{padding:30px}
  .service-detail>img{height:300px}
  .team-grid,.contact-cards{grid-template-columns:1fr}
  .contact-cards .email-link{white-space:normal;font-size:17px}
}
.team-grid--text article{padding:30px;border-top:4px solid var(--red)}
.team-grid--text h3{margin:0 0 8px}
.team-grid--text p{margin:0}

/* Leistungs-Untermenü */
.main-nav .nav-dropdown{position:relative;display:flex;align-items:center}
.main-nav .nav-dropdown>.nav-link-button{display:inline-flex;align-items:center}
.submenu{position:absolute;top:calc(100% + 22px);left:-24px;z-index:90;min-width:330px;padding:28px 34px;background:var(--white);border:1px solid rgba(59,58,58,.12);box-shadow:0 18px 45px rgba(0,0,0,.16);display:grid;gap:11px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease,visibility .18s ease}
.submenu:before{content:"";position:absolute;top:-11px;left:24px;width:20px;height:20px;background:var(--white);border-left:1px solid rgba(59,58,58,.12);border-top:1px solid rgba(59,58,58,.12);transform:rotate(45deg)}
.submenu a{position:relative;z-index:1;font:800 16px/1.45 var(--font-heading);letter-spacing:.07em;text-transform:uppercase;color:var(--anthracite);white-space:nowrap}
.submenu a:hover,.submenu a:focus-visible{color:var(--red);text-decoration:none}
.nav-dropdown.is-open .submenu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.nav-link-button{appearance:none;border:0;background:transparent;padding:0;font:inherit;font-weight:700;color:inherit;cursor:pointer;white-space:nowrap;text-decoration:none}
.nav-link-button:hover,.nav-link-button:focus-visible,.nav-link-button[aria-expanded="true"]{color:var(--red);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px}
.nav-link-button.active{color:var(--red)}
.submenu{pointer-events:none}
.submenu-overview{margin-top:10px;padding-top:16px;border-top:1px solid var(--lightgray)}

@media(max-width:1100px){
  .main-nav .nav-dropdown{display:block;width:100%}
  .main-nav .nav-dropdown>.nav-link-button{width:100%;font-size:18px;text-align:left}
  .submenu{position:static;min-width:0;width:100%;padding:12px 0 4px 18px;border:0;border-left:2px solid var(--lightgray);box-shadow:none;opacity:1;visibility:visible;transform:none;display:none;gap:10px;background:transparent;margin-top:9px;pointer-events:auto}
  .nav-dropdown.is-open .submenu{display:grid}
  .submenu:before{display:none}
  .submenu a{font-size:14px;white-space:normal;letter-spacing:.04em}
  .submenu-overview{margin-top:6px;padding-top:12px}
}

/* Öffnungszeiten-Dialog */
.hours-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}
.hours-modal.show{opacity:1;visibility:visible}
.hours-modal-backdrop{position:absolute;inset:0;background:rgba(34,34,34,.72);backdrop-filter:blur(3px)}
.hours-dialog{position:relative;z-index:1;width:min(920px,100%);max-height:min(820px,calc(100vh - 48px));overflow:auto;background:var(--white);padding:46px 48px 44px;box-shadow:0 25px 80px rgba(0,0,0,.28);border-radius:24px}
.hours-close{position:absolute;top:22px;right:22px;width:48px;height:48px;border:0;border-radius:50%;background:var(--anthracite);color:var(--white);display:grid;place-items:center;cursor:pointer}
.hours-close:hover,.hours-close:focus-visible{background:var(--red)}
.hours-close .icon{width:24px;height:24px}
.hours-status{display:flex;align-items:center;gap:10px;padding-right:64px;margin-bottom:12px;font-size:17px;letter-spacing:.04em;text-transform:uppercase;color:var(--darkgray)}
.status-dot{width:12px;height:12px;border-radius:50%;background:var(--midgray);box-shadow:0 0 0 5px rgba(174,174,174,.22)}
.hours-status.is-open{color:var(--anthracite)}.hours-status.is-open .status-dot{background:var(--red);box-shadow:0 0 0 5px rgba(200,16,46,.12)}
.hours-status.is-closed{color:var(--red)}.hours-status.is-closed .status-dot{background:var(--red);box-shadow:0 0 0 5px rgba(200,16,46,.12)}
.hours-dialog h2{font:800 clamp(34px,4vw,50px)/1.1 var(--font-heading);margin:0 0 12px;color:var(--anthracite)}
.hours-status-copy{font-size:20px;line-height:1.55;margin:0;color:var(--darkgray);max-width:760px}
.hours-countdown{font:800 20px/1.4 var(--font-heading);margin:16px 0 30px;color:var(--anthracite)}
.hours-modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hours-modal-grid section{border:1px solid var(--lightgray);padding:24px 26px;min-width:0}
.hours-modal-grid h3{font:800 21px/1.3 var(--font-heading);margin:0 0 14px}
.hours-modal-grid p{display:grid;grid-template-columns:90px 1fr;gap:14px;margin:7px 0;font-size:17px;color:var(--darkgray)}
.hours-modal-grid p strong{color:var(--anthracite)}
.hours-modal-grid small{display:block;margin-top:12px;font-size:15px;color:var(--darkgray)}
.hours-address,.hours-phone{display:flex;align-items:flex-start;gap:11px;font-size:18px;font-weight:700;color:var(--anthracite)}
.hours-address:hover,.hours-address:focus-visible,.hours-phone:hover,.hours-phone:focus-visible{color:var(--red)}
.hours-address .icon,.hours-phone .icon{width:21px;height:21px;margin-top:4px}
body.hours-open{overflow:hidden}

/* Eigene Leistungs-Unterseiten */
.service-page-hero{background-position:center;background-size:cover}
.service-page-hero--unfall{background-image:url('../images/Leistungen/DSC02544_opt_2000.jpg')}
.service-page-hero--autoglas{background-image:url('../images/Leistungen/DSC02585_opt_2000.jpg')}
.service-page-hero--reparatur{background-image:url('../images/Leistungen/DSC02736_opt_2000.jpg')}
.service-page-hero--wartung{background-image:url('../images/Galerie/DSC02692_opt_2000.jpg')}
.service-page-hero--zusatz{background-image:url('../images/Leistungen/DSC02803_opt_2000.jpg')}
.service-page-hero--ersatzwagen{background-image:url('../images/Leistungen/Ersatzwagen-Service/DSC03075_opt_2000.jpg')}
.service-page-section{background:var(--white)}
.service-page-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:68px;align-items:start}
.service-page-copy h2{font:800 clamp(34px,4vw,52px)/1.12 var(--font-heading);letter-spacing:-.03em;margin:0 0 22px}
.service-page-copy>p,.service-page-copy li{font-size:18px;color:var(--darkgray)}
.service-page-copy>p{margin:0 0 20px}
.service-page-copy>h3{font:800 25px/1.3 var(--font-heading);margin:38px 0 14px}
.service-page-copy ul{margin:0;padding-left:22px}
.service-page-copy li{margin:9px 0}
.service-page-note{margin-top:34px;padding:26px 28px;background:#f4f4f4;border-left:4px solid var(--red)}
.service-page-note h3{font:800 23px/1.3 var(--font-heading);margin:0 0 8px}
.service-page-note p{margin:0;color:var(--darkgray)}
.service-page-actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:30px}
.service-page-actions .btn{margin-top:0}
.service-page-image{margin:0;position:sticky;top:150px}
.service-page-image img{width:100%;height:620px;object-fit:cover}
/* Unfallreparatur: zwei Inhaltsbilder als gemeinsame, ruhige Bildgruppe */
.service-page-media--stack{position:sticky;top:150px;display:grid;gap:24px;min-width:0}
.service-page-media--stack .service-page-image{position:static}
.service-page-media--stack .service-page-image:first-child img{height:374px}
.service-page-media--stack .service-page-image--wide img{height:auto;aspect-ratio:2000/893;object-fit:cover}

.service-detail-link{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-weight:800;color:var(--anthracite)}
.service-detail-link:hover,.service-detail-link:focus-visible{color:var(--red)}

@media(max-width:980px){
  .service-page-grid{grid-template-columns:1fr;gap:38px}
  .service-page-image{position:static}
  .service-page-image img{height:430px}
}
@media(max-width:760px){
  .hours-dialog{padding:36px 22px 26px;border-radius:18px}
  .hours-close{top:16px;right:16px;width:44px;height:44px}
  .hours-status{font-size:14px;padding-right:54px}
  .hours-status-copy{font-size:18px}
  .hours-countdown{font-size:18px}
  .hours-modal-grid{grid-template-columns:1fr}
  .hours-modal-grid section{padding:20px}
  .service-page-image img{height:320px}
}

/* Hero, Öffnungszeiten und CTA-Feinschliff */
.hero{
  min-height:calc(100svh - var(--site-header-height,126px));
  min-height:calc(100dvh - var(--site-header-height,126px));
  position:relative;
}
.hero-content{padding-bottom:112px}
.hero-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hero-action-btn{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  min-height:56px;
  padding:0 22px;
  border:1px solid rgba(255,255,255,.92);
  border-radius:0;
  background:var(--red);
  color:var(--white);
  font:800 18px/1 var(--font-body);
  cursor:pointer;
  transition:transform .2s ease,background-color .2s ease,border-color .2s ease;
}
.hero-phone-btn{margin-top:0;border-width:1px}
.hero-action-btn .icon{width:20px;height:20px}
.hero-action-btn:hover,.hero-action-btn:focus-visible{
  background:#b30e29;
  border-color:var(--white);
  color:var(--white);
  opacity:1;
  transform:translateY(-2px);
  outline:none;
}
.hero-scroll-cue{
  position:absolute;
  z-index:2;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  color:var(--white);
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hero-scroll-cue:hover,.hero-scroll-cue:focus-visible{color:var(--white)}
.hero-scroll-icon{
  width:25px;
  height:25px;
  transform:rotate(90deg);
  animation:hero-scroll-pulse 2.2s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes hero-scroll-pulse{
  0%,100%{transform:translateY(0) rotate(90deg);opacity:.65}
  45%{transform:translateY(7px) rotate(90deg);opacity:1}
}
@media (prefers-reduced-motion:reduce){.hero-scroll-icon{animation:none}}

/* Öffnungszeiten-Dialog: bewusst geradlinig wie die übrige Website */
.hours-modal{padding:28px}
.hours-modal-backdrop{background:rgba(36,36,36,.76);backdrop-filter:blur(2px)}
.hours-dialog{
  width:min(900px,100%);
  padding:48px 50px 46px;
  border:1px solid rgba(59,58,58,.14);
  border-radius:4px;
  box-shadow:0 24px 70px rgba(0,0,0,.24);
}
.hours-close{
  top:20px;
  right:22px;
  width:38px;
  height:38px;
  padding:6px;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--anthracite);
}
.hours-close:hover,.hours-close:focus-visible{background:transparent;color:var(--red);outline:1px solid currentColor;outline-offset:2px}
.hours-close .icon{width:27px;height:27px}
.hours-status{padding-right:56px}
.hours-modal-grid{gap:14px}
.hours-modal-grid section{background:#fafafa;border:1px solid var(--lightgray);padding:22px 24px}
.hours-address,.hours-phone{min-height:44px;align-items:center}

@media(max-width:760px){
  .hero{min-height:calc(100svh - var(--site-header-height,76px));min-height:calc(100dvh - var(--site-header-height,76px))}
  .hero-content{padding:88px 0 104px}
  .hero-actions{align-items:stretch;gap:10px}
  .hero-action-btn{min-height:54px;padding:0 18px;font-size:17px}
  .hero-scroll-cue{bottom:16px}
  .hero-scroll-cue span{display:none}
  .hours-modal{padding:14px}
  .hours-dialog{padding:42px 22px 28px;border-radius:2px}
  .hours-close{top:10px;right:12px}
}
@media(max-width:480px){
  .hero-actions{display:grid;grid-template-columns:1fr}
  .hero-action-btn{width:100%}
}

/* Über uns – lokale Team- und Standortbilder */
.about-location-section{padding:0 0 clamp(72px,8vw,120px);background:var(--white)}
.about-location-image{margin:0;overflow:hidden}
.about-location-image img{display:block;width:100%;height:clamp(320px,48vw,620px);object-fit:cover;object-position:center center}
@media (max-width:700px){
  .about-location-section{padding-bottom:64px}
  .about-location-image img{height:300px}
}

/* Über uns – überarbeitete Seitenproportionen und Intro */
.subpage-hero--about{
  min-height:640px;
  background-position:center 44%;
}
.about-intro-section{
  position:relative;
  background:var(--white);
  border-bottom:1px solid var(--lightgray);
}
.about-intro-grid{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);
  gap:clamp(56px,7vw,104px);
  align-items:start;
}
.about-intro-heading{
  max-width:510px;
}
.about-intro-heading .eyebrow{
  margin-bottom:16px;
}
.about-intro-heading h2{
  font:800 clamp(34px,4vw,54px)/1.12 var(--font-heading);
  letter-spacing:-.035em;
  margin:0;
  color:var(--anthracite);
}
.about-intro-copy{
  max-width:760px;
  padding-top:3px;
}
.about-intro-copy p{
  margin:0 0 22px;
  font-size:18px;
  line-height:1.75;
  color:var(--darkgray);
}
.about-intro-copy p:last-child{
  margin-bottom:0;
}
.about-intro-copy .about-intro-lead{
  margin-bottom:28px;
  font:700 20px/1.5 var(--font-heading);
  color:var(--anthracite);
}

/* Gleichmäßiger Übergang vom Team zum Standortmotiv */
.about-location-section{
  padding:clamp(78px,8vw,116px) 0;
  border-top:1px solid rgba(59,58,58,.06);
}
.about-location-image{
  border:1px solid var(--lightgray);
  background:var(--lightgray);
}
.about-location-image img{
  height:clamp(360px,43vw,620px);
}

@media(max-width:980px){
  .about-intro-grid{
    grid-template-columns:1fr;
    gap:36px;
  }
  .about-intro-heading,
  .about-intro-copy{
    max-width:820px;
  }
}
@media(max-width:760px){
  .subpage-hero--about{
    min-height:500px;
    background-position:center 44%;
  }
  .about-intro-grid{
    gap:28px;
  }
  .about-intro-copy p{
    font-size:18px;
    line-height:1.7;
  }
  .about-intro-copy .about-intro-lead{
    font-size:19px;
    margin-bottom:22px;
  }
  .about-location-section{
    padding:64px 0;
  }
  .about-location-image img{
    height:320px;
  }
}

/* Anfahrt – überarbeitete Anschrift- und Wegbeschreibung */
.route-section{
  background:var(--white);
}
.route-intro-grid{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(54px,7vw,104px);
  align-items:start;
  margin-bottom:clamp(52px,6vw,82px);
}
.route-heading-block{
  max-width:520px;
}
.route-heading-block .eyebrow{
  margin-bottom:16px;
}
.route-heading-block h2{
  font:800 clamp(36px,4.4vw,58px)/1.08 var(--font-heading);
  letter-spacing:-.04em;
  margin:0;
  color:var(--anthracite);
}
.route-copy-block{
  max-width:760px;
  padding-top:2px;
}
.route-copy-block>p{
  margin:28px 0 0;
  font-size:18px;
  line-height:1.75;
  color:var(--darkgray);
}
.route-address-block{
  padding:0 0 28px;
  border-bottom:1px solid var(--lightgray);
}
.route-address-block h3{
  font:800 22px/1.35 var(--font-heading);
  margin:0 0 13px;
  color:var(--anthracite);
}
.route-address-link{
  display:inline-flex;
  align-items:flex-start;
  gap:12px;
  font-size:19px;
  line-height:1.55;
  font-weight:700;
  color:var(--anthracite);
}
.route-address-link .icon{
  width:21px;
  height:21px;
  margin-top:4px;
  color:var(--red);
}
.route-address-link:hover,.route-address-link:focus-visible{
  color:var(--red);
}
.route-intro-grid .route-actions{
  margin-top:32px;
}
.route-location-image{
  margin:0;
  width:100%;
  overflow:hidden;
  border:1px solid var(--lightgray);
  background:#f5f5f5;
}
.route-location-image img{
  display:block;
  width:100%;
  height:auto;
}
@media(max-width:980px){
  .route-intro-grid{
    grid-template-columns:1fr;
    gap:34px;
  }
  .route-heading-block,
  .route-copy-block{
    max-width:820px;
  }
}
@media(max-width:760px){
  .route-intro-grid{
    margin-bottom:44px;
  }
  .route-heading-block h2{
    font-size:clamp(34px,10vw,46px);
  }
  .route-copy-block>p{
    line-height:1.7;
  }
  .route-address-link{
    font-size:18px;
  }
  .route-intro-grid .route-actions{
    align-items:stretch;
    gap:16px;
  }
  .route-intro-grid .route-actions .btn{
    width:100%;
  }
}


/* Kontaktkarten – Icons vertikal sauber an den Inhalten ausrichten */
.contact-cards a .icon{
  width:22px;
  height:22px;
  flex:0 0 22px;
  align-self:center;
}
.contact-cards .address-link .icon{margin-top:0}

/* Einheitlicher Benchmark für die erste Bildsektion aller Unterseiten */
.subpage-hero{min-height:640px}
.subpage-hero--about{min-height:640px}
@media(max-width:760px){
  .subpage-hero,
  .subpage-hero--about{min-height:500px}
}
@media(max-width:480px){
  .subpage-hero,
  .subpage-hero--about{min-height:460px}
}

/* Galerie – Desktop: großzügige Galerie und bildintegrierte Lightbox-Navigation */
.gallery-slider-wrap{position:relative}
.gallery-mobile-nav,.gallery-mobile-status{display:none}
.lightbox{
  padding:20px;
  background:rgba(28,28,28,.95);
}
.lightbox-stage{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:min(94vw,138vh);
  max-width:1900px;
  max-height:92vh;
  aspect-ratio:3/2;
}
.lightbox-stage img{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  box-shadow:0 18px 60px rgba(0,0,0,.34);
}
.lightbox-nav{
  top:50%;
  width:62px;
  height:116px;
  border:0;
  background:rgba(18,18,18,.16);
  color:rgba(255,255,255,.82);
  opacity:.42;
  backdrop-filter:blur(2px);
  transition:opacity .2s ease,background-color .2s ease,transform .2s ease;
}
.lightbox-prev{left:10px}
.lightbox-next{right:10px}
.lightbox-nav .icon{width:30px;height:30px}
.lightbox-nav:hover,.lightbox-nav:focus-visible{
  background:rgba(18,18,18,.52);
  color:var(--white);
  border-color:transparent;
  opacity:1;
}
.lightbox-nav:active{
  background:rgba(18,18,18,.68);
  opacity:1;
  transform:translateY(-50%) scale(.96);
}
.lightbox-close{
  top:10px;
  right:10px;
  width:44px;
  height:44px;
  padding:9px;
  background:rgba(18,18,18,.18);
  color:rgba(255,255,255,.86);
  opacity:.72;
  transition:opacity .2s ease,background-color .2s ease;
}
.lightbox-close:hover,.lightbox-close:focus-visible{
  background:rgba(18,18,18,.58);
  color:var(--white);
  opacity:1;
}

/* Galerie – Mobil: eine echte Swipe-Diashow, ohne Lightbox */
@media(max-width:760px){
  .gallery-slider-wrap{
    overflow:hidden;
    background:var(--anthracite);
  }
  .gallery-grid{
    display:flex;
    grid-template-columns:none;
    gap:0;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
    -ms-overflow-style:none;
    touch-action:pan-x pan-y;
  }
  .gallery-grid::-webkit-scrollbar{display:none}
  .gallery-item{
    flex:0 0 100%;
    width:100%;
    aspect-ratio:3/2;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    cursor:default;
    pointer-events:none;
    background:var(--anthracite);
  }
  .gallery-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    transform:none!important;
  }
  .gallery-mobile-nav{
    position:absolute;
    z-index:3;
    top:50%;
    display:grid;
    place-items:center;
    width:42px;
    height:54px;
    padding:0;
    transform:translateY(-50%);
    border:0;
    background:rgba(18,18,18,.16);
    color:rgba(255,255,255,.8);
    opacity:.58;
    cursor:pointer;
    transition:opacity .18s ease,background-color .18s ease;
  }
  .gallery-mobile-prev{left:6px}
  .gallery-mobile-next{right:6px}
  .gallery-mobile-nav .icon{width:23px;height:23px}
  .gallery-mobile-nav:active,.gallery-mobile-nav:focus-visible{
    background:rgba(18,18,18,.56);
    color:var(--white);
    opacity:1;
    outline:none;
  }
  .gallery-mobile-status{
    position:absolute;
    z-index:3;
    right:12px;
    bottom:10px;
    display:flex;
    align-items:center;
    gap:3px;
    padding:5px 8px;
    background:rgba(18,18,18,.28);
    color:rgba(255,255,255,.86);
    font-size:13px;
    line-height:1;
    font-weight:700;
    letter-spacing:.02em;
    pointer-events:none;
  }
  .lightbox{display:none!important}
}


/* Hero-Bildanimation – Ken Burns / Animista
 * Generated pattern based on the supplied Animista animation.
 * The animation is applied only to the dedicated image layer so hero content stays static.
 */
.hero,
.subpage-hero{
  overflow:hidden;
}
.hero-media{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:inherit;
  background-position:inherit;
  background-size:inherit;
  background-repeat:no-repeat;
  will-change:transform;
}
.hero-overlay,
.subpage-hero-overlay{z-index:1}
.hero-content,
.subpage-hero-content{z-index:2}
.hero-scroll-cue{z-index:3}

.kenburns-top-left {
  -webkit-animation: kenburns-top-left 5s ease-out reverse;
          animation: kenburns-top-left 5s ease-out reverse;
}

/* ----------------------------------------------
 * Generated by Animista on 2026-8-20 19:57:50
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
@-webkit-keyframes kenburns-top-left {
  0% {
    -webkit-transform: scale(1) translate(0, 0);
            transform: scale(1) translate(0, 0);
    -webkit-transform-origin: 16% 16%;
            transform-origin: 16% 16%;
  }
  100% {
    -webkit-transform: scale(1.25) translate(-20px, -15px);
            transform: scale(1.25) translate(-20px, -15px);
    -webkit-transform-origin: top left;
            transform-origin: top left;
  }
}
@keyframes kenburns-top-left {
  0% {
    -webkit-transform: scale(1) translate(0, 0);
            transform: scale(1) translate(0, 0);
    -webkit-transform-origin: 16% 16%;
            transform-origin: 16% 16%;
  }
  100% {
    -webkit-transform: scale(1.25) translate(-20px, -15px);
            transform: scale(1.25) translate(-20px, -15px);
    -webkit-transform-origin: top left;
            transform-origin: top left;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kenburns-top-left {
    -webkit-animation: none;
            animation: none;
  }
}

/* Startseiten-Hero: gestaffelte Inhaltsanimation
 * Text fadet ruhig ein; die drei Aktionen folgen ab 2 Sekunden nacheinander von links.
 */
.hero-content h1{
  -webkit-animation:hero-copy-fade .95s ease-out .45s backwards;
          animation:hero-copy-fade .95s ease-out .45s backwards;
}
.hero-content h2{
  -webkit-animation:hero-copy-fade 1s ease-out .7s backwards;
          animation:hero-copy-fade 1s ease-out .7s backwards;
}
.hero-actions .hero-action-btn{
  -webkit-animation:hero-action-slide .85s cubic-bezier(.22,1,.36,1) 2s backwards;
          animation:hero-action-slide .85s cubic-bezier(.22,1,.36,1) 2s backwards;
}
.hero-actions .hero-action-btn:nth-child(2){
  -webkit-animation-delay:2.45s;
          animation-delay:2.45s;
}
.hero-actions .hero-action-btn:nth-child(3){
  -webkit-animation-delay:2.9s;
          animation-delay:2.9s;
}
@-webkit-keyframes hero-copy-fade{
  from{opacity:0}
  to{opacity:1}
}
@keyframes hero-copy-fade{
  from{opacity:0}
  to{opacity:1}
}
@-webkit-keyframes hero-action-slide{
  from{opacity:0;-webkit-transform:translateX(-46px);transform:translateX(-46px)}
  to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}
}
@keyframes hero-action-slide{
  from{opacity:0;-webkit-transform:translateX(-46px);transform:translateX(-46px)}
  to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}
}
@media (prefers-reduced-motion:reduce){
  .hero-content h1,
  .hero-content h2,
  .hero-actions .hero-action-btn{
    -webkit-animation:none;
            animation:none;
  }
}

/* ============================================================
 * Responsive QA Pass 2026-08-20
 * - mobiles Tap-Highlight global deaktivieren
 * - horizontale Überläufe vermeiden
 * - lange deutsche Begriffe responsiv umbrechen
 * - Layouts, Dialoge, Navigation und Formulare für kleine Viewports härten
 * ============================================================ */

/* Browser-eigenes blaues Touch-Highlight (iOS Safari / Android Chrome) deaktivieren. */
*{
  -webkit-tap-highlight-color:transparent;
}

/* Tastaturbedienung bleibt trotz entferntem Touch-Highlight klar sichtbar. */
:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:2px solid var(--red);
  outline-offset:3px;
}

html{
  max-width:100%;
  overflow-x:clip;
}
body{
  max-width:100%;
  min-width:0;
  overflow-x:clip;
}
body.nav-open{overflow:hidden}

/* Flex- und Grid-Kinder dürfen unter ihre intrinsische Mindestbreite schrumpfen. */
main,header,footer,section,nav,article,aside,figure,form,
.container,.nav-wrap,.main-nav,.nav-dropdown,.submenu,
.hero-content,.subpage-hero-content,.hero-actions,
.info-grid,.service-list,.service-row,.service-copy,
.about-grid,.form-grid,.contact-form,.footer-grid,
.service-detail,.service-page-grid,.service-page-copy,
.content-split,.team-grid,.route-grid,.route-intro-grid,
.contact-cards,.legal-layout,.legal-copy,.hours-dialog,
.hours-modal-grid,.gallery-slider-wrap,.gallery-grid{
  min-width:0;
}

img,video,canvas,svg{max-width:100%}
input,textarea,select,button{max-width:100%;min-width:0}

/* Lange Begriffe/URLs dürfen niemals den Viewport verbreitern. */
h1,h2,h3,h4,h5,h6,p,li,a,span,strong{
  max-width:100%;
}
h1,h2,h3,h4,h5,h6{
  overflow-wrap:break-word;
  hyphens:auto;
}
a[href^="mailto:"],
.legal-page a,
.footer-grid a,
.contact-cards a,
.info-grid a{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Robuste Grid-Definitionen ohne min-content Overflow. */
.info-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.service-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.about-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.form-grid{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)}
.contact-form{grid-template-columns:minmax(0,1fr)}
.footer-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.service-detail{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.content-split{grid-template-columns:repeat(2,minmax(0,1fr))}
.team-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.route-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.contact-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.legal-layout{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}
.hours-modal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.service-page-grid{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)}
.about-intro-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr)}
.route-intro-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}

/* Header / Navigation */
.brand{min-width:0}
.brand strong{white-space:nowrap}
.main-nav a,.nav-link-button{max-width:100%}
.submenu{max-width:min(420px,calc(100vw - 32px))}

/* Inhalte und CTAs */
.btn,.hero-action-btn,.text-link,.service-detail-link{
  max-width:100%;
  white-space:normal;
  text-align:center;
}
.service-page-actions,.route-actions{max-width:100%}
.contact-box{width:min(100%,510px)}
.contact-box a{overflow-wrap:anywhere}
.contact-form textarea{resize:vertical}
.footer-grid>div{min-width:0}

/* Unterseiten-Hero: lange Titel wie „Unfallreparatur“ bleiben sicher im Viewport. */
.subpage-hero-content{width:100%}
.subpage-hero h1{
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:normal;
  hyphens:auto;
}
.subpage-hero-content>p:not(.eyebrow){max-width:min(760px,100%)}

/* Öffnungszeiten-Dialog */
.hours-dialog{max-width:calc(100vw - 32px)}
.hours-modal-grid p{grid-template-columns:minmax(0,90px) minmax(0,1fr)}
.hours-modal-grid p>*{min-width:0}
.hours-address,.hours-phone{min-width:0;overflow-wrap:anywhere}

/* Mobile/Tablet-Navigation folgt immer der tatsächlichen Header-Höhe. */
@media(max-width:1100px){
  .main-nav{
    top:var(--site-header-height,126px);
    max-height:calc(100dvh - var(--site-header-height,126px));
    max-height:calc(100svh - var(--site-header-height,126px));
    width:100%;
    overscroll-behavior:contain;
    padding-left:max(24px,env(safe-area-inset-left));
    padding-right:max(24px,env(safe-area-inset-right));
  }
  .info-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-detail,.service-detail.reverse,
  .content-split,.route-grid,.legal-layout,
  .service-page-grid,.about-intro-grid,.route-intro-grid{
    grid-template-columns:minmax(0,1fr);
  }
  .team-grid,.contact-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:760px){
  .container{width:calc(100% - 32px)}

  /* Typografische Skala für kompakte Viewports. */
  .hero h1{
    font-size:clamp(38px,11.5vw,52px);
    line-height:1.04;
    letter-spacing:-.035em;
  }
  .hero h2{
    font-size:clamp(20px,6vw,27px);
    line-height:1.32;
  }
  .subpage-hero h1{
    font-size:clamp(31px,9.4vw,48px);
    line-height:1.08;
    letter-spacing:-.025em;
  }
  .section-title,.section-heading h2,.detailed-services h2,
  .about h2,.contact-box h2,
  .subpage-intro h2,.content-split h2,.route-grid h2,.contact-cards h2,.legal-page h2,
  .service-page-copy h2,.service-detail h2,.about-intro-heading h2,.route-heading-block h2{
    font-size:clamp(30px,8.6vw,42px);
    line-height:1.12;
    letter-spacing:-.025em;
    overflow-wrap:anywhere;
  }
  .service-copy h3{
    font-size:clamp(28px,8vw,38px);
    overflow-wrap:anywhere;
  }

  .section{padding:68px 0}
  .subpage-hero-content{padding:64px 0 38px}
  .subpage-hero-content>p:not(.eyebrow){font-size:18px;line-height:1.55}

  .info-grid,.footer-grid,.team-grid,.contact-cards{grid-template-columns:minmax(0,1fr)}
  .service-row,.service-row.reverse{grid-template-columns:minmax(0,1fr)}
  .contact-form{grid-template-columns:minmax(0,1fr)}

  .service-copy,.service-detail>div,.contact-box,.contact-form{padding:28px}
  .service-page-note{padding:22px 20px}

  .service-page-actions,.route-actions{
    align-items:stretch;
    gap:12px;
  }
  .service-page-actions .btn,
  .service-page-actions .text-link,
  .route-actions .btn,
  .route-actions .text-link{
    width:100%;
    justify-content:center;
  }

  .contact-cards article{padding:28px}
  .contact-cards a{align-items:flex-start}
  .contact-cards a .icon{margin-top:3px;align-self:flex-start}
  .contact-cards .email-link{white-space:normal;font-size:17px}

  .footer-grid a{font-size:17px;line-height:1.55}
  .footer-logo-wrap{padding-top:42px}

  .hours-modal{padding:12px}
  .hours-dialog{
    width:100%;
    max-width:100%;
    max-height:calc(100dvh - 24px);
    padding:42px 20px 26px;
  }
  .hours-modal-grid{grid-template-columns:minmax(0,1fr)}
  .hours-modal-grid p{grid-template-columns:minmax(0,88px) minmax(0,1fr);gap:10px}

  .legal-note{padding:20px;border-left-width:3px}
  .legal-page h3{overflow-wrap:anywhere}
}

@media(max-width:480px){
  .container{width:calc(100% - 28px)}
  .nav-wrap{gap:14px}
  .brand{gap:8px}
  .brand img{width:48px;height:48px}
  .menu-toggle{width:42px;height:42px;padding:8px}

  .hero-content{padding-left:0;padding-right:0}
  .hero-action-btn{width:100%;padding-inline:14px}

  .subpage-hero h1{font-size:clamp(29px,9.2vw,40px)}
  .subpage-hero-content>p:not(.eyebrow){font-size:17px}
  .eyebrow{font-size:13px;letter-spacing:.09em}

  .service-copy,.service-detail>div,.contact-box,.contact-form,.contact-cards article{padding:24px}
  .service-page-copy>p,.service-page-copy li,.service-detail p,.service-detail li,
  .subpage-intro p,.content-split p,.route-grid p,.legal-page p,.legal-page li{font-size:17px}

  .hours-status{padding-right:42px;letter-spacing:.025em}
  .hours-dialog h2{font-size:32px}
  .hours-status-copy,.hours-countdown{font-size:17px}
  .hours-modal-grid section{padding:18px}
  .hours-modal-grid p{display:grid;grid-template-columns:1fr;gap:1px;margin:10px 0}
}

@media(max-width:360px){
  /* Auf sehr schmalen Geräten erhält das Logo mehr Luft; der Markenname ist redundant. */
  .hero h1{font-size:clamp(35px,11.5vw,42px)}
  .subpage-hero h1{font-size:clamp(27px,9vw,34px)}
  .section-title,.section-heading h2,.detailed-services h2,
  .about h2,.contact-box h2,.subpage-intro h2,.content-split h2,.route-grid h2,
  .contact-cards h2,.legal-page h2,.service-page-copy h2,.service-detail h2,
  .about-intro-heading h2,.route-heading-block h2{font-size:29px}
  .btn,.hero-action-btn{font-size:16px;padding-inline:14px}
}

/* Letzte mobile Robustheitsdetails */
a,button,[role="button"]{touch-action:manipulation}
.info-contact .email-link,.contact-cards .email-link{white-space:normal}


/* ============================================================
 * Layout coherence pass 2026-08-20
 * Einheitliches Raster, weichere Breakpoints und konsistente
 * Abstände für Startseite und sämtliche Unterseiten.
 * ============================================================ */
:root{
  --page-gutter:clamp(16px,3vw,32px);
  --section-space:clamp(64px,7vw,104px);
  --section-space-tight:clamp(44px,5vw,72px);
}

/* Eine gemeinsame Inhaltsachse auf allen Viewports. */
.container,
.subpage-hero-content{
  width:min(calc(100% - var(--page-gutter) - var(--page-gutter)),var(--max));
  margin-inline:auto;
}

/* Schmaler Fließtext bleibt lesbar, startet aber auf derselben linken Achse
   wie alle übrigen Inhaltsbereiche. */
.container.narrow{
  max-width:var(--max);
}
.container.narrow > *{
  max-width:980px;
}

/* Vertikale Abstände skalieren kontinuierlich statt mit abrupten Sprüngen. */
.section{
  padding-block:var(--section-space);
}
.section-heading{
  margin-bottom:clamp(32px,4vw,48px);
}
.info-section .section-title{
  margin-bottom:clamp(32px,4vw,48px);
}

/* Unterseiten-Hero: einheitlicher Benchmark mit sanfter Skalierung. */
.subpage-hero,
.subpage-hero--about{
  min-height:clamp(460px,55vw,640px);
}
.subpage-hero-content{
  padding:clamp(56px,7vw,92px) 0 clamp(38px,4.5vw,58px);
}
.subpage-hero h1{
  max-width:100%;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:auto;
}

/* Lange Headlines bleiben responsiv, ohne mitten im Wort aggressiv zu brechen. */
.service-page-copy h2,
.service-detail h2,
.route-heading-block h2,
.about-intro-heading h2,
.section-title,
.section-heading h2{
  overflow-wrap:normal;
  word-break:normal;
  hyphens:auto;
}

/* Startseite: die beiden zentralen Zweispalter müssen auf Tablet/Mobil
   zuverlässig untereinander wechseln. */
@media(max-width:1100px){
  .about-grid,
  .form-grid{
    grid-template-columns:minmax(0,1fr);
  }
  .about-grid{gap:clamp(34px,5vw,56px)}
  .form-grid{gap:clamp(34px,5vw,56px)}
}

/* Tablet-Zwischenstufe: kein harter Sprung knapp oberhalb 760 px. */
@media(max-width:980px){
  .section{padding-block:clamp(64px,8vw,84px)}
  .service-copy{padding:clamp(34px,5vw,48px)}
  .service-detail>div{padding:clamp(32px,5vw,44px)}
  .contact-cards article{padding:clamp(28px,4vw,34px)}
}

/* Mobile: konsistente Innenränder und Abstände. */
@media(max-width:760px){
  :root{--section-space:64px;--section-space-tight:48px}
  .container,
  .subpage-hero-content{
    width:calc(100% - 32px);
  }
  .section{padding-block:var(--section-space)}
  .subpage-hero-content{padding:56px 0 38px}
  .about-grid,
  .form-grid{gap:36px}
}
@media(max-width:420px){
  .container,
  .subpage-hero-content{
    width:calc(100% - 28px);
  }
}

/* Kontakt: Übergang zwischen Kontaktkarten und Formular bewusst kompakter,
   ohne den allgemeinen Seitenrhythmus zu verändern. */
.contact-cards-section{
  padding-bottom:var(--section-space-tight);
}
.contact-cards-section + .form-section{
  padding-top:var(--section-space-tight);
}

/* Anfahrt: Headline darf natürlich umbrechen; keine erzwungene Einzelzeile. */
.route-heading-block{
  max-width:600px;
}
.route-heading-block h2{
  text-wrap:balance;
}

/* Leistungsübersicht: Intro und Karten teilen dieselbe Inhaltsachse. */
.subpage-intro .container.narrow,
.detailed-services .container.narrow{
  width:min(calc(100% - var(--page-gutter) - var(--page-gutter)),var(--max));
}

/* Kleine Karten-/Grid-Abstände über die Seite hinweg vereinheitlichen. */
.info-grid,
.contact-cards,
.team-grid{
  column-gap:clamp(20px,2.2vw,28px);
  row-gap:clamp(20px,2.2vw,28px);
}
.service-list,
.service-detail-list>.container{
  gap:clamp(24px,2.5vw,34px);
}

/* Footer: gleichmäßiger Seitenabschluss und robuste lange Links. */
.site-footer{
  padding-block:clamp(64px,6vw,82px);
}
.footer-grid{
  gap:clamp(36px,4vw,56px);
}
.footer-logo-wrap{
  padding-top:clamp(42px,4vw,56px);
}


/* ============================================================
   Final production refinements
   ============================================================ */
.skip-link{position:fixed;left:16px;top:12px;z-index:1000;padding:10px 14px;background:var(--anthracite);color:var(--white);font-weight:800;transform:translateY(-160%);transition:transform .18s ease}
.skip-link:focus{transform:translateY(0)}
.form-status{margin:24px 0 0;padding:14px 16px;border-left:4px solid var(--red);background:#f5f5f5;font-size:16px;line-height:1.5}
.form-status--success{border-left-color:var(--anthracite)}

/* Header and logo: one consistent definition for all breakpoints. */
.nav-wrap{min-height:112px;padding-block:12px}
.nav-wrap>.brand{display:flex;align-items:center;flex:0 0 auto;line-height:0}
.nav-wrap>.brand img{width:clamp(294px,25.75vw,340px);height:auto;max-height:97px;object-fit:contain;object-position:left center}

/* Footer: dark information area plus a clean white logo strip. */
.site-footer{padding:0;background:var(--white);color:var(--white)}
.footer-main{background:var(--anthracite);padding-block:clamp(64px,6vw,82px)}
.footer-grid a:hover,.footer-grid a:focus-visible{color:var(--white);opacity:.78;text-decoration:none}
.footer-grid a:focus-visible{outline-color:var(--white)}
.footer-brand-strip{width:100%;background:var(--white);padding-block:clamp(38px,4.2vw,58px)}
.footer-logo-wrap{display:flex;justify-content:flex-start;align-items:center;padding-top:0}
.footer-brand{display:inline-flex;align-items:center;width:min(100%,238px);padding:0;background:transparent;border:0;border-radius:0;line-height:0}
.footer-brand img{width:100%;height:auto;max-height:none;object-fit:contain}
.footer-brand:hover,.footer-brand:focus-visible{background:transparent;opacity:1}
.footer-brand:focus-visible{outline:2px solid var(--red);outline-offset:6px}

/* Unfallreparatur: stacked content images. */
.service-page-media--stack{position:sticky;top:150px;display:grid;gap:24px;min-width:0}
.service-page-media--stack .service-page-image{position:static}
.service-page-media--stack .service-page-image:first-child img{height:374px}
.service-page-media--stack .service-page-image--wide img{height:auto;aspect-ratio:2000/893;object-fit:cover}

/* Mobile navigation: all eleven interaction rows share the available height. */
@media(max-width:1100px){
  .nav-wrap{min-height:106px;padding-block:10px}
  .nav-wrap>.brand img{width:300px;max-height:89px}
  body.nav-open{overflow:hidden}
  .main-nav{
    top:var(--site-header-height,106px);bottom:0;height:calc(100dvh - var(--site-header-height,106px));max-height:none;overflow:hidden;
    padding:clamp(10px,1.6dvh,18px) 0 max(clamp(10px,1.6dvh,18px),env(safe-area-inset-bottom));
    background:var(--white);border:0;box-shadow:none;gap:0;align-items:stretch
  }
  .main-nav.open{display:grid;grid-template-rows:minmax(0,8fr) repeat(3,minmax(42px,1fr))}
  .main-nav .nav-dropdown{display:grid;grid-template-rows:repeat(8,minmax(0,1fr));width:100%;min-height:0}
  .main-nav .nav-dropdown>.nav-link-button,
  .main-nav>a{display:flex;width:100%;height:100%;min-height:0;align-items:center;padding:6px max(24px,env(safe-area-inset-right)) 6px max(24px,env(safe-area-inset-left));text-align:left}
  .main-nav .nav-dropdown>.nav-link-button,
  .main-nav .nav-dropdown>.nav-link-button:hover,
  .main-nav .nav-dropdown>.nav-link-button:focus-visible,
  .main-nav .nav-dropdown>.nav-link-button[aria-expanded="true"],
  .main-nav .nav-dropdown>.nav-link-button.active{text-decoration:none}
  .main-nav .submenu,
  .main-nav .nav-dropdown.is-open .submenu{
    grid-row:2/9;position:static;display:grid;grid-template-rows:repeat(7,minmax(0,1fr));width:100%;min-width:0;height:100%;margin:0;padding:0;
    gap:0;border:0;box-shadow:none;background:transparent;opacity:1;visibility:visible;transform:none;pointer-events:auto
  }
  .main-nav .submenu:before{display:none}
  .main-nav .submenu a{display:flex;width:100%;height:100%;min-height:0;align-items:center;padding:6px max(24px,env(safe-area-inset-right)) 6px max(42px,calc(env(safe-area-inset-left) + 24px));font-size:clamp(12.5px,2.9vw,14px);line-height:1.25;white-space:normal;text-align:left}
  .main-nav .submenu-overview{margin:0;padding-top:7px;border-top:1px solid var(--lightgray)}
}
@media(max-width:760px){
  .nav-wrap{min-height:92px;padding-block:9px}
  .nav-wrap>.brand img{width:min(255px,calc(100vw - 104px));max-height:77px}
  .main-nav{top:var(--site-header-height,92px);height:calc(100dvh - var(--site-header-height,92px))}
  .main-nav .nav-dropdown>.nav-link-button,.main-nav>a{font-size:clamp(17px,4.55vw,20px)}
  .main-nav .submenu a{font-size:clamp(12.5px,3.45vw,14.5px)}
  .footer-brand{width:min(100%,217px)}
  .service-page-media--stack{position:static;gap:16px}
  .service-page-media--stack .service-page-image:first-child img{height:320px}
}
@media(max-width:390px){
  .nav-wrap>.brand img{width:min(220px,calc(100vw - 96px));max-height:68px}
  .footer-brand{width:min(100%,210px)}
}
@media(max-width:1100px) and (max-height:640px){
  .main-nav{padding-top:5px;padding-bottom:max(5px,env(safe-area-inset-bottom))}
  .main-nav.open{grid-template-rows:minmax(0,8fr) repeat(3,minmax(34px,1fr))}
  .main-nav .nav-dropdown>.nav-link-button,.main-nav>a{font-size:16px;padding-block:3px}
  .main-nav .submenu a{font-size:12px;padding-block:3px}
}

.about-intro-heading h2 span{display:block}

/* Reduced motion also disables smooth scrolling. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .gallery-grid{scroll-behavior:auto}
}


/* Kontaktformular: komfortable, werkstattspezifische Struktur */
@media(max-width:760px){
  .contact-form{padding:24px;gap:22px}
  .contact-form-group{padding-bottom:22px}
  .contact-form-fields{grid-template-columns:minmax(0,1fr);gap:16px}
  .privacy-consent{grid-template-columns:22px minmax(0,1fr)}
}
@media(max-width:390px){
  .contact-form{padding:20px}
}


/* Kontaktformular: Versandbestätigung als fokussierter Dialog */
body.form-success-open{overflow:hidden}
.form-success-modal{position:fixed;inset:0;z-index:260;display:grid;place-items:center;padding:24px;opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease}
.form-success-modal.show{opacity:1;visibility:visible}
.form-success-backdrop{position:absolute;inset:0;background:rgba(34,34,34,.7);backdrop-filter:blur(2px)}
.form-success-dialog{position:relative;z-index:1;width:min(640px,100%);max-height:calc(100dvh - 48px);overflow:auto;background:var(--white);border:1px solid var(--lightgray);padding:48px 50px 46px;box-shadow:0 24px 70px rgba(0,0,0,.24);border-radius:4px}
.form-success-dialog h2{font:800 clamp(32px,4vw,46px)/1.1 var(--font-heading);letter-spacing:-.03em;margin:0 0 18px;color:var(--anthracite)}
.form-success-dialog>p:not(.eyebrow){margin:0 0 14px;font-size:18px;line-height:1.65;color:var(--darkgray)}
.form-success-dialog .eyebrow{margin-bottom:10px}
.form-success-close{position:absolute;top:20px;right:20px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:transparent;color:var(--anthracite);cursor:pointer}
.form-success-close .icon{width:26px;height:26px}
.form-success-close:hover,.form-success-close:focus-visible{color:var(--red)}
.form-success-icon{display:grid;place-items:center;width:58px;height:58px;margin:0 0 26px;border:1px solid var(--red);color:var(--red)}
.form-success-icon .icon{width:27px;height:27px}
.form-success-home{margin-top:16px}
@media (max-width:600px){
  .form-success-modal{padding:14px}
  .form-success-dialog{padding:42px 24px 30px;border-radius:2px}
  .form-success-dialog>p:not(.eyebrow){font-size:17px}
  .form-success-close{top:12px;right:12px}
  .form-success-home{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.form-success-modal{transition:none}}