:root {
  --ht-ink: #06274A;
  --ht-ink-2: #0C3060;
  --ht-paper: #F2F4F7;
  --ht-signal: #00A8E4;
  --ht-slate: #0C4884;
  --ht-line: #DCE3EA;
  --ht-line-dark: #14396B;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ht-ink); background: var(--ht-paper);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-weight: 700; letter-spacing: -0.3px; margin: 0; }

.ht-kopf { position: sticky; top: 0; z-index: 10; background: var(--ht-ink); }
.ht-kopf-inner { max-width: 960px; margin: 0 auto; padding: 18px 24px; display: flex; justify-content: space-between; align-items: center; }
.ht-logo { height: 96px; width: auto; display: block; }
.ht-nav { display: flex; gap: 22px; align-items: center; }
.ht-nav a { color: #C7CBD4; text-decoration: none; font-size: 14.5px; }
.ht-nav a.ht-nav-cta { color: var(--ht-signal); font-weight: 600; }

.ht-hero { position: relative; background: var(--ht-ink); color: #fff; padding: 90px 24px 100px; overflow: hidden; }
.ht-netz { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.8; }
.ht-hero-inhalt { position: relative; max-width: 640px; margin: 0 auto; text-align: left; }
.ht-hero-inhalt h1 { font-size: 44px; line-height: 1.1; margin-bottom: 14px; }
.ht-hero-sub { font-size: 18px; color: var(--ht-signal); margin: 0 0 16px 0; font-weight: 500; }
.ht-hero-text { font-size: 16px; line-height: 1.6; color: #CFD3DB; max-width: 520px; margin: 0 0 30px 0; }

.ht-btn { display: inline-block; padding: 13px 26px; border-radius: 3px; font-size: 15px; font-weight: 600; text-decoration: none; border: none; cursor: pointer; }
.ht-btn-primary { background: var(--ht-signal); color: #06274A; }
.ht-btn-sekundaer { background: transparent; color: var(--ht-ink); border: 1.5px solid var(--ht-line); }
.ht-btn-hell { background: #fff; color: var(--ht-ink); }

.ht-abschnitt { max-width: 780px; margin: 0 auto; padding: 70px 24px; }
.ht-abschnitt h2 { font-size: 28px; margin-bottom: 28px; }
.ht-abschnitt-dunkel { max-width: none; background: var(--ht-ink); color: #fff; }
.ht-abschnitt-dunkel .ht-inner, .ht-abschnitt-dunkel > h2, .ht-abschnitt-dunkel > p { max-width: 780px; margin-left: auto; margin-right: auto; }
.ht-abschnitt-dunkel h2 { color: #fff; }

.ht-loesungen-liste { border-top: 1px solid var(--ht-line); }
.ht-loesung-zeile { display: flex; justify-content: space-between; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--ht-line); }
.ht-loesung-titel { font-weight: 600; font-size: 15.5px; flex: 0 0 240px; }
.ht-loesung-text { color: #565B66; font-size: 14.5px; flex: 1; }

.ht-projekt-label { color: var(--ht-signal); font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.ht-projekt-tagline { font-size: 17px; color: var(--ht-signal); margin: 8px 0 16px 0; font-weight: 500; }
.ht-projekt-text { color: #CFD3DB; line-height: 1.6; margin: 0 0 16px 0; }
.ht-projekt-vorteile { list-style: none; margin: 0 0 26px 0; padding: 0; }
.ht-projekt-vorteile li { padding-left: 24px; position: relative; margin-bottom: 8px; color: #E5E7EB; font-size: 14.5px; }
.ht-projekt-vorteile li::before { content: "✓"; position: absolute; left: 0; color: var(--ht-signal); font-weight: 700; }

.ht-warum-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.ht-warum-zeile h3 { font-size: 17px; margin-bottom: 6px; color: var(--ht-slate); }
.ht-warum-zeile p { margin: 0; color: #565B66; font-size: 14.5px; line-height: 1.5; }

.ht-kontakt-intro { color: #CFD3DB; margin: 0 0 30px 0; }
.ht-formular { display: flex; flex-direction: column; gap: 16px; max-width: 780px; margin: 0 auto; }
.ht-feld-reihe { display: flex; gap: 16px; flex-wrap: wrap; }
.ht-feld { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; flex: 1; min-width: 220px; color: #CFD3DB; }
.ht-feld input, .ht-feld select, .ht-feld textarea {
  padding: 11px 12px; border-radius: 3px; border: 1.5px solid var(--ht-line); font-size: 14.5px;
  font-family: inherit; background: #fff; color: var(--ht-ink);
}

.ht-fuss { max-width: 960px; margin: 0 auto; padding: 30px 24px 50px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13px; color: #6B7280; }
.ht-fuss a { color: #6B7280; }
.ht-fuss-links { display: flex; gap: 16px; }

.ht-rechts-seite { max-width: 640px; margin: 0 auto; padding: 50px 24px; line-height: 1.6; }
.ht-zurueck { display: inline-block; color: var(--ht-slate); text-decoration: none; font-size: 14px; margin-bottom: 20px; }

.ht-status-seite { min-height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; }
.ht-status-karte { max-width: 480px; }
.ht-status-karte h1 { font-size: 26px; margin-bottom: 14px; }
.ht-status-karte p { color: #4B5563; line-height: 1.6; }

@media (max-width: 640px) {
  .ht-kopf-inner { flex-wrap: wrap; row-gap: 10px; }
  .ht-nav { gap: 14px; font-size: 13.5px; }
  .ht-hero { padding: 60px 20px 70px; }
  .ht-hero-inhalt h1 { font-size: 32px; }
  .ht-warum-liste { grid-template-columns: 1fr; }
  .ht-loesung-titel { flex-basis: 100%; }
  .ht-loesung-zeile { flex-direction: column; gap: 4px; }
}