/* Schaltschrank-Präzision – Henryk Moryl Elektrotechnik */
:root{
  --primary:#1B2330; --accent:#F5C518; --copper:#B8703F; --bg:#F4F2EE; --text:#141A24;
  --radius:4px; --ease-out:cubic-bezier(0.22,1,0.36,1); --dur-ui:200ms;
  --ink-2:oklch(0.24 0.03 255); --tint:#EAE7E0; --line:oklch(0.24 0.03 255 / .14);
  --muted:oklch(0.42 0.02 255); --copper-ink:#8A4F26;
  --on-dark:#EEEBE4; --on-dark-mute:rgba(238,235,228,.74); --line-dark:rgba(238,235,228,.09);
  --shadow:0 1px 2px rgba(20,26,36,.06),0 8px 24px -8px rgba(20,26,36,.16);
  --f-display:'Barlow Condensed','Arial Narrow',sans-serif; --f-text:'Hanken Grotesk',system-ui,sans-serif;
  --hh:76px; --gap:1.5rem;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.0625rem/1.65 var(--f-text);text-wrap:pretty;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
img,video,iframe{max-width:100%;height:auto;display:block}
svg{max-width:100%;height:auto}
.icon{width:1.4em;height:1.4em;max-width:32px;max-height:32px;flex:0 0 auto;vertical-align:middle}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display);font-weight:700;line-height:1.02;letter-spacing:.005em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.5rem,6vw,5rem);text-transform:uppercase}
h2{font-size:clamp(1.9rem,3.6vw,3rem);text-transform:uppercase}
h3{font-size:1.6rem;text-transform:uppercase;letter-spacing:.01em}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--primary);padding:.75rem 1rem;z-index:200}
.skip:focus{left:0}
.wrap{width:min(1240px,100% - 3rem);margin-inline:auto}
.grid12{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.grid-bg{background-color:var(--primary);color:var(--on-dark);
  background-image:linear-gradient(var(--line-dark) 1px,transparent 1px),linear-gradient(90deg,var(--line-dark) 1px,transparent 1px);
  background-size:48px 48px;background-position:-1px -1px}

/* Header */
.site-header{position:sticky;top:0;z-index:100;background:var(--primary);color:var(--on-dark);border-bottom:1px solid var(--line-dark);transition:box-shadow var(--dur-ui) var(--ease-out)}
.header-row{display:flex;align-items:center;gap:2rem;min-height:var(--hh);transition:min-height var(--dur-ui) var(--ease-out)}
.site-header.is-scrolled{box-shadow:0 8px 24px -10px rgba(0,0,0,.5)}
.site-header.is-scrolled .header-row{min-height:60px}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;flex:0 0 auto}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;background:var(--accent);color:var(--primary);border-radius:var(--radius)}
.brand-text{display:flex;flex-direction:column;line-height:1;font-family:var(--f-display);text-transform:uppercase}
.brand-text strong{font-size:1.45rem;letter-spacing:.02em}
.brand-text em{font-style:normal;font-weight:500;font-size:.95rem;letter-spacing:.24em;color:var(--accent)}
.brand-logo{max-height:48px;width:auto}
.nav-main{margin-left:auto}
.menu,.drawer-menu,.f-menu{list-style:none;margin:0;padding:0}
.menu{display:flex;gap:clamp(1.1rem,2vw,2rem);flex-wrap:nowrap}
.menu a{display:block;padding:.6rem 0;text-decoration:none;font-weight:500;font-size:.95rem;white-space:nowrap;position:relative;color:var(--on-dark-mute);transition:color var(--dur-ui) var(--ease-out)}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:.2rem;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-ui) var(--ease-out)}
.menu a:hover,.menu .current-menu-item a{color:#fff}
.menu a:hover::after,.menu .current-menu-item a::after{transform:scaleX(1)}
.header-call{flex:0 0 auto}
.burger{display:none;width:48px;height:48px;border:1px solid var(--line-dark);background:transparent;border-radius:var(--radius);cursor:pointer;padding:0;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.burger span{display:block;width:22px;height:2px;background:var(--on-dark);transition:transform var(--dur-ui) var(--ease-out),opacity var(--dur-ui)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.drawer{position:fixed;inset:var(--hh) 0 0 0;z-index:90;background:var(--primary);color:var(--on-dark);padding:1.5rem;overflow-y:auto;transform:translateX(100%);transition:transform 260ms var(--ease-out);display:flex;flex-direction:column;gap:1.5rem}
.drawer[hidden]{display:none}
.drawer.is-open{transform:none}
.drawer-menu a{display:flex;min-height:56px;align-items:center;font:700 1.9rem var(--f-display);text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--line-dark)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:48px;padding:.7rem 1.4rem;border-radius:var(--radius);font:600 1rem var(--f-text);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform var(--dur-ui) var(--ease-out),background var(--dur-ui) var(--ease-out),box-shadow var(--dur-ui) var(--ease-out),color var(--dur-ui)}
.btn:active{transform:scale(.98)}
.btn--signal{background:var(--accent);color:var(--primary);box-shadow:0 1px 0 rgba(0,0,0,.2)}
.btn--signal:hover{background:#FFD43B;box-shadow:0 6px 18px -6px rgba(245,197,24,.55);transform:translateY(-1px)}
.btn--signal:active{transform:scale(.98)}
.btn--ghost{border-color:rgba(238,235,228,.4);color:var(--on-dark)}
.btn--ghost:hover{border-color:var(--on-dark);background:rgba(238,235,228,.08)}
.btn--ghost-ink{border-color:var(--primary);color:var(--primary)}
.btn--ghost-ink:hover{background:var(--primary);color:var(--on-dark)}
.btn--block{display:flex;width:100%}
.btn .icon{width:20px;height:20px;transition:transform var(--dur-ui) var(--ease-out)}
.btn:hover .icon{transform:translateX(2px)}

/* Hero */
.hero{padding:clamp(2.5rem,6vw,5rem) 0 clamp(2.5rem,6vw,4.5rem);border-bottom:4px solid var(--accent)}
.hero-grid{align-items:center}
.hero-copy{grid-column:1 / 7}
.hero-slider{grid-column:7 / 13}
.kicker{font:600 .9rem var(--f-text);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:1.1rem;display:flex;align-items:center;gap:.7rem}
.kicker::before{content:"";width:28px;height:2px;background:currentColor}
.kicker--ink{color:var(--copper-ink)}
.hero h1{margin-bottom:1.4rem}
.lead{font-size:1.2rem;color:var(--on-dark-mute);max-width:34em}
.cta-row{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}
.slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:var(--radius);box-shadow:0 30px 60px -30px rgba(0,0,0,.7),0 0 0 1px var(--line-dark)}
.slides::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:start;margin:0;position:relative;aspect-ratio:4/3.4;background:#0f141c}
.slide img{width:100%;height:100%;object-fit:cover}
.slide figcaption{position:absolute;left:0;right:0;bottom:0;padding:1rem 1.25rem;background:rgba(27,35,48,.92);display:flex;flex-direction:column;gap:.15rem}
.slide figcaption strong{font:700 1.3rem var(--f-display);text-transform:uppercase;letter-spacing:.02em}
.slide figcaption span{font-size:.95rem;color:var(--on-dark-mute)}
.slider-ui{display:flex;align-items:center;justify-content:space-between;margin-top:.9rem}
.s-btn{width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--line-dark);background:transparent;color:var(--on-dark);border-radius:var(--radius);cursor:pointer;transition:background var(--dur-ui),transform var(--dur-ui) var(--ease-out)}
.s-btn:hover{background:rgba(238,235,228,.1)}
.s-btn:active{transform:scale(.96)}
.dots{display:flex;gap:.5rem}
.dot{width:44px;height:44px;display:grid;place-items:center;background:none;border:0;cursor:pointer;padding:0}
.dot::before{content:"";width:28px;height:3px;background:rgba(238,235,228,.3);transition:background var(--dur-ui),width var(--dur-ui) var(--ease-out)}
.dot[aria-current="true"]::before{background:var(--accent);width:38px}

/* Stats */
.stats{border-bottom:1px solid var(--line);background:var(--bg)}
.stat{grid-column:span 4;padding:clamp(1.6rem,3vw,2.6rem) 0;display:flex;align-items:baseline;gap:1rem;border-left:1px solid var(--line);padding-left:1.5rem}
.stat:first-child{border-left:0;padding-left:0}
.stat-n{font:700 clamp(3rem,6vw,5rem)/1 var(--f-display);color:var(--primary);min-width:1.2ch}
.stat-l{color:var(--muted);font-size:1rem;max-width:14em;line-height:1.35}

/* Sections */
.section{padding:clamp(3.5rem,8vw,7rem) 0}
.section--tint{background:var(--tint)}
.sec-head{max-width:46rem;margin-bottom:clamp(2rem,4vw,3.5rem)}
.sec-head h2{margin-top:.2rem}
.svc-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.svc{grid-column:span 6;position:relative;display:grid;grid-template-columns:5fr 7fr;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform var(--dur-ui) var(--ease-out),box-shadow var(--dur-ui) var(--ease-out)}
.svc:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(20,26,36,.06),0 16px 32px -10px rgba(20,26,36,.25)}
.svc:active{transform:scale(.99)}
.svc-link{position:absolute;inset:0;z-index:2}
.svc-media{overflow:hidden;background:var(--tint);min-height:100%}
.svc-media img{width:100%;height:100%;object-fit:cover;transition:transform 500ms var(--ease-out)}
.svc:hover .svc-media img{transform:scale(1.04)}
.svc-body{padding:1.5rem;display:flex;flex-direction:column;gap:.55rem;position:relative}
.svc-no{position:absolute;right:1.25rem;top:1rem;font:600 .95rem var(--f-display);letter-spacing:.14em;color:var(--copper-ink)}
.svc-ico{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:var(--radius);color:var(--primary)}
.svc h3{color:var(--primary)}
.svc p{color:var(--muted);font-size:1rem;margin:0}
.svc-more{margin-top:auto;display:inline-flex;align-items:center;gap:.4rem;font-weight:600;color:var(--primary)}
.svc-more .icon{width:18px;height:18px;transition:transform var(--dur-ui) var(--ease-out)}
.svc:hover .svc-more .icon{transform:translateX(4px)}
.about-copy{grid-column:1 / 8}
.about-img{grid-column:8 / 13}
.about-img img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow);aspect-ratio:4/5;object-fit:cover}
.band{padding:clamp(3rem,7vw,5.5rem) 0;border-top:4px solid var(--accent)}
.band-copy{grid-column:1 / 8}
.band-copy p{color:var(--on-dark-mute);font-size:1.15rem;margin-top:1rem;max-width:34em}
.band-list{grid-column:9 / 13;align-self:center}
.contact-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.9rem}
.contact-list li{display:flex;align-items:center;gap:.7rem}
.contact-list .icon{color:var(--accent);width:22px;height:22px}
.contact-list a{text-decoration:none;font-weight:600}
.band-list li a:not(.btn){font:700 1.9rem var(--f-display);letter-spacing:.02em}

/* Unterseiten */
.page-hero{padding:clamp(2.5rem,6vw,4.5rem) 0;border-bottom:4px solid var(--accent)}
.page-hero .grid12{align-items:center}
.ph-copy{grid-column:1 / 8}
.ph-img{grid-column:8 / 13}
.ph-img img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);box-shadow:0 30px 60px -30px rgba(0,0,0,.7),0 0 0 1px var(--line-dark)}
.crumbs{font-size:.9rem;color:var(--on-dark-mute);margin-bottom:1rem}
.crumbs a{text-decoration:none;border-bottom:1px solid var(--line-dark)}
.page-hero h1{font-size:clamp(2.4rem,5.4vw,4.4rem);margin-bottom:1.2rem}
.page-grid .prose{grid-column:1 / 9}
.page-grid .aside{grid-column:10 / 13}
.page-grid--legal .prose{grid-column:1 / 11}
.aside{align-self:start;position:sticky;top:96px;display:flex;flex-direction:column;gap:1.5rem}
.aside-card{background:var(--primary);color:var(--on-dark);padding:1.5rem;border-radius:var(--radius);display:flex;flex-direction:column;gap:.9rem;box-shadow:var(--shadow)}
.aside-card h2,.aside-nav h2{font-size:1.5rem}
.aside-addr{font-size:.95rem;color:var(--on-dark-mute);margin:0}
.aside-card .btn--ghost-ink{border-color:rgba(238,235,228,.4);color:var(--on-dark)}
.aside-card .btn--ghost-ink:hover{background:var(--on-dark);color:var(--primary)}
.aside-nav ul{list-style:none;margin:.8rem 0 0;padding:0;border-top:1px solid var(--line)}
.aside-nav a{display:flex;justify-content:space-between;align-items:center;min-height:48px;text-decoration:none;border-bottom:1px solid var(--line);font-weight:500;transition:padding var(--dur-ui) var(--ease-out),color var(--dur-ui)}
.aside-nav a:hover{padding-left:.5rem;color:var(--copper-ink)}
.aside-nav .icon{width:16px;height:16px}

/* Gutenberg-Inhalt */
.prose>*+*{margin-top:1.15rem}
.prose h2{margin-top:2.8rem;font-size:clamp(1.8rem,3vw,2.5rem);color:var(--primary)}
.prose h3{margin-top:2rem;color:var(--primary)}
.prose p,.prose li{max-width:66ch}
.prose ul,.prose ol{padding-left:1.2rem}
.prose ul li::marker{color:var(--copper)}
.prose li{margin:.35rem 0}
.prose a{color:var(--primary);text-decoration-color:var(--copper);text-underline-offset:3px}
.prose .wp-block-separator{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
.prose .wp-block-group.has-background{padding:1.5rem;border-radius:var(--radius)}
.prose .wp-block-columns{gap:var(--gap)}
.prose figure img{border-radius:var(--radius)}
.prose .wp-block-button__link{background:var(--accent);color:var(--primary);border-radius:var(--radius);font-weight:600;padding:.8rem 1.4rem}
.prose .wp-block-quote{border-left:3px solid var(--copper);padding-left:1.2rem;margin-left:0}
.section--tint .prose h2{margin-top:0}
.about-copy .prose,.about-copy{color:var(--text)}

/* Formular (CF7) */
.wpcf7-form p{margin:0 0 1rem}
.wpcf7-form label{display:block;font-weight:600;font-size:.95rem}
.wpcf7-form input:not([type=submit]),.wpcf7-form textarea{display:block;width:100%;min-height:48px;margin-top:.35rem;padding:.7rem .9rem;font:inherit;background:#fff;border:1px solid oklch(0.24 0.03 255 / .35);border-radius:var(--radius);transition:border-color var(--dur-ui),box-shadow var(--dur-ui)}
.wpcf7-form textarea{min-height:160px}
.wpcf7-form input:focus,.wpcf7-form textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(245,197,24,.55);outline:0}
.wpcf7-form input[type=submit]{width:auto;background:var(--accent);color:var(--primary);font-weight:700;border:0;padding:.8rem 1.8rem;cursor:pointer;border-radius:var(--radius);transition:transform var(--dur-ui) var(--ease-out),background var(--dur-ui)}
.wpcf7-form input[type=submit]:hover{background:#FFD43B}
.wpcf7-form input[type=submit]:active{transform:scale(.98)}
.wpcf7 form .wpcf7-response-output{border-radius:var(--radius);margin:1rem 0 0}

/* Footer */
.site-footer{background:#141A24;color:var(--on-dark);padding-top:clamp(3rem,6vw,4.5rem)}
.f-brand{grid-column:1 / 6}
.f-col{grid-column:span 3}
.f-contact{grid-column:9 / 13}
.f-title{font:700 2rem/1 var(--f-display);text-transform:uppercase;margin-bottom:1rem}
.f-lead{color:var(--on-dark-mute);max-width:30em;font-size:1rem}
.f-h{font:600 .85rem var(--f-text);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem}
.f-col:nth-child(2){grid-column:7 / 9}
.f-menu a{display:block;padding:.4rem 0;text-decoration:none;color:var(--on-dark-mute);transition:color var(--dur-ui),padding var(--dur-ui) var(--ease-out)}
.f-menu a:hover{color:#fff;padding-left:.35rem}
.f-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:3rem;padding:1.4rem 0;border-top:1px solid var(--line-dark);font-size:.9rem;color:var(--on-dark-mute)}
.f-bottom a{text-decoration:none}
.f-bottom a:hover{color:#fff}

/* Motion (nur transform, nie opacity:0-Start) */
.rise{animation:rise 520ms var(--ease-out) var(--d,0ms) backwards}
@keyframes rise{from{transform:translateY(18px)}}
.js .reveal{transform:translateY(20px);transition:transform 300ms var(--ease-out) var(--d,0ms)}
.js .reveal.is-in{transform:none}

/* Dropdown Desktop */
.menu li{position:relative}
.menu .sub-menu{list-style:none;margin:0;padding:.5rem;position:absolute;left:-1rem;top:100%;min-width:250px;background:var(--primary);border:1px solid var(--line-dark);border-radius:var(--radius);box-shadow:0 20px 40px -12px rgba(0,0,0,.6);transform:translateY(6px);visibility:hidden;transition:transform var(--dur-ui) var(--ease-out),visibility 0s linear var(--dur-ui)}
.menu li:hover>.sub-menu,.menu li:focus-within>.sub-menu{transform:none;visibility:visible;transition-delay:0s}
.menu .sub-menu a{padding:.65rem .8rem}
.menu .sub-menu a::after{display:none}
.menu .sub-menu a:hover{background:rgba(238,235,228,.08)}
.drawer-menu .sub-menu{list-style:none;margin:0;padding:0 0 0 1rem}
.drawer-menu .sub-menu a{font-size:1.3rem;min-height:48px;color:var(--on-dark-mute)}

/* Tablet */
@media (max-width:1180px){.header-call-text{display:none}.header-call{padding:.7rem;width:48px}}
@media (max-width:900px){
  :root{--hh:68px}
  .nav-main,.header-call-text{display:none}
  .burger{display:flex;margin-left:0}
  .header-call{margin-left:auto}
  .hero-copy,.hero-slider,.about-copy,.about-img,.band-copy,.band-list,.ph-copy,.ph-img,.page-grid .prose,.page-grid .aside,.page-grid--legal .prose,.f-brand,.f-col,.f-contact,.f-col:nth-child(2){grid-column:1 / -1}
  .svc{grid-column:1 / -1}
  .aside{position:static}
  .stat{grid-column:span 4}
}
/* Handy */
@media (max-width:600px){
  body{font-size:1rem}
  .wrap{width:min(1240px,100% - 2rem)}
  .svc{grid-template-columns:1fr}
  .svc-media{aspect-ratio:16/10}
  .stat{grid-column:1 / -1;border-left:0;padding-left:0;border-top:1px solid var(--line);padding-block:1.2rem}
  .stat:first-child{border-top:0}
  .cta-row .btn{width:100%}
  .slide{aspect-ratio:4/3.6}
  .band-list li a:not(.btn){font-size:1.6rem}
  .f-bottom{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .js .reveal{transform:none}
  .svc:hover,.btn:hover,.btn:active{transform:none}
}