@charset "UTF-8";

/* =========================
   Variablen
   ========================= */
:root{
  --cta-h: 42px;
  --pad-x: 16px;
  --pad-y: 16px;
  --rule-color: #cfcfcf;
  --bg-col: rgb(240,240,240);
  --bg-col-strong: rgb(220,220,220);     /* Spalten 2/3 + Header/Content darin */
  --head-strip: 52px;
  --header-h: 72px;                      /* an tatsächliche Headerhöhe anpassen */
}

:root{ --header-h: 96px; } /* an dein Logo anpassen */
header img{ height: var(--header-h); width: auto; display:block; }


.hp{ display:none !important; }


/* =========================
   Header fix oben + Inhalt darunter
   ========================= */
html, body{ margin:0; }
header, .site-header, .Header, #header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  width: 100%;
  background: #fff;
}
main{ padding-top: var(--header-h); }

/* =========================
   Kontakt-Grid
   ≥1400px: 350 | 350 | 20 | 350 | 350
   700–1399px: 1fr | 350 | 20 | 350 | 1fr
   <700px: 1fr (Stack, mittig)
   ========================= */
.KontaktGrid{
  display: grid;
  grid-template-columns: 350px 350px 20px 350px 350px; /* 1 | 2 | G | 3 | 4 */
  justify-content: center;
  gap: 0;                 /* Gutter ist eigener Track */
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  z-index: 1;             /* nie über dem Header */
}

/* Spalten-Positionen */
.col-1{ grid-column:1; }
.col-2{ grid-column:2; }  /* Formular */
.col-3{ grid-column:4; }  /* Kontaktdaten */
.col-4{ grid-column:5; }

/* Social-Liste: keine Bullets, keine Einrückung */
.Social .social-list{
  list-style: none;
  margin: 0;              /* entfernt Standardabstand oberhalb der UL */
  padding: 0;             /* entfernt linke Einrückung */
}

/* Zusätzliche Absicherung pro <li> */
.Social .social-list li{
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Link/Icon: keine zusätzliche Einrückung, bündig links */
.Social .social-list li .linkedin-symbol{
  display: inline-flex;   /* wie zuvor: zentriert Icon innerhalb der Pille */
  margin: 0;              /* keine seitlichen Abstände */
}

/* 700–1399px: Außen flexibel, Mitte + Gutter fix */
@media (max-width:1399.98px) and (min-width:700px){
  .KontaktGrid{
    grid-template-columns: 1fr 350px 20px 350px 1fr;
  }
}

/* <700px: Stack + mittig */
@media (max-width:699.98px){
  .KontaktGrid{
    grid-template-columns: 1fr;
    justify-items: center;   /* horizontale Zentrierung der Items */
    align-items: start;
    row-gap: 20px;      /* ← hier Abstand einstellen */
    column-gap: 0;
  }
  .col-1, .col-4{ display:none; }
  .col-2, .col-3{
    grid-column: 1;          /* explizit auf die einzige Spalte */
    width: min(90%, 350px);
    margin: 0 0 16px;
  }
}

/* =========================
   Box-Styles
   ========================= */
/* Inhaltsspalten 2/3 – Rahmen + Fläche (dunkler) */
.KontaktGrid .col-2,
.KontaktGrid .col-3{
  border: 1px solid var(--rule-color);
  background: var(--bg-col-strong);   /* Grundfläche der Box */
  border-radius: 6px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* Spacer (1/4) neutral */
.KontaktGrid .col-1,
.KontaktGrid .col-4{
  border: none;
  background: transparent;
}

/* Überschriften-Zeile in 2/3 */
.Ueberschrift, .Überschrift{
  display: flex;
  align-items: flex-end;              /* H2 unten anschlagen */
  height: var(--head-strip);          /* gleiche Höhe L/R */
  padding: 0 var(--pad-x);
  border-bottom: 1px solid #dcdcdc;
  box-sizing: border-box;
  background: var(--bg-col-strong);   /* gleiche Farbe wie Box */
}
.Ueberschrift h2, .Überschrift h2{
  margin: 0;
  line-height: 2;
}

/* Inhaltsbereich 2/3 */
.Inhalt{
  padding: 16px var(--pad-x) var(--pad-y);
  box-sizing: border-box;
  background: var(--bg-col-strong);   /* sichert Farbe auch im Stack */
}

/* =========================
   Formular
   ========================= */
.KontaktForm{
  display: grid;
  gap: 12px;
}
.KontaktForm .field{ display:flex; flex-direction:column; gap:6px; margin:0; }
.KontaktForm .label{ font-weight:600; margin:0; }
.KontaktForm input[type="text"],
.KontaktForm input[type="email"],
.KontaktForm textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid #c9c9c9;
  border-radius:6px;
  background:#fff;
  font:inherit;
  line-height:1.4;
  box-sizing:border-box;
}
.KontaktForm textarea{ resize:vertical; min-height:140px; }
.KontaktForm .checkbox{
  display:grid; grid-template-columns:20px 1fr; gap:10px; align-items:flex-start;
}
.KontaktForm .hint{ font-size:.9em; color:#666; margin:0; }

/* =========================
   CTA & LinkedIn (fluchtend)
   ========================= */
.btn-pill{
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--cta-h); padding:0 16px;
  background:rgb(0,38,77); color:rgb(250,250,250);
  font-weight:600; font-size:1em;
  border-radius:9999px; border:none; cursor:pointer; white-space:nowrap;
}
.btn-pill:hover{ filter:brightness(1.08); }

.linkedin-symbol, .linkedin-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--cta-h);
  height: var(--cta-h);
  border-radius: 9999px;
  border: 1px solid var(--rule-color);
  background: #fff;
  text-decoration: none;
}
/* PNG inside: sauber skalieren, ohne Verzerrung */
.linkedin-symbol img{
  max-width: 60%;
  max-height: 60%;
  width: auto;
  height: auto;
  display: block;
}

/* =========================
   Statusmeldungen
   ========================= */
.form-status{ display:none; margin-top:8px; padding:10px 12px; border-radius:6px; }
.form-error{ background:#ffe9ea; border:1px solid #f1b9bf; color:#7d0b1c; }
.form-success{ background:#e9f7ee; border:1px solid #b7e3c8; color:#0b5b2e; }

/* =========================
   <350px: proportional skalieren
   ========================= */
@media (max-width:349.98px){
  .KontaktGrid .col-2, .KontaktGrid .col-3{
    width:350px;                           /* Referenzbreite */
    transform:scale(calc(100vw / 350px));
    transform-origin: top center;
  }
}

/* === Patch: gleiche Höhe für Spalten 2/3 (>=700px) === */
.KontaktGrid{
  align-items: stretch;          /* Grid-Items füllen die Zeilenhöhe */
}
.KontaktGrid .col-2,
.KontaktGrid .col-3{
  align-self: stretch;           /* Sicherheit */
  height: 100%;                  /* Box füllt ihren Grid-Bereich */
}



/* Mobile-Stack bleibt wie gehabt: zentriert + Abstand unten */
@media (max-width:699.98px){
  .KontaktGrid{
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: start;
  }
  .col-1, .col-4{ display:none; }
  .col-2, .col-3{
    grid-column: 1;
    width: min(90%, 350px);
    margin: 0 0 16px;           /* vertikaler Abstand nur hier */
  }
}