:root{--orange:#ff4b0b;--dark:#08090a;--anth:#121416;--light:#efefed;--line:#3b3e41}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--dark);color:#fff;overflow-x:hidden}
a{color:inherit;text-decoration:none}
header{position:fixed;z-index:50;top:0;left:0;right:0;height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;background:#08090af2;border-bottom:1px solid #222}
.brand{display:flex;align-items:center;gap:14px}.brand img{width:98px;height:60px;object-fit:contain}.brand span{font-size:10px;letter-spacing:1.8px;font-weight:700}
nav{display:flex;gap:28px;font-size:10px;font-weight:700;letter-spacing:1.4px}
.wrap{width:min(1220px,88vw);margin:auto}.eyebrow{font-size:11px;letter-spacing:3px;text-transform:uppercase;opacity:.62;margin-bottom:22px}
h1{font-size:clamp(55px,7.4vw,108px);line-height:.88;letter-spacing:-5px;margin:0}h2{font-size:clamp(40px,5vw,70px);line-height:.95;letter-spacing:-3px;margin:0}
h3{font-size:clamp(26px,2.4vw,34px);margin:0 0 12px;letter-spacing:-1px}.accent{width:55px;height:3px;background:var(--orange);margin:27px 0}
.hero{min-height:100vh;display:flex;align-items:center;padding:120px 6vw 80px;background:linear-gradient(90deg,#000d,#0004),url('https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?auto=format&fit=crop&w=2200&q=88') center/cover;background-attachment:fixed}
.tag{font-size:13px;letter-spacing:4px;text-transform:uppercase}
.services{padding:135px 0;background:var(--anth)}.grid{display:grid;grid-template-columns:.8fr 1.4fr;gap:9vw}.list{border-top:1px solid var(--line)}
.item{display:grid;grid-template-columns:52px 1fr 25px;gap:20px;padding:32px 0;border-bottom:1px solid var(--line)}.item p{margin:0;color:#999}.num{opacity:.4;font-size:11px}.arrow{color:var(--orange);font-size:22px}
.about{padding:125px 0;background:var(--light);color:#111}.about p{max-width:690px;line-height:1.8;color:#555}
.pagehero{padding:175px 0 95px;background:#101214}.pagehero p{max-width:690px;color:#aaa;line-height:1.75;margin:25px 0 0}
.rows{background:var(--light);color:#111}.row{min-height:330px;border-bottom:1px solid #ccc;display:grid;grid-template-columns:.58fr 1.42fr;gap:8vw;align-items:center;padding:70px 0}
.row .num{color:#777}.row p{max-width:660px;color:#555;line-height:1.8;margin:0}.row .mini{margin-top:17px;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:#777}
.note{padding:95px 0;background:#181a1c}.note p{max-width:720px;color:#aaa;line-height:1.8}
.contact{padding:105px 0;background:#090909}.contactrow{display:flex;gap:60px;flex-wrap:wrap;margin-top:45px;color:#aaa}.contactrow b{display:block;color:#fff;font-size:10px;letter-spacing:2px;margin-bottom:8px}
footer{padding:25px 5vw;border-top:1px solid #222;color:#666;font-size:11px;display:flex;justify-content:space-between;gap:20px}
@media(max-width:820px){nav{gap:10px;font-size:8px}.brand span{display:none}.brand img{width:76px}.grid,.row{grid-template-columns:1fr}.row{gap:20px;min-height:auto;padding:60px 0}h1{letter-spacing:-2px}.hero{background-attachment:scroll}footer{flex-direction:column}}

.item.no-number{grid-template-columns:1fr 25px;}

.contact-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:9vw;align-items:start;margin-top:55px}
.contact-info{color:#aaa;line-height:1.8}.contact-info strong{display:block;color:#fff;font-size:11px;letter-spacing:2px;margin:0 0 8px}.contact-info a{border-bottom:1px solid #555;padding-bottom:3px}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:8px}.field.full{grid-column:1/-1}
.field label{font-size:10px;letter-spacing:1.7px;color:#aaa;text-transform:uppercase}
.field input,.field textarea{width:100%;border:0;border-bottom:1px solid #555;background:transparent;color:#fff;padding:13px 2px;font:inherit;outline:none}
.field textarea{min-height:125px;resize:vertical}.field input:focus,.field textarea:focus{border-bottom-color:var(--orange)}
.send{grid-column:1/-1;justify-self:start;margin-top:10px;background:var(--orange);color:#fff;border:0;padding:15px 24px;font-weight:700;letter-spacing:1.4px;font-size:11px;cursor:pointer}
.form-note{grid-column:1/-1;color:#777;font-size:11px;line-height:1.5}
@media(max-width:820px){.contact-grid,.contact-form{grid-template-columns:1fr}.field.full,.send,.form-note{grid-column:1}}

/* Stand 10 refinements */
header{transition:height .35s ease,background .35s ease,box-shadow .35s ease}
header.scrolled{height:66px;background:#08090afa;box-shadow:0 8px 30px #0005}
.brand img{transition:width .35s ease,height .35s ease}
header.scrolled .brand img{width:84px;height:52px}
nav a{position:relative;padding:8px 0}
nav a:after{content:"";position:absolute;left:0;bottom:2px;width:0;height:1px;background:var(--orange);transition:width .25s ease}
nav a:hover:after{width:100%}
.hero{position:relative;overflow:hidden;background:none!important}
.hero-bg{position:absolute;inset:-10% -3%;background:linear-gradient(90deg,#000d,#0004),url('https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?auto=format&fit=crop&w=2200&q=88') center/cover;transform:translate3d(0,var(--hy,0),0) scale(var(--hs,1.05));filter:brightness(var(--hb,1));will-change:transform,filter}
.hero-inner{position:relative;z-index:2;opacity:0;transform:translateY(22px);animation:heroIn .9s .15s ease forwards}
@keyframes heroIn{to{opacity:1;transform:none}}
.services .item{opacity:0;transform:translateY(24px);transition:opacity .65s ease,transform .65s ease}
.services .item.show{opacity:1;transform:none}
.services .arrow{transition:transform .25s ease}.services .item:hover .arrow{transform:translateX(7px)}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}.reveal.show{opacity:1;transform:none}
.contact-form{padding:30px;border:1px solid #292929;background:#0d0e0f}
.send{transition:transform .2s ease,filter .2s ease}.send:hover{transform:translateY(-2px);filter:brightness(1.08)}
.mobile-toggle{display:none;background:none;border:0;color:#fff;font-size:26px;cursor:pointer}
@media(max-width:820px){
.mobile-toggle{display:block}
header nav{display:none;position:absolute;top:100%;left:0;right:0;background:#08090afa;padding:22px 6vw;flex-direction:column;gap:8px;border-top:1px solid #222}
header nav.open{display:flex}
header nav a{font-size:11px;padding:10px 0}
.contact-form{padding:22px}
}

/* Stand 11 – stronger desktop header */
@media(min-width:821px){
  header{height:92px;padding-left:5vw;padding-right:5vw}
  .brand{gap:0}
  .brand img{width:140px;height:78px}
  .brand span{display:none}
  nav{gap:36px;font-size:13px;letter-spacing:1.25px}
  header.scrolled{height:70px}
  header.scrolled .brand img{width:108px;height:60px}
  header.scrolled nav{font-size:12px;gap:31px}
}

/* Stand 12 – company name beside logo */
@media(min-width:821px){
  .brand{gap:15px}
  .brand span{display:inline-block;font-size:12px;letter-spacing:1.7px;font-weight:700;white-space:nowrap}
  header.scrolled .brand span{font-size:11px}
}

/* Stand 13 */
@media(min-width:821px){
  .brand span{font-size:16px;letter-spacing:1.45px;font-weight:700}
  header.scrolled .brand span{font-size:14px}
}

/* Stand 14 – light steel-wire-rope inspired header, CSS only */
header{
  color:#111;
  background:
    linear-gradient(180deg,rgba(255,255,255,.72),rgba(224,226,227,.78)),
    repeating-linear-gradient(
      118deg,
      #f5f5f3 0px,
      #f5f5f3 8px,
      #d4d6d7 9px,
      #f9f9f7 16px,
      #c7c9ca 17px,
      #eeeeec 25px
    );
  border-bottom:1px solid #aeb1b3;
  box-shadow:0 4px 18px rgba(0,0,0,.18);
}
header.scrolled{
  color:#111;
  background:
    linear-gradient(180deg,rgba(255,255,255,.84),rgba(218,220,221,.90)),
    repeating-linear-gradient(
      118deg,
      #f5f5f3 0px,
      #f5f5f3 8px,
      #d4d6d7 9px,
      #f9f9f7 16px,
      #c7c9ca 17px,
      #eeeeec 25px
    );
  border-bottom:1px solid #9ea1a3;
  box-shadow:0 6px 22px rgba(0,0,0,.22);
}
header nav a{color:#111;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.brand span{color:#111}
.mobile-toggle{color:#111}
@media(max-width:820px){
  header nav{
    background:rgba(239,240,239,.98);
    border-top:1px solid #bbb;
  }
  header nav a{color:#111}
}

/* Stand 19 – real horizontal wire-rope photo supplied by the user */
header,
header.scrolled{
  position:sticky;
  overflow:hidden;
  color:#111;
  background:#f4f4f2;
  border-bottom:1px solid #c4c5c5;
  box-shadow:0 5px 18px rgba(0,0,0,.13);
}
header::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.38),rgba(255,255,255,.38)),
    url("header-drahtseil.jpg");
  background-repeat:no-repeat, repeat-x;
  background-position:center, center;
  background-size:100% 100%, auto 70%;
  opacity:.70;
}
header::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(255,255,255,.48) 0%,
    rgba(255,255,255,.16) 30%,
    rgba(255,255,255,.16) 72%,
    rgba(255,255,255,.40) 100%);
}
header > *{position:relative;z-index:2}
header nav a,.brand span{color:#111;text-shadow:0 1px 2px rgba(255,255,255,.95)}
.mobile-toggle{color:#111}
@media(max-width:820px){
  header nav{background:rgba(246,246,244,.98);border-top:1px solid #bbb}
  header nav a{color:#111}
}

/* Stand 23 – correction after Stand 22:
   one original rope, cropped only to remove empty white space */
header,
header.scrolled{
  position:sticky;
  overflow:hidden;
  background:#f4f4f2;
}
header::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:url("drahtseil-original-zuschnitt.png");
  background-repeat:no-repeat;
  background-position:center center;
  background-size:100% 100%;
  opacity:.30;
}
header::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:rgba(255,255,255,.32);
}
header > *{position:relative;z-index:2}
header nav a,.brand span{
  color:#111;
  text-shadow:0 1px 2px rgba(255,255,255,.96);
}
.mobile-toggle{color:#111}

/* Stand 24 – navigation slightly larger and stronger.
   Drahtseil/Headergrafik bleibt exakt wie Stand 23. */
@media(min-width:821px){
  header nav{
    font-size:14px;
    font-weight:700;
    letter-spacing:1.15px;
  }
  header nav a{
    font-weight:700;
  }
  header.scrolled nav{
    font-size:13px;
    font-weight:700;
  }
}

/* Stand 25 – größere Navigation + dezente Trennstriche.
   Drahtseil und restlicher Header bleiben unverändert. */
@media(min-width:821px){
  header nav{
    font-size:15.5px;
    font-weight:700;
    letter-spacing:1.05px;
    gap:0;
  }
  header nav a{
    font-weight:700;
    padding:0 20px;
    position:relative;
  }
  header nav a + a::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    width:1px;
    height:22px;
    transform:translateY(-50%);
    background:rgba(25,25,25,.42);
  }
  header.scrolled nav{
    font-size:14px;
    font-weight:700;
  }
  header.scrolled nav a{
    padding:0 17px;
  }
  header.scrolled nav a + a::before{
    height:19px;
  }
}

/* Stand 26: Firmenbezeichnung groesser als Navigation; Seil unveraendert */
@media(min-width:821px){
 .brand span{font-size:19px;font-weight:800;letter-spacing:1.35px;white-space:nowrap}
 header.scrolled .brand span{font-size:16px;font-weight:800}
}

/* Stand 27 – Hero Feinschliff. Header aus Stand 26 bleibt unangetastet. */
.hero{
  min-height:calc(100vh - 92px);
  display:flex;
  align-items:flex-end;
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.38) 48%,rgba(0,0,0,.20) 100%),
    linear-gradient(0deg,rgba(0,0,0,.50) 0%,transparent 38%);
}
.hero-inner{
  width:min(90%,1500px);
  margin:0 auto;
  padding:0 0 9vh;
  position:relative;
  z-index:2;
}
.hero h1{
  max-width:980px;
  margin:0;
  font-size:clamp(58px,7.6vw,128px);
  line-height:.88;
  letter-spacing:-.045em;
}
.hero-kicker{
  display:block;
  margin-bottom:22px;
  font-size:12px;
  font-weight:700;
  letter-spacing:2.5px;
  text-transform:uppercase;
}
.hero-scroll{
  position:absolute;
  right:5vw;
  bottom:9vh;
  z-index:3;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:10px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  opacity:.72;
}
.hero-scroll::after{
  content:"";
  width:46px;
  height:1px;
  background:currentColor;
}
@media(max-width:820px){
  .hero{min-height:calc(100svh - 78px)}
  .hero-inner{padding-bottom:12vh}
  .hero h1{font-size:clamp(48px,15vw,78px)}
  .hero-scroll{display:none}
}

/* Stand 29 – four clean service cards. Header/Hero remain unchanged. */
.service-overview{
  background:#111315;
  color:#fff;
  padding:110px 5vw 120px;
}
.service-intro{
  width:min(100%,1500px);
  margin:0 auto 55px;
}
.section-label{
  display:block;
  margin-bottom:18px;
  color:#f15a24;
  font-size:12px;
  font-weight:800;
  letter-spacing:2.6px;
}
.service-intro h2{
  margin:0;
  font-size:clamp(42px,5.1vw,82px);
  line-height:.94;
  letter-spacing:-.035em;
}
.service-grid{
  width:min(100%,1500px);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid rgba(255,255,255,.22);
  border-bottom:1px solid rgba(255,255,255,.22);
}
.service-card{
  min-height:370px;
  padding:28px 28px 30px;
  color:#fff;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
  overflow:hidden;
  border-right:1px solid rgba(255,255,255,.18);
  transition:transform .35s ease,background .35s ease;
}
.service-card:first-child{border-left:1px solid rgba(255,255,255,.18)}
.service-card::before{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:4px;
  background:#f15a24;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s ease;
}
.service-card:hover{
  background:#191c1f;
  transform:translateY(-5px);
}
.service-card:hover::before{transform:scaleX(1)}
.card-no{
  font-size:11px;
  font-weight:700;
  letter-spacing:2px;
  opacity:.48;
}
.service-card h3{
  margin:0 0 20px;
  font-size:clamp(24px,2vw,34px);
  line-height:1.02;
  letter-spacing:-.02em;
}
.service-card p{
  margin:0;
  max-width:310px;
  font-size:14px;
  line-height:1.65;
  color:rgba(255,255,255,.68);
}
.card-arrow{
  position:absolute;
  right:26px;
  top:24px;
  font-size:25px;
  color:#f15a24;
  transition:transform .3s ease;
}
.service-card:hover .card-arrow{transform:translate(4px,-4px)}
@media(max-width:1050px){
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .service-card{border-bottom:1px solid rgba(255,255,255,.18)}
}
@media(max-width:650px){
  .service-overview{padding:75px 6vw 80px}
  .service-grid{grid-template-columns:1fr}
  .service-card{min-height:270px;border-left:1px solid rgba(255,255,255,.18)}
}

/* Stand 30 – Hero bewusst leer als Platzhalter für das spätere Video.
   Header und Leistungsbereich bleiben wie Stand 29. */
.hero{
  min-height:calc(100vh - 92px);
}
.hero::after{
  background:rgba(0,0,0,.18);
}
@media(max-width:820px){
  .hero{min-height:calc(100svh - 78px)}
}

/* Stand 31 – Kontaktbereich besser lesbar.
   Layout, Header, Drahtseil und übrige Bereiche bleiben unverändert. */

/* kleine Kontakt-Kennzeichnung */
.contact .eyebrow,
.contact .section-label{
  font-size:14px;
  font-weight:800;
  letter-spacing:2.2px;
}

/* große Kontaktüberschrift */
.contact h2{
  font-size:clamp(46px,5.2vw,78px);
  line-height:.98;
}

/* Firmenname, Adresse, E-Mail und allgemeiner Kontakttext */
.contact .info,
.contact .contact-info,
.contact address,
.contact p{
  font-size:16px;
  line-height:1.7;
}

/* Formular-Beschriftungen */
.contact-form label{
  font-size:13px;
  font-weight:700;
  letter-spacing:1.1px;
}

/* Texteingaben */
.contact-form input,
.contact-form textarea,
.contact-form select{
  font-size:16px;
  line-height:1.45;
}

/* Platzhalter ebenfalls besser lesbar */
.contact-form input::placeholder,
.contact-form textarea::placeholder{
  font-size:16px;
  opacity:.72;
}

/* Senden-Button */
.contact-form .send,
.contact-form button{
  font-size:14px;
  font-weight:800;
  letter-spacing:1.2px;
  padding-top:16px;
  padding-bottom:16px;
}

@media(max-width:650px){
  .contact h2{font-size:clamp(40px,12vw,58px)}
  .contact .info,
  .contact .contact-info,
  .contact address,
  .contact p{font-size:16px}
}

/* Stand 32 – approved Seiltechnik image inserted only into first service tile.
   Header, rope, hero, contact and other tiles remain unchanged. */
.service-grid .service-card:first-child{
  background-image:
    linear-gradient(180deg,rgba(10,12,13,.20) 0%,rgba(10,12,13,.48) 55%,rgba(10,12,13,.88) 100%),
    url("seiltechnik-kachel.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.service-grid .service-card:first-child:hover{
  background-image:
    linear-gradient(180deg,rgba(10,12,13,.12) 0%,rgba(10,12,13,.40) 55%,rgba(10,12,13,.82) 100%),
    url("seiltechnik-kachel.jpg");
}

/* Stand 33 – Kontakt: Firmenname und E-Mail deutlich hervorheben.
   Header, Drahtseil, Hero und Leistungsbereiche bleiben unverändert. */
.contact .contact-info strong,
.contact .contact-info .company,
.contact .info strong,
.contact .info .company,
.contact address strong{
  display:block;
  font-size:22px;
  line-height:1.25;
  font-weight:800;
  letter-spacing:.25px;
  margin-bottom:8px;
}

.contact a[href^="mailto:"],
.contact .email{
  font-size:20px;
  line-height:1.35;
  font-weight:750;
  letter-spacing:.15px;
}

@media(max-width:650px){
  .contact .contact-info strong,
  .contact .contact-info .company,
  .contact .info strong,
  .contact .info .company,
  .contact address strong{
    font-size:20px;
  }
  .contact a[href^="mailto:"],
  .contact .email{
    font-size:18px;
  }
}

/* Stand 34 – Leistungen-Label entfernt; lange Überschrift der 3. Kachel korrigiert.
   Kontakt und alle Bilder bleiben unverändert. */
.service-grid .service-card:nth-child(3) h3{
  font-size:clamp(21px,1.65vw,29px);
  line-height:1.08;
  letter-spacing:-.025em;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}
@media(max-width:1050px){
  .service-grid .service-card:nth-child(3) h3{
    font-size:clamp(24px,3vw,32px);
  }
}
@media(max-width:650px){
  .service-grid .service-card:nth-child(3) h3{
    font-size:28px;
  }
}

/* Stand 35 – Seiltechnik-Unterseite: nur Leistungen + Bildplatzhalter.
   Keine zusätzlichen Erklärungstexte und keine neuen Bilder. */
.subpage-main{background:#111315;color:#fff;min-height:100vh}
.subpage-hero{
  width:min(90%,1500px);
  margin:0 auto;
  padding:110px 0 70px;
}
.subpage-kicker{
  display:block;
  margin-bottom:18px;
  color:#f15a24;
  font-size:12px;
  font-weight:800;
  letter-spacing:2.2px;
}
.subpage-hero h1{
  margin:0 0 28px;
  font-size:clamp(58px,8vw,126px);
  line-height:.88;
  letter-spacing:-.045em;
}
.subpage-services{
  max-width:1150px;
  font-size:clamp(16px,1.35vw,21px);
  line-height:1.8;
  color:rgba(255,255,255,.76);
}
.subpage-services span{color:#f15a24;margin:0 7px}
.gallery-section{
  width:min(90%,1500px);
  margin:0 auto;
  padding:0 0 120px;
}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.gallery-placeholder{
  min-height:310px;
  position:relative;
  border:1px solid rgba(255,255,255,.16);
  background:
    linear-gradient(135deg,rgba(255,255,255,.035),rgba(255,255,255,.01)),
    #15181a;
  overflow:hidden;
}
.gallery-placeholder::before{
  content:"BILD FOLGT";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:rgba(255,255,255,.12);
  font-size:13px;
  font-weight:800;
  letter-spacing:2.5px;
}
.gallery-placeholder span{
  position:absolute;
  left:22px;
  bottom:20px;
  z-index:1;
  font-size:15px;
  font-weight:800;
  letter-spacing:1px;
}
.gallery-wide{grid-column:span 2}
@media(max-width:900px){
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-wide{grid-column:span 2}
}
@media(max-width:600px){
  .subpage-hero{padding:75px 0 50px}
  .gallery-grid{grid-template-columns:1fr}
  .gallery-placeholder,.gallery-wide{grid-column:auto;min-height:260px}
}

/* Stand 36 – unnötige Zusatzbereiche auf allen vier Leistungs-Unterseiten entfernen.
   Header, Footer und die eigentlichen Leistungs-/Galeriebereiche bleiben bestehen. */
body.performance-page .feature-row,
body.performance-page .feature-section,
body.performance-page .detail-row,
body.performance-page .detail-section,
body.performance-page .consulting,
body.performance-page .consulting-section,
body.performance-page .advice,
body.performance-page .advice-section{
  display:none !important;
}

/* Stand 38 – Seiltechnik: bisherige zwei Bereiche zu EINEM Bereich zusammengeführt.
   Keine Bilder erzeugt oder verändert. */
.seiltechnik-combined{
  background:#111315;
  color:#fff;
  min-height:100vh;
}
.seiltechnik-content{
  width:min(90%,1500px);
  margin:0 auto;
  padding:105px 0 120px;
}
.seiltechnik-content h1{
  margin:0;
  font-size:clamp(64px,8vw,126px);
  line-height:.9;
  letter-spacing:-.045em;
}
.orange-rule{
  width:55px;
  height:3px;
  margin:30px 0 28px;
  background:#f15a24;
}
.seiltechnik-description{
  max-width:790px;
  margin:0 0 38px;
  color:rgba(255,255,255,.76);
  font-size:16px;
  line-height:1.75;
}
.seiltechnik-products{
  margin:0 0 55px;
  font-size:clamp(17px,1.35vw,21px);
  line-height:1.8;
  font-weight:600;
  color:rgba(255,255,255,.92);
}
.seiltechnik-products span{
  color:#f15a24;
  margin:0 8px;
}
.seiltechnik-gallery{
  margin-top:0;
}
@media(max-width:650px){
  .seiltechnik-content{padding:75px 0 80px}
  .seiltechnik-description{font-size:16px}
  .seiltechnik-products{margin-bottom:38px}
}

/* Stand 39 – den im Screenshot markierten oberen Seiltechnik-Bereich vollständig entfernt.
   Produktnamen und Bildgalerie bleiben bestehen. */
.seiltechnik-content{
  padding-top:70px;
}

/* Stand 40 – nur noch EIN Seiltechnik-Bereich unter dem Header */
.seiltechnik-combined{
  margin-top:0;
}
.seiltechnik-content{
  padding-top:85px;
}

/* Stand 41 – Beschreibung direkt unter SEILTECHNIK, danach Produkte und Bilder */
.seiltechnik-description{
  max-width:790px;
  margin:22px 0 28px;
  color:rgba(255,255,255,.76);
  font-size:16px;
  line-height:1.75;
}

/* Stand 42 – gleicher Unterseiten-Aufbau wie Seiltechnik:
   ÜBERSCHRIFT -> TEXT -> PRODUKTE -> BILDER */
.performance-combined{background:#111315;color:#fff;min-height:100vh}
.performance-content{
  width:min(90%,1500px);
  margin:0 auto;
  padding:85px 0 120px;
}
.performance-content h1{
  margin:0;
  max-width:1300px;
  font-size:clamp(58px,7.2vw,116px);
  line-height:.92;
  letter-spacing:-.045em;
}
.performance-description{
  max-width:790px;
  margin:22px 0 28px;
  color:rgba(255,255,255,.76);
  font-size:16px;
  line-height:1.75;
}
.performance-products{
  margin:0 0 55px;
  font-size:clamp(17px,1.35vw,21px);
  line-height:1.8;
  font-weight:600;
  color:rgba(255,255,255,.92);
}
.performance-products span{color:#f15a24;margin:0 8px}
.performance-gallery{margin-top:0}
@media(max-width:650px){
  .performance-content{padding:70px 0 80px}
  .performance-content h1{font-size:clamp(46px,13vw,70px)}
  .performance-description{font-size:16px}
  .performance-products{margin-bottom:38px}
}

/* Stand 43 – Reiter umbenannt in Kettenprüfung & Service */

/* Stand 45 – Über uns als ein Bereich */
.about-combined{background:#111315;color:#fff;min-height:calc(100vh - 90px)}
.about-content{width:min(90%,1220px);margin:0 auto;padding:100px 0 120px}
.about-kicker{display:block;margin-bottom:18px;color:rgba(255,255,255,.62);font-size:12px;font-weight:800;letter-spacing:2.2px}
.about-content h1{margin:0;font-size:clamp(64px,8vw,126px);line-height:.9;letter-spacing:-.045em}
.about-history{max-width:850px;margin:0;color:rgba(255,255,255,.78);font-size:17px;line-height:1.8}
.about-history strong{color:#fff;font-weight:700}
@media(max-width:650px){.about-content{padding:75px 0 90px}.about-history{font-size:16px}}

/* Stand 47 – Kontaktformular: bessere Lesbarkeit und klare Eingabefelder */
#kontaktformular input,
#kontaktformular textarea{
  width:100%;
  box-sizing:border-box;
  font-size:16px;
  line-height:1.4;
}
#kontaktformular textarea{
  min-height:150px;
  resize:vertical;
}
#kontaktformular button,
#kontaktformular input[type="submit"]{
  font-size:15px;
  font-weight:800;
  letter-spacing:.7px;
  cursor:pointer;
}
.form-hinweis{
  margin:14px 0 0;
  font-size:12px;
  line-height:1.5;
  color:rgba(255,255,255,.52);
}
.form-hinweis strong{color:rgba(255,255,255,.78)}

/* Stand 48 – Impressum & Datenschutz */
.legal-main{background:#111315;color:#fff;min-height:70vh}
.legal-content{width:min(90%,980px);margin:0 auto;padding:95px 0 120px}
.legal-content h1{margin:0;font-size:clamp(54px,7vw,100px);line-height:.95;letter-spacing:-.04em}
.legal-content h2{margin:38px 0 12px;font-size:22px}
.legal-content p{max-width:820px;margin:0 0 18px;font-size:16px;line-height:1.75;color:rgba(255,255,255,.76)}
.legal-content strong{color:#fff}
.legal-content a{color:#fff}
.legal-note{margin-top:36px!important;font-size:13px!important;color:rgba(255,255,255,.5)!important}
.legal-links{display:flex;gap:10px;justify-content:center;align-items:center;padding:12px 20px 22px;font-size:12px}
.legal-links a{color:inherit;text-decoration:none;opacity:.7}
.legal-links a:hover{opacity:1}
.legal-links span{opacity:.35}

/* Stand 49 – gezielte Handy-/Tablet-Optimierung; Desktop bleibt unverändert */
@media(max-width:820px){
  header,header.scrolled{
    height:72px;
    padding:0 5vw;
    overflow:visible;
  }
  .brand{gap:10px;min-width:0}
  .brand img,header.scrolled .brand img{width:82px;height:58px}
  .brand span{
    display:inline-block;
    font-size:11px;
    line-height:1.15;
    letter-spacing:.8px;
    white-space:normal;
    max-width:150px;
  }
  .mobile-toggle{
    display:block;
    flex:0 0 auto;
    font-size:28px;
    padding:8px;
    line-height:1;
  }
  header nav{
    top:72px;
    max-height:calc(100vh - 72px);
    overflow-y:auto;
    padding:14px 6vw 20px;
    gap:0;
    box-shadow:0 12px 24px rgba(0,0,0,.18);
  }
  header nav a{
    font-size:14px;
    font-weight:800;
    letter-spacing:.7px;
    padding:14px 0;
    border-bottom:1px solid rgba(0,0,0,.12);
  }
  header nav a:last-child{border-bottom:0}

  .hero{min-height:58svh}

  .service-overview{padding:68px 5vw 78px}
  .service-intro{margin-bottom:34px}
  .service-intro h2{
    font-size:clamp(38px,10vw,58px);
    line-height:.98;
  }
  .service-grid{grid-template-columns:1fr 1fr}
  .service-card{
    min-height:285px;
    padding:24px 22px 25px;
  }
  .service-card h3{font-size:clamp(23px,4.6vw,30px)}
  .service-card p{font-size:14px;line-height:1.55}
  .service-grid .service-card:nth-child(3) h3{
    font-size:clamp(21px,4.2vw,27px);
  }

  .contact{padding:72px 0}
  .contact h2{font-size:clamp(40px,9vw,58px)}
  .contact-grid{gap:34px;margin-top:38px}
  .contact-form{padding:22px}
  .contact-info,.contact p{font-size:16px}

  .seiltechnik-content,.performance-content,.about-content,.legal-content{
    width:min(90%,720px);
    padding-top:70px;
  }
  .seiltechnik-products,.performance-products{
    font-size:17px;
    line-height:1.75;
    margin-bottom:38px;
  }
  .gallery-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .gallery-placeholder{min-height:250px}
  .gallery-wide{grid-column:span 2}

  footer{
    align-items:flex-start;
    gap:10px;
    padding:22px 5vw;
    line-height:1.5;
  }
  .legal-links{justify-content:flex-start;padding:0}
}

@media(max-width:560px){
  header,header.scrolled{height:68px}
  .brand img,header.scrolled .brand img{width:72px;height:52px}
  .brand span{font-size:10px;max-width:125px}
  header nav{top:68px;max-height:calc(100vh - 68px)}

  .hero{min-height:48svh}

  .service-grid{grid-template-columns:1fr}
  .service-card{
    min-height:245px;
    border-left:1px solid rgba(255,255,255,.18);
  }
  .service-card h3,
  .service-grid .service-card:nth-child(3) h3{
    font-size:27px;
  }

  .contact .wrap{width:90vw}
  .contact-form{padding:18px}
  .field input,.field textarea{font-size:16px}

  .seiltechnik-content h1,.performance-content h1,.about-content h1,.legal-content h1{
    font-size:clamp(44px,13vw,64px);
    letter-spacing:-2px;
  }
  .gallery-grid{grid-template-columns:1fr}
  .gallery-placeholder,.gallery-wide{grid-column:auto;min-height:235px}

  footer>span:nth-child(2){display:none}
}

/* Stand 50 – Impressum/Datenschutz Abstände korrigiert.
   Verhindert Überlagerung von Überschriften und Fließtext. */
.legal-content h1{
  margin:0 0 0;
}
.legal-content .orange-rule{
  margin:30px 0 34px;
}
.legal-content h2{
  display:block;
  clear:both;
  margin:0 0 16px;
  font-size:22px;
  line-height:1.25;
}
.legal-content h2:not(:first-of-type){
  margin-top:38px;
}
.legal-content p{
  display:block;
  clear:both;
  margin:0 0 20px;
  line-height:1.75;
}
.legal-content p + p{
  margin-top:4px;
}
@media(max-width:820px){
  .legal-content .orange-rule{margin:24px 0 30px}
  .legal-content h2{font-size:20px;margin-bottom:14px}
  .legal-content h2:not(:first-of-type){margin-top:32px}
  .legal-content p{margin-bottom:18px}
}

/* Stand 54 – leeren Startseiten-Hero entfernt.
   Die 4 Leistungsreiter rücken direkt unter den Drahtseil-Header.
   Für spätere bewegte Hintergründe sind die Karten vorbereitet. */
.service-overview{
  margin-top:0;
  padding-top:72px;
}
.service-card{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.service-card > *{
  position:relative;
  z-index:2;
}
/* Später kann je Karte ein Video absolut im Hintergrund eingesetzt werden. */
.service-card .card-bg-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  pointer-events:none;
}
.service-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg,rgba(10,12,13,.10),rgba(10,12,13,.72));
  pointer-events:none;
}

/* Stand 56 – zusätzliches Foto Hebetechnik, bewusst ohne Überschrift */
.gallery-photo-only{
  width:min(80%,1500px);
  margin:42px auto 28px;
}
.gallery-photo-only img{
  display:block;
  width:100%;
  height:auto;
  max-height:760px;
  object-fit:cover;
}
@media(max-width:820px){
  .gallery-photo-only{
    width:90%;
    margin:30px auto 20px;
  }
}

/* Stand 57: Hebetechnik-Lagerfoto deutlich kompakter */
.gallery-photo-only{width:min(58%,1050px);margin:34px auto 28px;}
.gallery-photo-only img{display:block;width:100%;height:auto;max-height:560px;object-fit:cover;}
@media(max-width:820px){
 .gallery-photo-only{width:86%;margin:28px auto 20px;}
 .gallery-photo-only img{max-height:480px;}
}

/* Stand 58 – Hebetechnik-Foto in bestehender Rundschlingen-Kachel */
.gallery-image-tile{
  padding:0;
  overflow:hidden;
}
.gallery-image-tile img{
  display:block;
  width:100%;
  height:100%;
  min-height:inherit;
  object-fit:cover;
}

/* Stand 59 – Seiltechnik Bildkacheln */
.gallery-image-tile{position:relative;padding:0;overflow:hidden;}
.gallery-image-tile img{display:block;width:100%;height:100%;min-height:inherit;object-fit:cover;}
.gallery-image-label{
 position:absolute;left:22px;bottom:18px;z-index:2;
 font-weight:700;font-size:18px;letter-spacing:.02em;color:#fff;
 text-shadow:0 2px 8px rgba(0,0,0,.8);
}
.gallery-image-tile::after{
 content:"";position:absolute;inset:0;
 background:linear-gradient(transparent 55%,rgba(0,0,0,.58));
 pointer-events:none;
}

/* Stand 66 – einheitlicher Bild-Slider auf allen Leistungsreitern */
.gallery-grid{display:block!important;position:relative;width:100%;height:clamp(360px,48vw,620px);overflow:hidden;border:1px solid rgba(255,255,255,.16);background:#15181a}
.gallery-grid>.gallery-placeholder{display:none;position:absolute;inset:0;width:100%;height:100%;min-height:0!important;border:0}
.gallery-grid>.gallery-placeholder.slider-active{display:block}
.gallery-grid>.gallery-placeholder img{width:100%;height:100%;min-height:0;object-fit:cover}
.gallery-slider-btn{position:absolute;top:50%;z-index:8;width:52px;height:52px;transform:translateY(-50%);border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(10,12,13,.58);color:#fff;font:300 36px/1 Arial,sans-serif;cursor:pointer;display:grid;place-items:center;transition:.2s}
.gallery-slider-btn:hover{background:rgba(241,90,36,.88);border-color:#f15a24}
.gallery-slider-prev{left:18px}.gallery-slider-next{right:18px}
.gallery-slider-dots{position:absolute;z-index:9;left:50%;bottom:18px;transform:translateX(-50%);display:flex;gap:8px}
.gallery-slider-dot{width:8px;height:8px;padding:0;border:1px solid rgba(255,255,255,.8);border-radius:50%;background:rgba(0,0,0,.35);cursor:pointer}
.gallery-slider-dot.active{background:#f15a24;border-color:#f15a24}
.gallery-grid .gallery-placeholder span,.gallery-grid .gallery-image-label{left:28px;bottom:48px;font-size:clamp(17px,1.5vw,22px);text-shadow:0 2px 8px rgba(0,0,0,.85)}
@media(max-width:600px){.gallery-grid{height:390px}.gallery-slider-btn{width:42px;height:42px;font-size:30px}.gallery-slider-prev{left:10px}.gallery-slider-next{right:10px}.gallery-grid .gallery-placeholder span,.gallery-grid .gallery-image-label{left:18px;bottom:45px;font-size:16px}}


/* Stand 67 – Sliderbilder vollständig anzeigen, kein Zuschneiden */
.gallery-grid{
  height:clamp(420px,58vw,760px);
}
.gallery-grid > .gallery-placeholder{
  background:#111416;
}
.gallery-grid > .gallery-placeholder img{
  width:100%;
  height:100%;
  object-fit:contain !important;
  object-position:center center;
}
@media(max-width:600px){
  .gallery-grid{height:520px}
}

/* Stand 68 – Sliderfenster passend für Hochformatbilder */
.gallery-grid{
  width:min(100%, 760px);
  height:auto;
  aspect-ratio:3 / 4;
  margin-left:auto;
  margin-right:auto;
}
.gallery-grid > .gallery-placeholder img{
  width:100%;
  height:100%;
  object-fit:contain !important;
  object-position:center;
}
@media(max-width:600px){
  .gallery-grid{
    width:100%;
    height:auto;
    aspect-ratio:3 / 4;
  }
}


/* Stand 76 – bereinigter kompakter Slider */
.gallery-grid{
  width:min(100%,720px) !important;
  height:auto !important;
  aspect-ratio:auto !important;
  margin:38px auto 0 !important;
  padding:0 !important;
  overflow:visible !important;
  border:0 !important;
  background:transparent !important;
  position:relative !important;
}

.gallery-grid > .gallery-placeholder{
  display:none !important;
  position:relative !important;
  inset:auto !important;
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  max-width:560px !important;
  margin:0 auto !important;
  border:1px solid rgba(255,255,255,.16) !important;
  background:#111416 !important;
  overflow:hidden !important;
}

.gallery-grid > .gallery-placeholder.slider-active{
  display:block !important;
}

.gallery-grid > .gallery-placeholder img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-height:540px !important;
  min-height:0 !important;
  object-fit:contain !important;
  object-position:center !important;
  margin:0 auto !important;
}

.gallery-grid .gallery-image-label,
.gallery-grid .gallery-placeholder span{
  position:static !important;
  display:block !important;
  left:auto !important;
  bottom:auto !important;
  padding:13px 16px 14px !important;
  margin:0 !important;
  font-size:18px !important;
  line-height:1.2 !important;
  color:#fff !important;
  text-shadow:none !important;
  background:#111416 !important;
}

.gallery-image-tile::after{
  display:none !important;
}

.gallery-slider-btn{
  top:50% !important;
  width:44px !important;
  height:44px !important;
  font-size:30px !important;
}
.gallery-slider-prev{left:8px !important}
.gallery-slider-next{right:8px !important}

.gallery-slider-dots{
  position:static !important;
  transform:none !important;
  justify-content:center !important;
  margin:12px auto 0 !important;
}

@media(max-width:760px){
  .gallery-grid{
    width:94vw !important;
    margin-top:28px !important;
  }
  .gallery-grid > .gallery-placeholder{
    max-width:calc(100% - 64px) !important;
  }
  .gallery-grid > .gallery-placeholder img{
    max-height:65vh !important;
  }
  .gallery-slider-prev{left:0 !important}
  .gallery-slider-next{right:0 !important}
}


/* Stand 79 – Dienstleistungsbereich im Stil von Variante F */
.service-overview-f{
  width:min(90%,1500px);
  margin:0 auto;
  padding:78px 0 90px;
}
.service-overview-f .service-intro{
  width:100%;
  margin:0 0 42px;
  padding:0;
}
.service-overview-f .service-intro > span{
  color:#f15a24;
  font-size:11px;
  font-weight:800;
  letter-spacing:2px;
}
.service-overview-f .service-intro h2{
  margin:12px 0 15px;
  font-size:clamp(42px,5vw,72px);
  line-height:.95;
  letter-spacing:-2px;
}
.service-overview-f .service-intro p{
  max-width:700px;
  margin:0;
  color:#9da1a3;
  font-size:16px;
  line-height:1.7;
}

.services-f{
  display:grid;
  gap:28px;
}
.service-f{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  min-height:390px;
  background:#15181a;
  border:1px solid #2d3133;
  color:#fff;
  overflow:hidden;
}
.service-f-reverse .service-f-image{order:2}
.service-f-reverse .service-f-copy{order:1}

.service-f-image{
  min-height:390px;
  background:#0d0f10;
}
.service-f-image img{
  width:100%;
  height:100%;
  min-height:390px;
  object-fit:cover;
  object-position:center;
  display:block;
  transition:transform .35s ease;
}
.service-f:hover .service-f-image img{
  transform:scale(1.018);
}

.service-f-copy{
  padding:52px 56px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}
.service-f-number{
  color:#f15a24;
  font-size:10px;
  font-weight:800;
  letter-spacing:2px;
}
.service-f h3{
  margin:13px 0 20px;
  font-size:clamp(31px,3.1vw,48px);
  line-height:.96;
  letter-spacing:-1.4px;
}
.service-f p{
  margin:0 0 25px;
  color:#a2a6a8;
  font-size:15px;
  line-height:1.75;
}
.service-f strong{
  margin-top:auto;
  padding-bottom:7px;
  border-bottom:2px solid #f15a24;
  font-size:10px;
  letter-spacing:1.3px;
}

@media(max-width:850px){
  .service-f{
    grid-template-columns:1fr;
  }
  .service-f-reverse .service-f-image,
  .service-f-reverse .service-f-copy{
    order:initial;
  }
  .service-f-image,
  .service-f-image img{
    min-height:300px;
  }
}
@media(max-width:560px){
  .service-overview-f{
    width:90%;
    padding:55px 0 65px;
  }
  .services-f{gap:20px}
  .service-f-copy{padding:30px 26px 34px}
  .service-f-image,
  .service-f-image img{
    min-height:245px;
  }
}


/* Stand 80 – Variante F kompakter + Platz für künftigen Bildgang */
.service-overview-f{
  padding-top:62px !important;
  padding-bottom:72px !important;
}
.services-f{
  max-width:1220px;
  margin:0 auto;
  gap:22px !important;
}
.service-f{
  grid-template-columns:1fr 1fr !important;
  min-height:315px !important;
}
.service-f-image{
  min-height:315px !important;
}
.service-f-image img{
  min-height:315px !important;
  max-height:315px !important;
}
.service-f-copy{
  padding:38px 44px !important;
}
.service-f h3{
  font-size:clamp(28px,2.6vw,41px) !important;
}
.service-f p{
  font-size:14px !important;
}

/* Reservierter Bereich für einen späteren horizontalen Bildgang.
   Noch ohne Bilder, damit keine neuen Motive erfunden/eingesetzt werden. */
.home-image-strip-placeholder{
  width:100%;
  min-height:180px;
  background:#0e1113;
  border-top:1px solid #292d2f;
  border-bottom:1px solid #292d2f;
  display:flex;
  align-items:center;
  justify-content:center;
}
.home-image-strip-placeholder span{
  color:#5f6467;
  font-size:10px;
  font-weight:800;
  letter-spacing:2px;
}

@media(max-width:850px){
  .service-f{grid-template-columns:1fr !important}
  .service-f-image,
  .service-f-image img{
    min-height:270px !important;
    max-height:330px !important;
  }
}


/* Stand 82 – Korrekturen Haupt-Leistungskacheln */
.service-f-image{
  background:#111416 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}
.service-f-image img{
  width:100% !important;
  height:315px !important;
  min-height:0 !important;
  max-height:315px !important;
  object-fit:contain !important;
  object-position:center !important;
  transform:none !important;
}
.service-f:hover .service-f-image img{
  transform:none !important;
}
@media(max-width:850px){
  .service-f-image img{
    height:auto !important;
    max-height:330px !important;
    width:100% !important;
    object-fit:contain !important;
  }
}


/* Stand 83 – Kettenprüfung & Service bewusst ohne Bild */
.service-f-image-empty{
  background:#111416 !important;
}


/* Stand 85 – Dienstleistungsbereich optisch vereinheitlicht */
.service-overview-f{
  width:min(92%,1280px) !important;
  background:#101315 !important;
  padding:58px 38px 72px !important;
  border-radius:0 !important;
}
.service-overview-f .service-intro{
  margin-bottom:34px !important;
}
.service-overview-f .service-intro h2{
  margin-bottom:0 !important;
}

.services-f{
  max-width:1120px !important;
  gap:18px !important;
}

.service-f{
  min-height:300px !important;
  background:#15191b !important;
  border:0 !important;
  box-shadow:none !important;
  grid-template-columns:1fr 1fr !important;
}

.service-f-image{
  min-height:300px !important;
  height:300px !important;
  background:#15191b !important;
  border:0 !important;
  padding:14px !important;
  overflow:hidden !important;
}

.service-f-image img{
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center !important;
  background:#15191b !important;
  border:0 !important;
  display:block !important;
}

.service-f-copy{
  min-height:300px !important;
  padding:34px 40px !important;
  background:#15191b !important;
  border:0 !important;
}

.service-f h3{
  margin-top:0 !important;
  font-size:clamp(27px,2.4vw,38px) !important;
  line-height:1.02 !important;
}
.service-f p{
  margin-top:4px !important;
  line-height:1.65 !important;
}
.service-f strong{
  margin-top:auto !important;
}

/* Leere Bildhälfte bei Kettenprüfung bleibt bewusst ohne Ersatzbild,
   fügt sich aber optisch in die Kachel ein. */
.service-f-image-empty{
  background:#131719 !important;
  padding:0 !important;
}

/* Der gesamte Bereich geht ohne helle Seitenränder in die Seite über. */
body,
main{
  background:#101315 !important;
}

@media(max-width:850px){
  .service-overview-f{
    width:94% !important;
    padding:44px 20px 55px !important;
  }
  .service-f{
    grid-template-columns:1fr !important;
  }
  .service-f-image{
    height:270px !important;
    min-height:270px !important;
  }
  .service-f-copy{
    min-height:auto !important;
    padding:30px !important;
  }
}


/* Stand 86 – mehr Farbe, weiterhin technisch und ruhig */
.service-overview-f{
  background:
    linear-gradient(135deg, rgba(239,90,36,.055), transparent 28%),
    #111517 !important;
}

.service-overview-f .service-intro > span{
  color:#f15a24 !important;
}
.service-overview-f .service-intro h2{
  color:#f4f4f2 !important;
}

/* Kacheln bekommen einen dezenten farbigen Seitenakzent statt Rahmen */
.service-f{
  position:relative !important;
  background:#181d20 !important;
}
.service-f::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:#f15a24;
  z-index:3;
}
.service-f-reverse::before{
  left:auto;
  right:0;
}

/* Bildflächen leicht heller/wärmer als der Seitenhintergrund */
.service-f-image{
  background:#202629 !important;
}
.service-f-image img{
  background:#202629 !important;
}

/* Textflächen in Anthrazit statt fast schwarz */
.service-f-copy{
  background:#181d20 !important;
}
.service-f h3{
  color:#ffffff !important;
}
.service-f p{
  color:#b9bec0 !important;
}
.service-f strong{
  color:#f2f2ef !important;
  border-bottom-color:#f15a24 !important;
}

/* Einzelne Kacheln minimal differenzieren, ohne bunt zu wirken */
.services-f .service-f:nth-child(2) .service-f-image{
  background:#1b252b !important;
}
.services-f .service-f:nth-child(2) .service-f-image img{
  background:#1b252b !important;
}
.services-f .service-f:nth-child(3) .service-f-image{
  background:#252522 !important;
}
.services-f .service-f:nth-child(3) .service-f-image img{
  background:#252522 !important;
}

/* Kettenprüfung ohne Bild: dezente technische Akzentfläche */
.service-f-image-empty{
  background:
    linear-gradient(135deg, rgba(239,90,36,.14), rgba(239,90,36,.02) 48%, transparent 49%),
    #202629 !important;
}

/* leichter Hover, ohne das Layout zu verändern */
.service-f{
  transition:background .2s ease, transform .2s ease;
}
.service-f:hover{
  background:#1c2225 !important;
}


/* Stand 87 – Logo-Blau dezent in den Hintergrund integriert */
.service-overview-f{
  background:
    radial-gradient(circle at 88% 12%, rgba(15,62,108,.18), transparent 30%),
    radial-gradient(circle at 8% 82%, rgba(15,62,108,.10), transparent 28%),
    linear-gradient(135deg, rgba(239,90,36,.045), transparent 25%),
    #111517 !important;
}

/* leichte blaue Tiefe hinter einzelnen Bildbereichen */
.services-f .service-f:nth-child(1) .service-f-image,
.services-f .service-f:nth-child(3) .service-f-image{
  background:
    linear-gradient(135deg, rgba(18,67,112,.18), rgba(32,38,41,.25)),
    #202629 !important;
}
.services-f .service-f:nth-child(1) .service-f-image img,
.services-f .service-f:nth-child(3) .service-f-image img{
  background:transparent !important;
}

/* sehr dezente blaue Trennlinie im Gesamtbereich */
.service-overview-f{
  box-shadow:inset 0 1px 0 rgba(42,91,132,.16),
             inset 0 -1px 0 rgba(42,91,132,.12) !important;
}

/* Kettenprüfung: Orange bleibt Hauptakzent, Blau nur als zweite Tiefe */
.service-f-image-empty{
  background:
    linear-gradient(145deg,
      rgba(239,90,36,.13) 0%,
      rgba(239,90,36,.025) 38%,
      rgba(18,67,112,.12) 100%),
    #202629 !important;
}


/* Stand 88 – Seitenflächen: dunkles Logo-Blau/Anthrazit statt Schwarz */
body,
main{
  background:#0d1318 !important;
}

/* Weicher Übergang von den äußeren Seitenflächen zum Inhaltsbereich */
body{
  background:
    linear-gradient(
      90deg,
      #0b1721 0%,
      #0d1b27 8%,
      #10171c 19%,
      #101315 30%,
      #101315 70%,
      #10171c 81%,
      #0d1b27 92%,
      #0b1721 100%
    ) !important;
}

/* Hauptbereich transparent genug, damit der seitliche Verlauf sichtbar bleibt */
main{
  background:transparent !important;
}

/* Produkte-&-Service-Bereich behält seine aktuelle Breite,
   geht an den Seiten aber weicher in den Hintergrund über */
.service-overview-f{
  background:
    radial-gradient(circle at 88% 12%, rgba(20,73,120,.19), transparent 31%),
    radial-gradient(circle at 8% 82%, rgba(20,73,120,.11), transparent 29%),
    linear-gradient(90deg,
      rgba(16,19,21,.90) 0%,
      rgba(17,21,23,.98) 8%,
      rgba(17,21,23,1) 50%,
      rgba(17,21,23,.98) 92%,
      rgba(16,19,21,.90) 100%
    ) !important;
  box-shadow:
    -34px 0 55px rgba(15,54,84,.10),
     34px 0 55px rgba(15,54,84,.10),
    inset 0 1px 0 rgba(42,91,132,.16),
    inset 0 -1px 0 rgba(42,91,132,.12) !important;
}

/* Sehr dezente technische Linien in den freien Seitenflächen */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.16;
  background-image:
    repeating-linear-gradient(
      135deg,
      rgba(65,105,135,.10) 0,
      rgba(65,105,135,.10) 1px,
      transparent 1px,
      transparent 24px
    );
}

@media(max-width:850px){
  body{
    background:#0d151b !important;
  }
  body::before{
    opacity:.08;
  }
}


/* Stand 89 – fertiges Hintergrundbild oben auf der Startseite, unverändert */
.home-image-strip{width:100%;background:#fff;line-height:0;overflow:hidden}
.home-image-strip img{display:block;width:100%;height:auto;margin:0;padding:0}


/* Stand 91 – Startseite als einheitliche Ein-Seiten-Lösung */
.home-image-strip{display:none!important}
.home-hero-space{height:clamp(230px,31vw,500px);width:100%;background:transparent}
.service-overview-f{width:100%!important;max-width:none!important;padding:64px 4vw 82px!important;background:#f3f3f0!important;box-shadow:none!important;color:#151719!important}
.service-overview-f .service-intro{max-width:1500px;margin:0 auto 34px!important}
.service-overview-f .service-intro h2{color:#151719!important}
.services-f{width:100%!important;max-width:1500px!important;margin:0 auto!important;gap:24px!important}
.service-f{grid-template-columns:1fr 1fr!important;background:#fff!important;color:#17191a!important;border:0!important;box-shadow:none!important;overflow:hidden!important}
.service-f::before{display:none!important}
.service-f-image,.service-f-image-empty{background:#f4f4f1!important;border:0!important}
.service-f-image img{background:transparent!important}
.service-f-copy{background:#fff!important;color:#17191a!important}
.service-f h3{color:#17191a!important}
.service-f p{color:#555b5e!important}
.service-more{margin-top:auto;background:none;border:0;border-bottom:2px solid #f15a24;padding:0 0 7px;color:#17191a;font:inherit;font-size:10px;font-weight:800;letter-spacing:1.3px;cursor:pointer}
.service-details{display:none;grid-column:1/-1;padding:34px 42px 40px;background:#fff;color:#555b5e;border-top:0}
.service-f.details-open .service-details{display:block}
.service-details>p{max-width:980px;margin:0 0 26px;line-height:1.75}
.detail-products{font-weight:700;color:#303437!important}
.detail-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.detail-gallery img{display:block;width:100%;height:210px;object-fit:contain;background:#f5f5f2}
.about-home{background:#fff;color:#17191a;padding:95px 5vw 105px}
.about-home-inner{max-width:1500px;margin:auto}
.about-home h2{color:#17191a}
.about-home p{max-width:900px;margin:0;color:#555b5e;font-size:17px;line-height:1.8}
.about-home strong{color:#17191a}
.orange-rule{width:55px;height:3px;background:#f15a24;margin:27px 0}
@media(max-width:850px){.home-hero-space{height:210px}.service-overview-f{padding:44px 5vw 60px!important}.service-f{grid-template-columns:1fr!important}.service-f-reverse .service-f-image,.service-f-reverse .service-f-copy{order:initial!important}.service-details{grid-column:1;padding:28px}.detail-gallery{grid-template-columns:1fr 1fr}.detail-gallery img{height:170px}.about-home{padding:70px 6vw}}
@media(max-width:520px){.detail-gallery{grid-template-columns:1fr}.detail-gallery img{height:auto}}

/* Stand 92 – offene, rahmenlose Produktdarstellung */
.service-overview-f{background:#f3f3f0!important}
.services-f{gap:72px!important}
.service-f{
  display:grid!important;
  grid-template-columns:minmax(360px,.9fr) minmax(420px,1.1fr)!important;
  column-gap:64px!important;
  row-gap:0!important;
  align-items:center!important;
  min-height:0!important;
  background:transparent!important;
  overflow:visible!important;
}
.service-f:hover{background:transparent!important;transform:none!important}
.service-f-image{
  min-height:0!important;
  height:auto!important;
  padding:0!important;
  background:transparent!important;
  overflow:visible!important;
}
.service-f-image img{
  width:100%!important;
  height:300px!important;
  min-height:0!important;
  max-height:none!important;
  object-fit:contain!important;
  background:transparent!important;
}
.service-f-copy{
  min-height:0!important;
  padding:18px 0!important;
  background:transparent!important;
}
.service-f-reverse .service-f-image{order:2}
.service-f-reverse .service-f-copy{order:1}
.service-f-image-empty{display:none!important}
.services-f .service-f:last-child{grid-template-columns:1fr!important}
.services-f .service-f:last-child .service-f-copy{max-width:900px!important}
.service-details{
  grid-column:1/-1!important;
  margin-top:26px!important;
  padding:30px 0 0!important;
  background:transparent!important;
}
.detail-gallery{gap:22px!important}
.detail-gallery img{background:transparent!important}
@media(max-width:850px){
  .services-f{gap:52px!important}
  .service-f{grid-template-columns:1fr!important;gap:18px!important}
  .service-f-reverse .service-f-image,.service-f-reverse .service-f-copy{order:initial!important}
  .service-f-image img{height:auto!important;max-height:320px!important}
  .service-f-copy{padding:0!important}
}

/* Stand 93 – Bildflächen wirklich frei + Details immer nach unten */
.services-f .service-f:nth-child(1) .service-f-image,
.services-f .service-f:nth-child(2) .service-f-image,
.services-f .service-f:nth-child(3) .service-f-image,
.services-f .service-f:nth-child(4) .service-f-image{
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  border:0!important;
}
.service-f-image img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-height:360px!important;
  object-fit:contain!important;
  background:transparent!important;
}
.service-f{grid-template-rows:auto auto!important}
.service-f-image,.service-f-copy{grid-row:1!important}
.service-f:not(.service-f-reverse) .service-f-image{grid-column:1!important}
.service-f:not(.service-f-reverse) .service-f-copy{grid-column:2!important}
.service-f-reverse .service-f-copy{grid-column:1!important;grid-row:1!important;order:initial!important}
.service-f-reverse .service-f-image{grid-column:2!important;grid-row:1!important;order:initial!important}
.service-details{grid-column:1/-1!important;grid-row:2!important;order:initial!important;margin-top:26px!important}
.services-f .service-f:last-child .service-f-copy{grid-column:1/-1!important}
@media(max-width:850px){
 .service-f-image,.service-f-copy,.service-f-reverse .service-f-image,.service-f-reverse .service-f-copy{grid-column:1!important;grid-row:auto!important}
 .service-details{grid-column:1!important;grid-row:auto!important}
}

/* Stand 94 – Produktbilder etwas größer und harmonischer verteilt */
.services-f{max-width:1560px!important;gap:82px!important}
.service-overview-f .service-intro{max-width:1560px!important}
.service-f{
  grid-template-columns:minmax(500px,1.05fr) minmax(460px,.95fr)!important;
  column-gap:78px!important;
}
.service-f-image img{
  max-height:430px!important;
}
.service-f-copy{padding:24px 0!important}
.service-f-reverse{
  grid-template-columns:minmax(460px,.95fr) minmax(500px,1.05fr)!important;
}
@media(max-width:1100px){
 .service-f{grid-template-columns:minmax(400px,1fr) minmax(400px,1fr)!important;column-gap:48px!important}
 .service-f-reverse{grid-template-columns:minmax(400px,1fr) minmax(400px,1fr)!important}
 .service-f-image img{max-height:390px!important}
}
@media(max-width:850px){
 .services-f{gap:56px!important}
 .service-f,.service-f-reverse{grid-template-columns:1fr!important}
 .service-f-image img{max-height:360px!important}
}

/* Stand 95 – natürliche, einfache Produktkarten */
.service-overview-f{
  background:#f3f3f0!important;
  padding-left:5vw!important;
  padding-right:5vw!important;
}
.services-f{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:34px!important;
  max-width:1500px!important;
  align-items:start!important;
}
.service-f,
.service-f-reverse{
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:auto auto auto!important;
  gap:0!important;
  min-height:0!important;
  background:#fff!important;
  border:0!important;
  border-radius:12px!important;
  overflow:hidden!important;
  box-shadow:0 8px 28px rgba(15,25,32,.075)!important;
}
.service-f::before{display:none!important}
.service-f-image,
.service-f-reverse .service-f-image{
  grid-column:1!important;
  grid-row:1!important;
  order:initial!important;
  width:100%!important;
  height:340px!important;
  min-height:340px!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  background:#ecece8!important;
  border:0!important;
  box-shadow:none!important;
}
.service-f-image img,
.service-f-reverse .service-f-image img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  object-fit:cover!important;
  object-position:center!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
/* Das hochformatige Hebetechnik-Foto füllt die Bildfläche bewusst aus – kein dunkler Seitenrand. */
#hebetechnik .service-f-image img{object-position:center 48%!important}
.service-f-copy,
.service-f-reverse .service-f-copy{
  grid-column:1!important;
  grid-row:2!important;
  order:initial!important;
  min-height:230px!important;
  padding:34px 38px 36px!important;
  background:#fff!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
}
.service-f h3{margin:0 0 15px!important}
.service-f p{margin:0 0 24px!important}
.service-more{margin-top:auto!important}
.service-details,
.service-f-reverse .service-details{
  grid-column:1!important;
  grid-row:3!important;
  margin:0!important;
  padding:0 38px 38px!important;
  background:#fff!important;
}
.service-f.details-open .service-details{display:block!important}
/* Service ohne Bild bleibt eine schlichte Karte, ohne künstliche Leerfläche. */
.services-f .service-f:last-child{
  grid-template-columns:1fr!important;
  grid-template-rows:auto auto!important;
}
.services-f .service-f:last-child .service-f-copy{
  grid-column:1!important;
  grid-row:1!important;
  min-height:230px!important;
}
.services-f .service-f:last-child .service-details{
  grid-column:1!important;
  grid-row:2!important;
}
@media(max-width:900px){
  .services-f{grid-template-columns:1fr!important;gap:28px!important}
  .service-f-image,.service-f-reverse .service-f-image{height:320px!important;min-height:320px!important}
}
@media(max-width:560px){
  .service-f-image,.service-f-reverse .service-f-image{height:260px!important;min-height:260px!important}
  .service-f-copy,.service-f-reverse .service-f-copy{padding:28px 24px 30px!important;min-height:0!important}
  .service-details,.service-f-reverse .service-details{padding:0 24px 30px!important}
}

/* Stand 96 – Korrektur der Produktkarten: Bildflächen ohne Leer-/Randfehler */
.services-f .service-f .service-f-image{
  position:relative!important;
  display:block!important;
  width:100%!important;
  height:360px!important;
  min-height:360px!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  background:#fff!important;
}
.services-f .service-f .service-f-image img{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  max-width:none!important;
  min-height:100%!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  object-fit:cover!important;
  object-position:center center!important;
  border:0!important;
  box-shadow:none!important;
  background:#fff!important;
}
#seiltechnik .service-f-image img{object-position:center center!important}
#hebetechnik .service-f-image img{object-position:center 48%!important}
#gurtsysteme .service-f-image img{object-position:center 48%!important}
/* Karten bleiben in der bestehenden 2-Spalten-Anordnung. */
.service-f-copy,.service-f-reverse .service-f-copy{min-height:230px!important}
@media(max-width:900px){
 .services-f .service-f .service-f-image{height:330px!important;min-height:330px!important}
}
@media(max-width:560px){
 .services-f .service-f .service-f-image{height:260px!important;min-height:260px!important}
}

/* Stand 97 – robuste Korrektur der drei Produktbilder.
   Die Bildfläche selbst trägt das Bild; dadurch können ältere img-Regeln
   keine weißen Leerflächen oder schmalen Bildstreifen mehr erzeugen. */
#seiltechnik .service-f-image{
  background:#ecece8 url("seiltechnik-kachel.jpg") center center / cover no-repeat !important;
}
#hebetechnik .service-f-image{
  background:#ecece8 url("hebetechnik-kachel.jpg") center 48% / cover no-repeat !important;
}
#gurtsysteme .service-f-image{
  background:#ecece8 url("gurtsysteme-kachel.jpg") center 48% / cover no-repeat !important;
}
#seiltechnik .service-f-image img,
#hebetechnik .service-f-image img,
#gurtsysteme .service-f-image img{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
/* Die vierte Karte hat bewusst kein Bild: keine leere Bildfläche erzeugen. */
#service .service-f-image-empty{display:none!important;height:0!important;min-height:0!important}

/* Stand 98 – echte 16:9-Querformatbilder, keine CSS-Hintergrund-Tricks */
#seiltechnik .service-f-image,
#hebetechnik .service-f-image,
#gurtsysteme .service-f-image{
  background:#ecece8 !important;
  aspect-ratio:16/9 !important;
  height:auto !important;
  min-height:0 !important;
}
#seiltechnik .service-f-image img,
#hebetechnik .service-f-image img,
#gurtsysteme .service-f-image img{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  position:static !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:100% !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center !important;
}

/* STAND 99
   Vier Hauptkacheln sauber vereinheitlicht.
   Referenz ist die funktionierende Hebetechnik-Kachel aus Stand 98.
   KEINE Bildgenerierung und KEINE Änderung an den vorhandenen Bilddateien. */

.services-f{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:30px!important;
  align-items:start!important;
}

.services-f > .service-f{
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:auto auto auto!important;
  align-self:start!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  border-radius:12px!important;
  background:#fff!important;
  box-shadow:0 10px 30px rgba(0,0,0,.06)!important;
}

/* Die drei Hauptbilder exakt nach demselben Prinzip wie Hebetechnik. */
#seiltechnik .service-f-image,
#hebetechnik .service-f-image,
#gurtsysteme .service-f-image{
  display:block!important;
  position:relative!important;
  grid-column:1!important;
  grid-row:1!important;
  width:100%!important;
  aspect-ratio:16/9!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:#eee!important;
}

#seiltechnik .service-f-image img,
#hebetechnik .service-f-image img,
#gurtsysteme .service-f-image img{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  object-fit:cover!important;
  object-position:center center!important;
  opacity:1!important;
  visibility:visible!important;
  border:0!important;
  box-shadow:none!important;
}

/* Gleicher Textblock für ALLE vier Kacheln. */
.services-f > .service-f > .service-f-copy,
.services-f > .service-f.service-f-reverse > .service-f-copy{
  grid-column:1!important;
  grid-row:2!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  width:100%!important;
  min-height:230px!important;
  box-sizing:border-box!important;
  padding:34px 38px 36px!important;
  margin:0!important;
  background:#fff!important;
}

.services-f > .service-f .service-more{
  margin-top:auto!important;
}

/* Detailbereich öffnet immer UNTER der jeweiligen Kachel. */
.services-f > .service-f > .service-details,
.services-f > .service-f.service-f-reverse > .service-details{
  grid-column:1!important;
  grid-row:3!important;
  width:100%!important;
  box-sizing:border-box!important;
  margin:0!important;
  padding:0 38px 38px!important;
  background:#fff!important;
}

/* Kettenprüfung hat bewusst kein Hauptbild.
   Keine leere Pseudo-Bildfläche – stattdessen dieselbe Kartenbreite und Textgestaltung. */
#service .service-f-image-empty{
  display:none!important;
}
#service{
  grid-template-rows:auto auto!important;
}
#service > .service-f-copy{
  grid-row:1!important;
  min-height:230px!important;
}
#service > .service-details{
  grid-row:2!important;
}

@media(max-width:900px){
  .services-f{grid-template-columns:1fr!important;gap:28px!important}
}
@media(max-width:560px){
  .services-f > .service-f > .service-f-copy,
  .services-f > .service-f.service-f-reverse > .service-f-copy{
    min-height:0!important;
    padding:28px 24px 30px!important;
  }
  .services-f > .service-f > .service-details,
  .services-f > .service-f.service-f-reverse > .service-details{
    padding:0 24px 30px!important;
  }
}

/* Stand 100 – Titelbild aus Originaldatei, ohne Motivänderung */
.km-title-hero {
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
  overflow:hidden;
  background:#fff;
  line-height:0;
}
.km-title-hero img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:2048/341;
  object-fit:contain;
  object-position:center center;
  margin:0;
  padding:0;
  border:0;
}
@media (max-width:700px) {
  .km-title-hero img {
    width:100%;
    height:auto;
    object-fit:contain;
  }
}

/* Stand 101 – ausschließlich bessere Lesbarkeit dieser zwei Texte */
.eyebrow {
  font-size: 15px !important;
  line-height: 1.3 !important;
}
.service-more,
.service-more summary,
.service-more-btn,
.service-f a.more,
.service-f button.more {
  font-size: 13px !important;
  line-height: 1.35 !important;
}