/* Fonts: Roboto + Roboto Condensed */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&family=Roboto+Condensed:wght@100;300;400;500;700&display=swap');

html { font-size: 16px; letter-spacing: normal; }
body { font-family: Roboto, arial, verdana, sans-serif; font-size: 1rem; }
h1, h2, h3, h4, h5, h6 { font-family: "Roboto Condensed", arial, verdana, sans-serif; font-weight: 600; }

/* Corporate Design Styles */
:root {
  --gentian-blue: rgb(9, 61, 106);
  --boellhoff-blue: #0085C8;
  --sky-blue: #A8C6E6;
  --light-blue: #E1F0F7;
  --blue-100: #05253D;
  --blue-700: #F1F8FB;
  --opal-green: #CDE7D8;
  --traffic-green: #63B15E;
  --yellow-green: #B2D785;
  --white-green: #E3F2E1;
  --boellhoff-grey: #58595B;
  --agate-grey: #B1B3B1;
  --grey-white: #E6E7E8;
  --grey-700: #F7F7F7;
  --black: #000000;
  --white: #FFFFFF;
  --flame-red: #E52321;
  --sun-yellow: #E2A637;
  --highlight: rgb(9, 61, 106);
}

/* Typography */
body {
  font-family: Roboto, arial, verdana, sans-serif;
  font-size: 1rem;
  letter-spacing: normal;
  color: var(--black);
  background: rgb(110, 110, 110);
}
.headline-900 { font-size: 3rem; font-weight: 400; line-height: 1.25; color: var(--gentian-blue); }
.headline-800 { font-size: 2.5rem; font-weight: 400; line-height: 1.25; color: var(--gentian-blue); }
.headline-700 { font-size: 2rem; font-weight: 400; line-height: 1.25; color: var(--gentian-blue); }
.headline-600 { font-family: "Roboto Condensed", arial, verdana, sans-serif; font-size: 1.5rem; font-weight: 400; line-height: 1.5; color: var(--gentian-blue); }
.headline-500 { font-family: "Roboto Condensed", arial, verdana, sans-serif; font-size: 1.25rem; font-weight: 400; line-height: 1.5; color: var(--gentian-blue); }
.headline-400 { font-family: "Roboto Condensed", arial, verdana, sans-serif; font-size: 1.1rem; font-weight: 400; line-height: 1.25; color: var(--gentian-blue); }
.headline-300 { font-family: "Roboto Condensed", arial, verdana, sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.25; color: var(--gentian-blue); }
.headline-200 { font-family: "Roboto Condensed", arial, verdana, sans-serif; font-size: 0.9rem; font-weight: 400; line-height: 1.25; color: var(--gentian-blue); }
.headline-100 { font-family: "Roboto Condensed", arial, verdana, sans-serif; font-size: 0.8rem; font-weight: 400; line-height: 1.25; color: var(--gentian-blue); }
.paragraph-400 { font-size: 1rem; font-weight: 400; line-height: 1.5; }
.paragraph-300 { font-size: 0.95rem; font-weight: 400; line-height: 1.5; }
.paragraph-200 { font-size: 0.9rem; font-weight: 400; line-height: 1.5; }
.paragraph-100 { font-size: 0.85rem; font-weight: 400; line-height: 1.5; }

/* Header & Navigation */
.header { background: var(--white); color: var(--boellhoff-blue); display:flex; align-items:center; justify-content:space-between; padding: 0 1rem; height: 64px; box-shadow: 0 2px 6px rgba(0,0,0,0.07); }
.nav { display:flex; align-items:center; gap: 1rem; }
.nav a { display:flex; align-items:center; gap:.5rem; color: var(--boellhoff-grey); text-decoration:none; padding:.5rem .75rem; border-radius:4px; font-weight:600; }
.nav-icon { height:16px; vertical-align:middle; margin-right:.4em; }
.nav a:hover { color: var(--gentian-blue); background: var(--light-blue); }
.nav .icon { width: 20px; height: 20px; display:inline-block; }
.boellhoff-logo {
  border: none !important;
  border-radius: 0;
  padding: 0;
  background: transparent !important;
  display: inline-block;
}

/* Buttons */
.button-primary { background-color: var(--boellhoff-blue); color: #fff; border-radius: 4px; font-family: Roboto, arial, verdana, sans-serif; padding: 12px 24px; font-weight: 600; border: none; transition: background 0.2s; cursor:pointer; }
.button-primary:hover { background-color: var(--gentian-blue); }

/* Cards, tables, accordion */
.pagewrapper { width: 90vw; max-width: 1800px; margin: 0 auto; background: rgb(110, 110, 110); min-height: 100vh; padding-bottom: 2em; }
.centerbox { margin: 4em auto 0; max-width: 95%; background: var(--white); border-radius: 12px; padding: 2em 3em; box-shadow: 0 4px 24px rgba(0,0,0,0.08); color: var(--black); }
.table { width: 100%; border-collapse: collapse; background: var(--white); color: var(--black); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.table th, .table td { border: 1px solid var(--grey-white); padding: 0.7em 1.2em; }
.table th { background: var(--gentian-blue); color: #fff; letter-spacing: 0.03em; }
.table tbody tr:nth-child(even) { background: var(--grey-700); }
.table tbody tr:hover { background: var(--light-blue); }

.details { margin: 1em 0; background: var(--white); color: var(--black); border: 1px solid var(--grey-white); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.04); }
.details > summary { list-style:none; cursor:pointer; padding: 0.75em 1em; font-weight:600; background: var(--light-blue); color: var(--boellhoff-grey); }
.details[open] > summary { background: var(--boellhoff-blue); color: #fff; }
.accordion-body { padding: 0 1em 1em; }

/* General info block */
.generalinfo { margin: 1em 0; padding: 1em 1.2em; background: var(--light-blue); color: var(--blue-100); border-radius: 8px; }
.generalinfo h3 { margin: 0 0 .6em 0; color: var(--gentian-blue); }
.generalinfo ul { list-style: none; padding: 0; margin: 0; display:flex; flex-wrap:wrap; gap:.5em 1em; }
.generalinfo li { background: var(--blue-700); color: var(--blue-100); padding:.4em .7em; border-radius:8px; }

/* Image card */
.imagecard { background: transparent; border: none; border-radius: 0; box-shadow: none; padding: 0; }
.imagecard-inner { background: transparent; border-radius: 0; overflow: visible; padding: 0; }
.imagecard img { display:block; width:100%; height: 320px; object-fit: contain; background:#fff; }

select { background: rgb(226, 226, 226); }

/* Utility */
.unit { color: var(--agate-grey); font-size: 0.95em; }
.lead { color: var(--boellhoff-light, #A8C6E6); }

/* Header banner */
.banner { text-align:center; padding:.8em 1em; background: var(--grey-700); color: var(--blue-100); font-weight:600; }

.site-footer-promo {
  padding: 0 0 1.5em 0;
}

.site-footer-promo-inner {
  width: min(90%, 980px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
}

.whitepaper-teaser {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--grey-white);
  border-radius: 10px;
  background: var(--white);
  color: var(--gentian-blue);
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.whitepaper-teaser:hover {
  background: var(--light-blue);
}

.whitepaper-teaser-preview-link {
  display: inline-flex;
  flex-shrink: 0;
}

.whitepaper-teaser-preview {
  width: 42px;
  height: 58px;
  object-fit: cover;
  object-position: top center;
  flex-shrink: 0;
  border: 1px solid var(--grey-white);
  border-radius: 4px;
  background: var(--white);
}

.whitepaper-teaser-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  gap: 0.18rem;
}

.whitepaper-teaser-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gentian-blue);
  text-decoration: none;
}

.whitepaper-teaser-view,
.whitepaper-teaser-download {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--boellhoff-blue);
  text-decoration: none;
}

.whitepaper-teaser-title:hover,
.whitepaper-teaser-view:hover,
.whitepaper-teaser-download:hover {
  text-decoration: underline;
}

.site-footer-sponsored-logo {
  width: min(100%, 320px);
  height: auto;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}

.stats-card {
  background: var(--light-blue);
  border-radius: 10px;
  padding: 1rem 1.2rem;
}

.stats-card-label {
  color: var(--gentian-blue);
  font-size: 0.9rem;
  font-weight: 600;
}

.stats-card-value {
  color: var(--blue-100);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  margin-top: 0.35rem;
}

@media (max-width: 900px) {
  .boellhoff-logo {
    width: min(100%, 260px);
    max-width: 100%;
    height: auto !important;
    object-fit: contain;
  }

  .site-footer-sponsored-logo {
    width: min(100%, 280px);
  }
}

@media (max-width: 600px) {
  .site-footer-promo-inner {
    align-items: stretch;
  }

  .whitepaper-teaser {
    width: 100%;
    justify-content: center;
  }

  .whitepaper-teaser-copy {
    align-items: center;
    text-align: center;
  }
}