/* ==========================================================
   PHOTOKAT V12 – STRUCTURE + DESIGN CONSOLIDATION
   Final visual layer: light, precise, technical, clean.
   ========================================================== */
:root{
  --pk-ink:#0b221e;
  --pk-text:#36515e;
  --pk-blue:#087cf0;
  --pk-blue2:#24b8ef;
  --pk-sky:#dff5ff;
  --pk-ice:#f6fcff;
  --pk-line:#d8eaf3;
  --pk-white:#fff;
  --pk-shadow:0 16px 42px rgba(28,85,116,.09);
  --pk-radius:20px;
}
html{scroll-behavior:smooth}
body{color:var(--pk-ink);background:#fff}
body p{color:var(--pk-text);line-height:1.72}
h1,h2,h3{letter-spacing:-.025em}
h2{line-height:1.08}

/* Navigation */
header{background:rgba(255,255,255,.97)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(167,207,227,.55)!important}
header nav{max-width:1220px!important}
header nav img{max-height:48px!important;width:auto}
.nav-links{gap:24px!important}
.nav-links>a,.nav-drop>summary{font-weight:650!important;color:#163641!important}
.nav-links>a:hover,.nav-drop>summary:hover{color:var(--pk-blue)!important}
.nav-cta{border-radius:999px!important;padding:12px 20px!important;background:linear-gradient(135deg,#087cf0,#169eea)!important;box-shadow:0 8px 20px rgba(8,124,240,.18)!important}
.drop-menu{border:1px solid var(--pk-line)!important;border-radius:16px!important;box-shadow:0 18px 50px rgba(19,66,94,.14)!important;overflow:hidden}
.drop-menu a{padding:13px 16px!important}
.drop-menu a:hover{background:#f2faff!important}
.mobile-label{padding:14px 16px 5px;color:#0877b7;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}

/* Homepage hero: preserve approved sun/glass artwork */
body.home .hero,.home-hero{isolation:isolate}

/* All subpage heroes: one clean sky field, no cards/grey panels */
body:not(.home) .hero,
.page-header,.page-hero,.hero-section,.hero-banner,.header-hero{
  background:linear-gradient(110deg,#f8fdff 0%,#eefaff 32%,#ddf5ff 65%,#bfe9fc 100%)!important;
  color:var(--pk-ink)!important;
  min-height:clamp(340px,38vw,520px);
  display:flex;
  align-items:center;
  box-shadow:inset 0 -1px 0 rgba(117,187,220,.22)
}
body:not(.home) .hero::before,body:not(.home) .hero::after,
.page-header::before,.page-header::after,.page-hero::before,.page-hero::after,
.hero-section::before,.hero-section::after,.hero-banner::before,.hero-banner::after,
.header-hero::before,.header-hero::after{content:none!important;display:none!important}
body:not(.home) .hero .wrap,
body:not(.home) .hero .container,
.page-header .wrap,.page-header .container{
  background:transparent!important;box-shadow:none!important;border:0!important
}
body:not(.home) .hero h1,.page-header h1,.page-hero h1{
  color:var(--pk-ink)!important;text-shadow:none!important;
  font-size:clamp(46px,6vw,78px)!important;line-height:.98!important;max-width:900px
}
body:not(.home) .hero p,.page-header p,.page-hero p{
  color:#294955!important;text-shadow:none!important;max-width:780px;font-size:clamp(17px,1.6vw,21px)
}
body:not(.home) .hero .eyebrow,.page-header .eyebrow,.page-hero .eyebrow{
  color:#087fc8!important;background:transparent!important;padding:0!important;
  font-weight:800!important;letter-spacing:.12em
}

/* Section rhythm */
section{padding-top:clamp(64px,8vw,104px);padding-bottom:clamp(64px,8vw,104px)}
.wrap,.container{max-width:1180px!important}
.soft{background:linear-gradient(180deg,#f8fdff 0%,#f1f9fd 100%)!important}

/* Cards */
.card,.brand,.tile,.step,.proof,.case,.usecase{
  border:1px solid var(--pk-line)!important;
  border-radius:var(--pk-radius)!important;
  background:#fff!important;
  box-shadow:0 8px 26px rgba(27,86,118,.055)!important;
}
.card:hover,.brand:hover,.tile:hover{
  transform:translateY(-3px);
  border-color:#9ed9f5!important;
  box-shadow:var(--pk-shadow)!important;
}
.card,.brand,.tile{transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}

/* Eyebrows and buttons */
.eyebrow{color:#087fc8!important;font-weight:800!important;letter-spacing:.11em!important}
.btn,.button,.nav-cta{
  border-radius:999px!important;font-weight:750!important;
}
.btn:not(.ghost),.button:not(.ghost){
  background:linear-gradient(135deg,#087cf0,#159fe8)!important;color:#fff!important;
  box-shadow:0 9px 22px rgba(8,124,240,.16)!important
}
.ghost{background:#fff!important;color:#123a48!important;border:1px solid #a8cfdf!important}

/* Strong technology / product panels: blue, but bright */
.formula,.metric,.pv{
  background:linear-gradient(125deg,#075db6 0%,#087cf0 55%,#27b9ed 100%)!important;
  border-radius:24px!important;
  box-shadow:0 18px 48px rgba(8,124,240,.14)!important;
}
.formula h2,.formula h3,.formula p,.metric h2,.metric h3,.metric p,.pv h2,.pv h3,.pv p{color:#fff!important}

/* Contact */
.home-contact-form,.contact{
  background:linear-gradient(120deg,#edfaff 0%,#d7f2ff 100%)!important;
}
.home-form-card{border:1px solid var(--pk-line)!important;border-radius:24px!important;box-shadow:var(--pk-shadow)!important}

/* Footer */
footer{background:#0d2b3a!important;color:#dbeaf0!important}
footer a{color:#eaf7fb!important}

/* Legal pages: calmer hero */
body:has(h1:is(:first-child)){}
@media(max-width:900px){
  .nav-links,.nav-cta{display:none!important}
  .mobile-menu{display:block!important}
  body:not(.home) .hero,.page-header,.page-hero{min-height:300px}
}
@media(max-width:700px){
  section{padding-top:58px;padding-bottom:58px}
  body:not(.home) .hero h1,.page-header h1,.page-hero h1{font-size:clamp(38px,11vw,54px)!important}
}

/* ==========================================================
   PHOTOKAT V21 – MOBILE TIGHTENING
   Compact, consistent phone/tablet layout across all pages.
   ========================================================== */
@media (max-width: 800px){
  html{overflow-x:hidden}
  body{overflow-x:hidden;font-size:16px}
  .wrap,.container{padding-left:18px!important;padding-right:18px!important}

  /* Header / mobile navigation */
  header nav{height:68px!important;gap:12px!important}
  header nav>a:first-child{display:flex;align-items:center;min-width:0}
  header nav>a:first-child img{width:168px!important;max-width:46vw!important;max-height:44px!important}
  .mobile-menu{margin-left:auto!important}
  .mobile-menu>summary{padding:8px 12px!important;font-size:14px!important;background:#fff!important}
  .mobile-panel{right:0!important;left:auto!important;width:min(310px,calc(100vw - 36px))!important;max-height:calc(100vh - 88px)!important;overflow-y:auto!important}
  .mobile-panel a{padding:11px 14px!important;line-height:1.25!important}

  /* Homepage artwork: keep the approved image, but make it useful on a phone.
     The image contains its own typography, so crop from the left instead of
     shrinking the entire 3:1 desktop banner into an unreadably thin strip. */
  body.home>main>section.hero:first-child{
    aspect-ratio:auto!important;
    height:360px!important;
    min-height:360px!important;
    background-image:url('hero-photokat-v20.png')!important;
    background-size:auto 100%!important;
    background-position:left center!important;
    background-repeat:no-repeat!important;
    background-color:#dff5ff!important;
  }

  /* Subpage heroes */
  body:not(.home) .hero,.page-header,.page-hero,.hero-section,.hero-banner,.header-hero{
    min-height:260px!important;
    padding:46px 0!important;
  }
  body:not(.home) .hero .copy,body:not(.home) .page-header .copy{padding:0!important;max-width:100%!important}
  body:not(.home) .hero h1,.page-header h1,.page-hero h1{
    font-size:clamp(34px,10vw,48px)!important;
    line-height:1.01!important;
    margin:10px 0 14px!important;
    max-width:100%!important;
  }
  body:not(.home) .hero p,.page-header p,.page-hero p{
    font-size:16px!important;line-height:1.55!important;max-width:100%!important;margin-bottom:0!important
  }

  /* Tighter section rhythm and typography */
  section{padding-top:48px!important;padding-bottom:48px!important}
  h2{font-size:clamp(29px,8.4vw,39px)!important;line-height:1.08!important;margin-bottom:16px!important}
  h3{font-size:21px!important;line-height:1.18!important}
  p,.lead{font-size:16px!important;line-height:1.62!important}
  .eyebrow{font-size:11px!important;letter-spacing:.13em!important}

  /* All multi-column content becomes one clean reading column */
  .intro,.evidence,.pvgrid,.links3,.grid,.grid5,
  [class*="grid"]:not(.function-flow):not(.flow){grid-template-columns:1fr!important;gap:14px!important}
  .grid,.grid5{margin-top:24px!important}

  /* Cards: remove desktop-height leftovers */
  .card,.brand,.tile,.step,.proof,.case,.usecase{
    min-height:0!important;height:auto!important;padding:22px!important;border-radius:17px!important
  }
  .card h3,.brand h3,.tile h3{min-height:0!important;margin-bottom:10px!important}
  .card p,.brand p,.tile p{min-height:0!important;margin-top:0!important}
  .card a,.brand a{margin-top:14px!important}
  .brand-logo-wrap{height:82px!important;margin-bottom:12px!important}
  .brand-logo{max-height:72px!important}
  .brand-logo.photokat{max-height:78px!important}

  /* Blue functional panels */
  .formula,.metric,.pv{padding:24px!important;border-radius:18px!important}
  .formula .flow{gap:8px!important}
  .pill{padding:8px 11px!important;font-size:14px!important}
  .metric b{font-size:42px!important}

  /* Buttons / forms */
  .actions{gap:9px!important}
  .btn,.button{padding:11px 15px!important;font-size:14px!important}
  input,textarea,select{font-size:16px!important}

  footer{padding:34px 0!important}
  .foot{gap:18px!important}
}

@media (max-width: 430px){
  body.home>main>section.hero:first-child{
    height:330px!important;
    min-height:330px!important;
    /* Slightly enlarge the artwork so its baked-in headline remains legible. */
    background-size:auto 100%!important;
    background-position:left center!important;
  }
  header nav>a:first-child img{width:154px!important}
  .wrap,.container{padding-left:16px!important;padding-right:16px!important}
  section{padding-top:42px!important;padding-bottom:42px!important}
  .card,.brand,.tile,.step,.proof,.case,.usecase{padding:19px!important}
}

/* ==========================================================
   V22 MOBILE WIDTH NORMALIZATION
   Keeps all content blocks aligned to the same mobile gutter.
   ========================================================== */
@media (max-width: 800px){
  html,body{width:100%;max-width:100%;overflow-x:hidden!important;}
  *,*::before,*::after{box-sizing:border-box;}

  /* One consistent content width / gutter */
  .wrap,.container,
  main > section > .wrap,
  main > section > .container{
    width:100%!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:18px!important;
    padding-right:18px!important;
  }

  /* Never let content panels become wider than their card column */
  .intro,.evidence,.pvgrid,.links3,.grid,.grid5,
  .formula,.metric,.contact-grid,.contact-form-card,
  [class*="grid"]:not(.function-flow):not(.flow),
  [class*="panel"],[class*="cards"],[class*="tiles"]{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  .card,.brand,.tile,.step,.proof,.case,.usecase,
  .formula,.metric{
    width:100%!important;
    max-width:100%!important;
  }

  /* Images/media must stay inside their parent */
  main img,main svg,main video,main iframe{
    max-width:100%!important;
    height:auto;
  }

  /* Prevent long labels/URLs from forcing horizontal overflow */
  main p,main h1,main h2,main h3,main a,main span{
    overflow-wrap:anywhere;
  }

  /* Full-bleed backgrounds remain full width, content inside remains aligned */
  main > section{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
  }
}

@media (max-width: 430px){
  .wrap,.container,
  main > section > .wrap,
  main > section > .container{
    padding-left:16px!important;
    padding-right:16px!important;
  }
}

/* ==========================================================
   PHOTOKAT V24 – HOMEPAGE MOBILE TOP-WIDTH ALIGNMENT
   Align hero + intro/function area with the card gutter used
   from "Anwendungen" downward. Desktop remains unchanged.
   ========================================================== */
@media (max-width:800px){
  body.home main{overflow-x:hidden!important;}

  /* Hero: same visible outer gutter as the cards below. */
  body.home>main>section.hero:first-child{
    width:calc(100% - 36px)!important;
    max-width:calc(100% - 36px)!important;
    margin-left:18px!important;
    margin-right:18px!important;
    border-radius:18px!important;
    overflow:hidden!important;
  }

  /* First content block between hero and Anwendungen. */
  body.home>main>section:nth-of-type(2){
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
  }
  body.home>main>section:nth-of-type(2)>.wrap{
    width:100%!important;
    max-width:100%!important;
    padding-left:18px!important;
    padding-right:18px!important;
  }
  body.home>main>section:nth-of-type(2) .intro,
  body.home>main>section:nth-of-type(2) .formula,
  body.home>main>section:nth-of-type(2) .function-visual{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  /* Function graphic must never force the intro wider. */
  body.home>main>section:nth-of-type(2) .function-flow{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    flex-wrap:wrap!important;
  }
  body.home>main>section:nth-of-type(2) .function-step{
    min-width:0!important;
    flex:1 1 54px!important;
  }
}

@media (max-width:430px){
  body.home>main>section.hero:first-child{
    width:calc(100% - 32px)!important;
    max-width:calc(100% - 32px)!important;
    margin-left:16px!important;
    margin-right:16px!important;
    border-radius:16px!important;
  }
  body.home>main>section:nth-of-type(2)>.wrap{
    padding-left:16px!important;
    padding-right:16px!important;
  }
}

/* V31 – homepage-section navigation */
@media(min-width:1101px){
 header nav{max-width:1320px!important}
 .nav-links{gap:15px!important}
 .nav-links>a{font-size:14px;white-space:nowrap}
 .nav-cta{padding:11px 16px!important;white-space:nowrap}
}
section[id]{scroll-margin-top:88px}