/* Kessler Polymer – Gestaltung aller Seiten (Werte laut Design-Handoff) */

/* Grundlagen */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #f6f7f8;
  color: #14202b;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: #045081; text-decoration: none; }
a:hover { color: #0a6aa8; text-decoration: underline; }
input, textarea, select, button { font-family: inherit; }
h1, h2 { margin: 0; font-weight: 400; }
p { margin: 0; }
[hidden] { display: none !important; }

.seite { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
section[id] { scroll-margin-top: 72px; }

.eyebrow { font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: #045081; }
.h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1.12; }

/* Header */
.kopf {
  background: #045081;
  position: sticky; top: 0; z-index: 10;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.kopf-innen {
  max-width: 1200px; margin: 0 auto;
  padding: 14px clamp(16px, 4vw, 32px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: nowrap;
}
.kopf-logo { display: block; line-height: 0; }
.kopf-logo img { height: 44px; width: auto; display: block; }
.nav { display: flex; gap: clamp(12px, 2.5vw, 28px); flex-wrap: nowrap; align-items: center; white-space: nowrap; }
.nav a { color: #fff; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.nav a.nav-knopf { color: #045081; background: #fff; padding: 10px 16px; }
/* Handy: Kopfzeile passt sonst nicht in die Breite – nur Logo + Kontakt-Knopf */
@media (max-width: 560px) {
  .kopf-logo img { height: 36px; }
  .nav a:not(.nav-knopf) { display: none; }
}

/* Hero */
.hero { background: #045081; color: #fff; }
.hero-innen {
  max-width: 880px; margin: 0 auto;
  padding: 112px 32px 120px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 40px;
}
.hero h1 { font-size: clamp(40px, 6vw, 72px); line-height: 1.08; letter-spacing: -.01em; }
.hero-linie { width: 64px; height: 2px; background: #fff; }
.hero-block { display: flex; flex-direction: column; align-items: center; gap: 36px; max-width: 640px; }
.hero-block p { font-size: 19px; line-height: 1.6; text-wrap: pretty; color: #e3edf5; }
.hero-knoepfe { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.knopf-hell, .knopf-rand {
  padding: 15px 26px; font-size: 15px; letter-spacing: .06em;
  text-transform: uppercase; text-decoration: none;
}
.knopf-hell { background: #fff; color: #045081; }
.knopf-rand { border: 1px solid rgba(255, 255, 255, .6); color: #fff; }
.knopf-hell:hover, .knopf-rand:hover { text-decoration: none; }
.knopf-rand:hover { color: #fff; }

/* Sortiment */
.sortiment {
  max-width: 1200px; margin: 0 auto;
  padding: 104px 32px 96px;
  display: flex; flex-direction: column; gap: 48px;
}
.sortiment-kopf { display: flex; flex-direction: column; gap: 16px; }
.sortiment-kopf .h2 { line-height: 1.1; }
.sortiment-kopf p { font-size: 16px; line-height: 1.6; color: #4a5866; text-wrap: pretty; }
.raster { display: flex; flex-wrap: wrap; gap: 1px; background: #d4dce3; border: 1px solid #d4dce3; }
.paar { flex: 1 1 400px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; }
.karte { background: #fff; padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.karte-kuerzel { font-size: 32px; color: #045081; letter-spacing: .02em; }
.karte-name { font-size: 16px; font-weight: 600; }
.karte-text { font-size: 14px; line-height: 1.55; color: #4a5866; }
.raster-zeile {
  flex: 1 1 100%; background: #fff; color: #1a2632;
  padding: 32px 28px;
  display: flex; flex-wrap: wrap; gap: 24px 48px;
  align-items: center; justify-content: space-between;
}
.raster-zeile-text { flex: 1 1 380px; display: flex; flex-direction: column; gap: 8px; }
.raster-zeile-titel { font-size: 32px; line-height: 1.2; letter-spacing: .02em; color: #045081; }
.raster-zeile-text p { font-size: 15px; line-height: 1.6; color: #4a5866; text-wrap: pretty; }

/* Über uns */
.ueber { background: #eef3f7; }
.ueber-innen {
  max-width: 1200px; margin: 0 auto;
  padding: 64px 32px;
  display: flex; flex-direction: column; gap: 40px;
}
.ueber-kopf { display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; }
.ueber-box {
  background: #fff; border: 1px solid #d4dce3;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}
.zeitleiste { padding: 16px 40px; display: flex; flex-direction: column; justify-content: center; }
.zeitleiste-zeile {
  display: grid; grid-template-columns: 96px 1fr; gap: 16px;
  align-items: baseline; padding: 24px 0; border-top: 1px solid #d4dce3;
}
.zeitleiste-jahr { font-size: 32px; color: #045081; letter-spacing: .02em; }
.zeitleiste-text { font-size: 16px; line-height: 1.5; }
.ueber-rechts { padding: 40px; border-left: 1px solid #d4dce3; display: flex; flex-direction: column; gap: 28px; }
.ueber-rechts p { font-size: 17px; line-height: 1.65; color: #3a4856; text-wrap: pretty; }
.person { display: flex; align-items: center; gap: 16px; }
.person img { width: 72px; height: 72px; flex: none; border-radius: 50%; object-fit: cover; object-position: center 20%; }
.person-text { display: flex; flex-direction: column; gap: 2px; }
.person-name { font-size: 18px; }
.person-rolle { font-size: 14px; color: #5b6876; }
/* Spalten untereinander (mobil): Trennlinie oben statt links */
@media (max-width: 840px) {
  .ueber-rechts { border-left: 0; border-top: 1px solid #d4dce3; }
}

/* Kontakt */
.kontakt {
  max-width: 1200px; margin: 0 auto;
  padding: 104px 32px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 64px;
}
.kontakt-links { display: flex; flex-direction: column; gap: 24px; }
.kontakt-links p { font-size: 17px; line-height: 1.65; color: #3a4856; }
.kontakt-daten { display: flex; flex-direction: column; gap: 14px; font-size: 16px; padding-top: 8px; }
.kontakt-daten div { display: grid; grid-template-columns: 80px 1fr; gap: 12px; }
.kontakt-daten .label { color: #5b6876; }

/* Formular */
.formular-box { background: #fff; border: 1px solid #d4dce3; padding: 36px; }
.formular { display: flex; flex-direction: column; gap: 18px; }
.formular-zeile { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; }
.feld { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #3a4856; }
.feld input, .feld textarea {
  border: 1px solid #c3ced8; padding: 12px; font-size: 16px;
  background: #fbfcfd; outline-color: #045081; border-radius: 0;
}
.feld textarea { resize: vertical; }
.zustimmung { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: #4a5866; }
.zustimmung input { margin-top: 3px; accent-color: #045081; }
.versteckt { display: none; }
.senden {
  align-self: flex-start; background: #045081; color: #fff; border: 0;
  padding: 16px 30px; font-size: 15px; letter-spacing: .06em;
  text-transform: uppercase; cursor: pointer;
}
.senden:hover { background: #03406a; }
.senden:disabled { opacity: .6; cursor: default; }
.formular-fehler { font-size: 14px; line-height: 1.5; color: #a12a2a; }
.erfolg { display: flex; flex-direction: column; gap: 16px; min-height: 320px; justify-content: center; }
.erfolg-punkt { width: 12px; height: 12px; border-radius: 50%; background: #045081; }
.erfolg-titel { font-size: 26px; }
.erfolg p { font-size: 16px; line-height: 1.6; color: #3a4856; }
.text-knopf {
  align-self: flex-start; background: none; border: 0; padding: 0;
  color: #045081; font-size: 15px; cursor: pointer; text-decoration: underline;
}

/* Rechtstexte (Impressum, Datenschutz) */
.rechtstext {
  max-width: 760px; margin: 0 auto;
  padding: 88px 32px 104px;
  display: flex; flex-direction: column; gap: 28px;
  font-size: 16px; line-height: 1.65; color: #2a3744;
}
.rechtstext .zurueck { font-size: 14px; }
.rechtstext h1 { font-size: 44px; color: #14202b; }
.rechtstext h2 { margin: 0 0 8px; font-size: 18px; font-weight: 600; color: #14202b; }

/* Footer */
.fuss { background: #045081; color: #fff; }
.fuss-innen {
  max-width: 1200px; margin: 0 auto;
  padding: 40px 32px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; flex-wrap: wrap; font-size: 14px;
}
.fuss-innen img { height: 34px; width: auto; display: block; }
.fuss-links { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; }
.fuss-links a { color: #fff; }
.fuss-links span { color: #cfdde9; }