/* ============================================================
   SCHAUENBURG Industrietechnik – Data Center Liquid Cooling
   Statische Landingpage · Farben aus SB-IT_Farben_RGB.ase
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Palanquin';
  src: url('../assets/fonts/Palanquin-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Palanquin';
  src: url('../assets/fonts/Palanquin-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design-Tokens ---------- */
:root {
  --c-navy:      #12286A;  /* Dunkelblau */
  --c-blue:      #002395;  /* Primärblau – Headlines, Buttons, Karten */
  --c-lightblue: #4097CF;  /* Hellblau – Akzente */
  --c-red:       #A50034;  /* Dunkelrot – Primär-CTAs */
  --c-text:      #565655;  /* Fließtext */
  --c-gray-mid:  #868786;
  --c-gray:      #C5C6C6;
  --c-gray-bg:   #EDEDED;  /* Sektions-/Kartenhintergründe (aus Entwurf gesampelt) */
  --c-gray-card: #F7F7F7;
  --c-footer:    #003584;  /* Footer-Blau (aus Entwurf gesampelt) */
  --c-footer-dk: #19225A;  /* Footer-Bottom-Bar */
  --c-todo:      #FF00E1;  /* Pink-Markierung: Inhalt muss noch angepasst werden */
  --container:   1260px;
  --header-h:    106px;
  --radius:      5px;
  --shadow:      0 4px 18px rgba(0, 0, 0, 0.10);
}

/* ---------- Reset / Basis ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  font-family: 'Palanquin', 'Segoe UI', sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.55;
  color: var(--c-text);
  background: #fff;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

sup { font-size: 0.6em; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Typografie ---------- */
h1, h2, h3, h4 { font-weight: 700; color: var(--c-blue); line-height: 1.25; }

h1 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); margin-bottom: 0.9em; }
h3 { font-size: 1.15rem; }
h4 { font-size: 1.05rem; }

.overline {
  font-weight: 700;
  color: var(--c-blue);
  font-size: 1.1rem;
  margin-bottom: 1.6em;
}

.section-intro { max-width: 1000px; margin-bottom: 2.2em; }

.text-center { text-align: center; }
.text-center.section-intro { margin-left: auto; margin-right: auto; }

/* Pink-Markierung: Inhalte, die noch angepasst werden müssen */
.todo { color: var(--c-todo) !important; }
.todo-block { background: #F9C7F4 !important; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: inherit;
  font-weight: 700;
  font-size: 1.02rem;
  color: #fff;
  text-decoration: none;
  padding: 15px 26px;
  border-radius: var(--radius);
  transition: filter 0.15s ease, transform 0.15s ease;
}
.btn::after {
  content: '';
  width: 13px;
  height: 16px;
  background: url('../assets/icons/arrow_white.svg') no-repeat center / contain;
  flex-shrink: 0;
}
.btn:hover { filter: brightness(1.15); }
.btn:active { transform: translateY(1px); }
.btn--red  { background: var(--c-red); }
.btn--blue { background: var(--c-blue); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--header-h);
  padding-top: 12px;
  padding-bottom: 12px;
}
.header-logo img { width: 220px; height: auto; }

.header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.header-phone {
  font-size: 0.88rem;
  color: var(--c-text);
}
.header-phone a {
  color: inherit;
  text-decoration: underline;
  white-space: nowrap;
}
.main-nav ul {
  display: flex;
  gap: 38px;
  list-style: none;
}
.main-nav a {
  font-weight: 300;
  font-size: 1.02rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-text);
  transition: color 0.15s ease;
}
.main-nav a:hover { color: var(--c-blue); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 46px;
  height: 46px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: var(--c-blue);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* ---------- Hero ---------- */
.hero-img img { width: 100%; }

.hero-content {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  padding-top: 40px;
  padding-bottom: 24px;
}
.hero-col .overline { margin-bottom: 0.9em; }
.hero-col p { margin-bottom: 1.6em; }

/* ---------- Wasser-Rahmen (Konzepte + Serie) ----------
   background.webp (2000x2609) ist eine transparente Overlay-Grafik
   mit drei Zonen. Sie wird in drei Ausschnitten verwendet:

     Zeile   30- 280  obere Wasseroberfläche   -> .water-wave--top
     Zeile  281-1939  Rechenzentrums-Dunst     -> .water-bg (dehnbar)
     Zeile 1940-2280  untere Wasseroberfläche  -> .water-wave--bottom

   Die Ausschnitte stoßen exakt aneinander (30-281 | 281-1940 |
   1940-2281), deshalb sind die Übergänge nahtlos. Zeile 0-29 und
   2281-2608 bleiben ungenutzt: transparenter Vorlauf bzw. reiner
   Weiß-Auslauf auf weißem Grund.

   Die beiden Wellen sind Bänder im normalen Fluss und nehmen
   Layoutplatz ein - sie rahmen den Inhalt ein, statt ihn zu
   überlagern. Die Abstände entstehen aus dem Sektionsraster
   (.section { padding: 72px 0 }); nur über dem oberen Band muss
   nachgeholfen werden, siehe margin-top.

   Alle drei Ausschnitte kommen aus derselben Datei: ein Request,
   kein Neukodieren, kein Qualitätsverlust.

   Rechenweg für die Prozentwerte, Ausschnitt ab Zeile R, Höhe H:
     background-size: 100% auto  ->  position-y = R / (2609 - H)
     gedehnt (Mitte)             ->  size-y     = 2609 / H
                                     position-y = (R / H) / (size-y - 1)
   Das sind reine Verhältnisse, also unabhängig von Viewportbreite
   und Inhaltshöhe - derselbe Ausschnitt bei jeder Größe.          */

/* Mitte: Zeile 281-1939, auf die Inhaltshöhe gedehnt */
.water-bg {
  background: url('../assets/img/background.webp') no-repeat center 29.5789% / 100% 157.2634%;
}

.water-wave {
  background-image: url('../assets/img/background.webp');
  background-repeat: no-repeat;
  background-size: 100% auto;
}
/* Welle oben - Zeile 30-280, Band über der Kreislauf-Headline.
   .hero-content bringt bereits 24px padding-bottom mit, die 48px
   ergeben zusammen die 72px des Sektionsrasters. */
.water-wave--top {
  aspect-ratio: 2000 / 251;
  background-position: center 1.2723%;
  margin-top: 48px;
}
/* Welle unten - Zeile 1940-2280, Band über der Danfoss-Headline.

   Das untere Band beginnt im Bild mit einem langen, praktisch
   unsichtbaren Anlauf: die Wasseroberfläche wird erst 178 Zeilen
   nach der Bandoberkante deutlich sichtbar, beim oberen Band schon
   nach 81. Diese 97 Zeilen Überschuss lassen den Abstand über der
   unteren Welle optisch zu groß wirken, obwohl beide Bänder
   technisch gleich viel Luft haben.

   Ausgeglichen wird über einen negativen Rand, nicht über eine
   gekürzte Sektions-Polsterung: der Totraum ist Teil des Bildes
   und skaliert mit der Breite mit, eine feste Kürzung würde also
   nur bei einer Breite passen.

   Die 4.13% sind am Entwurf kalibriert: bei 3000px Breite ergibt
   das einen Netto-Versatz von -52px, und genau der wurde als
   richtig abgenommen. Das Band rutscht dadurch in die Polsterung
   der Sektion darüber hinein - unkritisch, weil seine obersten
   35 Bildzeilen vollständig transparent sind.

   Der Deckel hält die Überlappung immer innerhalb dieses
   transparenten Vorlaufs: der wächst mit 35/2000 = 1.75% der
   Breite, die Polsterung darüber liefert fix 72px. Ohne ihn würde
   ab etwa 3025px Breite der schwach deckende Teil des Bandes über
   die Buttons wandern.                                            */
.water-wave--bottom {
  aspect-ratio: 2000 / 341;
  background-position: center 85.5379%;
  margin-top: max(calc(-72px - 1.75%), -4.13%);
}

/* ---------- Sektionen ---------- */
.section { padding: 72px 0; }

.section .btn { margin-top: 40px; }

/* ---------- Karten-Grids ---------- */
.card-grid { display: grid; gap: 32px; }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Bildkarten (Cooling-Konzepte) */
.img-card {
  background: #fff;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.img-card img { width: 100%; aspect-ratio: 800 / 517; object-fit: cover; }
.img-card-body { padding: 26px 26px 30px; }
.img-card-body h3 { color: #1d1d1b; font-size: 1.08rem; margin-bottom: 0.7em; }

/* Textkarten (Vom Einzelteil bis zur Serie) */
.series-col { display: flex; flex-direction: column; align-items: flex-start; }
.series-col .btn { margin-top: 34px; }
.text-card {
  background: #fff;
  box-shadow: var(--shadow);
  padding: 34px 36px 38px;
  width: 100%;
  flex: 1;
}
.text-card h3 { font-size: 1.35rem; margin-bottom: 0.9em; }
.text-card p { margin-bottom: 1.2em; }

/* Pfeil-Listen */
.arrow-list { list-style: none; }
.arrow-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 0.55em;
}
.arrow-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.42em;
  width: 11px;
  height: 13px;
  background: url('../assets/icons/arrow_blue.svg') no-repeat center / contain;
}

/* ---------- Portfolio Schläuche ---------- */
.portfolio-images { margin-bottom: 40px; }
.portfolio-images img { width: 100%; box-shadow: var(--shadow); }

.hose-card {
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
}
.hose-card-img {
  background: var(--c-gray-bg);
  display: flex;
  align-items: center;
  min-height: 210px;
  overflow: hidden;
}
.hose-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hose-card-body {
  background: var(--c-blue);
  color: #fff;
  padding: 28px 30px 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hose-card-body h3 { color: #fff; margin-bottom: 0.9em; }
.hose-card-body p { margin-bottom: 1.4em; }
.hose-card-link {
  margin-top: auto;
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hose-card-link:hover { color: var(--c-lightblue); }

/* ---------- Akkordeons ---------- */
.accordion details {
  border-top: 1px solid var(--c-blue);
}
.accordion details:last-child { border-bottom: 1px solid var(--c-blue); }
.accordion details:nth-child(odd)  { background: var(--c-gray-bg); }
.accordion details:nth-child(even) { background: #fff; }

.accordion summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 28px;
  font-weight: 700;
  font-size: 1.05rem;
  color: #1d1d1b;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover { color: var(--c-blue); }

.acc-icon {
  flex-shrink: 0;
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 12px solid var(--c-blue);
  transition: transform 0.25s ease;
}
.accordion details[open] > summary .acc-icon { transform: rotate(180deg); }

.acc-content { padding: 6px 28px 34px; }
.acc-content p { margin-bottom: 1em; }
.acc-content p:last-child { margin-bottom: 0; }
.acc-content .arrow-list { margin-bottom: 1em; }

/* Technische Details: erstes Panel */
.detail-grid {
  display: grid;
  grid-template-columns: 240px repeat(3, 1fr);
  gap: 32px;
  align-items: start;
}
.detail-grid h4 { color: #1d1d1b; margin-bottom: 0.6em; }

/* ---------- Armaturentechnik ---------- */
.fitting-grid { row-gap: 48px; }
.fitting-card h3 { color: #1d1d1b; font-size: 1.02rem; margin-bottom: 0.6em; }
.fitting-card p { font-size: 0.98rem; }
.fitting-img {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 170px;
  margin-bottom: 22px;
  overflow: hidden;
}
.fitting-img img { width: 100%; height: 100%; object-fit: cover; }
.fitting-img--placeholder { width: 100%; }

/* ---------- Grauer Block ---------- */
.gray-block { background: var(--c-gray-bg); }

/* ---------- Vorteils-Slider ---------- */
.slider-wrap { position: relative; }
.slider {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 4 * 28px) / 5);
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 8px 2px 24px;
}
.slider::-webkit-scrollbar { display: none; }

.benefit-card {
  scroll-snap-align: start;
  background: #fff;
  box-shadow: var(--shadow);
  padding: 34px 22px 30px;
  text-align: center;
}
.benefit-card img { margin: 0 auto 22px; width: 72px; height: 72px; }
.benefit-card h3 { color: #1d1d1b; font-size: 1.02rem; margin-bottom: 0.6em; }
.benefit-card p { font-size: 0.95rem; }

.slider-nav {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  margin-top: 4px;
}
.slider-btn {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
  opacity: 0.9;
  transition: opacity 0.15s ease;
}
.slider-btn:hover { opacity: 1; }
.slider-btn[disabled] { opacity: 0.3; cursor: default; }
.slider-btn--prev img { transform: rotate(180deg); }

/* ---------- Qualität / Zertifikate ---------- */
.quality-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 72px;
  align-items: start;
}

.partnership-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 56px;
  align-items: center;
}
.partnership-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
}
.partnership-text .overline { margin-bottom: 0.9em; }
.quality-text p { margin-bottom: 1.2em; }
.quality-text .btn { margin-top: 24px; }

.cert-list { list-style: none; display: flex; flex-direction: column; gap: 30px; }
.cert-list li { display: flex; gap: 20px; align-items: flex-start; }
.cert-list img { flex-shrink: 0; width: 44px; height: 44px; }
.cert-list h3 { color: #1d1d1b; font-size: 1.02rem; }
.cert-list p { font-size: 0.98rem; }

/* ---------- Team / Kontakt ---------- */
.team-grid { margin-bottom: 64px; }
.team-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  margin-bottom: 20px;
}
.team-card h3 { font-size: 1.3rem; margin-bottom: 0.5em; }
.team-card a { color: inherit; text-decoration: none; }
.team-card a:hover { color: var(--c-blue); text-decoration: underline; }

.offer-headline { font-size: 1.35rem; margin-bottom: 1.4em; }

.offer-steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 28px;
  align-items: start;
}
.offer-step h4 { color: #1d1d1b; margin-bottom: 0.4em; }
.offer-arrow { align-self: center; }
.offer-arrow img { width: 44px; height: 44px; }

/* ---------- FAQ ---------- */
.section--faq { padding-bottom: 40px; }
.accordion--faq { max-width: var(--container); }

/* ---------- Footer ---------- */
.footer-curve svg { width: 100%; height: clamp(40px, 8vw, 110px); display: block; }

.site-footer {
  color: #fff;
  font-size: 0.95rem;
}
.footer-main { background: var(--c-footer); padding: 48px 0 56px; }

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.footer-col p { margin-bottom: 1.4em; }
.footer-col a { text-decoration: none; }
.footer-col a:hover { text-decoration: underline; }

.footer-logo { width: 240px; margin-bottom: 28px; }
.footer-logo--top { display: block; margin-bottom: 40px; }
.footer-brand { width: 172px; margin-bottom: 22px; }
.footer-brand--sbit { width: 185px; margin-top: 10px; }

.footer-link { color: #C8D400; }  /* Grün-Gelb der Footer-Links laut Entwurf */
.footer-link--arrow::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 10px;
  margin-left: 7px;
  background: url('../assets/icons/arrow_white.svg') no-repeat center / contain;
  filter: brightness(0) saturate(100%) invert(76%) sepia(61%) saturate(1000%) hue-rotate(20deg);
}

.social-list {
  list-style: none;
  display: flex;
  gap: 14px;
  margin-top: 6px;
}
.social-list a { display: block; width: 40px; height: 40px; transition: transform 0.15s ease; }
.social-list a:hover { transform: scale(1.08); }
.social-list svg { width: 100%; height: 100%; }

.footer-quicklinks { list-style: none; margin-top: 10px; }
.footer-quicklinks li { margin-bottom: 16px; }
.footer-quicklinks a { display: flex; align-items: center; gap: 12px; }
.ql-icon { display: block; width: 34px; height: 34px; flex-shrink: 0; }
.ql-icon svg { width: 100%; height: 100%; }

.footer-bottom { background: var(--c-footer-dk); padding: 22px 0; }
.footer-bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 32px;
}
.footer-legal {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}
.footer-legal li { display: flex; align-items: center; }
.footer-legal li:not(:last-child)::after {
  content: '|';
  margin: 0 12px;
  opacity: 0.6;
}
.footer-legal a { text-decoration: none; }
.footer-legal a:hover { text-decoration: underline; }
.footer-copyright { opacity: 0.85; }
.footer-group {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0.7;
}
.footer-group img { width: 44px; height: 44px; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1100px) {
  .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .slider { grid-auto-columns: calc((100% - 2 * 28px) / 3); }
  .detail-grid { grid-template-columns: 200px repeat(2, 1fr); }
  .detail-grid > img { grid-row: span 2; }
}

@media (max-width: 900px) {
  :root { --header-h: 84px; }

  /* Mobile Navigation */
  .nav-toggle { display: flex; }
  .header-logo img { width: 180px; }
  .header-right { gap: 0; }
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.12);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .main-nav ul {
    flex-direction: column;
    gap: 0;
    padding: 12px 24px 20px;
  }
  .main-nav li { border-bottom: 1px solid var(--c-gray-bg); }
  .main-nav li:last-child { border-bottom: 0; }
  .main-nav a {
    display: block;
    padding: 15px 4px;
    font-size: 1.1rem;
  }
  body.nav-open .main-nav { max-height: 400px; }
  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

  .section { padding: 56px 0; }

  .hero-content { grid-template-columns: 1fr; gap: 24px; }
  .hero-img img { min-height: 180px; object-fit: cover; object-position: center bottom; }

  .card-grid--2, .card-grid--3 { grid-template-columns: 1fr; }
  .series-col .btn { margin-top: 24px; margin-bottom: 8px; }

  .quality-grid { grid-template-columns: 1fr; gap: 48px; }

  .partnership-grid { grid-template-columns: 1fr; gap: 32px; }
  .partnership-img { order: 2; }
  .partnership-text { order: 1; }

  .slider { grid-auto-columns: calc((100% - 28px) / 2); }

  .detail-grid { grid-template-columns: 1fr; gap: 24px; }
  .detail-grid > img { grid-row: auto; margin: 0 auto; }

  .offer-steps { grid-template-columns: 1fr; gap: 20px; }
  .offer-arrow { justify-self: center; }
  .offer-arrow img { transform: rotate(90deg); }

  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-group { margin-left: 0; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }

  .header-phone { display: none; }
  .header-logo img { width: 160px; }

  .card-grid--4 { grid-template-columns: 1fr; }
  .fitting-img { height: auto; min-height: 120px; }

  .slider { grid-auto-columns: 86%; }

  .team-grid { grid-template-columns: 1fr; }
  .team-card { text-align: center; }
  .team-card img { max-width: 320px; margin-left: auto; margin-right: auto; }

  .accordion summary { padding: 18px 18px; font-size: 1rem; }
  .acc-content { padding: 4px 18px 26px; }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom-inner { flex-direction: column; align-items: flex-start; }
  .footer-legal { flex-direction: column; gap: 8px; }
  .footer-legal li:not(:last-child)::after { display: none; }
}