@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-400-900.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-var.woff2') format('woff2');
}


/* Layout: Dachneigung als Leitmotiv – eine schräge Kante im Kopf jeder Seite, sonst ruhiges Raster auf Schiefergrau. */
:root{
  --bg:#F2F3F4; --surface:#FFFFFF; --ink:#22262B; --muted:#5B6168; --line:#D7DADD;
  --red:#E72750; --red-ink:#FFFFFF; --wood:#B98B4E; --band:#22262B; --band-ink:#F2F3F4;
  --ok:#2F7D4F; --warn:#B26A00; --crit:#C2183C;
  --f-display:"Archivo","Arial Narrow",Arial,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.5rem;--s6:2rem;--s7:3rem;--s8:4.5rem;
  --wrap:72rem; --radius:4px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#15171A;--surface:#1E2125;--ink:#ECEDEE;--muted:#A2A8AF;--line:#32363B;
  --red:#FF4F72;--red-ink:#15171A;--wood:#D4A867;--band:#0E0F11;--band-ink:#ECEDEE;
  --ok:#5FC08A;--warn:#F0A43A;--crit:#FF6B88;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#15171A;--surface:#1E2125;--ink:#ECEDEE;--muted:#A2A8AF;--line:#32363B;
  --red:#FF4F72;--red-ink:#15171A;--wood:#D4A867;--band:#0E0F11;--band-ink:#ECEDEE;
  --ok:#5FC08A;--warn:#F0A43A;--crit:#FF6B88;color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 var(--f-body);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--surface)}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3,h4{font-family:var(--f-display);line-height:1.08;text-wrap:balance;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(2.2rem,5.4vw,4.1rem);font-weight:850;font-stretch:112%}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:800;font-stretch:108%}
h3{font-size:1.3rem;font-weight:750;font-stretch:104%}
h4{font-size:1.05rem;font-weight:700}
p{margin:0;max-width:65ch}
a{color:inherit}
img{display:block;max-width:100%}
.eyebrow{font:500 .78rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.muted{color:var(--muted)}
.stack{display:flex;flex-direction:column;gap:var(--s4)}
.stack-lg{display:flex;flex-direction:column;gap:var(--s6)}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
@media (prefers-reduced-motion:no-preference){.view{animation:in .35s ease-out}@keyframes in{from{transform:translateY(6px)}to{transform:none}}}

/* Entwurfs-Hinweis */
.draft{background:var(--wood);color:#1B1408;font:500 .82rem/1.3 var(--f-mono)}
.draft .wrap{display:flex;gap:var(--s4);align-items:center;justify-content:space-between;flex-wrap:wrap;padding-block:.5rem}
.draft a{font-weight:600}

/* Kopf */
.top{background:var(--band);color:var(--band-ink);font-size:.88rem}
.top .wrap{display:flex;gap:var(--s5);justify-content:space-between;flex-wrap:wrap;padding-block:.45rem}
.top b{color:var(--red)}
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--surface);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding-block:.7rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink)}
.brand svg{width:3.4rem;height:2.4rem;flex:none}
.brand strong{display:block;font:850 1.35rem/1 var(--f-display);font-stretch:105%}
.brand span{display:block;font:500 .78rem/1.3 var(--f-body);color:var(--muted)}
nav.main{display:flex;gap:.2rem;align-items:center}
nav.main a{text-decoration:none;font-weight:500;padding:.5rem .7rem;border-radius:var(--radius);font-size:.97rem}
nav.main a:hover{background:var(--bg)}
nav.main a[aria-current="page"]{color:var(--red)}
.btn{display:inline-flex;align-items:center;gap:.5rem;font:600 1rem/1 var(--f-body);text-decoration:none;padding:.85rem 1.2rem;border-radius:var(--radius);border:2px solid var(--red);background:var(--red);color:var(--red-ink);cursor:pointer}
.btn:hover{filter:brightness(1.07)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.small{padding:.6rem .9rem;font-size:.92rem}
.menu-btn{display:none;background:none;border:1px solid var(--line);color:var(--ink);border-radius:var(--radius);padding:.5rem .7rem;font:600 .95rem var(--f-body);cursor:pointer}
@media (max-width:960px){
  .menu-btn{display:block}
  nav.main{display:none;position:absolute;left:0;right:0;top:100%;background:var(--surface);flex-direction:column;align-items:stretch;padding:.5rem max(16px,env(safe-area-inset-right,0px)) 1rem max(16px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--line)}
  nav.main.open{display:flex}
  nav.main a{padding:.8rem .5rem;font-size:1.05rem}
}

/* Hero mit Dachneigung */
.hero{position:relative;background:var(--surface);overflow:hidden;border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--s6);align-items:center;padding-block:var(--s7) var(--s8)}
.hero-copy{display:flex;flex-direction:column;gap:var(--s5)}
.hero-copy h1 em{font-style:normal;color:var(--red)}
.hero-copy p.lead{font-size:1.2rem;color:var(--muted)}
.cta{display:flex;gap:var(--s3);flex-wrap:wrap}
.hero-img{position:relative;aspect-ratio:4/3.3;max-width:100%}
.hero-img img{width:100%;height:100%;object-fit:cover;clip-path:polygon(0 38%,62% 0,100% 0,100% 100%,0 100%)}
.hero-img::after{content:"";position:absolute;left:-6%;top:31%;width:72%;height:6px;background:var(--red);transform-origin:left;transform:rotate(-31.5deg)}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.facts div{padding:var(--s4) var(--s4) var(--s4) 0;display:flex;flex-direction:column;gap:.2rem}
.facts div+div{padding-left:var(--s4);border-left:1px solid var(--line)}
.facts b{font:800 1.4rem/1.1 var(--f-display);font-stretch:108%}
.facts span{font-size:.88rem;color:var(--muted)}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr;padding-block:var(--s6)}
  .hero-img{order:-1}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts div:nth-child(3){padding-left:0;border-left:0}
  .facts div:nth-child(n+3){border-top:1px solid var(--line)}
}

/* Unterseiten-Kopf */
.pagehead{background:var(--surface);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.pagehead .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:var(--s6);align-items:end;padding-block:var(--s7) var(--s6)}
.pagehead .ph-img{aspect-ratio:16/10;max-width:100%}
.pagehead .ph-img img{width:100%;height:100%;object-fit:cover;clip-path:polygon(0 30%,55% 0,100% 0,100% 100%,0 100%)}
.pagehead .ph-img.portrait{aspect-ratio:4/5;max-height:34rem;justify-self:end;width:100%}
.pagehead .ph-img.portrait img{clip-path:none;border-radius:var(--radius);object-position:60% 90%}
.ph-cap{font:500 .8rem/1.4 var(--f-mono);color:var(--muted);margin-top:.5rem}
@media (max-width:760px){.pagehead .wrap{grid-template-columns:1fr}.pagehead .ph-img{order:-1}.pagehead .ph-img.portrait{aspect-ratio:4/4.4;justify-self:stretch}}

section.block{padding-block:var(--s8)}
section.block.alt{background:var(--surface);border-block:1px solid var(--line)}
.sec-head{display:flex;flex-direction:column;gap:var(--s3);margin-bottom:var(--s6)}

/* Leistungen */
.services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.svc{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit}
.svc img{aspect-ratio:4/3;width:100%;object-fit:cover}
.svc .b{display:flex;flex-direction:column;gap:.45rem;padding:var(--s4) var(--s4) var(--s5)}
.svc .b p{font-size:.97rem;color:var(--muted)}
.svc .go{margin-top:auto;padding-top:.4rem;font-weight:600;color:var(--red)}
.svc:hover h3{color:var(--red)}
@media (max-width:900px){.services{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.services{grid-template-columns:1fr}}

/* Zweispalter */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s7);align-items:center}
.split.rev .media{order:2}
.split .media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
.split .media.tall img{aspect-ratio:3/4}
@media (max-width:820px){.split{grid-template-columns:1fr;gap:var(--s5)}.split.rev .media{order:0}}
ul.ticks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.55rem}
ul.ticks li{position:relative;padding-left:1.6rem}
ul.ticks li::before{content:"";position:absolute;left:0;top:.55em;width:.8rem;height:.55rem;border-left:3px solid var(--red);border-bottom:3px solid var(--red);transform:rotate(-45deg) translateY(-3px)}

/* Material-Leiste */
.materials{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
.mat{border-top:3px solid var(--wood);padding-top:var(--s3);display:flex;flex-direction:column;gap:.35rem}
.mat b{font-family:var(--f-display);font-weight:750;font-size:1.1rem}
.mat span{font-size:.95rem;color:var(--muted)}
@media (max-width:820px){.materials{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Projekte */
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.gallery figure{margin:0;display:flex;flex-direction:column;gap:.4rem}
.gallery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius)}
.gallery figcaption{font-size:.88rem;color:var(--muted)}
.gallery figure.wide{grid-column:span 2}
.gallery figure.wide img{aspect-ratio:2/1}
@media (max-width:820px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Ablauf */
ol.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s4);counter-reset:s}
ol.steps li{counter-increment:s;display:flex;flex-direction:column;gap:.4rem;padding-top:var(--s3);border-top:2px solid var(--ink)}
ol.steps li::before{content:counter(s);font:500 .85rem var(--f-mono);color:var(--red)}
ol.steps b{font-family:var(--f-display);font-weight:750;font-size:1.08rem}
ol.steps span{font-size:.93rem;color:var(--muted)}
@media (max-width:900px){ol.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){ol.steps{grid-template-columns:1fr}}

/* Notfall-Band */
.emergency{position:relative;color:#F4F4F4;background:#1A1C1F}
.emergency .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32}
.emergency .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--s6);align-items:center;padding-block:var(--s8)}
.emergency .phone{font:800 clamp(1.8rem,4vw,2.8rem)/1 var(--f-display);font-stretch:110%;color:#FFFFFF;text-decoration:none;font-variant-numeric:tabular-nums}
.emergency .eyebrow{color:#FF6B88}
.emergency p{color:#D6D8DA}
@media (max-width:760px){.emergency .wrap{grid-template-columns:1fr}}

/* Kontaktkarte */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--s7)}
@media (max-width:820px){.contact{grid-template-columns:1fr;gap:var(--s5)}}
dl.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.55rem 1.2rem;margin:0}
dl.kv dt{font:500 .8rem/1.9 var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
dl.kv dd{margin:0;font-variant-numeric:tabular-nums}
form.f{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
form.f .full{grid-column:1/-1}
form.f label{display:flex;flex-direction:column;gap:.3rem;font-weight:500;font-size:.95rem}
form.f input,form.f textarea,form.f select{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:.7rem .8rem;width:100%}
form.f textarea{min-height:8rem;resize:vertical}
form.f .check{flex-direction:row;align-items:flex-start;gap:.6rem;font-weight:400;font-size:.9rem;color:var(--muted)}
form.f .check input{width:auto;margin-top:.3rem}
.formmsg{grid-column:1/-1;font-size:.95rem;padding:.7rem .9rem;border-left:3px solid var(--wood);background:var(--bg)}
@media (max-width:560px){form.f{grid-template-columns:1fr}}

/* Datenblatt Kran */
.spec{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.spec th,.spec td{text-align:left;padding:.65rem .5rem;border-bottom:1px solid var(--line);vertical-align:top}
.spec th{font-weight:500;color:var(--muted);width:55%}
.spec td{font:500 1rem var(--f-mono)}
.spec caption{text-align:left;font:750 1.1rem var(--f-display);padding-bottom:.5rem}
.kfacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);margin-top:var(--s3)}
.kfacts div{padding:var(--s4) var(--s3) 0 0;display:flex;flex-direction:column;gap:.2rem}
.kfacts div+div{padding-left:var(--s4);border-left:1px solid var(--line)}
.kfacts b{font:800 clamp(1.3rem,2.6vw,1.8rem)/1.05 var(--f-display);font-stretch:108%;font-variant-numeric:tabular-nums}
.kfacts span{font-size:.88rem;color:var(--muted)}
.diagrams{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--s5);align-items:start}
.diagrams figure{margin:0;display:flex;flex-direction:column;gap:.6rem}
.diagrams .sheet{background:#FFFFFF;border:1px solid var(--line);border-radius:var(--radius);padding:var(--s3)}
.diagrams img{width:100%;height:auto}
.diagrams figcaption{display:flex;flex-direction:column;gap:.15rem;font-size:.93rem}
.diagrams figcaption span{color:var(--muted)}
.spec.loads{max-width:36rem}
.spec.loads th,.spec.loads td{width:auto}
.spec.loads thead th{font:500 .8rem var(--f-mono);text-transform:uppercase;letter-spacing:.08em}
@media (max-width:760px){.diagrams{grid-template-columns:1fr}}
.price{display:flex;gap:var(--s5);flex-wrap:wrap}
.price div{border:1px solid var(--line);background:var(--surface);border-radius:var(--radius);padding:var(--s4) var(--s5);display:flex;flex-direction:column;gap:.2rem}
.price b{font:800 1.8rem/1 var(--f-display);font-variant-numeric:tabular-nums}
.price span{font-size:.9rem;color:var(--muted)}

/* Jobs */
.jobs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
.job{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4)}
.job .meta{display:flex;gap:.5rem;flex-wrap:wrap}
.chip{font:500 .78rem/1 var(--f-mono);padding:.35rem .55rem;border-radius:99px;border:1px solid var(--line);color:var(--muted)}
.benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.benefits div{display:flex;flex-direction:column;gap:.35rem}
.benefits b{font-family:var(--f-display);font-weight:750;font-size:1.08rem}
.benefits span{font-size:.95rem;color:var(--muted)}
@media (max-width:820px){.jobs,.benefits{grid-template-columns:1fr}}

/* Rechtstexte */
.legal{display:flex;flex-direction:column;gap:var(--s5);max-width:48rem}
.legal h3{margin-top:var(--s3)}
.todo{background:color-mix(in srgb,var(--warn) 18%,transparent);border-radius:3px;padding:0 .3rem;font-family:var(--f-mono);font-size:.88em}

/* Fuß */
footer.site{background:var(--band);color:var(--band-ink);padding-block:var(--s7) var(--s5)}
footer.site .cols{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:var(--s6)}
footer.site h4{font-size:.8rem;font-family:var(--f-mono);font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#9AA0A6;margin-bottom:.6rem}
footer.site ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem}
footer.site a{text-decoration:none;opacity:.9}
footer.site a:hover{opacity:1;text-decoration:underline}
footer.site .base{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid #3A3E44;font-size:.85rem;color:#9AA0A6;display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
@media (max-width:820px){footer.site .cols{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Prüfbericht */
.rep-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.rep-summary div{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s4);display:flex;flex-direction:column;gap:.2rem}
.rep-summary b{font:800 2rem/1 var(--f-display)}
.rep-list{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.rep{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:var(--s4);padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.rep .what{display:flex;flex-direction:column;gap:.35rem}
.rep .where{font:500 .8rem var(--f-mono);color:var(--muted)}
.rep .fix{font-size:.95rem}
.rep .fix::before{content:"Lösung: ";font-weight:600}
.sev{align-self:start;font:600 .75rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.06em;padding:.4rem .5rem;border-radius:3px;text-align:center}
.sev.crit{background:color-mix(in srgb,var(--crit) 16%,transparent);color:var(--crit)}
.sev.warn{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.sev.ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
@media (max-width:560px){.rep{grid-template-columns:1fr;gap:.5rem}.sev{justify-self:start}.rep-summary{grid-template-columns:1fr}}
.imgsug{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.imgsug figure{margin:0;display:flex;flex-direction:column;gap:.4rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.imgsug img{width:100%;aspect-ratio:3/2;object-fit:cover}
.imgsug figcaption{padding:0 var(--s3) var(--s3);font-size:.9rem;display:flex;flex-direction:column;gap:.2rem}
@media (max-width:760px){.imgsug{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tablewrap{overflow-x:auto}

/* WordPress-Ergänzungen */
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link:focus{position:fixed;left:1rem;top:1rem;z-index:100;width:auto;height:auto;clip:auto;background:var(--surface);color:var(--ink);padding:.6rem 1rem}
.entry{display:flex;flex-direction:column;gap:var(--s4)}
.entry > *{max-width:100%}
.entry p,.entry li{max-width:70ch}
.entry h2{margin-top:var(--s5)}
.entry h3{margin-top:var(--s4)}
.entry img{height:auto}
.entry .wpb_wrapper p{max-width:70ch}
.wp-page .wrap{max-width:var(--wrap)}
form.f .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formmsg.ok{border-left-color:var(--ok)}
.formmsg.err{border-left-color:var(--crit)}
body.admin-bar header.site{top:calc(32px + env(safe-area-inset-top,0px))}
@media (max-width:782px){body.admin-bar header.site{top:calc(46px + env(safe-area-inset-top,0px))}}