/* ============================================================
   PAINTMAYER MOTORENMANUFAKTUR — styles.css
   Statischer Nachbau (dezent modernisiert) · Invisions
   ============================================================ */

/* ---------- Fonts (self-hosted, DSGVO) ---------- */
@font-face{font-family:"Poppins";src:url("/assets/fonts/poppins-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("/assets/fonts/poppins-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("/assets/fonts/poppins-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("/assets/fonts/poppins-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("/assets/fonts/poppins-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
/* Originalschriften der Live-Seite paintmayer.com: Helvetica Neue Medium (Fliesstext),
   Helvetica Neue Bold (Ueberschriften) und 911 Porscha (Display-Headline im Hero). */
@font-face{font-family:"HN";src:url("/assets/fonts/hn-medium.woff2") format("woff2");font-weight:300 550;font-style:normal;font-display:swap}
@font-face{font-family:"HN";src:url("/assets/fonts/hn-bold.woff2") format("woff2");font-weight:551 900;font-style:normal;font-display:swap}
@font-face{font-family:"HN Ext";src:url("/assets/fonts/hn-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"HN Ext";src:url("/assets/fonts/hn-medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Porscha";src:url("/assets/fonts/porscha-v3.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* ---------- Design tokens ---------- */
:root{
  --ink:#171717;          /* near-black headings / dark sections */
  --ink-2:#1c1c1c;
  --graphite:#383838;     /* nav / overlays */
  --red:#c0001b;          /* Porsche red accent */
  --red-dark:#9c0016;
  --body:#535353;         /* body text */
  --muted:#767676;
  --line:rgba(0,0,0,.10);
  --bg:#ffffff;
  --bg-soft:#f6f6f6;
  --bg-softer:#fafafa;
  --white:#ffffff;
  --radius:0px;
  --radius-sm:0px;
  --shadow:none;
  --shadow-soft:none;
  --maxw:1240px;
  --nav-h:112px;
  --font:"HN","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-ext:"HN","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-display:"Porscha","HN","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-gutter:stable}
body{margin:0;font-family:var(--font);font-weight:400;font-size:17px;line-height:1.8;color:var(--body);background:var(--bg);overflow-x:hidden}
img,video,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
/* Ueberschriften wie live: Helvetica Neue Bold, Versalien bei H1/H2, Groessen 1:1 uebernommen. */
h1,h2,h3,h4,h5{font-family:var(--font);color:var(--ink);line-height:1.18;font-weight:700;margin:0 0 .6em;letter-spacing:-.01em}
h1{font-size:clamp(27px,3.4vw,45px);text-transform:uppercase;letter-spacing:-.02em}
h2{font-size:clamp(26px,2.9vw,38px);text-transform:uppercase}
h3{font-size:clamp(18px,1.5vw,20px);text-transform:uppercase;letter-spacing:1.5px;font-weight:700}
p{margin:0 0 1.1em}
strong,b{font-weight:700;color:var(--ink)}
ul,ol{margin:0 0 1.1em;padding-left:1.2em}
li{margin-bottom:.4em}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}

/* eyebrow / kicker */
.kicker{display:inline-block;font-family:var(--font-ext);font-weight:500;font-size:15px;letter-spacing:2px;text-transform:none;color:var(--red);margin:0 0 16px}
.section-head{max-width:760px;margin:0 auto 52px;text-align:center}
.section-head.left{margin-left:0;text-align:left}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.55em;font-weight:700;font-size:13px;letter-spacing:.02em;text-transform:uppercase;line-height:1;padding:17px 30px;border-radius:0;background:var(--ink);color:#fff;border:1px solid var(--ink);cursor:pointer;transition:transform .2s var(--ease),background .2s,color .2s,box-shadow .2s;white-space:nowrap}
.btn:hover{background:var(--red);border-color:var(--red);box-shadow:none}
.btn--red{background:var(--red);border-color:var(--red)}
.btn--red:hover{background:var(--ink);border-color:var(--ink);box-shadow:none}
.btn--ghost{background:transparent;color:var(--ink);border-color:rgba(0,0,0,.2)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.btn--light{background:#fff;color:var(--ink);border-color:#fff}
.btn--light:hover{background:var(--red);color:#fff;border-color:var(--red)}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{position:relative;z-index:900;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.10)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;max-width:none;min-height:var(--nav-h);padding-top:8px;padding-bottom:8px;padding-left:clamp(18px,2.2vw,34px);padding-right:clamp(18px,2.2vw,34px)}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{height:clamp(50px,5vw,69px);width:auto}
.nav{display:flex;align-items:center}
.nav a,.nav .nav-top{font-weight:600;font-size:14px;color:#1c1c1c;padding:9px 11px;border-radius:0;display:inline-flex;align-items:center;gap:5px;transition:color .2s,background .2s;white-space:nowrap}
.nav>ul>li{position:relative;list-style:none}
.nav ul{list-style:none;margin:0;padding:0}
.nav>ul{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:0;row-gap:2px}
.nav-top:hover,.nav a:hover{color:var(--red);background:rgba(0,0,0,.045)}
.nav .current>.nav-top,.nav a.current{color:var(--red)}
.nav .current>.nav-top::after,.nav a.current::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;background:var(--red);border-radius:0}
.has-sub>.nav-top::before{content:"▾";order:2;font-size:10px;opacity:.7;margin-left:2px;position:static;background:none}
.submenu{position:absolute;top:calc(100% + 6px);left:0;min-width:250px;background:#fff;border:1px solid var(--line);border-radius:0;box-shadow:none;padding:8px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.22s var(--ease);z-index:20}
.has-sub:hover .submenu,.has-sub:focus-within .submenu{opacity:1;visibility:visible;transform:translateY(0)}
.submenu a{display:block;color:#1a1a1a;font-size:14px;font-weight:600;padding:10px 14px;border-radius:0}
.submenu a:hover{color:#fff;background:var(--red)}
.nav-shop{color:#1c1c1c!important}
.nav-shop:hover{color:var(--red)!important}
.burger{display:none;background:none;border:0;color:#1c1c1c;cursor:pointer;padding:8px;width:44px;height:44px}
.burger span{display:block;width:24px;height:2px;background:#1c1c1c;margin:5px auto;transition:.3s}
.nav-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-open .burger span:nth-child(2){opacity:0}
.nav-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:min(80vh,700px);display:flex;align-items:center;color:#fff;overflow:hidden}
.hero__media,.hero__media img,.hero__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,17,17,.55) 0%,rgba(17,17,17,.45) 40%,rgba(17,17,17,.78) 100%);z-index:1}
.hero__inner{position:relative;z-index:2;width:100%;padding:64px 0}
.hero__inner .container{max-width:var(--maxw)}
.hero__inner p{max-width:60ch}
.hero h1{color:#fff;max-width:22ch;font-size:clamp(28px,3.6vw,46px)}
.hero .kicker{color:#fff}
.hero p{color:rgba(255,255,255,.9);font-size:clamp(16px,1.5vw,20px);max-width:60ch;margin-bottom:28px}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
.hero--page{min-height:clamp(374px,35.2vw,517px)}
.hero--page h1{font-size:clamp(27px,3.4vw,45px)}
.hero--sm{min-height:clamp(374px,35.2vw,517px)}
/* Startseite wie live: reiner Video-Hero ohne Text und ohne Abdunklung. */
.hero--video{min-height:min(94vh,780px)}
.hero--video::after{display:none}

/* generic content section */
.section{padding:clamp(58px,8vw,120px) 0}
.section--soft{background:var(--bg-soft)}
.section--ink{background:var(--ink);color:#d8d8d8}
.section--ink h1,.section--ink h2,.section--ink h3{color:#fff}
.lead{font-size:clamp(18px,1.8vw,21px);line-height:1.7;color:var(--body)}

/* ============================================================
   HOMEPAGE — service cards
   ============================================================ */
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:8px}
.svc-card{position:relative;display:flex;flex-direction:column;min-height:340px;border-radius:var(--radius);overflow:hidden;color:#fff;isolation:isolate;box-shadow:none}
.svc-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .6s var(--ease)}
.svc-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(17,17,17,.15) 0%,rgba(17,17,17,.55) 55%,rgba(17,17,17,.92) 100%)}
.svc-card:hover img{transform:scale(1.06)}
.svc-card__body{margin-top:auto;padding:30px}
.svc-card__body h3{color:#fff;margin-bottom:10px;text-transform:uppercase}
.svc-card__body p{color:rgba(255,255,255,.85);font-size:15.5px;margin-bottom:14px}
.svc-card__models{font-size:12.5px;letter-spacing:1px;text-transform:uppercase;color:var(--red);font-weight:700}
.svc-card__link{position:absolute;inset:0;z-index:3}
.svc-card .arrow{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:#fff;margin-top:14px}

.feature-row{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.feature-row.reverse{grid-template-columns:.95fr 1.05fr}
.feature-row.reverse .feature-media{order:-1}
.feature-media img{width:100%;height:100%;min-height:360px;object-fit:cover;border-radius:var(--radius);box-shadow:none}
/* Intro-Reihe wie live: zwei gleich breite Spalten, Bild buendig, Text mit 40px Innenabstand. */
.feature-row--split{grid-template-columns:1fr 1fr;gap:0}
.feature-row--split.reverse{grid-template-columns:1fr 1fr}
.feature-row--split .feature-copy{padding:0 0 0 40px}
.feature-row--split .feature-media img{min-height:0;aspect-ratio:1/1}
.feature-row--split h1{font-size:clamp(24px,2.4vw,30px);line-height:1.2;margin-bottom:.5em}
.statement-name{font-size:20px;font-weight:700;line-height:1.2;text-transform:uppercase;color:var(--ink);margin-bottom:.9em}

/* stats / trust row */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.stat b{display:block;font-family:var(--font);font-weight:800;font-size:clamp(30px,4vw,46px);color:var(--ink);line-height:1}
.stat span{font-size:14px;color:var(--muted)}
.section--ink .stat b{color:#fff}
.section--ink .stat span{color:rgba(255,255,255,.7)}

/* quote / betreiber */
.quote{max-width:900px;margin:0 auto;text-align:center}
.quote blockquote{font-size:clamp(20px,2.4vw,30px);line-height:1.4;font-weight:600;color:var(--ink);margin:0 0 24px}
.section--ink .quote blockquote{color:#fff}
.quote cite{font-style:normal;font-weight:700;color:var(--red)}

/* CTA band */
.cta-contact{display:flex;gap:30px;flex-wrap:wrap;justify-content:center;margin-top:26px;font-weight:600}
.cta-contact a{color:#fff}
.cta-contact .ci{display:inline-flex;align-items:center;gap:8px}

/* ============================================================
   GALLERY (posts + homepage)
   ============================================================ */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gallery a{display:block;border-radius:var(--radius-sm);overflow:hidden;aspect-ratio:3/2;background:var(--bg-soft)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.gallery a:hover img{transform:scale(1.07)}
.gallery.g-3{grid-template-columns:repeat(3,1fr)}

/* lightbox */
.lb{position:fixed;inset:0;background:rgba(10,10,10,.94);z-index:1200;display:none;align-items:center;justify-content:center;padding:24px}
.lb.open{display:flex}
.lb img{max-width:94vw;max-height:88vh;width:auto;height:auto;border-radius:0}
.lb__close,.lb__nav{position:absolute;background:rgba(255,255,255,.1);border:0;color:#fff;font-size:30px;width:54px;height:54px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.lb__close:hover,.lb__nav:hover{background:var(--red)}
.lb__close{top:22px;right:22px}
.lb__nav{top:50%;transform:translateY(-50%)}
.lb__prev{left:22px}.lb__next{right:22px}

/* ============================================================
   REFERENCE / BLOG cards
   ============================================================ */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.rcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s;position:relative}
.rcard:hover{box-shadow:none}
.rcard__img{aspect-ratio:16/10;overflow:hidden;background:var(--bg-soft)}
.rcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.rcard:hover .rcard__img img{transform:scale(1.06)}
.rcard__body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.rcard__cat{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--red);margin-bottom:8px}
.rcard__body h3{font-size:19px;line-height:1.25;margin-bottom:10px}
.rcard__body p{font-size:14.5px;color:var(--muted);margin-bottom:16px}
.rcard__more{margin-top:auto;font-weight:700;font-size:14px;color:var(--ink);display:inline-flex;gap:6px;align-items:center}
.rcard a.stretch{position:absolute;inset:0;z-index:2}
.rcard:hover .rcard__more{color:var(--red)}

/* pagination */
.pager{display:flex;justify-content:center;gap:8px;margin-top:48px;flex-wrap:wrap}
.pager a,.pager span{min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border-radius:0;border:1px solid var(--line);font-weight:600;color:var(--ink)}
.pager a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.pager .on{background:var(--red);color:#fff;border-color:var(--red)}
.pager .disabled{opacity:.4;pointer-events:none}

/* ============================================================
   ARTICLE (single post)
   ============================================================ */
.article{max-width:var(--maxw);margin:0 auto}
.article > *{max-width:820px}
.article .meta{color:var(--muted);font-size:14px;font-weight:600;letter-spacing:.5px;margin-bottom:14px}
.article h1{margin-bottom:.4em}
.article h2{margin-top:1.4em;font-size:clamp(24px,3vw,34px)}
.article img{border-radius:var(--radius-sm);margin:1em 0}
.article a{color:var(--red);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.article .article-gallery{width:100%;max-width:1160px;margin-left:0;transform:none;margin-top:40px;margin-bottom:40px}

.post-cta{margin-top:40px;padding:32px;background:var(--bg-soft);border-radius:var(--radius);border-left:5px solid var(--red)}
.post-cta h3{margin-bottom:.4em}
.breadcrumbs{font-size:13px;color:var(--muted);margin-bottom:20px}
.breadcrumbs a:hover{color:var(--red)}
.breadcrumbs span{margin:0 6px;opacity:.5}

/* ============================================================
   FAQ (accordion)
   ============================================================ */
.faq{max-width:860px;margin:0 auto}
.faq-item{border:1px solid var(--line);border-radius:0;margin-bottom:12px;background:#fff;overflow:hidden}
.faq-item summary{list-style:none;cursor:pointer;padding:20px 56px 20px 24px;font-weight:700;color:var(--ink);position:relative;font-size:17px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:24px;font-weight:400;color:var(--red);transition:transform .25s}
.faq-item[open] summary::after{content:"–"}
.faq-item .faq-body{padding:0 24px 22px;color:var(--body)}
.faq-item .faq-body p:last-child{margin-bottom:0}

/* ============================================================
   FORMS
   ============================================================ */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(24px,4vw,44px);box-shadow:none}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field.full{grid-column:1/-1}
.field label{font-weight:600;font-size:14px;color:var(--ink)}
.field label .req{color:var(--red)}
.field input,.field select,.field textarea{font-family:inherit;font-size:16px;color:var(--ink);padding:13px 15px;border:1px solid rgba(0,0,0,.18);border-radius:0;background:#fff;transition:border .2s,box-shadow .2s;width:100%}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(192,0,27,.12)}
.field.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.check{display:flex;gap:11px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--body)}
.check input{width:20px;height:20px;flex:0 0 auto;margin-top:2px;accent-color:var(--red)}
.check a{color:var(--red);text-decoration:underline}
.form-note{font-size:12.5px;color:var(--muted);margin-top:6px}
.form-success{display:none;padding:18px 20px;background:#e8f6ec;border:1px solid #b6e0c2;border-radius:0;color:#1c6b34;font-weight:600;margin-bottom:22px}
#nachricht-gesendet:target .form-success,.form-success.show{display:block}

/* contact info panel */
.contact-split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.info-list{list-style:none;padding:0;margin:0}
.info-list li{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.info-list .ic{flex:0 0 44px;height:44px;border-radius:0;background:var(--bg-soft);display:flex;align-items:center;justify-content:center;color:var(--red)}
.info-list b{display:block;color:var(--ink)}
.hours{width:100%;border-collapse:collapse;font-size:15px}
.hours td{padding:7px 0;border-bottom:1px solid var(--line)}
.hours td:last-child{text-align:right;color:var(--ink);font-weight:600}
.map-embed{border-radius:var(--radius);overflow:hidden;min-height:300px;border:1px solid var(--line)}
.map-embed iframe{width:100%;height:100%;min-height:340px;border:0;display:block}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:#000;color:#b9b9b9;padding:72px 0 0;font-size:15px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:40px;padding-bottom:52px;border-bottom:1px solid rgba(255,255,255,.08)}
.site-footer img.flogo{height:40px;margin-bottom:20px}
.site-footer h4{color:#fff;font-size:13px;letter-spacing:2px;text-transform:uppercase;font-family:var(--font-ext);margin:0 0 18px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:10px}
.site-footer a:hover{color:#fff}
.footer-contact a,.footer-contact div{display:block;margin-bottom:10px}
.footer-contact .red{color:inherit}
.social{display:flex;gap:12px;margin-top:8px}
.social a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s}
.social a:hover{background:var(--red);transform:translateY(-2px)}
.social svg{width:18px;height:18px;fill:#fff}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:24px 0;font-size:13px;color:#7a7a7a}
.footer-bottom a:hover{color:#fff}
.footer-bottom .legal-links{display:flex;gap:18px;flex-wrap:wrap}

/* ============================================================
   PAINTMAYER service-page classes (aus Original, harmonisiert)
   ============================================================ */
.paintmayer-section{padding:clamp(56px,7vw,96px) 0;background:#fff;color:var(--ink)}
.paintmayer-section.paintmayer-light,.paintmayer-section.light{background:var(--bg-soft)}
.paintmayer-section.dark{background:var(--ink);color:#fff}
.paintmayer-section.red{background:var(--red);color:#fff}
.paintmayer-container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.paintmayer-grid-1{max-width:900px}
.paintmayer-grid-2{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.paintmayer-grid-2.reverse{grid-template-columns:.95fr 1.05fr}
.paintmayer-text h1,.paintmayer-text h2{margin:0 0 20px;line-height:1.12;font-weight:800;color:var(--ink)}
.paintmayer-section.dark .paintmayer-text h1,.paintmayer-section.dark .paintmayer-text h2{color:#fff}
.paintmayer-text p,.paintmayer-text li{font-size:17px;line-height:1.8;margin:0 0 16px;color:var(--body)}
.paintmayer-section.dark .paintmayer-text p{color:#cfcfcf}
.paintmayer-kicker{display:inline-block;color:var(--red);font-family:var(--font-ext);font-size:13px;font-weight:700;letter-spacing:5px;text-transform:uppercase;margin-bottom:18px}
.paintmayer-list{list-style:none;padding:0;margin:0}
.paintmayer-list li{position:relative;padding-left:30px;margin-bottom:13px;color:var(--body)}
.paintmayer-list li::before{content:"";position:absolute;left:0;top:.55em;width:12px;height:7px;border-left:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(-45deg)}
.paintmayer-image{width:100%;height:520px;object-fit:cover;display:block;border-radius:var(--radius);box-shadow:none}
.paintmayer-image.small{height:420px}.paintmayer-image.tall{height:620px}
.paintmayer-image-wrap{position:relative}
.paintmayer-btn{display:inline-flex;align-items:center;gap:.5em;font-size:13px;letter-spacing:.02em;text-transform:uppercase;margin:8px 10px 8px 0;padding:17px 28px;border-radius:0;background:var(--ink);color:#fff;font-weight:700;transition:transform .2s var(--ease),background .2s,box-shadow .2s}
.paintmayer-btn:hover{background:var(--red);box-shadow:none}
.paintmayer-section.red .paintmayer-btn{background:#fff;color:var(--red)}
.paintmayer-box-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.paintmayer-box{background:#fff;border-radius:var(--radius);padding:30px;border:1px solid var(--line);box-shadow:none}
.paintmayer-section.dark .paintmayer-box{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);box-shadow:none}

/* ============================================================
   PM PROCESS MODULE (10-step slider, CSS-only) — from original
   ============================================================ */
.pm-process-module{max-width:1280px;margin:0 auto;padding:10px 20px 40px}
.pm-process-header{text-align:center;margin-bottom:44px}
.pm-process-kicker{display:inline-block;font-family:var(--font-ext);font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--red);margin-bottom:14px}
.pm-process-title{font-size:clamp(28px,4vw,46px);line-height:1.1;font-weight:800;color:var(--ink);margin:0 0 14px}
.pm-process-subtitle,.pm-process-header .pm-step-text{max-width:780px;margin:0 auto;font-size:17px;line-height:1.7;color:var(--muted)}
.pm-slider-radio{position:absolute;opacity:0;pointer-events:none}
.pm-slider-wrap{position:relative;margin-top:36px;padding-bottom:84px}
.pm-slider-viewport{overflow:hidden}
.pm-slider-track{display:flex;width:500%;transition:transform .45s var(--ease)}
.pm-slide{width:20%;flex:0 0 20%;padding:0 4px}
.pm-slide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.pm-step{position:relative;min-height:100%;padding:30px 26px 24px;border-radius:var(--radius);background:linear-gradient(180deg,#fff,#f6f6f6);border:1px solid var(--line);box-shadow:none;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s}
.pm-step:hover{box-shadow:none}
.pm-step::before{content:"";position:absolute;inset:0 auto 0 0;width:6px;background:var(--red)}
.pm-step-top{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.pm-step-number{flex:0 0 auto;width:56px;height:56px;border-radius:0;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800}
.pm-step-title{margin:0;font-size:22px;line-height:1.2;font-weight:800;color:var(--ink)}
.pm-step-text{margin:0;font-size:16px;line-height:1.75;color:var(--body)}
.pm-step-text a{color:var(--red);text-decoration:none;font-weight:700}
.pm-step-text a:hover{text-decoration:underline}
#pm-slide-1:checked~.pm-slider-wrap .pm-slider-track{transform:translateX(0)}
#pm-slide-2:checked~.pm-slider-wrap .pm-slider-track{transform:translateX(-20%)}
#pm-slide-3:checked~.pm-slider-wrap .pm-slider-track{transform:translateX(-40%)}
#pm-slide-4:checked~.pm-slider-wrap .pm-slider-track{transform:translateX(-60%)}
#pm-slide-5:checked~.pm-slider-wrap .pm-slider-track{transform:translateX(-80%)}
.pm-arrow{position:absolute;bottom:0;width:52px;height:52px;display:none;align-items:center;justify-content:center;background:var(--ink);color:#fff;font-size:26px;font-weight:700;cursor:pointer;z-index:5;user-select:none;border-radius:0;transition:background .2s}
.pm-arrow:hover{background:var(--red)}
.pm-arrow-left{left:50%;margin-left:-62px}.pm-arrow-right{left:50%;margin-left:10px}
#pm-slide-1:checked~.pm-slider-wrap .pm-arrow-set-1,#pm-slide-2:checked~.pm-slider-wrap .pm-arrow-set-2,#pm-slide-3:checked~.pm-slider-wrap .pm-arrow-set-3,#pm-slide-4:checked~.pm-slider-wrap .pm-arrow-set-4,#pm-slide-5:checked~.pm-slider-wrap .pm-arrow-set-5{display:flex}
.pm-dots{display:flex;justify-content:center;gap:10px;margin-top:26px;flex-wrap:wrap}
.pm-dot{width:12px;height:12px;border-radius:50%;background:rgba(0,0,0,.18);cursor:pointer;transition:background .25s,transform .25s}
.pm-dot:hover{background:var(--red);transform:scale(1.08)}
#pm-slide-1:checked~.pm-slider-wrap .pm-dot-1,#pm-slide-2:checked~.pm-slider-wrap .pm-dot-2,#pm-slide-3:checked~.pm-slider-wrap .pm-dot-3,#pm-slide-4:checked~.pm-slider-wrap .pm-dot-4,#pm-slide-5:checked~.pm-slider-wrap .pm-dot-5{background:var(--red)}
.pm-slider-hint{margin-top:14px;text-align:center;font-size:14px;color:var(--muted)}
.pm-video-block{margin-top:28px}
.pm-video-inner{max-width:900px;margin:0 auto}
.pm-video-frame,.embed-frame{width:100%;height:420px;border:0;border-radius:var(--radius);display:block}

/* consent-gated embeds */
.embed-consent{position:relative;background:#161616;color:#fff;border-radius:var(--radius);min-height:300px;display:flex;align-items:center;justify-content:center;text-align:center;padding:34px;overflow:hidden}
.embed-consent .ec-inner{position:relative;z-index:2;max-width:440px}
.embed-consent p{color:#d8d8d8;font-size:15px}
.embed-consent.has-poster::before{content:"";position:absolute;inset:0;background:rgba(12,12,12,.6);z-index:1}
.embed-consent.has-poster{min-height:380px}
.contact-photo{margin-bottom:22px}
.contact-photo img{width:100%;border-radius:var(--radius);box-shadow:none;display:block}
.ref-catlinks{margin-top:52px;padding-top:34px;border-top:1px solid var(--line)}
.ref-catlinks h2{font-size:22px;margin:0 0 16px}
.ref-catlinks ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.ref-catlinks ul a{display:inline-block;border:1px solid var(--line);border-radius:0;padding:8px 16px;font-size:13.5px;font-weight:600;color:var(--ink);text-decoration:none;transition:.15s}
.ref-catlinks ul a:hover{border-color:var(--red);color:var(--red)}
.post-featured{margin:26px 0}
.post-featured img{width:100%;border-radius:var(--radius);box-shadow:none;display:block}
.pm-localvideo{width:100%;border-radius:var(--radius);box-shadow:none;display:block}
.tm-video{line-height:0}
.tm-video video{width:100%;max-height:62vh;object-fit:cover;display:block}
.embed-frame{height:420px}

/* ============================================================
   COOKIE / CONSENT banner
   ============================================================ */
.cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:1300;max-width:520px;margin:0 auto;background:#171717;color:#eaeaea;border:1px solid rgba(255,255,255,.12);border-radius:0;box-shadow:none;padding:22px 24px;display:none}
.cookie.show{display:block}
.cookie h4{color:#fff;margin:0 0 8px;font-size:17px}
.cookie p{font-size:13.5px;color:#bdbdbd;margin:0 0 16px}
.cookie p a{color:var(--red);text-decoration:underline}
.cookie__row{display:flex;gap:10px;flex-wrap:wrap}
.cookie .btn{font-size:14px;padding:12px 20px}

/* ============================================================
   Reveal on scroll
   ============================================================ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}*{scroll-behavior:auto!important}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Zwischen 1600 und 1000 px bricht die Menuezeile um – genau wie auf paintmayer.com.
   Die Punkte bleiben dabei alle sichtbar, der Header waechst nur in der Hoehe. */
@media (max-width:1600px){
  .nav a,.nav .nav-top{padding:9px 9px}
}
@media (max-width:1200px){
  .nav a,.nav .nav-top{padding:8px 8px;font-size:13.5px}
}
/* Die Menueleiste ist so schmal, dass sie bis ca. 780 px einzeilig bleibt.
   Ab 860 px uebernimmt das Burger-Menue – vorher gibt es keinen Umbruch mehr. */
@media (max-width:860px){
  .burger{display:block}
  .nav{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 24px 44px rgba(0,0,0,.14);max-height:0;overflow:hidden;transition:max-height .4s var(--ease);display:block}
  .nav-open .nav{max-height:calc(100vh - var(--nav-h));overflow-y:auto}
  .nav>ul{flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;padding:10px;gap:0}
  .nav>ul>li{width:100%}
  .nav a,.nav .nav-top{width:100%;padding:14px 16px;font-size:16px}
  .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;background:#f6f6f6;border:0;margin:2px 0 6px 12px;padding:2px}
  .submenu a{color:#1a1a1a}
  .has-sub>.nav-top::after{margin-left:auto}
  .nav .current>.nav-top::after,.nav a.current::after{display:none}
}
@media (max-width:960px){
  :root{--nav-h:80px}
  .svc-grid{grid-template-columns:1fr}
  .feature-row,.feature-row.reverse,.feature-row--split,.feature-row--split.reverse{grid-template-columns:1fr;gap:30px}
  .feature-row.reverse .feature-media{order:0}
  .feature-row--split .feature-copy{padding:0}
  .paintmayer-grid-2,.paintmayer-grid-2.reverse,.paintmayer-box-grid{grid-template-columns:1fr}
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr);gap:30px 16px}
  .contact-split,.form-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .pm-slide-grid{grid-template-columns:1fr}
  .pm-arrow-left{left:0;margin-left:0}.pm-arrow-right{right:0;left:auto;margin-left:0}
  .paintmayer-image,.paintmayer-image.small,.paintmayer-image.tall{height:340px}
}
@media (max-width:600px){
  body{font-size:16px}
  .container,.paintmayer-container{padding:0 18px}
  .card-grid,.gallery{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__actions .btn{justify-content:center}
  .cta-contact{flex-direction:column;gap:12px}
}

/* ---- reviews grid (responsive) + polish ---- */
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:900px){.reviews-grid{grid-template-columns:1fr}}
.section--ink .kicker{color:#fff}

/* ---- Referenzen category filter (tidy bar + dropdowns) ---- */
.ref-filter{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin:0 auto 40px;max-width:960px}
.ref-chip{font:600 14px/1 var(--font);color:var(--body);background:#fff;border:1px solid var(--line);border-radius:0;padding:12px 18px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:background .2s,color .2s,border-color .2s,box-shadow .2s;white-space:nowrap}
.ref-chip b{font-weight:600;color:var(--muted);font-size:12px;transition:color .2s}
.ref-chip:hover{border-color:var(--ink);color:var(--ink)}
.ref-chip.is-active{background:var(--red);border-color:var(--red);color:#fff;box-shadow:none}
.ref-chip.is-active b{color:rgba(255,255,255,.85)}
.ref-chip .fcaret{font-size:10px;opacity:.6;margin-left:1px}
/* dropdown groups (Luftgekühlt / Wassergekühlt) */
.ref-fdrop{position:relative;display:inline-flex}
.ref-chip--top.has-active-child{border-color:var(--red);color:var(--red)}
.ref-chip--top.has-active-child b{color:var(--red)}
.ref-fmenu{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(6px);display:flex;flex-direction:column;gap:4px;min-width:210px;background:#fff;border:1px solid var(--line);border-radius:0;box-shadow:none;padding:8px;opacity:0;visibility:hidden;transition:.2s var(--ease);z-index:30}
.ref-fdrop:hover .ref-fmenu,.ref-fdrop:focus-within .ref-fmenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.ref-fmenu::before{content:"";position:absolute;top:-8px;left:0;right:0;height:8px}
.ref-fmenu .ref-chip{border:0;border-radius:0;justify-content:space-between;width:100%;padding:11px 14px}
.ref-fmenu .ref-chip:hover{background:var(--bg-soft);color:var(--ink)}
.ref-fmenu .ref-chip.is-active{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:none}
.ref-fmenu .ref-chip.is-active b{color:rgba(255,255,255,.8)}
.ref-empty{text-align:center;color:var(--muted);padding:50px 0;font-size:18px}
@media(max-width:900px){
  /* flatten dropdowns to inline wrapping chips on touch */
  .ref-fdrop{display:contents}
  .ref-fmenu{display:contents;visibility:visible;opacity:1}
  .ref-chip .fcaret{display:none}
  .ref-fmenu .ref-chip{width:auto;visibility:visible;border:1px solid var(--line);border-radius:0;justify-content:center;background:var(--bg-soft);padding:10px 14px}
  .ref-fmenu .ref-chip.is-active{background:var(--ink)}
}
@media(max-width:600px){.ref-filter{gap:6px}.ref-chip{padding:10px 14px;font-size:13px}}

/* ---- Team page (Das Team) ---- */
.tm-statement{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center}
.tm-statement__text .kicker{margin-bottom:14px}
.tm-quote{font-family:var(--font);font-size:clamp(17px,1.6vw,20px);line-height:1.75;color:var(--ink);font-weight:500;margin:0}
.tm-statement__media img{width:100%;border-radius:var(--radius);box-shadow:none;display:block}
.tm-featured{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-bottom:44px}
.tm-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.tm-card--featured{flex-direction:row;align-items:stretch}
.tm-card--featured .tm-photo{flex:0 0 190px;aspect-ratio:auto}
.tm-photo{aspect-ratio:1/1;background:var(--bg-soft);overflow:hidden}
.tm-photo img{width:100%;height:100%;object-fit:cover;display:block}
.tm-mono{display:flex;align-items:center;justify-content:center;background:linear-gradient(140deg,#202020,#3a3a3a)}
.tm-mono span{font-family:var(--font-ext),var(--font);font-weight:700;font-size:clamp(26px,4vw,42px);color:#fff;letter-spacing:1px}
.tm-info{padding:20px 22px}
.tm-info h3{margin:0 0 3px;font-size:19px}
.tm-role{color:var(--red);font-weight:600;font-size:13.5px;margin:0}
.tm-bio{color:var(--body);font-size:14.5px;line-height:1.7;margin:12px 0 0}
.tm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.tm-grid--bio{grid-template-columns:repeat(2,1fr)}
.tm-grid--bio .tm-card{flex-direction:row;align-items:stretch}
.tm-grid--bio .tm-photo{flex:0 0 170px;aspect-ratio:auto}
.tm-groupshot img{width:100%;border-radius:var(--radius);box-shadow:none;display:block}
.tm-founder{max-width:880px;margin:0 auto;text-align:center}
.tm-founder blockquote{margin:0;font-family:var(--font);font-size:clamp(17px,1.7vw,21px);line-height:1.75;color:var(--ink);font-weight:500;font-style:italic}
.tm-founder__sig{margin:22px 0 0;font-weight:700;color:var(--red)}
.tm-founder__sig span{display:block;font-weight:500;color:var(--body);font-size:14px;margin-top:4px}
@media(max-width:900px){.tm-statement,.tm-featured{grid-template-columns:1fr}.tm-grid{grid-template-columns:repeat(2,1fr)}.tm-grid--bio{grid-template-columns:1fr}.tm-grid--bio .tm-card{flex-direction:column}.tm-grid--bio .tm-photo{flex:none;aspect-ratio:16/10}.tm-card--featured{flex-direction:column}.tm-card--featured .tm-photo{flex:none;aspect-ratio:16/10}}

/* ---- mobile shrink fixes ---- */
.paintmayer-grid-2>*,.paintmayer-grid-1>*,.feature-row>*,.svc-grid>*,.card-grid>*,.pm-slide-grid>*,.reviews-grid>*,.paintmayer-box-grid>*,.contact-split>*,.form-grid>*{min-width:0}
.paintmayer-text,.paintmayer-text p,.paintmayer-text li,.article,.article p,.article li,.pm-step-text,.svc-card__body p{overflow-wrap:break-word}
.pm-process-module{overflow:hidden}
.paintmayer-container,.container{overflow-x:clip}

/* ---- Constrain flowing content placed directly in <main> (custom service/pillar pages) ----
   Full-bleed <section> bands (e.g. "Passende Referenzen") are intentionally left edge-to-edge;
   everything else gets the same 1240px centered column + gutters as the rest of the site. */
main>*:not(section){max-width:var(--maxw);margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px;box-sizing:border-box}
@media (max-width:600px){main>*:not(section){padding-left:18px;padding-right:18px}}

/* ---- Firmen-Timeline (Die Firma) ---- */
.paintmayer-timeline{position:relative;max-width:1000px;margin:12px auto 0;padding:20px 0}
.paintmayer-timeline::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--line);transform:translateX(-50%)}
.paintmayer-timeline-item{position:relative;width:50%;padding:14px 44px 14px 0;box-sizing:border-box}
.paintmayer-timeline-item.left{left:0;text-align:right}
.paintmayer-timeline-item.right{left:50%;padding:14px 0 14px 44px;text-align:left}
.paintmayer-timeline-dot{position:absolute;top:26px;width:18px;height:18px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px #fff,0 0 0 6px rgba(192,0,27,.2);z-index:2}
.paintmayer-timeline-item.left .paintmayer-timeline-dot{right:-9px}
.paintmayer-timeline-item.right .paintmayer-timeline-dot{left:-9px}
.paintmayer-timeline-content{display:inline-block;text-align:left;background:#fff;border:1px solid var(--line);border-radius:0;padding:22px 26px;box-shadow:none;transition:transform .25s var(--ease),box-shadow .25s;max-width:100%}
.paintmayer-timeline-content:hover{box-shadow:none}
.paintmayer-timeline-year{display:inline-block;font-family:var(--font-ext);font-weight:700;font-size:15px;letter-spacing:2px;color:var(--red);margin-bottom:6px}
.paintmayer-timeline-content h3{margin:0 0 8px;font-size:20px;line-height:1.2}
.paintmayer-timeline-content p{margin:0;font-size:15px;line-height:1.7;color:var(--body)}
@media(max-width:760px){
  .paintmayer-timeline::before{left:19px}
  .paintmayer-timeline-item,.paintmayer-timeline-item.left,.paintmayer-timeline-item.right{width:100%;left:0;text-align:left;padding:10px 0 10px 50px}
  .paintmayer-timeline-item .paintmayer-timeline-dot{left:11px;right:auto}
}

/* ============================================================
   DISPLAY-TYPOGRAFIE — 911 Porscha (wie auf paintmayer.com)
   ------------------------------------------------------------
   Die Schrift hat eine Versalhoehe von nur 485/1000 em. Damit die
   Ueberschriften optisch so gross wirken wie zuvor in Helvetica
   Neue Bold (Versalhoehe ~717/1000), brauchen sie rund den
   1,45-fachen Schriftgrad. Es gibt ausschliesslich einen Regular-
   Schnitt, deshalb font-synthesis:none — sonst rechnet der Browser
   bei font-weight:700 einen unsauberen Fettschnitt dazu.
   Umlaute sitzen konstruktionsbedingt hoch (Punkte bei 543–649),
   darum eine Zeilenhoehe, die diesen Ueberstand aufnimmt.
   ============================================================ */
h1,h2,
.paintmayer-text h1,.paintmayer-text h2,
.hero h1,.hero--page h1,
.feature-row--split h1,
.article h1{
  font-family:var(--font-display);
  font-weight:400;
  font-synthesis:none;
  letter-spacing:.015em;
  text-transform:uppercase;
  -webkit-font-smoothing:antialiased;
  text-wrap:balance;
  hyphens:manual;
  -webkit-hyphens:manual;
  word-break:normal;
  overflow-wrap:break-word;
}
h1,.paintmayer-text h1,.article h1{font-size:clamp(23px,3.5vw,46px);line-height:1.12;margin-bottom:.5em}
h2,.paintmayer-text h2{font-size:clamp(20px,2.9vw,38px);line-height:1.14;margin-bottom:.5em}
.hero h1{font-size:clamp(24px,3.6vw,48px);line-height:1.12;max-width:26ch}
.hero--page h1{font-size:clamp(23px,3.5vw,46px)}
.feature-row--split h1{font-size:clamp(18px,1.85vw,24px);line-height:1.2}

/* Farbfuehrung wie live: Rot auf hellem Grund, Weiss auf dunklem */
h1,h2,.paintmayer-text h1,.paintmayer-text h2,.article h1{color:var(--ink)}
.section--ink h1,.section--ink h2,
.paintmayer-section.dark .paintmayer-text h1,.paintmayer-section.dark .paintmayer-text h2,
.paintmayer-section.red h1,.paintmayer-section.red h2,
.hero h1,.hero--page h1{color:#fff}

/* H3/H4 bleiben Helvetica Neue Bold — wie auf der Live-Seite */
h3,h4,h5,.paintmayer-text h3,.paintmayer-text h4{font-family:var(--font);font-weight:700;text-transform:uppercase}

/* ============================================================
   UEBERGANG HERO -> INHALT
   Der harte Schnitt Schwarz/Weiss wird aufgeloest: der folgende
   Abschnitt beginnt in der Hero-Farbe und blendet ueber rund
   150px in seinen eigenen Grund aus. Der Hero selbst bekommt
   einen leichten Verlauf, damit die Kante unten exakt --ink ist.
   ============================================================ */
.hero--page,.hero--sm{background-image:linear-gradient(180deg,#0e0e0e 0%,var(--ink) 100%)}
.hero:not(:has(.hero__media))::after{display:none}

.hero:not(.hero--video) + main > section:first-child:not(.dark):not(.section--ink),
.hero:not(.hero--video) + section:not(.dark):not(.section--ink){
  padding-top:clamp(58px,6.2vw,92px);
}

/* In schmalen Spalten (zweispaltige Bloecke, Karten) laeuft Porscha sonst
   ueber - dort kleinere Grade. */
.paintmayer-grid-2 .paintmayer-text h1,
.paintmayer-grid-2 .paintmayer-text h2,
.feature-row .paintmayer-text h1,
.feature-row .paintmayer-text h2,
.feature-copy h1,.feature-copy h2,
.card h2,.card h3{font-size:clamp(18px,1.85vw,24px);line-height:1.2}
@media (max-width:900px){
  h1,.paintmayer-text h1,.article h1,.hero h1,.hero--page h1{font-size:clamp(23px,4.4vw,36px)}
  h2,.paintmayer-text h2{font-size:clamp(20px,3.6vw,30px)}
}

/* ============================================================
   MOTORENBAU — Highlight-Projekte, weiterfuehrende Themen
   ============================================================ */
.pm-highlights .section-head,.pm-topics-head{margin-bottom:clamp(38px,5vw,64px)}
.section-head .lead{margin:0}
.pm-project{margin-bottom:clamp(44px,6vw,84px)}
.pm-project:last-child{margin-bottom:0}
.pm-project .paintmayer-text h3{margin:0 0 18px;color:var(--ink);font-size:clamp(17px,1.6vw,21px);letter-spacing:1.2px}
.pm-project__img img{width:100%;height:100%;max-height:420px;object-fit:cover;border-radius:2px}
.pm-project__img--soon{display:flex;align-items:center;justify-content:center;min-height:260px;
  background:repeating-linear-gradient(135deg,#ececeb 0 12px,#e5e5e4 12px 24px);border-radius:2px}
.pm-project__img--soon span{font-family:var(--font-ext);font-size:12px;font-weight:700;letter-spacing:3px;
  text-transform:uppercase;color:#9a9a9a}

.pm-topics{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:8px}
.pm-topic{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 24px;background:var(--bg-soft);border-left:3px solid var(--red);
  font-weight:600;color:var(--ink);transition:background .25s var(--ease),transform .25s var(--ease)}
.pm-topic i{font-style:normal;color:var(--red);font-size:18px;transition:transform .25s var(--ease)}
.pm-topic:hover{background:#ececeb;transform:translateX(3px)}
.pm-topic:hover i{transform:translateX(4px)}

@media (max-width:860px){
  .pm-project__img img{max-height:300px}
}

/* Kleine Displays: lange Button-Beschriftungen und Karten-Ueberschriften
   duerfen umbrechen, statt aus dem Layout zu laufen. */
@media (max-width:640px){
  .btn{white-space:normal;text-align:center}
  .rcard__body h3{letter-spacing:1px;hyphens:manual;-webkit-hyphens:manual;overflow-wrap:break-word}
}

/* Hero mit Bild: unten sauber nach --ink auslaufen lassen, damit der
   Anschluss an den folgenden Abschnitt nahtlos bleibt. */
.hero:has(.hero__media)::after{background:linear-gradient(180deg,rgba(17,17,17,.58) 0%,rgba(17,17,17,.32) 30%,rgba(20,20,20,.60) 70%,rgba(23,23,23,.94) 92%,var(--ink) 100%),linear-gradient(90deg,rgba(17,17,17,.58) 0%,rgba(17,17,17,.22) 48%,rgba(17,17,17,0) 74%)}
.hero--video::after{display:none}
.hero__media img{filter:saturate(.92) contrast(1.02)}

/* ============================================================
   LESETYPOGRAFIE — Fliesstext-Bloecke (.prose)
   Zeilenlaenge auf ~72 Zeichen begrenzt (vorher lief der Text
   ueber die volle Containerbreite von 1192px), klarere Abstaende
   vor Zwischenueberschriften, Listen mit den roten Haken des
   uebrigen Designs.
   ============================================================ */
.paintmayer-container > .paintmayer-text,
.paintmayer-text.prose{max-width:76ch}

.prose > p,.paintmayer-container > .paintmayer-text > p{
  font-size:17.5px;line-height:1.75;color:var(--body);margin:0 0 1.15em;text-wrap:pretty}
.prose > p:first-of-type{font-size:20px;line-height:1.62;color:#3d3d3d}
.prose > p:first-of-type:has(img){font-size:17.5px}
.prose > *:first-child{margin-top:0}
.prose h2,.prose h3,.prose h4{margin-top:1.9em;margin-bottom:.75em;color:var(--ink)}
.prose h2{margin-top:1.5em}
.prose strong,.prose b{color:var(--ink)}
.prose a:not(.btn){color:var(--red);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:not(.btn):hover{color:var(--ink)}
.prose img{margin:2em 0}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}

/* Aufzaehlungen: rote Haken statt Punkte, enger gesetzt */
.prose ul{list-style:none;padding:0;margin:0 0 1.5em}
.prose ul li{position:relative;padding-left:30px;margin:0 0 11px;line-height:1.65}
.prose ul li::before{content:"";position:absolute;left:0;top:.6em;width:11px;height:6px;
  border-left:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(-45deg)}
.prose ul li p{margin:0}
.prose ul li > div{display:contents}
.prose ol{padding-left:1.35em;margin:0 0 1.5em}
.prose ol li{margin-bottom:11px;line-height:1.65;padding-left:6px}
.prose ol li::marker{color:var(--red);font-weight:700}
.prose ol li p{margin:0}

@media (max-width:640px){
  .prose > p,.paintmayer-container > .paintmayer-text > p{font-size:17px}
  .prose > p:first-of-type{font-size:18.5px}
}

/* ============================================================
   HEADER — Schutz gegen Ueberlappung
   Die Menueleiste ist rechtsbuendig (justify-content:flex-end).
   Passt eine Zeile nicht, laeuft der Ueberhang bei flex-end nach
   LINKS – also quer ueber das Logo. Genau das war zu sehen.
   Deshalb: Container bricht nicht um, die Navigation darf
   schrumpfen (min-width:0) und wird links hart begrenzt.
   ============================================================ */
.site-header .container{flex-wrap:nowrap}
.brand{flex:0 0 auto;position:relative;z-index:2}
.nav{flex:1 1 auto;min-width:0;justify-content:flex-end}
/* Die Menuepunkte fuellen die Headerhoehe, damit die Dropdowns buendig
   an der Unterkante des Headers ansetzen und der Weg dorthin nicht
   ueber "totes" Gebiet fuehrt. */
@media (min-width:861px){
  .site-header .container{padding-top:0;padding-bottom:0}
  .nav{align-self:stretch}
  .nav>ul{height:100%;align-items:stretch;row-gap:0}
  .nav>ul>li{display:flex;align-items:center}
  .nav>ul>li>.nav-top,.nav>ul>li>.nav-shop{display:inline-flex;align-items:center}
  .submenu{top:100%}
  /* Aktiv-Marker sitzt jetzt auf der Headerkante */
  .nav .current>.nav-top::after,.nav a.current::after{bottom:0;height:2px}
  /* Hover fuellt die Headerhoehe statt einer kleinen Pille */
  .nav>ul>li>.nav-top{height:100%;padding-left:clamp(9px,1vw,15px);padding-right:clamp(9px,1vw,15px)}
  .nav-top:hover,.nav>ul>li>a.nav-top:hover{background:rgba(0,0,0,.04)}
  .nav-shop{align-self:center}
}
.nav>ul{min-width:0;max-width:100%}

/* ============================================================
   MEGA-MENUE „Leistungen"
   Vollbreites, dunkles Panel unter dem Header. Es haengt am
   Header (nicht am Menuepunkt) und laeuft von Kante zu Kante –
   dadurch kann es nicht verrutschen, egal wo der Menuepunkt sitzt.
   Der Inhalt sitzt auf derselben Breite wie der Seiteninhalt.
   ============================================================ */
.nav>ul>li.has-mega{position:static}
.nav-top[role="button"]{cursor:pointer;user-select:none}
/* Der Menuepunkt selbst ist der Bezug fuer den roten Aktiv-Balken.
   Ohne das haengt der Balken am Header und zieht sich als Linie
   ueber die ganze Breite, weil das <li> position:static ist. */
.nav>ul>li.has-mega>.nav-top{position:relative}
.has-mega>.nav-top::before{content:"▾";order:2;font-size:10px;opacity:.6;margin-left:3px;
  display:inline-block;transition:transform .25s var(--ease),opacity .2s}
.has-mega.open-mega>.nav-top::before{transform:rotate(180deg);opacity:1}
.has-mega.open-mega>.nav-top{color:var(--red)}

.megamenu{
  position:absolute;top:100%;left:0;right:0;
  background:#fff;
  border-top:1px solid var(--line);
  box-shadow:0 30px 54px -26px rgba(0,0,0,.22);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .24s var(--ease),transform .3s var(--ease),visibility .3s;
  z-index:30}
.has-mega.open-mega .megamenu,
.has-mega:hover .megamenu,
.has-mega:focus-within .megamenu{opacity:1;visibility:visible;transform:translateY(0)}
/* dasselbe Verhalten fuer das kleine Dropdown */
.has-sub.open-mega>.submenu{opacity:1;visibility:visible;transform:translateY(0)}
.has-sub.open-mega>.nav-top{color:var(--red)}

.megamenu__inner{
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(34px,3.4vw,50px) 24px clamp(38px,3.8vw,54px);
  display:grid;grid-template-columns:1fr 1fr 1.15fr 1.25fr;
  gap:clamp(28px,3vw,52px);align-items:start}

/* Spaltenkopf */
.megamenu .mega-head{display:block;font-family:var(--font);font-weight:700;font-size:14px;
  letter-spacing:1.9px;text-transform:uppercase;color:var(--ink);background:none;white-space:normal;
  padding:0 0 15px;margin:0 0 10px;border-bottom:1px solid var(--line)}
.megamenu .mega-head span{display:block;margin-top:8px;font-size:11.5px;font-weight:700;
  letter-spacing:1.6px;color:var(--red);text-transform:uppercase}
.megamenu a.mega-head{transition:color .2s var(--ease),border-color .2s var(--ease)}
.megamenu a.mega-head:hover{color:var(--red);background:none;border-bottom-color:rgba(192,0,27,.55)}
.mega-col>ul{list-style:none;margin:0;padding:0}

/* Links */
.megamenu a:not(.mega-head):not(.mega-teaser){
  position:relative;display:block;white-space:nowrap;
  font-size:14.5px;font-weight:600;letter-spacing:.01em;
  color:var(--body);background:none;
  padding:9px 0;margin:0;
  transition:color .18s var(--ease),padding-left .24s var(--ease)}
.megamenu a:not(.mega-head):not(.mega-teaser)::before{
  content:"";position:absolute;left:0;top:50%;width:9px;height:1px;background:var(--red);
  transform:translateY(-50%) scaleX(0);transform-origin:left center;opacity:0;
  transition:transform .24s var(--ease),opacity .2s}
.megamenu a:not(.mega-head):not(.mega-teaser):hover{color:var(--ink);background:none;padding-left:19px}
.megamenu a:not(.mega-head):not(.mega-teaser):hover::before{transform:translateY(-50%) scaleX(1);opacity:1}
.megamenu a.current{color:var(--red)}
.megamenu a.current:hover{color:var(--red)}
.mega-col:nth-child(3) a:not(.mega-head){white-space:normal;line-height:1.35}

/* Teaser-Karte: Bild oben, Text darunter – wirkt ruhiger als Text
   ueber Bild und braucht keinen extremen Hochkant-Beschnitt. */
.megamenu a.mega-teaser{position:relative;display:flex;flex-direction:column;align-self:start;
  white-space:normal;padding:0;margin:0;border-radius:0;overflow:hidden;
  background:var(--bg-soft);border:1px solid var(--line);
  transition:border-color .25s var(--ease),background .25s var(--ease)}
.megamenu a.mega-teaser:hover{border-color:rgba(192,0,27,.45);background:#f1f1f1}
.mega-teaser__media{position:relative;display:block;width:100%;height:0;flex:0 0 auto;
  padding-bottom:62.5%;overflow:hidden;background:#e8e8e8}
.mega-teaser__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.88);transition:transform .7s var(--ease)}
.megamenu a.mega-teaser:hover .mega-teaser__media img{transform:scale(1.05)}
.mega-teaser__body{display:flex;flex-direction:column;padding:20px 22px 22px}
.mega-teaser__kicker{font-size:10.5px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--red)}
.mega-teaser strong{display:block;margin:10px 0 8px;font-size:19px;line-height:1.24;color:var(--ink)}
.mega-teaser__text{font-size:13.5px;line-height:1.55;color:var(--body);margin-bottom:16px}
.mega-teaser__cta{display:inline-flex;align-items:center;gap:9px;
  font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink)}
.mega-teaser__cta i{font-style:normal;color:var(--red);transition:transform .25s var(--ease)}
.megamenu a.mega-teaser:hover .mega-teaser__cta i{transform:translateX(5px)}

/* Kleines Dropdown „Die Motorenmanufaktur" in derselben Sprache */
.submenu{background:#fff;border:0;border-top:1px solid var(--line);
  box-shadow:0 26px 46px -26px rgba(0,0,0,.24);padding:10px 0;min-width:268px}
.submenu a{position:relative;color:var(--body);font-size:14.5px;font-weight:600;
  padding:11px 22px;transition:color .18s var(--ease),padding-left .24s var(--ease)}
.submenu a::before{content:"";position:absolute;left:22px;top:50%;width:9px;height:1px;
  background:var(--red);transform:translateY(-50%) scaleX(0);transform-origin:left center;opacity:0;
  transition:transform .24s var(--ease),opacity .2s}
.submenu a:hover{color:var(--ink);background:none;padding-left:41px}
.submenu a:hover::before{transform:translateY(-50%) scaleX(1);opacity:1}
.submenu a.current{color:var(--red)}
.submenu a.current:hover{color:var(--red)}

/* Shop als abgesetzter Button */
.nav-shop{margin-left:14px;border:1px solid rgba(0,0,0,.2);padding:10px 20px!important;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;font-size:12px;
  transition:background .22s var(--ease),color .22s,border-color .22s}
.nav-shop:hover{background:var(--ink);border-color:var(--ink);color:#fff!important}

/* Der rote Aktiv-Balken gilt nur fuer die oberste Menuezeile. */
.megamenu a.current::after,.submenu a.current::after{display:none}

/* ============================================================
   BURGER-MENUE — Dropdowns als helles Akkordeon
   Muss nach den Desktop-Regeln stehen, sonst gewinnen diese.
   ============================================================ */
@media (max-width:860px){
  .nav>ul>li.has-mega{position:relative}
  .megamenu{position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;background:#f6f6f6;margin:2px 0 6px 12px}
  .megamenu__inner{grid-template-columns:1fr;gap:14px;padding:12px 4px 14px;max-width:none}
  .mega-head{color:var(--ink);border-bottom-color:rgba(0,0,0,.12);
    padding:6px 14px 10px;margin-bottom:2px;font-size:11px}
  .mega-head span{margin-top:4px}
  .megamenu a:not(.mega-head):not(.mega-teaser){white-space:normal;color:#1a1a1a;
    font-size:15px;padding:11px 14px}
  .megamenu a:not(.mega-head):not(.mega-teaser):hover{color:var(--red);padding-left:14px}
  .megamenu a:not(.mega-head):not(.mega-teaser)::before{display:none}
  .megamenu a.mega-teaser{display:none}
  .submenu{background:#f6f6f6;border:0;box-shadow:none;padding:2px;
    margin:2px 0 6px 12px;min-width:0}
  .submenu a{color:#1a1a1a;padding:11px 14px}
  .submenu a:hover{color:var(--red);padding-left:14px}
  .submenu a::before{display:none}
  .nav-shop{margin:10px 0 0;border:0;border-top:1px solid var(--line);
    padding:16px!important;font-size:16px;letter-spacing:0;text-transform:none;color:var(--red)!important}
  /* Akkordeon: Untermenues zunaechst zu, der aktive Bereich ist offen */
  .has-sub>.submenu,.has-sub>.megamenu{display:none}
  .has-sub.open>.submenu,.has-sub.open>.megamenu{display:block}
  .has-sub>.nav-top::before{content:"▾";order:2;margin-left:auto;font-size:11px;opacity:.65;
    transition:transform .2s var(--ease);display:inline-block}
  .has-sub.open>.nav-top::before{transform:rotate(180deg)}
  .has-mega.open-mega>.nav-top{color:inherit}
}

/* ============================================================
   LESBARKEIT AUF INHALTS- UND FORMULARSEITEN
   Der Fliesstext steht in Helvetica Neue *Medium* – es gibt also
   keinen leichteren Schnitt. Hierarchie muss deshalb ueber Groesse,
   Farbe und Abstand entstehen, nicht ueber die Strichstaerke.
   Vorher hatten Kicker, Lead, Fliesstext und Formularlabels
   praktisch denselben Ton und wirkten dadurch gleichwertig.
   ============================================================ */

/* Kicker als echte Marke, nicht als Textzeile (wie .paintmayer-kicker) */
.kicker{font-size:12px;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;
  line-height:1.4;margin:0 0 18px}
.hero .kicker{font-size:12.5px;letter-spacing:2.6px}

/* Lead deutlich naeher an der Ueberschrift, Fliesstext tritt zurueck */
.lead,.prose > p:first-of-type{font-size:clamp(18.5px,1.75vw,21px);line-height:1.6;
  color:#2f2f2f;margin-bottom:1.05em}
:root{--body:#5c5c5c}
.contact-split > div > p:not(.lead),.prose > p:not(:first-of-type){font-size:17px;line-height:1.78}

/* Mehr Luft unter den Ueberschriften – die Porscha sitzt optisch hoch */
.contact-split h2,.contact-split h1{margin-bottom:.55em}

/* ---- Formular ---- */
.form-card{background:var(--bg-soft);border:1px solid var(--line);
  padding:clamp(26px,3.4vw,40px)}
.field{gap:9px;margin-bottom:20px}
.field label{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#6f6f6f}
.field label .req{color:var(--red);margin-left:2px}
.field input,.field select,.field textarea{background:#fff;padding:14px 16px;
  border-color:rgba(0,0,0,.14)}
.field input::placeholder,.field textarea::placeholder{color:#9b9b9b}
.form-grid{gap:0 22px}
.check{font-size:14.5px;line-height:1.6;color:var(--body)}

/* ---- Info-Liste in der Seitenspalte ---- */
.info-list li{padding:18px 0;gap:16px;align-items:flex-start}
.info-list b{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#6f6f6f;margin-bottom:4px}
.info-list li,.info-list a{font-size:16.5px;color:var(--ink);line-height:1.5}
.info-list a:hover{color:var(--red)}
.info-list .ic{flex:0 0 40px;height:40px;background:#fff;border:1px solid var(--line)}

/* Zwischenueberschriften in der Kontakt-Seitenspalte bekommen Luft
   und eine feine Trennlinie, damit die Bloecke auseinanderfallen. */
.contact-split .contact-photo + h3{margin-top:34px}
.contact-split h3{font-size:13px;letter-spacing:2.2px;padding-bottom:12px;margin-bottom:6px;
  border-bottom:1px solid var(--line)}
.contact-split h3 + .info-list li:first-child{border-top:0}

/* ============================================================
   TYPOGRAFIE-FEINSCHLIFF
   Zwei Ursachen fuer den „billigen" Eindruck:
   1) Der Fliesstext stand in mittlerem Grau (#5c5c5c). Hochwertige
      Marken setzen Text dunkel – Kontrast wirkt teuer, Grau wirkt
      nach Standard-Theme.
   2) „HN" hat nur zwei Schnitte: Medium (300–550) und Bold
      (551–900). Jedes font-weight:600 im Menue landete damit auf
      dem FETTEN Schnitt – daher die klobige Anmutung.
      Navigation und Menuelinks laufen jetzt auf 500 (Medium),
      echte Labels bleiben bewusst auf 700.
   ============================================================ */
:root{
  --body:#3a3a3a;      /* Fliesstext: dunkles Anthrazit statt Mittelgrau */
  --muted:#7a7a7a;     /* nur noch fuer Kleinlabels */
  --line:rgba(0,0,0,.09);
}
body{letter-spacing:.002em}

/* Navigation: Medium statt Bold, etwas mehr Laufweite */
.nav a,.nav .nav-top{font-weight:500;letter-spacing:.012em;color:#242424}
.nav-shop{font-weight:700;letter-spacing:.1em}
.megamenu a:not(.mega-head):not(.mega-teaser){font-weight:500;color:#3a3a3a}
.megamenu a:not(.mega-head):not(.mega-teaser):hover{color:var(--ink)}
.submenu a{font-weight:500;color:#3a3a3a}
.submenu a:hover{color:var(--ink)}

/* Fliesstext */
.prose > p,.contact-split > div > p:not(.lead),.paintmayer-text p,.paintmayer-text li{color:var(--body)}
.lead,.prose > p:first-of-type{color:#232323}

/* ---- Kontaktspalte: Icons statt Emoji, klare Label-Wert-Ordnung ---- */
.info-list li{padding:17px 0;gap:15px;align-items:flex-start;border-bottom:1px solid var(--line)}
.info-list li:first-child{border-top:1px solid var(--line)}
.info-list svg.ic{flex:0 0 21px;width:21px;height:21px;margin-top:3px;
  background:none;border:0;color:var(--red)}
.info-list b{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.info-list li,.info-list a{font-size:17px;color:var(--ink);line-height:1.45;font-weight:500}
.info-list a{transition:color .2s var(--ease)}
.info-list a:hover{color:var(--red)}

/* ---- Oeffnungszeiten ---- */
.hours{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.hours td{padding:11px 0;border-bottom:1px solid var(--line);font-size:15.5px;color:var(--body)}
.hours td:last-child{text-align:right;color:var(--ink);font-weight:500;white-space:nowrap}
.hours tr:last-child td{border-bottom:0}

/* ---- Formular ---- */
.form-card{background:var(--bg-soft);border:0;padding:clamp(28px,3.6vw,44px)}
.field input,.field select,.field textarea{border-color:rgba(0,0,0,.13);font-weight:500}
.form-note{font-size:12.5px;line-height:1.6;color:var(--muted);margin:14px 0 0}
.check{font-size:14.5px;line-height:1.65;color:var(--body)}

/* ---- Kundenstimmen ---- */
.stars{color:var(--red);font-size:15px;letter-spacing:3px;margin-bottom:14px}
.review-text{font-size:16.5px;line-height:1.68;color:var(--ink);font-weight:500}
.review-src{margin-top:16px;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}

/* Zentrierte Abschnittsköpfe: etwas breiter, damit lange Versal-
   Überschriften in der breit laufenden Porscha nicht trennen. */
.section-head{max-width:900px}
.section-head h2{font-size:clamp(20px,2.6vw,34px)}

/* Auf dunklen und roten Abschnitten muss der Fliesstext hell bleiben –
   die neue --body-Farbe darf dort nicht durchschlagen. */
.paintmayer-section.dark .prose > p,
.paintmayer-section.dark .paintmayer-text p,
.paintmayer-section.dark .paintmayer-text li,
.section--ink .prose > p,
.section--ink .paintmayer-text p,
.section--ink .paintmayer-text li{color:#cfcfcf}
.paintmayer-section.red .prose > p,
.paintmayer-section.red .paintmayer-text p,
.paintmayer-section.red .paintmayer-text li{color:rgba(255,255,255,.92)}
.paintmayer-section.dark .lead,.paintmayer-section.dark .prose > p:first-of-type,
.section--ink .lead,.section--ink .prose > p:first-of-type{color:#fff}
.paintmayer-section.red .lead,.paintmayer-section.red .prose > p:first-of-type{color:#fff}

/* ============================================================
   Kontakt-/Anfrageseiten: ruhigere Textgroessen + klare Bloecke
   (Julian 2026-09-05: „ich weiss nicht wo hin schauen … trenne
   mehr, splitte besser" + Lead war zu gross gegen die Ueberschrift)
   ============================================================ */
.lead,.prose > p:first-of-type{font-size:clamp(17.5px,1.45vw,18.5px);line-height:1.62}
.contact-split > div > p:not(.lead),.prose > p:not(:first-of-type){font-size:16.5px;line-height:1.75}

/* Zwei Spalten deutlicher trennen */
@media (min-width:861px){
  .contact-split{grid-template-columns:1.05fr .95fr;gap:clamp(48px,4.6vw,72px)}
  .contact-split > div + div{border-left:1px solid var(--line);padding-left:clamp(40px,3.6vw,60px)}
}
.contact-split > div > .form-card{margin-top:clamp(28px,3vw,40px)}

/* Bloecke in der Infospalte: Oberlinie, Luft, gleiches Label-Format */
.contact-split h3.block-head{
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);margin:clamp(38px,3.6vw,52px) 0 0;padding:16px 0 0;
  border-top:1px solid var(--ink);border-bottom:0}
.contact-split .contact-photo + h3.block-head{margin-top:clamp(26px,2.4vw,34px)}
.contact-split h3.block-head + .info-list{margin-top:4px}
.contact-split h3.block-head + .info-list li:first-child{border-top:0}

/* Oeffnungszeiten: ein Block, zwei untereinander gesetzte Gruppen —
   nebeneinander wird die Wertespalte in der schmalen Infospalte zu eng */
.hours-grid{margin-top:16px}
.hours-col + .hours-col{margin-top:26px}
.hours-label{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.hours td{padding:10px 0;font-size:15.5px}
.hours td:first-child{width:40%}

.map-embed{margin-top:18px}

@media (max-width:860px){
  .contact-split > div + div{border-left:0;padding-left:0;margin-top:clamp(40px,8vw,56px)}
}
.contact-split .info-list li:last-child{border-bottom:0}

/* ============================================================
   Team-Seite — Format wie auf der Live-Seite (Julian 2026-09-05)
   Hover auf ein Portrait blendet das Porträtvideo ein.
   ============================================================ */
.hover-media{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;background:#111}
.hover-media__img,.hover-media__video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transition:opacity .3s var(--ease),transform .5s var(--ease)}
.hover-media__img{opacity:1;transform:scale(1)}
.hover-media__video{opacity:0;pointer-events:none}
.hover-media.active .hover-media__img{opacity:0;transform:scale(1.04)}
.hover-media.active .hover-media__video{opacity:1}
.hover-media.has-video::after{content:"";position:absolute;right:14px;bottom:14px;width:9px;height:9px;
  border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(192,0,27,.22);
  transition:opacity .3s var(--ease);z-index:2}
.hover-media.has-video.active::after{opacity:0}

/* Personen-Zeilen, abwechselnd Bild links / rechts */
.tm-people{background:#000;color:#e7e7e7;padding:clamp(72px,8vw,110px) 0 clamp(80px,9vw,120px)}
.tm-people__head{max-width:820px;margin:0 0 clamp(46px,5vw,72px)}
.tm-people__head h2{color:#fff}
.tm-people__head .lead{color:#c9c9c9}
.tm-people__head .kicker{color:var(--red)}
.tm-person{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);align-items:center;padding:clamp(30px,3.4vw,44px) 0;
  border-top:1px solid rgba(255,255,255,.10)}
.tm-person:first-of-type{border-top:0;padding-top:0}
.tm-person--flip{grid-template-columns:minmax(0,1fr) minmax(0,340px)}
.tm-person--flip .tm-person__media{order:2}
.tm-person__text .tm-role{display:block;font-size:12px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--red);margin:0 0 12px}
.tm-person__text h3{font-family:var(--font);font-size:clamp(21px,2vw,25px);font-weight:700;color:#fff;
  letter-spacing:.01em;text-transform:none;margin:0 0 16px}
.tm-person__text p{font-size:16px;line-height:1.75;color:#c2c2c2;margin:0;max-width:70ch}

/* Mechaniker-Statement */
.tm-band{background:var(--bg-soft) url("/assets/img/2026-02-car-repair-28-3.png") center/cover no-repeat;
  padding:clamp(64px,7vw,100px) 0 clamp(70px,7.5vw,110px)}
.tm-band__head{text-align:center;max-width:900px;margin:0 auto clamp(40px,4.6vw,66px)}
.tm-band__head .kicker{color:#575757;letter-spacing:.25em;margin-bottom:14px}
.tm-statement{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,3vw,44px);align-items:center}
.tm-bubble{position:relative;background:#fff;margin:0;padding:clamp(30px,3.4vw,46px);
  box-shadow:0 26px 50px -34px rgba(0,0,0,.28)}
.tm-bubble p{margin:0;font-size:17.5px;line-height:1.82;font-style:normal;font-weight:400;
  font-synthesis:none;-webkit-font-smoothing:antialiased;color:#3f3f3f;letter-spacing:.003em}
.tm-bubble::after{content:"";position:absolute;left:52px;bottom:-22px;width:0;height:0;
  border:11px solid transparent;border-top:22px solid #fff;border-bottom:0}
.tm-author{display:flex;align-items:center;gap:16px;margin:44px 0 0}
.tm-author img{width:62px;height:62px;border-radius:50%;object-fit:cover;flex:0 0 62px}
.tm-author figcaption{display:flex;flex-direction:column;gap:3px}
.tm-author b{font-size:16px;font-weight:700;color:var(--ink)}
.tm-author span{font-size:14px;color:var(--muted)}
.tm-statement__media img{display:block;width:100%;height:auto}

@media (max-width:860px){
  .tm-person{grid-template-columns:1fr;gap:22px}
  .tm-person--flip .tm-person__media{order:0}
  .tm-person__media{max-width:340px}
  .tm-statement{grid-template-columns:1fr;gap:34px}
  .tm-statement__media{order:-1}
  .tm-bubble::after{left:38px}
}

/* ============================================================
   Karte ueber die volle Breite, Oeffnungszeiten-Karte,
   Google-Bewertungen (Julian 2026-09-05)
   ============================================================ */
h1,h2,h3,.hero h1,.section-head h2{hyphens:manual;-webkit-hyphens:manual;word-break:normal;overflow-wrap:break-word}

/* --- Anfahrt: vollbreites Kartenband --- */
.map-band{background:var(--ink);color:#d8d8d8}
.map-band__head{padding:clamp(38px,4vw,58px) 0 clamp(22px,2.4vw,32px)}
.map-band__head .kicker{color:var(--red);margin-bottom:10px}
.map-band__head p{margin:0;font-size:16.5px;color:#cfcfcf}
.map-band__frame{height:clamp(300px,32vw,450px);overflow:hidden;position:relative}
.map-band__frame > iframe,.map-band__frame > .embed-frame{width:100%;height:100%;min-height:0;border:0;display:block}
.map-band__frame .embed-consent{border-radius:0;height:100%;min-height:0;background:#141414}

/* --- Oeffnungszeiten als ruhige Karte mit Status --- */
.hours-card{background:var(--bg-soft);padding:clamp(20px,2.2vw,28px);margin-top:16px}
.hours-status{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:#2f7d4f;margin-bottom:16px}
.hours-status::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;
  box-shadow:0 0 0 4px rgba(47,125,79,.16)}
.hours-status.is-closed{color:#8a8a8a}
.hours-status.is-closed::before{box-shadow:0 0 0 4px rgba(138,138,138,.16)}
.hours-card .hours-grid{margin-top:0}
.hours-card .hours td{border-bottom-color:rgba(0,0,0,.07)}
.hours tr.is-today td{color:var(--ink);font-weight:700}
.hours tr.is-today td:first-child::before{content:"";display:inline-block;width:6px;height:6px;
  border-radius:50%;background:var(--red);margin-right:9px;vertical-align:middle}

/* --- Google-Bewertungen --- */
.gr{display:grid;grid-template-columns:minmax(0,232px) minmax(0,1fr);
  gap:clamp(28px,3.4vw,52px);align-items:center}
.gr__summary{text-align:center}
.gr__label{font-size:19px;font-weight:700;letter-spacing:.02em;color:var(--ink);margin:0 0 8px}
.gr__stars{color:#f5b301;font-size:23px;letter-spacing:3px;line-height:1;margin-bottom:12px}
.gr__count{font-size:14.5px;color:var(--body);margin:0 0 14px}
.gr__count b{font-weight:700;color:var(--ink)}
.gr__brand{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 16px;
  font-size:18px;font-weight:700;color:#5f6368;letter-spacing:-.01em}
.gr__link{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);border-bottom:1px solid rgba(0,0,0,.25);padding-bottom:2px;transition:color .2s var(--ease)}
.gr__link:hover{color:var(--red);border-color:var(--red)}

.gr__viewport{position:relative;min-width:0}
.gr__track{list-style:none;display:flex;gap:20px;margin:0;padding:4px 2px 18px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none}
.gr__track::-webkit-scrollbar{display:none}
.gr-card{flex:0 0 clamp(250px,25vw,306px);scroll-snap-align:start;background:#fff;
  border:1px solid var(--line);padding:22px 22px 18px;display:flex;flex-direction:column}
.gr-card__head{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.gr-card__avatar{flex:0 0 40px;width:40px;height:40px;border-radius:50%;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700}
.gr-card__who{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto}
.gr-card__who b{font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.gr-card__who span{font-size:12.5px;color:var(--muted)}
.gr-card .gr-g{flex:0 0 20px}
.gr__brand .gr-g{width:22px;height:22px}
.gr-card__stars{color:#f5b301;font-size:14px;letter-spacing:2px;margin-bottom:11px}
.gr-card__text{font-size:15px;line-height:1.65;color:var(--body);margin:0;
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.gr-card.is-open .gr-card__text{display:block;overflow:visible}
.gr-card__more{align-self:flex-start;margin-top:12px;background:none;border:0;padding:0;
  font:inherit;font-size:13.5px;color:var(--muted);cursor:pointer;transition:color .2s var(--ease)}
.gr-card__more:hover{color:var(--red)}
.gr-card__more[hidden]{display:none}
.gr__nav{position:absolute;top:calc(50% - 9px);transform:translateY(-50%);z-index:2;
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;
  color:var(--ink);font-size:20px;line-height:1;cursor:pointer;
  box-shadow:0 10px 22px -14px rgba(0,0,0,.35);transition:opacity .2s var(--ease),color .2s}
.gr__nav:hover{color:var(--red)}
.gr__nav--prev{left:-16px}
.gr__nav--next{right:-16px}
.gr__nav[disabled]{opacity:0;pointer-events:none}

@media (max-width:860px){
  .gr{grid-template-columns:1fr;gap:28px}
  .gr__nav{display:none}
  .gr__track{padding-left:0;padding-right:0}
  .gr-card{flex-basis:min(84vw,300px)}
  .map-band__frame{height:clamp(260px,60vw,360px)}
}
.section:has(+ .map-band){padding-bottom:clamp(44px,4.4vw,66px)}
.map-band + .section{padding-top:clamp(56px,6vw,88px)}
.gr__nav--prev{left:-19px}
.gr__nav--next{right:-19px}
@media (max-width:1330px){.gr__nav--prev{left:-8px}.gr__nav--next{right:-8px}}
/* Kleine Viewports: Display-Grade so weit herunter, dass lange Woerter
   ohne Trennstrich in eine Zeile passen (Julian: kein "POR-SCHE") */
@media (max-width:560px){
  h1,.paintmayer-text h1,.article h1,.hero h1,.hero--page h1{font-size:clamp(18px,5vw,26px)}
  h2,.paintmayer-text h2,.section-head h2,.article h2{font-size:clamp(16px,4.4vw,23px)}
}

/* ============================================================
   CTA-Band ueber dem Footer — 1:1 nach der Live-Seite
   (Julian 2026-09-05: „das finde ich mega, genau 1:1 uebernehmen")
   ============================================================ */
.cta-final{position:relative;display:flex;align-items:center;
  min-height:clamp(360px,37vw,560px);
  background:#000 url("/assets/img/2026-02-paintmayer_motorenmanufaktur.jpg?v=10")
  100% 50%/63% auto no-repeat;color:#fff;overflow:hidden}
.cta-final .container{position:relative;z-index:2;width:100%;
  padding-top:clamp(44px,4.4vw,60px);padding-bottom:clamp(44px,4.4vw,60px)}
.cta-final__kicker{display:block;font-size:12px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:#fff;margin:0 0 18px}
.cta-final__head{font-family:var(--font);font-weight:700;font-synthesis:none;
  font-size:clamp(28px,4.4vw,50px);line-height:1.1;letter-spacing:.005em;text-transform:uppercase;
  color:#fff;margin:0 0 clamp(26px,3vw,40px);max-width:min(20ch,46vw);hyphens:manual;overflow-wrap:break-word}
.cta-final .btn--red{padding:16px 35px}
@media (max-width:900px){
  .cta-final{background-size:118% auto;background-position:50% 100%}
  .cta-final{min-height:0;align-items:flex-start}
  .cta-final .container{padding-top:clamp(56px,9vw,90px);padding-bottom:clamp(190px,44vw,300px)}
  .cta-final__head{max-width:none}
}

/* Footer: Buero- und Servicezeiten */
.footer-grid{grid-template-columns:1.35fr .95fr .95fr 1fr 1fr}
.footer-hours .fh-label{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#8a8a8a;margin:0 0 8px}
.footer-hours .fh-label + dl{margin:0 0 20px}
.footer-hours dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:14px}
.footer-hours dt{color:#b9b9b9}
.footer-hours dd{margin:0;text-align:right;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:1180px){.footer-grid{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}

/* ============================================================
   Hinweis-Popup „Problem mit Ihrem Porsche Motor?"
   erscheint nach 2, 10 und 20 Minuten Verweildauer (Julian 2026-09-06)
   ============================================================ */
.leadpop{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  padding:24px}
.leadpop[hidden]{display:none}
.leadpop__backdrop{position:absolute;inset:0;background:rgba(10,10,10,.62);
  animation:leadpopFade .28s var(--ease) both}
.leadpop__box{position:relative;z-index:2;width:min(560px,100%);background:#fff;
  border-radius:14px;padding:clamp(30px,4vw,46px) clamp(26px,3.6vw,44px) clamp(30px,3.6vw,42px);
  box-shadow:0 40px 80px -36px rgba(0,0,0,.55);text-align:left;
  animation:leadpopIn .34s var(--ease) both}
.leadpop__box h2{font-family:var(--font);font-weight:700;font-synthesis:none;text-transform:none;
  font-size:clamp(22px,2.6vw,31px);line-height:1.22;letter-spacing:0;color:var(--ink);
  margin:0 0 14px;padding-right:34px;hyphens:manual}
.leadpop__box p{font-size:16.5px;line-height:1.6;color:var(--body);margin:0 0 26px}
.leadpop__box .btn{width:auto}
.leadpop__close{position:absolute;top:14px;right:16px;width:38px;height:38px;border:0;background:none;
  font-size:26px;line-height:1;color:#8a8a8a;cursor:pointer;border-radius:50%;
  transition:color .2s var(--ease),background .2s var(--ease)}
.leadpop__close:hover{color:var(--ink);background:rgba(0,0,0,.05)}
@keyframes leadpopFade{from{opacity:0}to{opacity:1}}
@keyframes leadpopIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .leadpop__backdrop,.leadpop__box{animation:none}
}
@media (max-width:560px){
  .leadpop{padding:16px}
  .leadpop__box{border-radius:12px}
  .leadpop__box .btn{width:100%;justify-content:center}
}

/* Seitenspezifisches CTA (nur /porsche-motorenbau/): Bild als Hintergrund, zentriert */
.cta-band{position:relative;color:#fff;overflow:hidden}
.cta-band__media,.cta-band__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta-band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(17,17,17,.9),rgba(17,17,17,.62))}
.cta-band .container{position:relative;z-index:2;text-align:center;padding:clamp(60px,8vw,110px) 24px}
.cta-band h2{color:#fff}

/* ============================================================
   Kategorieseiten unter /category/ (Julian 2026-09-06:
   „es soll wirklich eine eigene Seite werden, nicht nur ein Filter")
   ============================================================ */
.ref-chip{text-decoration:none}
.ref-chip:hover{text-decoration:none}
.cat-intro{max-width:78ch;margin:26px 0 0}
.cat-intro p{font-size:16.5px;line-height:1.78;color:var(--body);margin:0 0 1.05em}
.cat-intro p:first-of-type{font-size:clamp(17.5px,1.45vw,18.5px);line-height:1.62;color:#232323}
.cat-nav{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;
  margin:clamp(30px,3.4vw,44px) 0 0;border-top:1px solid var(--line);padding-top:clamp(24px,2.6vw,32px)}
.cat-nav a{display:inline-flex;align-items:center;font-size:13.5px;font-weight:500;color:var(--body);
  background:#fff;border:1px solid var(--line);padding:9px 15px;transition:border-color .2s var(--ease),color .2s}
.cat-nav a:hover{border-color:var(--ink);color:var(--ink)}
.cat-nav a[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:#fff}
.section-head.left{max-width:none;text-align:left;margin-left:0;margin-bottom:clamp(28px,3vw,40px)}
.hero__media video.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ============================================================
   Motorenbau / Leistungsseiten: ruhigere Struktur
   (Julian 2026-09-06: Projekte abwechselnd hell/dunkel und
   links/rechts, Seite insgesamt übersichtlicher)
   ============================================================ */
.paintmayer-section{padding:clamp(56px,6.4vw,96px) 0}
.paintmayer-section + .paintmayer-section{padding-top:clamp(56px,6.4vw,96px)}
.pm-proj-sec{padding-top:clamp(40px,4.6vw,66px);padding-bottom:clamp(40px,4.6vw,66px)}
.pm-proj-sec .pm-project{margin-bottom:0}
.pm-proj-sec .kicker{margin-bottom:12px}
.pm-cols{columns:2;column-gap:clamp(34px,4vw,64px);max-width:none}
.pm-cols p{break-inside:avoid;margin:0 0 1.05em}
@media (max-width:860px){.pm-cols{columns:1}}
.pm-svc-grid{grid-template-columns:repeat(3,1fr)}
.pm-svc-grid .paintmayer-box{border-radius:0;padding:clamp(24px,2.6vw,32px)}
.pm-svc-grid h3{font-size:14px;letter-spacing:1.6px;margin:0 0 14px;color:var(--ink)}
.pm-svc-grid ul{list-style:none;margin:0;padding:0}
.pm-svc-grid li{position:relative;padding-left:22px;margin-bottom:10px;font-size:15.5px;
  line-height:1.55;color:var(--body)}
.pm-svc-grid li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;
  border-left:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(-45deg)}
@media (max-width:1100px){.pm-svc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.pm-svc-grid{grid-template-columns:1fr}}

.pm-steps{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(34px,4vw,64px);align-items:start}
.pm-steps__list{list-style:none;counter-reset:st;margin:0;padding:0}
.pm-steps__list li{counter-increment:st;position:relative;padding:0 0 20px 58px;margin:0 0 20px;
  border-bottom:1px solid var(--line);font-size:16.5px;line-height:1.55;color:var(--ink)}
.pm-steps__list li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.pm-steps__list li::before{content:counter(st,decimal-leading-zero);position:absolute;left:0;top:-2px;
  font-family:var(--font-ext);font-size:13px;font-weight:700;letter-spacing:1.5px;color:var(--red)}
.pm-promise{background:#fff;border:1px solid var(--line);padding:clamp(26px,3vw,36px)}
.paintmayer-section:not(.paintmayer-light) .pm-promise{background:var(--bg-soft);border-color:transparent}
.pm-promise h3{font-size:13px;letter-spacing:2px;margin:0 0 18px;color:var(--ink)}
.pm-promise ul{list-style:none;margin:0;padding:0}
.pm-promise li{position:relative;padding-left:24px;margin-bottom:12px;font-size:16.5px;color:var(--ink);font-weight:500}
.pm-promise li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;
  border-left:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(-45deg)}
@media (max-width:860px){.pm-steps{grid-template-columns:1fr}}
.paintmayer-grid-2.reverse .pm-project__img{order:-1}
@media (max-width:900px){.paintmayer-grid-2.reverse .pm-project__img{order:0}}
.pm-svc-grid li::before{width:7px;height:7px;top:.58em}
.pm-promise li::before{width:8px;height:8px}
/* Produktentwicklung & CNC-Fertigung */
.pe-video{max-width:960px;margin:clamp(28px,3vw,40px) 0 0}
.pe-video .embed-consent,.pe-video .embed-frame,.pe-video iframe{width:100%;aspect-ratio:16/9;min-height:0;height:auto;border:0;display:block;border-radius:0}
.pe-actions{margin-top:clamp(30px,3.4vw,44px);max-width:70ch}
.pe-actions p{font-size:16.5px;line-height:1.75;color:var(--body);margin:0 0 22px}
.pe-actions .hero__actions{justify-content:flex-start;gap:14px;flex-wrap:wrap}
.pe-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(24px,2.6vw,34px)}
.pe-gallery a{display:block;overflow:hidden;background:#fff}
.pe-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.pe-gallery a:hover img{transform:scale(1.04)}
@media (max-width:860px){.pe-gallery{grid-template-columns:repeat(2,1fr);gap:12px}}

/* ============================================================
   REFERENZ-DETAILSEITE (Titelbild links, Inhalt rechts)
   ============================================================ */
.post-main{padding-top:clamp(48px,5vw,72px)}
.post-layout{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);
  gap:clamp(30px,4vw,66px);align-items:start}
.post-figure{margin:0;position:sticky;top:104px}
.post-figure img{display:block;width:100%;height:auto;margin:0;border-radius:0}
.post-layout .article{max-width:none;margin:0}
.post-layout .article>*{max-width:none}
.post-layout .article .article-gallery{max-width:none;margin-top:38px;margin-bottom:0}

.post-cats{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin-top:clamp(30px,3.2vw,44px);padding-top:clamp(22px,2.4vw,30px);border-top:1px solid var(--line)}
.post-cats__label{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.post-cats a{font-size:13.5px;font-weight:500;color:var(--body);background:#fff;text-decoration:none;
  border:1px solid var(--line);padding:8px 14px;transition:border-color .2s var(--ease),color .2s}
.post-cats a:hover{border-color:var(--ink);color:var(--ink)}

@media (max-width:1080px){
  .post-layout{grid-template-columns:1fr;gap:26px}
  .post-figure{position:static;width:100%;max-width:520px}
  .post-layout .article>*{max-width:820px}
  .post-layout .article .article-gallery{max-width:none}
}

/* Hilfe-Band unter dem Beitrag */
.post-help{position:relative;padding:clamp(58px,6.4vw,96px) 0;
  background:var(--bg-soft) url("/assets/img/2026-02-car-repair-28-3.png?v=10") center center/cover no-repeat}
.post-help__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);
  gap:clamp(26px,3.6vw,56px);align-items:center;margin-top:clamp(30px,3.6vw,48px)}
.post-help .tm-bubble h3{margin:0 0 22px;text-transform:none;letter-spacing:0;
  font-size:clamp(19px,2vw,25px);line-height:1.38;color:var(--ink)}
.post-help .tm-bubble p+p{margin-top:1.15em}
.post-help .tm-bubble p.post-help__close{font-weight:600;color:var(--ink)}
.post-help__cta{margin:clamp(34px,3.4vw,48px) 0 0}
.post-help__media img{display:block;width:100%;height:auto}
@media (max-width:1080px){
  .post-help__grid{grid-template-columns:1fr}
  .post-help__media{order:-1;width:100%;max-width:480px;margin-left:auto;margin-right:auto}
}

.cat-nav--bare{border-top:0;padding-top:0;margin-top:0;margin-bottom:clamp(28px,3vw,38px)}

/* Beitragstext ruhiger: keine Porscha-Versalien, kein Rot – nur der
   Seitenrahmen (Kicker, Sektionsüberschriften) bleibt in der Markenschrift. */
.post-body h1,.post-body h2,.post-body h3,.post-body h4{
  font-family:var(--font);font-weight:700;font-synthesis:none;
  color:var(--ink);text-transform:none;letter-spacing:-.015em;
  text-wrap:balance;-webkit-font-smoothing:antialiased}
.post-body h1{font-size:clamp(27px,2.9vw,39px);line-height:1.18;margin:0 0 .6em}
.post-body h2{font-size:clamp(20px,1.72vw,25px);line-height:1.32;margin:1.75em 0 .65em}
.post-body h3{font-size:clamp(17px,1.4vw,20px);line-height:1.4;letter-spacing:-.005em;margin:1.7em 0 .55em}
.post-body h4{font-size:17px;line-height:1.45;letter-spacing:0;margin:1.5em 0 .5em}
.post-body ul,.post-body ol{margin:0 0 1.4em;padding-left:1.15em}
.post-body li{margin-bottom:.28em;line-height:1.62}
.post-body .meta{color:var(--muted);font-size:13px;letter-spacing:.08em;text-transform:uppercase}

/* ============================================================
   SERVICE-ABLAUF mit Fotos (Hol- und Bringservice)
   ============================================================ */
.svc-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2vw,28px);margin-top:clamp(26px,3vw,40px)}
.svc-step{margin:0}
.svc-step__img{overflow:hidden;background:var(--bg-soft);aspect-ratio:3/2;margin-bottom:18px}
.svc-step__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.svc-step:hover .svc-step__img img{transform:scale(1.05)}
.svc-step__num{display:block;font-family:var(--font-ext);font-size:12px;font-weight:700;letter-spacing:2.4px;color:var(--red);margin-bottom:8px}
.svc-step h3{font-size:clamp(16px,1.3vw,18px);letter-spacing:1.2px;margin:0 0 .5em}
.svc-step p{margin:0;font-size:15.5px;line-height:1.7}
@media (max-width:980px){.svc-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.svc-steps{grid-template-columns:1fr}}

/* Video-Einbettung mit eigenem Standbild statt grauer Fläche */
.pe-video--center{margin-left:auto;margin-right:auto}
.embed-consent.has-poster{background-size:cover;background-position:center;background-repeat:no-repeat}
.ec-play{display:block;width:74px;height:74px;margin:0 auto 20px;border-radius:50%;
  background:var(--red);position:relative;box-shadow:0 18px 40px -18px rgba(0,0,0,.8);transition:transform .25s var(--ease)}
.ec-play::after{content:"";position:absolute;top:50%;left:53%;transform:translate(-50%,-50%);
  border-style:solid;border-width:13px 0 13px 21px;border-color:transparent transparent transparent #fff}
.embed-consent:hover .ec-play{transform:scale(1.08)}
.embed-consent.has-poster::before{background:rgba(10,10,10,.52)}

/* Anfahrtsband: dreiteilige Infozeile statt einer grauen Textzeile */
.map-band__head{padding:clamp(42px,4.4vw,66px) 0 clamp(30px,3.2vw,46px)}
.map-band__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,3vw,52px);align-items:start}
.map-band__grid > * + *{border-left:1px solid rgba(255,255,255,.14);padding-left:clamp(24px,3vw,52px)}
.map-band__intro .kicker{margin-bottom:12px}
.map-band h2{color:#fff;margin:0;font-size:clamp(21px,2.3vw,31px)}
.map-band__label{display:block;font-family:var(--font-ext);font-size:11.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:#8d8d8d;margin-bottom:12px}
.map-band__addr{font-style:normal;color:#d8d8d8;font-size:16.5px;line-height:1.7;margin:0}
.map-band__addr strong{display:block;color:#fff;font-weight:700;margin-bottom:4px}
.map-band__col p{margin:0 0 22px;color:#cfcfcf;font-size:16.5px;line-height:1.7}
@media (max-width:860px){
  .map-band__grid{grid-template-columns:1fr;gap:26px}
  .map-band__grid > * + *{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.14);padding-top:26px}
}

/* Seitennummerierung der Referenzen */
.pager{margin-top:clamp(38px,4vw,56px)}
.pager .pgnav{font-size:17px;line-height:1}
.pager .pgnav.disabled{border-color:rgba(0,0,0,.06);color:var(--muted)}

/* ============================================================
   HOL- UND BRINGSERVICE — Feinschliff
   ============================================================ */
/* Kartentext wie normaler Fließtext, nicht fast schwarz */
.paintmayer-box p{color:var(--body);font-size:16.5px;line-height:1.75;margin:0}
.paintmayer-box h3{margin:0 0 .7em}
.paintmayer-section.dark .paintmayer-box p{color:rgba(255,255,255,.86)}

.svc-intro{max-width:78ch}
.svc-intro .lead{font-size:clamp(18px,1.55vw,21px);line-height:1.62;color:var(--ink);margin-bottom:1em}
.svc-intro p:last-child{margin-bottom:0}

/* Vorteile: zweispaltige Checkliste mit Luft und Trennlinien */
.svc-benefits{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(28px,3.4vw,64px)}
.svc-benefits li{position:relative;padding:16px 0 16px 38px;margin:0;
  border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.9);
  font-size:16.5px;line-height:1.6}
.svc-benefits li::before{content:"";position:absolute;left:2px;top:1.35em;width:13px;height:7px;
  border-left:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(-45deg)}
@media (max-width:720px){.svc-benefits{grid-template-columns:1fr}}

/* Roter Abschluss-Block */
.svc-cta{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr);
  gap:clamp(26px,3.4vw,60px);align-items:center}
.svc-cta h2{color:#fff}
.svc-cta p{margin:0;color:rgba(255,255,255,.92);font-size:17px;line-height:1.72;max-width:56ch}
.svc-cta__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}
.btn--ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn--ghost-light:hover{background:#fff;color:var(--red);border-color:#fff}
@media (max-width:860px){
  .svc-cta{grid-template-columns:1fr}
  .svc-cta__actions{justify-content:flex-start}
}
.paintmayer-section.dark .section-head h2,.paintmayer-section.red .section-head h2{color:#fff}
.paintmayer-section.dark .section-head .lead,.paintmayer-section.red .section-head .lead{color:rgba(255,255,255,.9)}
/* Bild ungeschnitten in voller Höhe zeigen */
.paintmayer-image--full{height:auto;object-fit:contain}
.paintmayer-grid-2:has(.paintmayer-image--full){align-items:center}

/* Kategorie-Intro: Lead links, Details rechts — statt einer schmalen Textwand */
.cat-intro{max-width:none;margin:clamp(24px,2.6vw,36px) 0 0;
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(28px,3.6vw,60px);align-items:start}
.cat-intro__lead p{margin:0;font-size:clamp(18.5px,1.65vw,22px);line-height:1.5;
  color:var(--ink);letter-spacing:-.004em;text-wrap:pretty}
.cat-intro__body{border-left:1px solid var(--line);padding-left:clamp(28px,3.6vw,60px)}
.cat-intro__body p{margin:0 0 1.05em;font-size:16.5px;line-height:1.78;color:var(--body)}
.cat-intro__body p:last-child{margin-bottom:0}
.cat-intro--single{grid-template-columns:1fr}
.cat-intro--single .cat-intro__lead p{max-width:80ch}
@media (max-width:900px){
  .cat-intro{grid-template-columns:1fr;gap:22px}
  .cat-intro__body{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:22px}
}

/* Projektkarten: Titel ruhiger, Kategorien und Vorschautext wie live */
.rcard__body h3{font-size:17.5px;line-height:1.36;letter-spacing:-.01em;text-transform:none;margin-bottom:10px}
.rcard__cats{margin:0 0 12px;font-size:13px;line-height:1.55;color:var(--red)}
.rcard__cats a{position:relative;z-index:3;color:var(--red)}
.rcard__cats a:hover{text-decoration:underline;text-underline-offset:2px}
.rcard__excerpt{margin:0 0 18px;font-size:14.5px;line-height:1.68;color:var(--body);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.rcard__more{font-size:13.5px}
@media (max-width:560px){.rcard__body h3{font-size:17px;letter-spacing:-.01em}}

/* Lange Aufzählungen im Beitrag: kompakte Haken-Liste in zwei Spalten */
.post-body ul.pm-checks{list-style:none;margin:.4em 0 1.6em;padding:0;
  columns:2;column-gap:clamp(24px,2.6vw,44px)}
.post-body ul.pm-checks li{position:relative;margin:0;padding:11px 0 11px 30px;
  border-top:1px solid var(--line);font-size:15.5px;line-height:1.55;
  break-inside:avoid;-webkit-column-break-inside:avoid}
.post-body ul.pm-checks li::before{content:"";position:absolute;left:2px;top:1.15em;
  width:11px;height:6px;border-left:2px solid var(--red);border-bottom:2px solid var(--red);
  transform:rotate(-45deg)}
@media (max-width:700px){.post-body ul.pm-checks{columns:1}}

/* Rechtstexte: ruhiger Lesesatz statt Textblock in Halbfett-Anmutung */
.article--legal{font-size:16px}
.article--legal p,.article--legal li{font-size:16px;line-height:1.85;color:#4f4f4f;
  -webkit-font-smoothing:antialiased;hyphens:manual}
.article--legal h2,.article--legal h3,.article--legal h4{
  text-transform:none;letter-spacing:-.005em;color:var(--ink);
  font-size:clamp(17px,1.35vw,19px);line-height:1.4;margin:2.2em 0 .7em}
.article--legal > h3:first-of-type{margin-top:.4em;font-size:16px;color:var(--body);font-weight:400;line-height:1.7}
.article--legal ul,.article--legal ol{margin:0 0 1.3em}
.article--legal a{color:var(--red)}
/* Kategorieleiste unter dem Text: links ausgerichtet, mit Abstand nach oben */
.ref-filter--nav{justify-content:flex-start;max-width:none;
  margin:clamp(30px,3.4vw,44px) 0 clamp(28px,3vw,38px);
  border-top:1px solid var(--line);padding-top:clamp(24px,2.6vw,32px)}
.section--soft .ref-filter--nav .ref-chip,.section--soft .ref-filter--nav .ref-fmenu{background:#fff}

/* ============================================================
   EINWILLIGUNGSVERWALTUNG (Cookie-Hinweis)
   ============================================================ */
.cc-root{position:fixed;inset:0;z-index:1300;display:none}
.cc-root.is-open{display:block}
body.nav-open .cc-root.is-open{display:none}
.cc-backdrop{position:absolute;inset:0;background:rgba(10,10,10,.62)}
.cc-modal{position:absolute;left:50%;bottom:clamp(0px,4vh,34px);transform:translateX(-50%);
  width:min(680px,calc(100% - 24px));max-height:88vh;display:flex;flex-direction:column;
  background:var(--ink);border:1px solid rgba(255,255,255,.12);overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.85);animation:ccIn .32s var(--ease)}
@keyframes ccIn{from{opacity:0;transform:translateX(-50%) translateY(18px)}to{opacity:1;transform:translateX(-50%)}}
.cc-modal:focus{outline:none}
.cc-modal__head{padding:clamp(20px,2.6vw,28px) clamp(20px,2.8vw,30px) 2px}
.cc-modal__head h2{margin:0;color:#fff;font-family:var(--font);font-weight:700;
  font-size:clamp(17px,1.5vw,20px);letter-spacing:-.01em;text-transform:none}
.cc-modal__body{padding:8px clamp(20px,2.8vw,30px) 6px;overflow:auto}
.cc-intro{margin:6px 0 0;font-size:14.5px;line-height:1.68;color:#c9c9c9}
.cc-intro strong{color:#fff}
.cc-cats{margin-top:18px;display:none}
.cc-root.show-settings .cc-cats{display:block}
.cc-cat{border:1px solid rgba(255,255,255,.12);margin-bottom:10px;background:rgba(255,255,255,.04)}
.cc-cat__bar{display:flex;align-items:center;gap:14px;padding:12px 14px}
.cc-cat__toggle{flex:1 1 auto;display:flex;align-items:center;gap:9px;text-align:left;
  font:700 15px/1.3 var(--font);color:#fff;background:none;border:0;cursor:pointer;padding:0}
.cc-cat__count{font-weight:400;font-size:12.5px;color:#9a9a9a}
.cc-chev{display:inline-block;color:var(--red);font-size:18px;line-height:1;transition:transform .2s var(--ease)}
.cc-cat.is-open>.cc-cat__bar .cc-chev,.cc-service.is-open .cc-chev{transform:rotate(90deg)}
.cc-cat__panel{display:none;padding:2px 15px 15px}
.cc-cat.is-open .cc-cat__panel{display:block}
.cc-cat__desc{margin:2px 0 14px;font-size:13.5px;line-height:1.6;color:#a8a8a8}
.cc-service{border-top:1px solid rgba(255,255,255,.12);padding-top:12px;margin-top:12px}
.cc-service:first-of-type{border-top:0;margin-top:0;padding-top:0}
.cc-service__head{display:inline-flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;
  padding:0;font:700 13.5px/1.3 var(--font);color:#ff6a7d}
.cc-detail{display:none;margin:10px 0 0;border:1px solid rgba(255,255,255,.12)}
.cc-service.is-open .cc-detail{display:block}
.cc-detail div{display:flex;gap:14px;padding:9px 13px;font-size:12.5px;line-height:1.55;
  border-bottom:1px solid rgba(255,255,255,.1)}
.cc-detail div:last-child{border-bottom:0}
.cc-detail dt{flex:0 0 36%;margin:0;color:#9a9a9a}
.cc-detail dd{flex:1 1 auto;margin:0;color:#dcdcdc;overflow-wrap:anywhere}
.cc-detail a{color:#ff6a7d;text-decoration:underline}
.cc-modal__foot{padding:14px clamp(20px,2.8vw,30px) clamp(16px,2.4vw,22px);
  border-top:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:12px;background:var(--ink)}
.cc-foot__links{font-size:12.5px;color:#9a9a9a}
.cc-foot__links a{color:#c9c9c9;text-decoration:underline;text-underline-offset:2px}
.cc-foot__links a:hover{color:#fff}
.cc-foot__btns{display:flex;gap:9px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.cc-btn{appearance:none;cursor:pointer;font:700 12.5px/1 var(--font);letter-spacing:.02em;text-transform:uppercase;
  border-radius:0;padding:14px 20px;border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;
  transition:background .2s,border-color .2s,color .2s}
.cc-btn--primary{background:var(--red);border-color:var(--red);color:#fff}
.cc-btn--primary:hover{background:#fff;border-color:#fff;color:var(--ink)}
.cc-btn--ghost:hover{background:#fff;border-color:#fff;color:var(--ink)}
.cc-btn--link{border:0;background:none;padding:8px 2px;color:#9a9a9a;text-transform:none;
  letter-spacing:0;font-weight:500;font-size:13px;text-decoration:underline;margin-right:auto}
.cc-btn--link:hover{color:#fff}
.cc-only-settings{display:none}
.cc-root.show-settings .cc-only-settings{display:inline-flex}
.cc-root.show-settings .cc-hide-settings{display:none}
.cc-switch{position:relative;flex:0 0 auto;width:46px;height:27px}
.cc-switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.cc-switch span{position:absolute;inset:0;background:rgba(255,255,255,.2);border-radius:999px;transition:background .2s}
.cc-switch span::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;background:#fff;border-radius:50%;transition:transform .2s}
.cc-switch input:checked+span{background:var(--red)}
.cc-switch input:checked+span::after{transform:translateX(19px)}
.cc-switch--locked span{background:var(--red);opacity:.45}
.cc-switch input:focus-visible+span{outline:2px solid var(--red);outline-offset:3px}
@media (max-width:520px){
  .cc-modal{bottom:0;width:100%;max-height:92vh}
  .cc-foot__btns{justify-content:stretch}
  .cc-foot__btns .cc-btn:not(.cc-btn--link){flex:1 1 auto;justify-content:center;text-align:center}
}
.ref-catlinks .ref-filter--foot{margin-top:clamp(20px,2.2vw,28px);margin-bottom:0;border-top:0;padding-top:0}

/* ===== Die Firma: Story, Zeitleiste, Instagram ===== */
.firm-lead{max-width:900px;margin:0 0 clamp(26px,2.8vw,38px);font-size:clamp(19px,1.72vw,23px);line-height:1.5;color:var(--ink)}
.firm-cols{margin-top:0}
.firm-cols p:last-child{margin-bottom:0}
.paintmayer-timeline{margin-top:clamp(24px,2.6vw,38px)}
.paintmayer-timeline-content h3{text-transform:none;letter-spacing:-.01em}
.pe-video--center{max-width:1000px}

.ig-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.1vw,16px);margin-top:clamp(24px,2.6vw,36px)}
.ig-tile{position:relative;display:block;overflow:hidden;background:var(--bg-soft);aspect-ratio:1/1}
.ig-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease),filter .35s}
.ig-tile::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.28);opacity:0;transition:opacity .3s}
.ig-tile:hover img,.ig-tile:focus-visible img{transform:scale(1.06)}
.ig-tile:hover::after,.ig-tile:focus-visible::after{opacity:1}
.ig-tile__ico{position:absolute;left:50%;top:50%;width:34px;height:34px;transform:translate(-50%,-50%) scale(.86);opacity:0;transition:opacity .3s,transform .3s var(--ease);z-index:2;background:#fff;
  -webkit-mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23-.06-1.27-.07-1.65-.07-4.85s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41 1.27-.06 1.65-.07 4.85-.07M12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.33 4.14.63c-.79.3-1.46.72-2.12 1.39C1.35 2.68.93 3.35.63 4.14.33 4.9.13 5.78.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.26 2.15.56 2.91.3.79.72 1.46 1.39 2.12.66.67 1.33 1.09 2.12 1.39.76.3 1.64.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.27-.06 2.15-.26 2.91-.56.79-.3 1.46-.72 2.12-1.39.67-.66 1.09-1.33 1.39-2.12.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91-.3-.79-.72-1.46-1.39-2.12C21.32 1.35 20.65.93 19.86.63c-.76-.3-1.64-.5-2.91-.56C15.67.01 15.26 0 12 0z'/%3E%3Cpath d='M12 5.84A6.16 6.16 0 1 0 18.16 12 6.16 6.16 0 0 0 12 5.84zm0 10.16A4 4 0 1 1 16 12a4 4 0 0 1-4 4z'/%3E%3Ccircle cx='18.41' cy='5.59' r='1.44'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23-.06-1.27-.07-1.65-.07-4.85s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41 1.27-.06 1.65-.07 4.85-.07M12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.33 4.14.63c-.79.3-1.46.72-2.12 1.39C1.35 2.68.93 3.35.63 4.14.33 4.9.13 5.78.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.26 2.15.56 2.91.3.79.72 1.46 1.39 2.12.66.67 1.33 1.09 2.12 1.39.76.3 1.64.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.27-.06 2.15-.26 2.91-.56.79-.3 1.46-.72 2.12-1.39.67-.66 1.09-1.33 1.39-2.12.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91-.3-.79-.72-1.46-1.39-2.12C21.32 1.35 20.65.93 19.86.63c-.76-.3-1.64-.5-2.91-.56C15.67.01 15.26 0 12 0z'/%3E%3Cpath d='M12 5.84A6.16 6.16 0 1 0 18.16 12 6.16 6.16 0 0 0 12 5.84zm0 10.16A4 4 0 1 1 16 12a4 4 0 0 1-4 4z'/%3E%3Ccircle cx='18.41' cy='5.59' r='1.44'/%3E%3C/svg%3E") center/contain no-repeat}
.ig-tile:hover .ig-tile__ico,.ig-tile:focus-visible .ig-tile__ico{opacity:1;transform:translate(-50%,-50%) scale(1)}
.ig-more{margin:clamp(26px,2.8vw,38px) 0 0;text-align:center}
@media (max-width:700px){.ig-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.ig-tile__ico{width:24px;height:24px}}

/* ===== Leistungsübersicht ===== */
.mega-all{grid-column:1/-1;display:flex!important;align-items:center;gap:10px;
  margin:0 0 4px;padding:0 0 16px!important;border-bottom:1px solid var(--line);
  font-family:var(--font);font-weight:700;font-size:14px;letter-spacing:.4px;color:var(--ink)!important;white-space:nowrap}
.megamenu a.mega-all::before{display:none}
.megamenu a.mega-all:hover{color:var(--red)!important;padding-left:0!important}
.mega-all i{font-style:normal;color:var(--red);transition:transform .25s var(--ease)}
.megamenu a.mega-all:hover i{transform:translateX(5px)}
.megamenu a.mega-all.current{color:var(--red)!important}
@media (max-width:860px){.mega-all{margin-bottom:8px;padding-bottom:12px!important;white-space:normal}}

.leist-models{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(30px,3.6vw,60px);margin-top:clamp(24px,2.6vw,36px)}
.leist-models__col h3{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--red);margin:0 0 18px}
.leist-models .ref-filter{justify-content:flex-start;margin:0 0 20px;max-width:none}
.leist-models .ref-chip{text-decoration:none}
.leist-models p{margin:0}
.arrow--ink{color:var(--ink);font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:8px;transition:color .2s}
.arrow--ink:hover{color:var(--red)}
@media (max-width:820px){.leist-models{grid-template-columns:1fr;gap:34px}}

.svc-steps--plain .svc-step{border-top:1px solid var(--line);padding-top:20px}
.svc-steps--plain .svc-step__num{display:block;font-family:var(--font-ext);font-size:12px;font-weight:700;
  letter-spacing:2.4px;color:var(--red);margin-bottom:12px}
.svc-steps--plain .svc-step h3{text-transform:none;letter-spacing:-.01em;font-size:clamp(17px,1.4vw,19.5px);margin-bottom:.55em}
.leistungen-hero-spacer{display:none}

/* ===== Karriere ===== */
.job-fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,2.6vw,34px);margin-top:clamp(24px,2.6vw,34px)}
.job-fit .pm-promise{display:flex;flex-direction:column}
.job-fit .pm-promise li{font-weight:400;color:var(--body);font-size:16.5px;line-height:1.6}
.pm-promise__foot{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line);
  font-size:16.5px;font-weight:700;color:var(--ink)}
@media (max-width:820px){.job-fit{grid-template-columns:1fr}}

.job-quote{font-size:clamp(20px,1.95vw,26px);line-height:1.4;color:var(--ink);
  font-weight:400;margin:0 0 22px;letter-spacing:-.01em;border-left:2px solid var(--red);padding-left:22px}
.tm-statement__text > p:not(.job-quote){font-size:16.5px;line-height:1.75;color:var(--body);margin:0}

.job-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.2vw,28px);margin-top:clamp(24px,2.6vw,34px)}
.job-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  padding:clamp(26px,3vw,36px);text-decoration:none;transition:border-color .25s var(--ease),transform .25s var(--ease)}
.job-card:hover{border-color:var(--red);transform:translateY(-2px)}
.job-card__tag{font-family:var(--font-ext);font-size:11.5px;font-weight:700;letter-spacing:2.2px;
  text-transform:uppercase;color:var(--red);margin-bottom:14px}
.job-card__title{font-family:var(--font);font-weight:700;font-synthesis:none;font-size:clamp(19px,1.7vw,23px);
  line-height:1.28;letter-spacing:-.015em;color:var(--ink);margin-bottom:12px}
.job-card__text{font-size:15.5px;line-height:1.7;color:var(--body);margin-bottom:22px}
.job-card__cta{margin-top:auto;display:inline-flex;align-items:center;gap:9px;
  font-size:14px;font-weight:700;color:var(--ink)}
.job-card__cta i{font-style:normal;color:var(--red);transition:transform .25s var(--ease)}
.job-card:hover .job-card__cta i{transform:translateX(5px)}
@media (max-width:820px){.job-list{grid-template-columns:1fr}}

/* ===== Zeitleiste v2: Fortschritt, mitlaufende Kugel, Einblenden ===== */
.paintmayer-timeline{max-width:1080px}
.paintmayer-timeline::before{width:2px;background:var(--line)}
.pmtl-fill{position:absolute;left:50%;top:0;width:2px;height:0;transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(192,0,27,.35) 0%,var(--red) 22%);z-index:1;
  transition:height .12s linear;pointer-events:none}
.pmtl-ball{position:absolute;left:50%;top:0;width:30px;height:30px;border-radius:50%;
  background:transparent;border:2px solid var(--red);
  transform:translate(-50%,-50%) scale(.5);opacity:0;z-index:4;pointer-events:none;
  box-shadow:0 0 0 4px #fff,0 8px 22px rgba(192,0,27,.28);
  transition:top .12s linear,opacity .3s var(--ease),transform .3s var(--ease)}
.pmtl-ball::before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--red);
  opacity:.9;transition:opacity .3s}
.pmtl-ball.is-on{opacity:1;transform:translate(-50%,-50%) scale(1)}

.paintmayer-timeline.pmtl-anim .paintmayer-timeline-item{opacity:0;transform:translateY(22px);
  transition:opacity .65s var(--ease),transform .65s var(--ease)}
.paintmayer-timeline.pmtl-anim .paintmayer-timeline-item.is-in{opacity:1;transform:none}
.paintmayer-timeline-item:nth-child(even){transition-delay:.06s}

.paintmayer-timeline-dot{background:var(--bg-soft);border:2px solid var(--line);width:16px;height:16px;
  box-shadow:0 0 0 5px #fff;transition:background .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease)}
.paintmayer-timeline-item.left .paintmayer-timeline-dot{right:-8px}
.paintmayer-timeline-item.right .paintmayer-timeline-dot{left:-8px}
.paintmayer-timeline-item.is-in .paintmayer-timeline-dot{background:var(--red);border-color:var(--red);
  box-shadow:0 0 0 5px #fff,0 0 0 7px rgba(192,0,27,.16)}

.paintmayer-timeline-content{position:relative;padding:24px 28px;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.paintmayer-timeline-content::after{content:"";position:absolute;top:26px;width:11px;height:11px;
  background:#fff;transform:rotate(45deg)}
.paintmayer-timeline-item.left .paintmayer-timeline-content::after{right:-6.5px;
  border-right:1px solid var(--line);border-top:1px solid var(--line)}
.paintmayer-timeline-item.right .paintmayer-timeline-content::after{left:-6.5px;
  border-left:1px solid var(--line);border-bottom:1px solid var(--line)}
.paintmayer-timeline-content:hover{border-color:rgba(192,0,27,.45);box-shadow:0 10px 30px rgba(17,17,17,.06)}
.paintmayer-timeline-content:hover::after{border-color:rgba(192,0,27,.45)}

.paintmayer-timeline-year{background:var(--red);color:#fff;font-family:var(--font-ext);font-weight:700;
  font-size:12px;letter-spacing:2.2px;padding:6px 12px 5px;margin-bottom:14px;line-height:1}
.paintmayer-timeline-content h3{font-size:clamp(17px,1.42vw,20px);line-height:1.25;
  text-transform:none;letter-spacing:-.012em;margin:0 0 10px}
.paintmayer-timeline-content p{font-size:15.5px;line-height:1.72}

@media (max-width:760px){
  .pmtl-fill,.pmtl-ball{left:19px}
  .paintmayer-timeline-item.left .paintmayer-timeline-content::after,
  .paintmayer-timeline-item.right .paintmayer-timeline-content::after{display:none}
  .paintmayer-timeline-item .paintmayer-timeline-dot{left:11px;right:auto}
}
@media (prefers-reduced-motion:reduce){
  .paintmayer-timeline.pmtl-anim .paintmayer-timeline-item{opacity:1;transform:none;transition:none}
  .pmtl-ball{transition:none}
}

/* ===== Instagram-Block: Text links, kompaktes Raster rechts ===== */
.ig-block{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1fr);
  gap:clamp(32px,4vw,76px);align-items:start}
.ig-block__intro{max-width:44ch}
@media (min-width:961px){.ig-block__intro{position:sticky;top:124px}}
.ig-block__intro h2{margin:0 0 18px}
.ig-block__intro p{font-size:16.5px;line-height:1.75;color:var(--body);margin:0 0 26px}
.ig-block .ig-grid{margin-top:0;gap:clamp(7px,.7vw,10px)}
.ig-block .ig-more{display:none}
@media (max-width:960px){
  .ig-block{grid-template-columns:1fr;gap:30px}
  .ig-block__intro{max-width:none;position:static}
}

/* ===== Bildfigur mit Bildunterschrift ===== */
.pm-figure{margin:clamp(28px,3vw,42px) 0;position:relative}
.pm-figure img{display:block;width:100%;height:auto;background:var(--bg-soft)}
.pm-figure figcaption{margin-top:14px;padding-left:16px;border-left:2px solid var(--red);
  font-size:14px;line-height:1.6;color:var(--muted);max-width:70ch}
.paintmayer-section.dark .pm-figure figcaption,
.paintmayer-section.red .pm-figure figcaption{color:rgba(255,255,255,.82)}
.pm-figure--wide{margin-top:clamp(38px,4vw,58px);margin-bottom:0}
.svc-cta h2{margin-bottom:.6em}
@media (max-width:820px){.svc-cta__actions{justify-content:flex-start;margin-top:6px}}

/* ===== Startseite: nüchterne H1 ===== */
h1.h-plain{font-family:var(--font);font-weight:700;font-synthesis:none;color:var(--ink);
  text-transform:none;letter-spacing:-.018em;text-wrap:balance;
  font-size:clamp(26px,2.9vw,40px);line-height:1.16;margin-bottom:.55em}

/* ===== Leistungskarten mit eigenen Icons ===== */
.icard-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,1.7vw,24px);margin-top:8px}
.icard{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  padding:clamp(26px,2.4vw,34px) clamp(22px,2vw,28px) clamp(24px,2.2vw,30px);
  transition:border-color .28s var(--ease),transform .28s var(--ease),box-shadow .28s var(--ease)}
.icard:hover{border-color:rgba(192,0,27,.5);transform:translateY(-3px);box-shadow:0 14px 34px rgba(17,17,17,.07)}
.icard__link{position:absolute;inset:0;z-index:3}
.icard__icon{display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.icard__icon img{width:100%;max-width:215px;height:auto;display:block;
  transition:transform .35s var(--ease)}
.icard:hover .icard__icon img{transform:scale(1.06)}
.icard h3{font-size:clamp(14.5px,1.15vw,16.5px);letter-spacing:1.1px;text-transform:uppercase;
  color:var(--ink);margin:0 0 12px;line-height:1.28;hyphens:manual;overflow-wrap:break-word}
.icard p{font-size:14.5px;line-height:1.68;color:var(--body);margin:0 0 16px}
.icard__models{font-size:12px;letter-spacing:1.1px;text-transform:uppercase;color:var(--red);
  font-weight:700;margin-bottom:18px;line-height:1.5}
.icard .arrow{margin-top:auto;display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:700;color:var(--ink)}
.icard .arrow i{font-style:normal;color:var(--red);transition:transform .25s var(--ease)}
.icard:hover .arrow i{transform:translateX(5px)}
@media (max-width:1080px){.icard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.icard-grid{grid-template-columns:1fr}.icard__icon img{max-width:180px}}

/* ===== Kompakte Sektion / Galerie ===== */
.section--compact{padding-top:clamp(48px,5vw,66px);padding-bottom:clamp(48px,5vw,66px)}
.section--compact .section-head{margin-bottom:clamp(22px,2.4vw,30px)}
.gallery--compact{gap:10px}
.gallery--compact img{aspect-ratio:16/10;object-fit:cover;width:100%;height:auto;display:block}

/* ===== Persönliche Worte des Betreibers ===== */
.owner{position:relative;background:var(--bg-soft);overflow:hidden}
.owner::before{content:"";position:absolute;left:0;bottom:0;width:min(554px,46vw);height:min(431px,36vw);
  background:url("/assets/img/reifenspur.png?v=21") left bottom/contain no-repeat;opacity:.5;pointer-events:none}
.owner .container{position:relative;z-index:1}
.owner__grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(30px,4vw,72px);align-items:center}
.owner__portrait{align-self:end}
.owner__portrait img{display:block;width:100%;max-width:430px;height:auto;margin-left:auto;margin-right:auto}
.owner__body h2{margin:0 0 clamp(22px,2.4vw,30px)}
.owner__quote{position:relative;margin:0 0 clamp(24px,2.6vw,32px);padding:0 0 0 clamp(22px,2.4vw,30px);
  border-left:2px solid var(--red)}
.owner__quote p{margin:0 0 1em;font-size:clamp(17px,1.42vw,19.5px);line-height:1.66;color:var(--ink)}
.owner__quote p:last-child{margin-bottom:0}
.owner__quote strong{font-weight:700}
.owner__sign{display:flex;align-items:center;gap:16px;padding-top:clamp(20px,2.2vw,26px);
  border-top:1px solid var(--line)}
.owner__avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.owner__name{margin:0;font-family:var(--font);font-weight:700;font-synthesis:none;font-size:17px;
  letter-spacing:-.01em;color:var(--ink);line-height:1.3}
.owner__role{margin:2px 0 0;font-size:13px;letter-spacing:1.4px;text-transform:uppercase;color:var(--red);font-weight:700}
.owner__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);
  margin-top:clamp(24px,2.6vw,32px)}
.owner__facts > div{border-top:1px solid var(--line);padding-top:14px}
.owner__facts b{display:block;font-family:var(--font-display);font-weight:400;font-synthesis:none;
  font-size:clamp(22px,2vw,28px);line-height:1;color:var(--ink);letter-spacing:.02em}
.owner__facts span{display:block;margin-top:7px;font-size:12px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--muted)}
@media (max-width:900px){
  .owner__grid{grid-template-columns:1fr;gap:26px}
  .owner__portrait{order:2;max-width:320px;margin:0 auto}
  .owner__body{order:1}
  .owner::before{width:70vw;height:54vw;opacity:.35}
}
@media (max-width:620px){
  .owner__facts{gap:12px}
  .owner__facts b{font-size:18px;letter-spacing:0}
  .owner__facts span{font-size:10.5px;letter-spacing:1.1px}
}

/* ===== Leistungskarten v2: Foto + Icon-Plakette ===== */
.icard{padding:0;overflow:hidden}
.icard__media{position:relative;display:block;aspect-ratio:16/10;overflow:visible;background:var(--bg-soft)}
.icard__media > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease)}
.icard:hover .icard__media > img{transform:scale(1.05)}
.icard__icon{position:absolute;left:clamp(18px,1.7vw,24px);bottom:-26px;z-index:2;
  display:flex;align-items:center;justify-content:center;width:132px;height:76px;margin:0;
  background:#fff;border:1px solid var(--line);
  transition:border-color .28s var(--ease)}
.icard:hover .icard__icon{border-color:rgba(192,0,27,.5)}
.icard__icon img{width:auto;max-width:104px;max-height:54px;height:auto;display:block;transform:none}
.icard:hover .icard__icon img{transform:none}
.icard__body{display:flex;flex-direction:column;flex:1;
  padding:calc(26px + 26px) clamp(20px,1.9vw,26px) clamp(24px,2.2vw,30px)}
.icard__body h3{margin-top:0}
@media (max-width:600px){
  .icard__icon{width:118px;height:70px;bottom:-24px}
  .icard__icon img{max-width:92px;max-height:48px}
  .icard__body{padding-top:44px}
}

/* ===== Galerie: eine Reihe, alle Fotos gleich gross ===== */
.gallery--row{grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.1vw,16px)}
.gallery--row a{aspect-ratio:1/1}
.gallery--row img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:820px){.gallery--row{grid-template-columns:repeat(2,1fr)}}

/* ===== Betreiber: Christian steht auf der Kante ===== */
.owner{padding-bottom:0}
.owner__grid{align-items:end}
.owner__portrait{align-self:end}
.owner__portrait img{display:block;margin-bottom:0}
.owner__body{padding-bottom:clamp(56px,6vw,104px);align-self:center}
.owner::before{height:min(360px,30vw)}
@media (max-width:900px){
  .owner{padding-bottom:0}
  .owner__body{padding-bottom:0}
  .owner__portrait{margin-bottom:0}
  .owner::before{height:44vw}
}

/* ===== Intro: Logo im Videofenster =====
   Liegt nur ueber dem Hero, nicht ueber der ganzen Seite.
   Blendet sich auch ohne JavaScript per CSS wieder aus. */
.intro{position:absolute;inset:0;z-index:3;background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  animation:pmIntroOut .7s var(--ease) 3.9s forwards}
.intro__logo{width:min(520px,62vw);height:auto;display:block;
  animation:pmIntroLogo 1s var(--ease) both}
.intro__bar{margin-top:clamp(28px,3.4vw,44px);position:relative;
  width:min(200px,34vw);height:2px;background:rgba(17,17,17,.1);overflow:hidden}
.intro__bar::after{content:"";position:absolute;inset:0;background:var(--red);
  transform-origin:left center;transform:scaleX(0);
  animation:pmIntroBar 3.9s cubic-bezier(.25,.9,.3,1) forwards}
@keyframes pmIntroLogo{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
@keyframes pmIntroBar{to{transform:scaleX(1)}}
@keyframes pmIntroOut{to{opacity:0;visibility:hidden;pointer-events:none}}
.intro-done .intro{display:none}
@media (prefers-reduced-motion:reduce){.intro{display:none}}

/* ===== Kategorie-Intro v2: Lead über die volle Breite, Text zweispaltig ===== */
.cat-intro{display:block;max-width:none}
.cat-intro__lead{max-width:none;margin:0 0 clamp(26px,3vw,40px);text-wrap:balance}
.cat-intro__lead p{margin:0}
.cat-intro__body{border-left:0;padding-left:0;padding-top:clamp(24px,2.6vw,32px);
  border-top:1px solid var(--line);max-width:none}
.cat-intro__body p{margin:0 0 1.1em}
.cat-intro__body p:last-child{margin-bottom:0}
.cat-intro__body--cols{columns:2;column-gap:clamp(34px,4vw,64px)}
.cat-intro__body--cols p{break-inside:avoid;-webkit-column-break-inside:avoid}
@media (max-width:900px){
  .cat-intro__lead{max-width:none}
  .cat-intro__body--cols{columns:1}
}
.cat-intro__body p:first-of-type{font-size:16.5px;line-height:1.78;color:var(--body)}
.cat-intro .cat-intro__lead p:first-of-type{font-size:clamp(18.5px,1.62vw,21.5px);line-height:1.48;color:var(--ink)}
.cat-intro__body:not(.cat-intro__body--cols){max-width:78ch}

/* ===== Leistungskarten ohne Icon (Getriebe, Hol- und Bringservice) ===== */
.icard-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.icard--noicon .icard__body{padding-top:clamp(26px,2.4vw,34px)}
@media (max-width:820px){.icard-grid--2{grid-template-columns:1fr}}

/* ===== Baureihen-Kacheln ===== */
.leist-models__head{border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:clamp(18px,2vw,24px)}
.leist-models__tag{display:block;font-family:var(--font-ext);font-size:11.5px;font-weight:700;
  letter-spacing:2.2px;text-transform:uppercase;color:var(--red);margin-bottom:8px}
.leist-models__col h3{margin:0;font-family:var(--font);font-weight:700;font-synthesis:none;
  font-size:clamp(18px,1.55vw,21px);line-height:1.25;letter-spacing:-.015em;
  text-transform:none;color:var(--ink)}
.mtiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.1vw,14px);
  margin-bottom:clamp(20px,2.2vw,26px)}
.mtile{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  background:#fff;border:1px solid var(--line);padding:16px 18px 14px;text-decoration:none;
  transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
.mtile:hover{border-color:var(--red);transform:translateY(-2px);box-shadow:0 10px 26px rgba(17,17,17,.06)}
.mtile__brand{font-size:10.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px;transition:color .25s}
.mtile:hover .mtile__brand{color:var(--red)}
.mtile__nr{font-family:var(--font-display);font-weight:400;font-synthesis:none;
  font-size:clamp(24px,2.1vw,30px);line-height:1;letter-spacing:.03em;color:var(--ink)}
.section--soft .mtile{background:#fff}
@media (max-width:1080px){.mtiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.mtiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== Galerie in der Live-Aufteilung ===== */
.gallery--mosaik{grid-template-columns:2.1fr 1fr 1fr;grid-template-rows:repeat(2,1fr);
  gap:clamp(10px,1.1vw,16px)}
.gallery--mosaik a{aspect-ratio:auto}
.gallery--mosaik a:nth-child(1){grid-column:1;grid-row:1 / span 2}
.gallery--mosaik a:nth-child(2){grid-column:2;grid-row:1 / span 2}
.gallery--mosaik a:nth-child(3){grid-column:3;grid-row:1}
.gallery--mosaik a:nth-child(4){grid-column:3;grid-row:2}
.gallery--mosaik img{width:100%;height:100%;object-fit:cover;display:block}
.section--compact .gallery--mosaik{height:clamp(330px,33vw,460px)}
@media (max-width:820px){
  .gallery--mosaik{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}
  .gallery--mosaik a:nth-child(n){grid-column:auto;grid-row:auto;aspect-ratio:1/1}
  .section--compact .gallery--mosaik{height:auto}
}

/* ===== Lange Ablauf-Listen zweispaltig ===== */
.paintmayer-text:has(> .paintmayer-list--cols){max-width:none}
.paintmayer-list--cols{columns:2;column-gap:clamp(34px,4vw,64px);margin-top:clamp(20px,2.2vw,28px)}
.paintmayer-list--cols li{break-inside:avoid;-webkit-column-break-inside:avoid;
  margin:0 0 18px;padding-bottom:0}
@media (max-width:820px){.paintmayer-list--cols{columns:1}}

/* ===== Themen-Kacheln: Sicherheitsabstand ===== */
.pm-topics{max-width:var(--maxw);margin-left:auto;margin-right:auto}
.paintmayer-text--center{margin-left:auto;margin-right:auto;max-width:820px;text-align:center}
.paintmayer-text--center .paintmayer-kicker,.paintmayer-text--center .kicker{display:inline-block}

/* ---- Breite Textsektionen (Raster, Spaltenlisten, Button-Reihen) ---- */
.paintmayer-container > .paintmayer-text--wide{max-width:none}
.paintmayer-container > .paintmayer-text--wide > p,
.paintmayer-container > .paintmayer-text--wide > h2,
.paintmayer-container > .paintmayer-text--wide > h1{max-width:76ch}
.paintmayer-container > .paintmayer-text--wide > .paintmayer-grid-2{gap:clamp(34px,4.5vw,80px)!important}
.paintmayer-container > .paintmayer-text--wide > .paintmayer-grid-2 .paintmayer-list li{margin-bottom:14px}
.pm-btnrow{display:flex;flex-wrap:wrap;gap:clamp(10px,1.1vw,14px);margin:clamp(22px,2.4vw,32px) 0 0}
.pm-btnrow .paintmayer-btn{margin:0}
@media (max-width:620px){.pm-btnrow{display:block}.pm-btnrow .paintmayer-btn{display:block;margin:0 0 10px}}

/* ---- Drei-Spalten-Variante der Karten-Reihe ---- */
.job-fit--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1080px){.job-fit--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.job-fit--3{grid-template-columns:1fr}}
.paintmayer-section.light .pm-promise{background:#fff;border-color:var(--line)}

/* ---- Shop-Button: Hover sichtbar (rot gefuellt) ---- */
.nav .nav-shop:hover,.nav .nav-shop:focus-visible,
.nav>ul>li>a.nav-shop:hover{background:var(--red)!important;border-color:var(--red)!important;color:#fff!important}

/* ---- Winter ist Servicezeit ---- */
.winter__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(34px,4.5vw,80px);align-items:center}
.winter__media{margin:0;position:relative}
.winter__media img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.winter__media figcaption{margin-top:14px;padding-left:16px;border-left:2px solid var(--red);font-size:14px;color:var(--muted)}
.winter__body h2{margin:0 0 16px}
.winter__body .lead{margin:0 0 clamp(24px,2.6vw,32px)}
.winter__points{display:grid;gap:0;border-top:1px solid var(--line)}
.winter__point{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,1.8vw,24px);padding:clamp(20px,2.2vw,26px) 0;border-bottom:1px solid var(--line)}
.winter__nr{font-family:var(--font-display);font-size:clamp(22px,1.9vw,28px);line-height:1;color:var(--red);letter-spacing:.04em;padding-top:4px}
.winter__point h3{margin:0 0 8px;font-size:15px;letter-spacing:1.4px;color:var(--ink)}
.winter__point p{margin:0;font-size:16.5px;line-height:1.7;color:var(--body)}
.winter__claim{margin:clamp(22px,2.4vw,30px) 0 0;font-weight:700;font-size:clamp(17px,1.4vw,19px);color:var(--ink)}
.winter__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:clamp(20px,2.2vw,26px)}
@media (max-width:960px){.winter__grid{grid-template-columns:1fr}}

/* ---- Zweiter Button im roten Kontaktblock ---- */
.paintmayer-section.red .paintmayer-btn--ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.75)}
.paintmayer-section.red .paintmayer-btn--ghost:hover{background:#fff;color:var(--red);border-color:#fff}
.paintmayer-section.red .pm-btnrow{margin-top:clamp(24px,2.6vw,32px)}

/* ---- Warum wir? (Modellseiten) ---- */
.why__head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,72px);align-items:end;margin-bottom:clamp(34px,3.6vw,50px)}
.why__head h2{margin:10px 0 0;color:var(--ink)!important}
.why__lead{margin:0;font-size:clamp(16.5px,1.3vw,18px);line-height:1.6;color:var(--body)}
.why__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(26px,2.6vw,40px) clamp(22px,2.4vw,36px)}
.why__item{position:relative;padding:22px 0 0;border-top:1px solid var(--line);margin:0}
.why__item::before{content:"";position:absolute;left:0;top:-1px;width:38px;height:2px;background:var(--red)}
.why__nr{display:block;font-family:var(--font-display);font-size:clamp(22px,1.9vw,28px);line-height:1;letter-spacing:.04em;color:var(--red);margin-bottom:14px}
.why__item p{margin:0;font-size:16px;line-height:1.6;color:var(--ink);font-weight:500}
.why__cta{display:flex;flex-wrap:wrap;gap:12px 14px;margin-top:clamp(36px,3.8vw,52px)}
@media (max-width:1080px){.why__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.why__head{grid-template-columns:1fr;align-items:start}}
@media (max-width:520px){.why__grid{grid-template-columns:1fr}.why__cta .btn{width:100%;justify-content:center}}
.why__head{grid-template-columns:1fr;align-items:start;gap:14px}
.why__head h2{overflow-wrap:normal;word-break:normal;hyphens:manual}
.why__lead{max-width:62ch}

/* width/height-Attribute nur fürs Seitenverhältnis (gegen Layout-Springen) – CSS-Höhen behalten Vorrang */
:where(img[width][height]){height:auto}
.site-footer img.flogo{width:auto}

/* ============================================================
   PM26 — EDITORIAL-REDESIGN (hell, ruhig, hochwertig)
   Aktiv ueber <body class="pm26">. Zuerst nur Startseite.
   Bewegung: Einblenden beim Scrollen, Bild-Aufzieher, Hover.
   Alles faellt bei prefers-reduced-motion und ohne JS weg.
   ============================================================ */
body.pm26{--maxw:1680px;--gutter:clamp(18px,2.7vw,44px);
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.76,0,.24,1)}
body.pm26 .container{padding-left:var(--gutter);padding-right:var(--gutter)}
body.pm26 [id]{scroll-margin-top:96px}
body.pm26 .section:not(.owner){padding-top:clamp(72px,8.6vw,144px);padding-bottom:clamp(72px,8.6vw,144px)}
body.pm26 ::selection{background:var(--red);color:#fff}

/* Lesefortschritt */
.pm-progress{position:fixed;left:0;top:0;width:100%;height:2px;background:var(--red);
  transform-origin:0 50%;transform:scaleX(0);z-index:1001;pointer-events:none}

/* Kopfzeile: bleibt stehen, wird beim Scrollen schlanker */
body.pm26 .site-header{position:sticky;top:0;transition:background .35s,box-shadow .35s}
body.pm26 .site-header .container{transition:min-height .45s var(--ease-out)}
body.pm26 .site-header .brand img{transition:height .45s var(--ease-out)}
body.pm26 .site-header.scrolled{background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:saturate(1.5) blur(16px);backdrop-filter:saturate(1.5) blur(16px);
  box-shadow:0 1px 0 rgba(0,0,0,.07),0 14px 34px -24px rgba(0,0,0,.25)}
@media (min-width:861px){
  body.pm26 .site-header.scrolled .container{min-height:80px}
  body.pm26 .site-header.scrolled .brand img{height:50px}
}

/* Buttons: ruhiger Hover mit Pfeil-Gefuehl */
body.pm26 .btn{padding:18px 30px;letter-spacing:.06em;font-size:12.5px;
  transition:background .35s var(--ease-out),color .35s,border-color .35s,transform .35s var(--ease-out)}
body.pm26 .btn:hover{transform:translateY(-2px)}
body.pm26 .btn--ghost{border-color:rgba(17,17,17,.22)}

/* Ueberschriften-Kopf im Zeitungssatz: links Titel, rechts Lead */
body.pm26 .head-ed{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:end;gap:clamp(18px,4vw,80px);max-width:none;text-align:left;
  margin:0 0 clamp(40px,4.4vw,72px)}
body.pm26 .head-ed h2{margin:0;font-size:clamp(26px,3.3vw,50px);line-height:1.06}
body.pm26 .head-ed .kicker{margin-bottom:clamp(14px,1.4vw,20px)}
body.pm26 .head-ed .lead{margin:0;max-width:40ch;justify-self:end;color:var(--body)}
body.pm26 .head-ed--solo{grid-template-columns:1fr}
@media (max-width:900px){
  body.pm26 .head-ed{grid-template-columns:1fr}
  body.pm26 .head-ed .lead{justify-self:start}
}

/* ---------- Hero: Titel auf Weiss, Film darunter ---------- */
.hero-ed{position:relative;background:#fff;display:flex;flex-direction:column;
  min-height:calc(100svh - var(--nav-h))}
.hero-ed__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);align-items:end;
  gap:clamp(24px,4vw,80px);padding-top:clamp(34px,4.6vw,76px);padding-bottom:clamp(28px,3.2vw,50px);width:100%}
.hero-ed__kicker{margin-bottom:clamp(16px,1.6vw,24px)}
body.pm26 h1.hero-ed__title{font-family:var(--font);font-weight:700;font-synthesis:none;text-transform:none;
  color:var(--ink);letter-spacing:-.03em;line-height:1.02;font-size:clamp(34px,4.55vw,74px);
  max-width:17ch;margin:0;text-wrap:balance;hyphens:manual}
.hero-ed__em{color:var(--red)}
.hero-ed__aside{display:flex;flex-direction:column;align-items:flex-start;gap:22px;padding-bottom:8px}
.hero-ed__rating{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--body);line-height:1.3}
.hero-ed__rating b{color:var(--ink)}
.hero-ed__rating .gr-g{flex:0 0 18px}
.hero-ed__stars{color:#f5b301;letter-spacing:2px;font-size:14px}
.hero-ed__rating:hover span:last-child{color:var(--ink)}
.hero-ed__actions{display:flex;flex-wrap:wrap;gap:10px}
.hero-ed__frame{position:relative;flex:1 1 auto;min-height:clamp(320px,52vh,760px);
  margin:0 var(--gutter);overflow:hidden;background:#1a1a1a}
.hero-ed__frame .hero__media{position:absolute;left:0;right:0;top:-7%;bottom:-7%;
  transform:translate3d(0,var(--py,0px),0);will-change:transform}
.hero-ed__frame .hero__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-ed__scroll{position:absolute;right:clamp(16px,2vw,30px);bottom:clamp(16px,2vw,30px);z-index:2;
  width:54px;height:54px;border-radius:50%;border:1px solid rgba(255,255,255,.7);
  display:flex;align-items:center;justify-content:center;transition:background .3s,border-color .3s}
.hero-ed__scroll span{position:relative;width:1px;height:18px;background:rgba(255,255,255,.35);overflow:hidden}
.hero-ed__scroll span::after{content:"";position:absolute;left:0;top:-100%;width:1px;height:100%;background:#fff;
  animation:pmScrollCue 2.2s var(--ease-io) infinite}
.hero-ed__scroll:hover{background:var(--red);border-color:var(--red)}
@keyframes pmScrollCue{0%{top:-100%}60%,100%{top:100%}}

/* Intro: Logo ueber der ganzen Seite, danach Vorhang nach oben */
body.pm26 .intro{position:fixed;inset:0;z-index:2000;background:#fff;
  animation:pmIntroOut .95s var(--ease-io) 2.1s forwards}
body.pm26 .intro__bar::after{animation-duration:2.05s}
@keyframes pmIntroOut{to{transform:translateY(-100%);visibility:hidden;pointer-events:none}}

/* Auftritt des Heros */
html.pm-js body.pm26 [data-in]{opacity:0;translate:0 26px;
  animation:pmIn 1.1s var(--ease-out) forwards;animation-delay:calc(2.55s + var(--d,0s))}
html.pm-js.intro-done body.pm26 [data-in]{animation-delay:calc(.12s + var(--d,0s))}
body.pm26 .hero-ed__title{--d:.1s}
body.pm26 .hero-ed__aside{--d:.25s}
html.pm-js body.pm26 .hero-ed__frame{clip-path:inset(9% 0 0 0);
  animation:pmFrame 1.5s var(--ease-io) forwards;animation-delay:2.35s}
html.pm-js.intro-done body.pm26 .hero-ed__frame{animation-delay:.05s}
@keyframes pmIn{to{opacity:1;translate:0 0}}
@keyframes pmFrame{to{clip-path:inset(0 0 0 0)}}

/* ---------- Modell-Index ---------- */
.model-index{background:#fff;border-bottom:1px solid var(--line)}
.model-index__inner{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);
  padding-top:clamp(34px,3.6vw,58px);padding-bottom:clamp(34px,3.6vw,58px)}
.model-index__group + .model-index__group{border-left:1px solid var(--line);padding-left:clamp(22px,3.4vw,60px)}
.model-index__label{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;
  letter-spacing:2.2px;text-transform:uppercase;color:var(--muted);margin:0 0 14px;transition:color .25s}
.model-index__label i{font-style:normal;color:var(--red)}
.model-index__label:hover{color:var(--red)}
.model-index ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.model-index li{margin:0}
.model-index li a{position:relative;display:block;font-family:var(--font-display);font-weight:400;font-synthesis:none;
  font-size:clamp(28px,3.2vw,50px);line-height:1;letter-spacing:.02em;color:var(--ink);
  padding:8px clamp(16px,1.9vw,32px) 14px 0;transition:color .3s}
.model-index li a::after{content:"";position:absolute;left:0;right:clamp(16px,1.9vw,32px);bottom:4px;height:2px;
  background:var(--red);transform:scaleX(0);transform-origin:left center;transition:transform .5s var(--ease-out)}
.model-index li a:hover{color:var(--red)}
.model-index li a:hover::after,.model-index li a:focus-visible::after{transform:scaleX(1)}
@media (max-width:900px){
  .model-index__inner{grid-template-columns:1fr;gap:26px}
  .model-index__group + .model-index__group{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:24px}
}

/* ---------- Ueber uns ---------- */
.about-ed__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6.4vw,120px);align-items:center}
.about-ed__media{margin:0;overflow:hidden;background:var(--bg-soft)}
.about-ed__media img{width:100%;height:auto}
.about-ed__lead{font-size:clamp(20px,1.85vw,27px);line-height:1.46;letter-spacing:-.012em;color:var(--ink);margin:0 0 1.05em}
.about-ed__copy p:not(.about-ed__lead){max-width:60ch}
.about-ed__copy .btn{margin-top:12px}
@media (max-width:900px){
  .about-ed__grid{grid-template-columns:1fr}
}

/* ---------- Leistungskarten (Icons bleiben) ---------- */
body.pm26 .icard-grid{counter-reset:ic;gap:clamp(14px,1.6vw,26px)}
body.pm26 .icard{counter-increment:ic;border:0;
  transition:box-shadow .6s var(--ease-out),transform .6s var(--ease-out)}
body.pm26 .icard:hover{transform:translateY(-6px);border-color:transparent;
  box-shadow:0 34px 60px -34px rgba(17,17,17,.34)}
body.pm26 .icard__media{aspect-ratio:4/3}
body.pm26 .icard__media>img{transition:transform 1.2s var(--ease-out)}
body.pm26 .icard:hover .icard__media>img{transform:scale(1.06)}
body.pm26 .icard__body{position:relative;z-index:1;background:#fff}
body.pm26 .icard__body::before{content:"0" counter(ic);position:absolute;right:clamp(18px,1.7vw,24px);top:18px;
  font-family:var(--font-display);font-size:13px;letter-spacing:.08em;color:#b4b4b4}
body.pm26 .icard__icon{z-index:2}
body.pm26 .icard::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:4;background:var(--red);
  transform:scaleX(0);transform-origin:left center;transition:transform .7s var(--ease-out)}
body.pm26 .icard:hover::after{transform:scaleX(1)}

/* ---------- Galerie ---------- */
body.pm26 .gal-ed .gallery--mosaik{grid-template-columns:1.55fr 1fr 1fr;grid-template-rows:1fr 1fr;
  height:auto;aspect-ratio:2.35/1;gap:clamp(8px,1vw,14px)}
body.pm26 .gal-ed .gallery--mosaik a:nth-child(1){grid-column:1;grid-row:1 / span 2}
body.pm26 .gal-ed .gallery--mosaik a:nth-child(2){grid-column:2;grid-row:1}
body.pm26 .gal-ed .gallery--mosaik a:nth-child(3){grid-column:3;grid-row:1}
body.pm26 .gal-ed .gallery--mosaik a:nth-child(4){grid-column:2 / span 2;grid-row:2}
body.pm26 .gallery a{position:relative}
body.pm26 .gallery img{transition:transform 1.2s var(--ease-out)}
body.pm26 .gallery a:hover img{transform:scale(1.05)}
.gallery__cap{position:absolute;left:0;right:0;bottom:0;padding:48px 20px 16px;font-size:13.5px;line-height:1.4;
  color:#fff;background:linear-gradient(180deg,transparent,rgba(0,0,0,.62));
  opacity:0;translate:0 10px;transition:opacity .5s var(--ease-out),translate .6s var(--ease-out);pointer-events:none}
.gallery a:hover .gallery__cap,.gallery a:focus-visible .gallery__cap{opacity:1;translate:0 0}
@media (max-width:820px){
  body.pm26 .gal-ed .gallery--mosaik{aspect-ratio:auto;grid-template-columns:1fr 1fr;grid-template-rows:auto}
  body.pm26 .gal-ed .gallery--mosaik a:nth-child(n){grid-column:auto;grid-row:auto;aspect-ratio:1/1}
  body.pm26 .gal-ed .gallery--mosaik a:nth-child(1){grid-column:1 / span 2;aspect-ratio:3/2}
  .gallery__cap{display:none}
}

/* ---------- Bewertungen ---------- */
body.pm26 .rev-ed{padding-top:0}
body.pm26 .rev-ed>.container{position:relative;padding-top:clamp(64px,7vw,112px)}
body.pm26 .rev-ed>.container::before{content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:1px;background:var(--line)}
.gr__score{font-family:var(--font-display);font-weight:400;font-synthesis:none;font-size:clamp(54px,5vw,78px);
  line-height:1;color:var(--ink);margin:0 0 10px;letter-spacing:.02em}
body.pm26 .rev-ed .gr-card{background:var(--bg-soft);border-color:transparent;transition:background .4s}
body.pm26 .rev-ed .gr-card:hover{background:#efefef}

/* ---------- Einblenden beim Scrollen ---------- */
html.pm-js body.pm26 [data-reveal]{opacity:0;translate:0 36px;
  transition:opacity 1s var(--ease-out),translate 1.15s var(--ease-out)}
html.pm-js body.pm26 [data-reveal].is-in{opacity:1;translate:0 0}
html.pm-js body.pm26 [data-reveal="clip"]{opacity:1;translate:0 0;clip-path:inset(14% 0 0 0);
  transition:clip-path 1.4s var(--ease-io)}
html.pm-js body.pm26 [data-reveal="clip"] img{scale:1.14;transition:scale 1.8s var(--ease-out)}
html.pm-js body.pm26 [data-reveal="clip"].is-in{clip-path:inset(0 0 0 0)}
html.pm-js body.pm26 [data-reveal="clip"].is-in img{scale:1}
html.pm-js body.pm26 [data-stagger]>*{opacity:0;translate:0 34px;
  transition:opacity .95s var(--ease-out),translate 1.1s var(--ease-out),transform .6s var(--ease-out),box-shadow .6s var(--ease-out)}
html.pm-js body.pm26 [data-stagger].is-in>*{opacity:1;translate:0 0}
html.pm-js body.pm26 [data-stagger]:not(.is-done)>*:nth-child(2){transition-delay:.09s}
html.pm-js body.pm26 [data-stagger]:not(.is-done)>*:nth-child(3){transition-delay:.18s}
html.pm-js body.pm26 [data-stagger]:not(.is-done)>*:nth-child(4){transition-delay:.27s}
html.pm-js body.pm26 [data-stagger]:not(.is-done)>*:nth-child(5){transition-delay:.36s}
html.pm-js body.pm26 [data-stagger]:not(.is-done)>*:nth-child(6){transition-delay:.45s}

/* ---------- Mobil ---------- */
@media (max-width:1100px){
  .hero-ed__top{grid-template-columns:1fr;align-items:start}
  .hero-ed__aside{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;width:100%;padding-bottom:0}
}
@media (max-width:620px){
  body.pm26 h1.hero-ed__title{font-size:clamp(28px,8.2vw,40px);line-height:1.06;max-width:none}
  .hero-ed__aside{flex-direction:column;align-items:stretch;gap:18px}
  .hero-ed__actions{display:grid;grid-template-columns:1fr 1fr}
  .hero-ed__actions .btn{justify-content:center;padding:16px 10px}
  .hero-ed__frame{min-height:56svh;margin:0}
  .hero-ed__scroll{display:none}
  .model-index li a{font-size:clamp(26px,8.4vw,34px);padding-right:18px}
  body.pm26 .section:not(.owner){padding-top:64px;padding-bottom:64px}
}

@media (prefers-reduced-motion:reduce){
  html.pm-js body.pm26 [data-in],html.pm-js body.pm26 [data-reveal],html.pm-js body.pm26 [data-stagger]>*{
    opacity:1!important;translate:none!important;animation:none!important;clip-path:none!important;transition:none!important}
  html.pm-js body.pm26 [data-reveal] img{scale:none!important}
  html.pm-js body.pm26 .hero-ed__frame{animation:none;clip-path:none}
  .hero-ed__frame .hero__media{transform:none}
  .hero-ed__scroll span::after{animation:none}
}
/* Hero-Kopf buendig mit Logo und Filmrahmen */
body.pm26 h1.hero-ed__title{max-width:22ch;font-size:clamp(34px,4.7vw,80px)}
body.pm26 .hero-ed__frame .hero__media{inset:auto;top:-8%;left:0;width:100%;height:116%}
.model-index li a{font-size:clamp(26px,2.5vw,44px);padding-right:clamp(14px,1.4vw,26px)}
.model-index li a::after{right:clamp(14px,1.4vw,26px)}
.model-index li a{font-size:clamp(24px,2.3vw,42px)}
@media (min-width:901px){.model-index ul{flex-wrap:nowrap}}
body.pm26 .icard__body::before{font-family:var(--font);font-weight:700;font-size:12px;letter-spacing:.14em;color:#b0b0b0}
@media (min-width:821px){
  body.pm26 .gal-ed .gallery--mosaik{grid-template-columns:1.3fr 1fr 1fr;aspect-ratio:2.2/1}
  body.pm26 .gal-ed .gallery--mosaik a:nth-child(2){grid-column:2;grid-row:1 / span 2}
  body.pm26 .gal-ed .gallery--mosaik a:nth-child(3){grid-column:3;grid-row:1}
  body.pm26 .gal-ed .gallery--mosaik a:nth-child(4){grid-column:3;grid-row:2}
}
@media (max-width:860px){
  body.pm26 .nav{box-shadow:none}
  body.pm26 .nav-open .nav{box-shadow:0 24px 44px rgba(0,0,0,.14)}
}
@media (max-width:620px){.hero-ed__kicker{letter-spacing:1.6px}}
@media (max-width:820px){body.pm26 .gal-ed .gallery--mosaik a:nth-child(4){grid-column:1 / span 2;aspect-ratio:2/1}}
/* Rev. 2026-09-26: schmaler, mehr Luft an den Seiten */
body.pm26{--maxw:1560px;--gutter:clamp(20px,6.5vw,128px)}

/* Rev. 2026-09-26: Text-Intro 5 s ueber dem Video, danach Vorhang nach oben */
body.pm26 .intro.intro--text{position:absolute;inset:0;z-index:3;background:#fff;display:flex;flex-direction:row;
  align-items:center;justify-content:stretch;animation:pmIntroOut .95s var(--ease-io) 5s forwards}
.intro__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);align-items:end;
  gap:clamp(24px,4vw,80px);width:100%}
.intro__head .kicker{margin-bottom:clamp(16px,1.6vw,24px)}
.intro__title{font-family:var(--font);font-weight:700;font-synthesis:none;color:var(--ink);
  letter-spacing:-.03em;line-height:1.02;font-size:clamp(34px,4.7vw,80px);max-width:22ch;margin:0;text-wrap:balance}
.intro__title span{color:var(--red)}
.intro__aside{display:flex;flex-direction:column;align-items:flex-start;gap:22px;padding-bottom:8px}
.intro__rating{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--body);line-height:1.3}
.intro__rating b{color:var(--ink)}
.intro__rating .gr-g{flex:0 0 18px}
.intro__stars{color:#f5b301;letter-spacing:2px;font-size:14px}
.intro__actions{display:flex;flex-wrap:wrap;gap:10px}
body.pm26 .intro--text .intro__bar{position:absolute;left:0;right:0;bottom:0;width:auto;height:2px;margin:0;background:rgba(17,17,17,.08)}
body.pm26 .intro--text .intro__bar::after{animation:pmIntroBar 5s linear forwards}
/* Auftritt des Textes */
.intro--text .intro__head > *,.intro--text .intro__aside{opacity:0;translate:0 24px;animation:pmIn 1.1s var(--ease-out) forwards}
.intro--text .intro__title{animation-delay:.12s}
.intro--text .intro__aside{animation-delay:.3s}
@media (max-width:1100px){
  .intro__inner{grid-template-columns:1fr;align-items:start}
  .intro__aside{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;width:100%}
}
@media (max-width:620px){
  .intro__title{font-size:clamp(28px,8.2vw,40px);line-height:1.06}
  .intro__aside{flex-direction:column;align-items:stretch;gap:18px}
  .intro__actions{display:grid;grid-template-columns:1fr 1fr}
  .intro__actions .btn{justify-content:center;padding:16px 10px}
}
@media (prefers-reduced-motion:reduce){.intro--text .intro__head > *,.intro--text .intro__aside{opacity:1;translate:none;animation:none}}

/* Abstand Galerie -> Bewertungen enger */
body.pm26 .section.gal-ed{padding-bottom:clamp(48px,5vw,80px)}
body.pm26 .rev-ed>.container{padding-top:clamp(48px,5vw,80px)}
/* Intro sitzt im .hero – dessen weisse Textfarben ueberschreiben */
.hero .intro--text .kicker{color:var(--red)}
.hero .intro--text p.intro__title{color:var(--ink);font-size:clamp(34px,4.7vw,80px);max-width:22ch;margin:0;line-height:1.02}
.hero .intro--text p.intro__title span{color:var(--red)}
@media (max-width:620px){.hero .intro--text p.intro__title{font-size:clamp(28px,8.2vw,40px);line-height:1.06}}
/* Rev.: Intro 7 s, Scroll gesperrt, Logo ueber den Bewertungen */
body.pm26 .intro.intro--text{animation-delay:7s}
body.pm26 .intro--text .intro__bar::after{animation-duration:7s}
html.pm-lock,html.pm-lock body{overflow:hidden;overscroll-behavior:none}
.intro__brand{width:clamp(200px,17vw,280px);height:auto;margin-bottom:6px}
@media (max-width:1100px){.intro__brand{width:100%;max-width:240px;flex-basis:100%}}
@media (max-width:620px){.intro__brand{max-width:200px}}
html.pm-lock{scroll-behavior:auto}

/* Rev.: Claim + zwei Buttons ueber dem Video – zurueckhaltend, unten links */
.hero-cap{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;pointer-events:none;
  background:linear-gradient(0deg,rgba(12,12,12,.62) 0%,rgba(12,12,12,.28) 26%,rgba(12,12,12,0) 50%),
             linear-gradient(90deg,rgba(12,12,12,.30) 0%,rgba(12,12,12,0) 45%)}
.hero-cap__inner{width:100%;padding-bottom:clamp(34px,5vw,72px)}
.hero-cap__inner > *{pointer-events:auto}
.hero-cap__kicker{display:block;font-size:12px;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;
  color:rgba(255,255,255,.82);margin:0 0 14px}
.hero .hero-cap__claim{font-family:var(--font);font-weight:700;font-synthesis:none;color:#fff;
  font-size:clamp(28px,3.6vw,56px);line-height:1.05;letter-spacing:-.025em;margin:0 0 clamp(20px,2vw,28px);
  max-width:18ch;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.hero-cap__actions{display:flex;flex-wrap:wrap;gap:10px}
.btn--glass{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn--glass:hover{background:#fff;color:var(--ink);border-color:#fff}
/* erst nach dem Intro einblenden */
html.pm-js .hero-cap{opacity:0;animation:pmCapIn 1.2s var(--ease-out) forwards;animation-delay:7.9s}
html.pm-js.intro-done .hero-cap{animation-delay:.3s}
html.pm-js .hero-cap__inner{translate:0 18px;animation:pmIn 1.2s var(--ease-out) forwards;animation-delay:8s}
html.pm-js.intro-done .hero-cap__inner{animation-delay:.4s}
@keyframes pmCapIn{to{opacity:1}}
@media (max-width:620px){
  .hero-cap__actions{display:grid;grid-template-columns:1fr 1fr}
  .hero-cap__actions .btn{justify-content:center;padding:15px 8px;font-size:11.5px}
  .hero-cap__kicker{letter-spacing:1.6px;font-size:11px}
}
@media (prefers-reduced-motion:reduce){html.pm-js .hero-cap,html.pm-js .hero-cap__inner{opacity:1;translate:none;animation:none}}
body.pm26 .hero--video{min-height:min(calc(100svh - var(--nav-h)),860px)}
.hero .hero-cap__claim{max-width:none}
/* Modellleiste vor den Leistungen; Ladebalken im Intro kraeftiger */
.model-index{border-top:1px solid var(--line);border-bottom:0}
body.pm26 .intro--text .intro__bar{height:5px;background:rgba(17,17,17,.1)}

/* ============================================================
   PM26 — ROLLOUT AUF ALLE SEITEN
   ============================================================ */
body.pm26 .paintmayer-container{max-width:var(--maxw);padding-left:var(--gutter);padding-right:var(--gutter)}
body.pm26 .paintmayer-section,
body.pm26 .paintmayer-section + .paintmayer-section{padding-top:clamp(72px,8vw,136px);padding-bottom:clamp(72px,8vw,136px)}
body.pm26 .section.post-main{padding-top:clamp(36px,3.6vw,60px)}
body.pm26 .site-footer{padding-top:clamp(72px,7vw,112px)}

/* Seitenkopf mit Bild: hoeher, Text unten, ruhiger Zoom beim Laden */
body.pm26 .hero--page,body.pm26 .hero--sm{min-height:clamp(420px,40vw,640px);align-items:flex-end}
body.pm26 .hero--page .hero__inner,body.pm26 .hero--sm .hero__inner{padding:clamp(56px,6vw,96px) 0 clamp(40px,4.6vw,76px)}
html.pm-js body.pm26 .hero--page .hero__media img,
html.pm-js body.pm26 .hero--sm .hero__media img{animation:pmKen 2.8s var(--ease-out) both}
@keyframes pmKen{from{transform:scale(1.08)}to{transform:scale(1)}}
html.pm-js body.pm26 .hero__inner .container > *{opacity:0;translate:0 22px;animation:pmIn 1.1s var(--ease-out) forwards}
html.pm-js body.pm26 .hero__inner .container > *:nth-child(2){animation-delay:.12s}
html.pm-js body.pm26 .hero__inner .container > *:nth-child(3){animation-delay:.24s}
html.pm-js body.pm26 .hero__inner .container > *:nth-child(n+4){animation-delay:.36s}

/* Karten */
body.pm26 .rcard{transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out),border-color .4s}
body.pm26 .rcard:hover{transform:translateY(-6px);border-color:transparent;box-shadow:0 34px 60px -34px rgba(17,17,17,.32)}
body.pm26 .rcard__img img{transition:transform 1.2s var(--ease-out)}
body.pm26 .rcard:hover .rcard__img img{transform:scale(1.05)}

/* Bilder in Inhaltsabschnitten: sanfter Zoom beim Ueberfahren */
body.pm26 .pm-project__img,body.pm26 .pm-figure,body.pm26 .paintmayer-image-wrap{overflow:hidden}
body.pm26 .pm-project__img img,body.pm26 .pm-figure img,body.pm26 .paintmayer-image-wrap img{transition:transform 1.2s var(--ease-out)}
body.pm26 .pm-project__img:hover img,body.pm26 .pm-figure:hover img,body.pm26 .paintmayer-image-wrap:hover img{transform:scale(1.04)}

/* Zweite Button-Familie angleichen */
body.pm26 .paintmayer-btn{transition:background .35s var(--ease-out),color .35s,border-color .35s,transform .35s var(--ease-out)}
body.pm26 .paintmayer-btn:hover{transform:translateY(-2px)}

/* Textlinks: feine Unterstreichung */
body.pm26 :is(.prose,.paintmayer-text,.article,.cat-intro) a:not([class]){text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:rgba(192,0,27,.45);transition:color .25s,text-decoration-color .25s}
body.pm26 :is(.prose,.paintmayer-text,.article,.cat-intro) a:not([class]):hover{color:var(--red);text-decoration-color:var(--red)}

@media (prefers-reduced-motion:reduce){
  html.pm-js body.pm26 .hero__media img,html.pm-js body.pm26 .hero__inner .container > *{animation:none;opacity:1;translate:none}
}
body.pm26 .site-header.scrolled{background:rgba(255,255,255,.96)}
/* Weiche Seitenwechsel (Chrome, Safari 18+; andere Browser ignorieren das) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
/* Mobil: lange Woerter in der breiten Porscha-Schrift sauber trennen statt mitten im Wort umbrechen */
@media (max-width:620px){
  body.pm26 .hero h1{font-size:clamp(17px,5.3vw,26px)}
  body.pm26 :is(h1,h2):not(.h-plain){hyphens:auto;-webkit-hyphens:auto;overflow-wrap:normal}
}
@media (max-width:620px){
  .model-index li a{font-size:clamp(20px,6vw,26px);padding-right:clamp(12px,3.6vw,18px);padding-bottom:10px}
  .model-index li a::after{right:clamp(12px,3.6vw,18px)}
}

/* ============================================================
   GETRIEBEINSTANDSETZUNG (Neuaufbau 2026-09-27)
   ============================================================ */
.gb-intro{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(30px,5vw,96px);align-items:start}
.gb-intro__lead{margin:0;font-size:clamp(19px,1.7vw,24px);line-height:1.52;letter-spacing:-.01em;color:var(--ink)}
.gb-intro__body{border-left:1px solid var(--line);padding-left:clamp(24px,3.4vw,56px)}
.gb-intro__body p{margin:0 0 1.1em}
.gb-intro__body .pm-btnrow{margin-top:clamp(18px,2vw,26px)}
.gb-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(20px,4vw,80px);align-items:end;margin:0 0 clamp(30px,3.4vw,52px)}
.gb-head h2{margin:0;font-size:clamp(22px,2.6vw,40px);line-height:1.1}
.gb-head .lead{margin:0;font-size:clamp(16.5px,1.3vw,18.5px);line-height:1.62}
.gb-jump{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin:0 0 clamp(56px,6.4vw,110px)}
.gb-jump a{display:flex;flex-direction:column;gap:10px;padding:clamp(20px,2.2vw,32px) clamp(14px,1.6vw,26px);position:relative;transition:background .35s}
.gb-jump a + a{border-left:1px solid var(--line)}
.gb-jump b{font-family:var(--font-display);font-weight:400;font-synthesis:none;font-size:clamp(28px,3vw,48px);line-height:1;color:var(--ink);letter-spacing:.02em;transition:color .3s}
.gb-jump span{font-size:12px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--muted)}
.gb-jump a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out,ease)}
.gb-jump a:hover b{color:var(--red)}
.gb-jump a:hover::after{transform:scaleX(1)}
.gb-project{scroll-margin-top:110px}
.pm-project h2.gb-title{font-family:var(--font);font-weight:700;font-synthesis:none;text-transform:uppercase;color:var(--ink);
  font-size:clamp(19px,1.8vw,26px);letter-spacing:1.2px;line-height:1.2;margin:0 0 20px}
.gb-sub{font-family:var(--font);font-weight:700;font-synthesis:none;text-transform:uppercase;color:var(--ink);
  font-size:14px;letter-spacing:1.6px;line-height:1.35;margin:0 0 18px;padding-top:16px;position:relative}
.gb-sub::before{content:"";position:absolute;left:0;top:0;width:38px;height:2px;background:var(--red)}
.gb-claim{margin:clamp(20px,2.2vw,30px) 0 0!important;padding-left:18px;border-left:2px solid var(--red);
  font-size:clamp(17px,1.35vw,19.5px);line-height:1.5;font-weight:700;color:var(--ink)!important}
.gb-detail{margin-top:clamp(40px,4.6vw,76px)}
.gb-gallery{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,.9vw,12px)}
.gb-gallery a{display:block;overflow:hidden;background:var(--bg-soft);aspect-ratio:3/2}
.gb-gallery a:first-child{grid-column:1 / span 2;aspect-ratio:16/9}
.gb-gallery img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out,ease)}
.gb-gallery a:hover img{transform:scale(1.05)}
.pm-project .gb-img--portrait img{height:clamp(420px,44vw,660px);max-height:none;width:100%;object-fit:cover;object-position:center 40%}
/* dunkle Sektion: Eigenentwicklung */
.gb-dark .pm-project h2.gb-title{color:#fff}
.gb-dark .gb-gallery a{background:rgba(255,255,255,.06)}
.gb-dark .btn--ghost.gb-ghost-light{color:#fff;border-color:rgba(255,255,255,.6)}
.gb-dark .btn--ghost.gb-ghost-light:hover{background:#fff;color:var(--ink);border-color:#fff}
@media (max-width:960px){
  .gb-intro,.gb-head{grid-template-columns:1fr}
  .gb-intro__body{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:24px}
  .gb-jump{grid-template-columns:1fr 1fr}
  .gb-jump a:nth-child(3){border-left:0}
  .gb-jump a:nth-child(n+3){border-top:1px solid var(--line)}
  .pm-project .gb-img--portrait img{height:auto;aspect-ratio:4/5}
}
.gb-head{grid-template-columns:1fr;align-items:start;gap:18px}
.gb-head h2{font-size:clamp(20px,2.3vw,34px);overflow-wrap:normal;hyphens:manual}
.gb-head .lead{max-width:82ch}

/* ============================================================
   Rev. 2026-09-30: Porscha-Schrift nur noch fuer „Porsche" (+ Modell).
   Ueberschriften sonst in Helvetica Neue Bold – besser lesbar.
   ============================================================ */
h1,h2,.paintmayer-text h1,.paintmayer-text h2,.hero h1,.hero--page h1,.feature-row--split h1,.article h1,
body.pm26 .head-ed h2,.gb-head h2,.section-head h2{
  font-family:var(--font);font-weight:700;font-synthesis:none;letter-spacing:.005em}
.pm-marke{font-family:var(--font-display);font-weight:400;font-synthesis:none;letter-spacing:.03em}
/* Zahlen, die kein Porsche-Modell sind */
.owner__facts b,.winter__nr,.why__nr,.gr__score{font-family:var(--font);font-weight:700;font-synthesis:none;letter-spacing:0}
/* Mega-Menue: Pfeil neben wassergekuehlt / luftgekuehlt */
.megamenu .mega-head span i{font-style:normal;display:inline-block;margin-left:4px;transition:transform .25s var(--ease)}
.megamenu a.mega-head:hover span i{transform:translateX(4px)}
/* Leistungen: „Weitere Leistungen" – Titel auf einer Linie, auch ohne Icon */
.gb-weitere .icard--noicon .icard__body{padding-top:clamp(40px,3.6vw,52px)}
.icard h3{hyphens:manual;overflow-wrap:normal}

/* ============================================================
   01.10. — Feedback: schwarze Headlines, Porsche-Schrift groesser,
   Weissraum nur dort kuerzen, wo zwei gleichfarbige Abschnitte aufeinandertreffen
   (Klasse .pm-join setzt script.js, wenn Hintergrund oben und unten gleich ist)
   ============================================================ */
body.pm26 section.pm-join{padding-top:0!important}
/* Porsche-Schrift optisch auf Versalhoehe der HN Bold */
.pm-marke{font-size:1.5em;line-height:.78;letter-spacing:.01em;vertical-align:baseline}
/* Header samt Dropdown immer ueber dem Seitenkopf-Bild (Safari legt animierte Bilder sonst darueber) */
body.pm26 .site-header{z-index:1000;-webkit-transform:translateZ(0);transform:translateZ(0)}
body.pm26 .hero,body.pm26 .hero--page,body.pm26 .hero--sm{z-index:0}
body.pm26 .nav .submenu,body.pm26 .megamenu{z-index:1001}
/* Filter-Dropdowns (Referenzen/Kategorien): immer ueber den Projektkarten, bleiben beim Ueberfahren offen */
.ref-filter{position:relative;z-index:60}
.ref-fdrop{z-index:1}
.ref-fdrop:hover,.ref-fdrop.is-open{z-index:2}
.ref-fmenu{z-index:70;top:100%;margin-top:0}
.ref-fmenu::before{top:-14px;height:14px}
.ref-fdrop.is-open .ref-fmenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);transition-delay:0s}
@media(min-width:901px){.ref-fdrop{padding-bottom:8px;margin-bottom:-8px}}
/* Porsche-Schrift nur, wo sie gut steht: nicht mitten im Satz und nicht in Projektkarten */
.pm-marke.pm-marke--plain,.rcard .pm-marke{font:inherit;letter-spacing:inherit;line-height:inherit}