/*
Theme Name: Lösungswerk Corporate 4.3
Author: Lösungswerk
Version: 4.6.0
Description: Lösungswerk Theme – oberer Bereich nach abgestimmtem Entwurf.
*/
:root{
 --bg:#061019;--bg2:#08131d;--blue:#3477da;--blue2:#1f3c88;
 --white:#f5f6f7;--muted:#bcc4ce;--line:rgba(255,255,255,.13);
 --max:1380px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--white);font-family:Arial,Helvetica,sans-serif;line-height:1.55;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{width:min(var(--max),calc(100% - 72px));margin:0 auto}

/* HEADER */
.site-header{
 position:sticky;top:0;z-index:100;
 background:rgba(4,10,15,.97);
 border-bottom:1px solid var(--line);
 backdrop-filter:blur(14px);
}
.nav{
 height:112px;
 display:grid;
 grid-template-columns:360px 1fr;
 align-items:center;
 gap:30px;
}
.wordmark{
 font-size:41px;
 line-height:1;
 font-weight:800;
 letter-spacing:-.025em;
 white-space:nowrap;
}
.wordmark .blue{color:var(--blue)}
.main-nav{
 display:flex;
 justify-content:flex-end;
 align-items:center;
 gap:50px;
 font-size:19px;
}
.main-nav a{transition:.18s;color:#f0f2f5}
.main-nav a:hover{color:#6da0ee}
.main-nav .stream{
 border:1px solid #2c68be;
 border-radius:5px;
 padding:13px 21px;
}
.menu-toggle{display:none;background:transparent;border:1px solid var(--line);color:#fff;padding:8px 11px;border-radius:6px;font-size:20px}

/* HERO */
.hero{
 position:relative;
 min-height:650px;
 display:flex;
 align-items:center;
 border-bottom:1px solid var(--line);
 background:
 radial-gradient(circle at 77% 42%,rgba(22,64,116,.26),transparent 30%),
 linear-gradient(180deg,#06111b,#061019);
 overflow:hidden;
}
.hero:after{
 content:"";
 position:absolute;
 right:0;top:55px;bottom:20px;width:55%;
 opacity:.28;
 background-image:
 linear-gradient(30deg,transparent 48%,rgba(31,91,177,.28) 49%,rgba(31,91,177,.28) 50%,transparent 51%);
 background-size:60px 60px;
 mask-image:linear-gradient(to left,#000 18%,rgba(0,0,0,.55) 68%,transparent 100%);
 pointer-events:none;
}
.hero-grid{
 position:relative;z-index:2;
 display:grid;
 grid-template-columns:1.02fr .98fr;
 gap:70px;
 align-items:center;
 width:100%;
}
.eyebrow{
 color:#4388e7;
 font-size:16px;
 letter-spacing:.22em;
 text-transform:uppercase;
 font-weight:800;
 margin-bottom:24px;
}
.hero h1{
 margin:0;
 font-size:clamp(58px,5.1vw,84px);
 line-height:1.06;
 letter-spacing:-.045em;
 max-width:770px;
}
.hero h1 .blue{color:var(--blue)}
.hero-rule{width:72px;height:2px;background:var(--blue);margin:33px 0 28px}
.hero-copy{font-size:20px;color:#c4cbd4;max-width:620px;margin:0}
.actions{display:flex;gap:22px;flex-wrap:wrap;margin-top:34px}
.btn{
 display:inline-flex;align-items:center;justify-content:center;
 min-height:58px;padding:0 29px;
 border-radius:5px;font-size:18px;font-weight:700;
 border:1px solid #3477da;
}
.btn.primary{background:linear-gradient(135deg,#1e4ba0,#3477da)}
.btn.secondary{background:transparent}
.hero-art{
 min-height:540px;
 display:grid;
 place-items:center;
 position:relative;
}
.hero-leaf{
 width:min(475px,86%);
 max-height:535px;
 object-fit:contain;
 display:block;
 filter:drop-shadow(0 30px 34px rgba(0,0,0,.55));
}

/* VALUES BAR */
.values{
 background:#07111a;
 border-bottom:1px solid var(--line);
 padding:40px 0;
}
.values-grid{display:grid;grid-template-columns:repeat(5,1fr)}
.value{
 display:grid;grid-template-columns:76px 1fr;gap:17px;
 padding:0 29px;
 min-height:105px;
 align-items:center;
 border-right:1px solid var(--line);
}
.value:first-child{padding-left:0}
.value:last-child{border-right:0;padding-right:0}
.value svg{width:62px;height:62px;fill:none;stroke:#3477da;stroke-width:1.6}
.value h3{font-size:16px;margin:0 0 7px;font-weight:600}
.value p{font-size:13px;margin:0;color:#c0c7d0;line-height:1.55}

/* LOWER SITE */
section.content{padding:84px 0}
.section-title{font-size:48px;margin:0 0 30px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{border:1px solid var(--line);border-radius:14px;background:#0d1721;padding:28px}
.card h3{font-size:23px;margin:0 0 10px}
.card p,.card li{color:#adb7c2}
.card ul{padding-left:18px}
.product-panel{border:1px solid rgba(52,119,218,.45);border-radius:18px;padding:38px;background:linear-gradient(135deg,rgba(31,60,136,.20),rgba(255,255,255,.015))}
.pagehero{padding:80px 0 50px}.pagehero h1{font-size:62px;line-height:1.05}
.pagehero p{font-size:20px;color:var(--muted);max-width:760px}
.site-footer{padding:45px 0 25px;border-top:1px solid var(--line);background:#040b11;color:#9ba5af}
.footer-grid{display:grid;grid-template-columns:1.3fr .7fr .7fr;gap:35px}
.site-footer a{display:block;margin:7px 0}
.footer-brand{font-size:32px;font-weight:800}.footer-brand span{color:var(--blue)}
.notice{border-left:3px solid var(--blue);padding:16px;background:rgba(52,119,218,.08);color:#c4cbd4;margin-top:25px}

@media(max-width:1080px){
 .nav{grid-template-columns:1fr 50px;height:88px}
 .wordmark{font-size:31px}
 .main-nav{
  display:none;position:absolute;top:88px;left:25px;right:25px;
  flex-direction:column;align-items:stretch;gap:15px;
  padding:22px;background:#07111a;border:1px solid var(--line);border-radius:10px
 }
 .main-nav.open{display:flex}.menu-toggle{display:block}
 .hero{min-height:auto;padding:62px 0}
 .hero-grid{grid-template-columns:1fr}
 .hero-art{min-height:390px}
 .hero-leaf{width:360px}
 .values-grid{grid-template-columns:1fr 1fr}
 .value{border-bottom:1px solid var(--line)}
 .cards{grid-template-columns:1fr}
 .footer-grid{grid-template-columns:1fr}
}
@media(max-width:650px){
 .wrap{width:calc(100% - 28px)}
 .wordmark{font-size:24px}
 .hero{padding:48px 0}
 .hero h1{font-size:46px}
 .eyebrow{font-size:12px}
 .hero-copy{font-size:17px}
 .hero-art{min-height:300px}
 .hero-leaf{width:270px}
 .values-grid{grid-template-columns:1fr}
 .value{border-right:0;padding:20px 0}
 .actions{gap:12px}
 .btn{width:100%}
}



/* ===== 4.5 FLUID RESPONSIVE SYSTEM ===== */
:root{
  --page-pad:clamp(14px,3.2vw,56px);
  --header-h:clamp(72px,7vw,96px);
  --hero-pad-y:clamp(34px,5.5vh,72px);
  --hero-gap:clamp(24px,4vw,64px);
}

/* Immer sauber innerhalb des Viewports */
.wrap{
  width:min(1320px,calc(100% - (var(--page-pad) * 2)));
  margin-inline:auto;
}
body{overflow-x:hidden}
img{display:block;max-width:100%;height:auto}

/* Header flüssig skalieren */
.nav{
  min-height:var(--header-h);
  height:auto;
  grid-template-columns:minmax(220px,330px) 1fr;
  gap:clamp(20px,3vw,48px);
}
.wordmark{
  font-size:clamp(24px,2.35vw,36px);
}
.main-nav{
  gap:clamp(18px,2.5vw,38px);
  font-size:clamp(14px,1.1vw,17px);
}
.main-nav .stream{
  padding:clamp(9px,1vw,13px) clamp(13px,1.3vw,20px);
}

/* Hero passt sich an Breite UND Höhe an */
.hero{
  min-height:min(72vh,720px);
  padding-block:var(--hero-pad-y);
}
.hero-grid{
  grid-template-columns:minmax(0,1.03fr) minmax(320px,.97fr);
  gap:var(--hero-gap);
}
.hero h1{
  font-size:clamp(44px,4.7vw,72px);
  line-height:1.035;
  max-width:12ch;
}
.eyebrow{
  font-size:clamp(11px,.95vw,14px);
  margin-bottom:clamp(14px,2vh,22px);
}
.hero-rule{
  margin:clamp(18px,2.8vh,28px) 0 clamp(18px,2.4vh,24px);
}
.hero-copy{
  font-size:clamp(16px,1.25vw,19px);
  max-width:58ch;
}
.actions{
  margin-top:clamp(22px,3vh,30px);
  gap:clamp(10px,1.3vw,18px);
}
.btn{
  min-height:clamp(48px,5vw,56px);
  padding-inline:clamp(18px,1.8vw,26px);
  font-size:clamp(15px,1.1vw,17px);
}

/* Blatt immer vollständig sichtbar, nie abgeschnitten */
.hero-art{
  min-height:clamp(300px,46vw,500px);
}
.hero-leaf{
  width:min(74%,430px);
  max-height:min(52vh,470px);
  object-fit:contain;
  object-position:center;
}

/* Werte-Leiste ebenfalls flexibel */
.values{
  padding-block:clamp(20px,2.8vw,32px);
}
.value{
  min-height:clamp(74px,8vw,96px);
  grid-template-columns:clamp(44px,4.3vw,58px) 1fr;
  gap:clamp(10px,1vw,15px);
  padding-inline:clamp(10px,1.5vw,20px);
}
.value svg{
  width:clamp(40px,3.5vw,50px);
  height:clamp(40px,3.5vw,50px);
}
.value h3{font-size:clamp(12px,.95vw,14px)}
.value p{font-size:clamp(11px,.78vw,12px)}

/* Normale Desktop-/Laptopbreiten */
@media(max-width:1180px){
  .nav{grid-template-columns:1fr auto}
  .main-nav{
    display:none;
    position:absolute;
    top:100%;
    left:var(--page-pad);
    right:var(--page-pad);
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    padding:20px;
    background:#07111a;
    border:1px solid var(--line);
    border-radius:10px;
  }
  .main-nav.open{display:flex}
  .menu-toggle{display:block}
  .hero-grid{
    grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);
  }
  .values-grid{grid-template-columns:repeat(3,1fr)}
  .value{border-bottom:1px solid var(--line)}
}

/* Tablets */
@media(max-width:900px){
  .hero{
    min-height:auto;
  }
  .hero-grid{
    grid-template-columns:1fr;
  }
  .hero h1{
    max-width:13ch;
  }
  .hero-art{
    min-height:280px;
  }
  .hero-leaf{
    width:min(320px,66vw);
    max-height:360px;
  }
  .values-grid{grid-template-columns:1fr 1fr}
}

/* Smartphones */
@media(max-width:620px){
  :root{--page-pad:14px}
  .nav{
    min-height:72px;
    grid-template-columns:1fr auto;
  }
  .wordmark{font-size:clamp(21px,7vw,25px)}
  .hero{
    padding-block:34px 28px;
  }
  .hero h1{
    font-size:clamp(39px,11vw,48px);
    max-width:none;
  }
  .hero-copy{
    font-size:16px;
  }
  .actions{
    flex-direction:column;
  }
  .btn{
    width:100%;
  }
  .hero-art{
    min-height:230px;
  }
  .hero-leaf{
    width:min(250px,70vw);
    max-height:280px;
  }
  .values-grid{grid-template-columns:1fr}
  .value{
    border-right:0;
    padding-block:16px;
  }
}


/* ===== 4.6 HEADLINE FIX ===== */
/* Desktop: Claim bewusst nur 2 Zeilen */
.hero-grid{
  grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);
}
.hero h1{
  max-width:none;
  width:min(760px,100%);
  font-size:clamp(48px,4.25vw,68px);
  line-height:1.04;
}

/* Tablet darf auf 2–3 Zeilen umbrechen */
@media(max-width:900px){
  .hero h1{
    width:min(680px,100%);
    font-size:clamp(44px,7vw,58px);
  }
}

/* Mobil natürlicher Umbruch, keine künstlichen Mini-Spalten */
@media(max-width:620px){
  .hero h1{
    width:100%;
    font-size:clamp(38px,10vw,46px);
    line-height:1.06;
  }
}