/* Global styles. Component styling lives inline in the templates
   (taken over 1:1 from the Claude Design export so the look stays identical). */

@font-face{font-family:'IBM Plex Sans';src:url('/assets/fonts/IBMPlexSans-Variable.woff2') format('woff2');font-weight:100 700;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('/assets/fonts/IBMPlexSans-Italic-Variable.woff2') format('woff2');font-weight:100 700;font-style:italic;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/assets/fonts/IBMPlexMono-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/assets/fonts/IBMPlexMono-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

html,body{margin:0;padding:0;background:#f5f5f3;color:#141517;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:#141517;text-decoration:none}
a:hover{color:#5b5f66}
button{font-family:inherit}
input,textarea,select{font-family:inherit}

/* Templates use inline styles, so [hidden] needs to win over inline display values. */
[hidden]{display:none !important}


/* Hover states (formerly style-hover). !important is needed to beat the inline styles. */
.hv-ink:hover{color:#141517 !important}
.hv-muted:hover{color:#5b5f66 !important}
.hv-light:hover{color:#ececea !important}
.hv-bg-dark:hover{background:#2c2f34 !important}
.hv-bg-light:hover{background:#e9e9e6 !important}
.hv-bg-white:hover{background:#ffffff !important}
.hv-bg-blue:hover{background:oklch(0.35 0.08 235) !important}

a:focus-visible,button:focus-visible{outline:2px solid #141517 !important;outline-offset:2px}

#buy{scroll-margin-top:70px}

/* Phones: logo + language switch in one row, navigation as a single scrollable row below. */
@media (max-width:720px){
  /* Long German compounds ("Softwareentwicklung") must not overflow on phones. */
  h1,h2,h3{overflow-wrap:break-word;hyphens:auto}
  .site-head{padding:10px 20px !important;gap:6px 16px !important;justify-content:space-between}
  .site-nav{order:3;flex:1 0 100% !important;flex-wrap:nowrap !important;overflow-x:auto;margin:0 -20px;padding:0 12px;scrollbar-width:none}
  .site-nav::-webkit-scrollbar{display:none}
  .solar-tabs{position:static !important}
}