/* Figtree lokal, variabler Schnitt 400–700. Keine Anfrage an Google, damit
   keine IP-Adresse der Besucher übertragen wird.
   SIL Open Font License 1.1. Die beiden Subsets werden über unicode-range
   getrennt, der Browser lädt nur, was die Seite tatsächlich braucht. */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   COMMANDEUR CONSULTING – Design System
   ============================================================ */

/* 1. Variables
   ============================================================ */
:root {
  /* Colors */
  --bg-base:       #050a15;
  --bg-surface:    #091121;
  --bg-elevated:   #0d1728;
  --border:        rgba(209, 238, 235, 0.16);
  --border-hover:  rgba(209, 238, 235, 0.34);
  --accent:        #7fb7d8;
  --accent-mid:    #d1eeeb;
  --text-primary:  #f4f6fb;
  --text-secondary:rgba(255, 255, 255, 0.8);
  --text-muted:    rgba(209, 238, 235, 0.64);

  /* Typography */
  --font: "Figtree", "Figtree Fallback", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Spacing */
  --sp-xs:   0.5rem;
  --sp-sm:   1rem;
  --sp-md:   1.75rem;
  --sp-lg:   3rem;
  --sp-xl:   5rem;
  --sp-2xl:  8rem;

  /* Layout */
  --container: 1160px;
  --header-h:  68px;

  /* Radius – das Original kennt einen Kartenradius um 5–6px.
     Buttons sind Pillen (9999px), Icon-Kacheln 25%. */
  --r-md:   6px;
  --r-lg:   6px;

  /* Transitions */
  --tr: 180ms ease;
}

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

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

/* Weiches Scrollen nur, wenn keine reduzierte Bewegung gewuenscht ist. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  background: var(--bg-base);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

body.home-page {
  background:
    radial-gradient(circle at top right, rgba(39, 52, 80, 0.32), transparent 34%),
    linear-gradient(180deg, #06101f 0%, #07101d 38%, #050915 100%);
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* Sichtbarer Tastaturfokus. :focus-visible greift nur bei Tastaturbedienung –
   wer klickt, sieht weiterhin keinen Ring. */
:focus-visible {
  outline: 2px solid var(--accent-mid);
  outline-offset: 3px;
}

/* Formularfelder setzen in ihrer Grundregel outline: none. Hier wieder an,
   mit kleinerem Abstand, damit der Ring am Feldrand anliegt. */
.form__input:focus-visible,
.form__select:focus-visible,
.form__textarea:focus-visible,
.form__checkbox:focus-visible {
  outline: 2px solid var(--accent-mid);
  outline-offset: 2px;
}

/* 3. Typography
   ============================================================ */
h1, h2, h3, h4 {
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  overflow-wrap: break-word;
}

h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); }
h4 { font-size: 1rem; font-weight: 600; }

p {
  color: var(--text-secondary);
  max-width: 68ch;
}

/* Eyebrow. Das Original nutzt 16px (Startseite) bzw. 18px (Unterseiten) ohne
   Sperrung – das wirkt neben der H1 zu schwer. Hier eine Größe für alle Seiten,
   moderat gesperrt; der Unterschied zwischen Start- und Unterseiten läuft
   allein über die Farbe (weiß bzw. mint). */
.kicker {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-mid);
  margin-bottom: var(--sp-sm);
}

.lead {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* 4. Layout
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-md);
}

.section {
  padding-block: var(--sp-xl);
}

.section--lg {
  padding-block: var(--sp-2xl);
}

/* 5. Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.4rem;
  padding: 0.6rem 2rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  transition: background var(--tr), border-color var(--tr), color var(--tr), opacity var(--tr), transform var(--tr), box-shadow var(--tr);
  white-space: nowrap;
}

.btn--primary {
  background: #1e4fa3;
  color: #e8f0ff;
  border: 1px solid transparent;
  min-width: 260px;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.btn--primary:hover {
  background: #2d5fb8;
  transform: translateY(-1px);
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.22);
}

.btn--outline {
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-primary);
  border: 1px solid var(--border-hover);
}

.btn--outline:hover {
  border-color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

/* 6. Header & Navigation
   ============================================================ */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(7, 9, 26, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.header__logo {
  display: inline-flex;
  align-items: center;
  color: var(--text-primary);
  flex-shrink: 0;
}

.header__logo-image {
  display: block;
  width: clamp(168px, 22vw, 230px);
  height: auto;
}

.nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

.nav__link {
  font-size: 0.94rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.84);
  letter-spacing: 0.01em;
  transition: color var(--tr);
}

.nav__link:hover,
.nav__link.active {
  color: var(--text-primary);
}

.nav__cta {
  display: inline-flex;
  min-height: 2.5rem;
  padding: 0.58rem 0.92rem;
  margin-left: 0.35rem;
  border-color: var(--border-hover);
  background: transparent;
  color: var(--text-primary);
  font-size: 0.8rem;
  font-weight: 500;
}

.nav__cta:hover {
  border-color: var(--text-primary);
  background: rgba(0, 0, 0, 0.04);
}

/* Nav contact icons */
.nav__contacts {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: 1.25rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--border);
}

.nav__contact-link {
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.68);
  transition: color var(--tr);
}

.nav__contact-link:hover {
  color: var(--text-primary);
}

.nav__contact-link svg {
  display: block;
}

/* 7. Burger Menu
   ============================================================ */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  padding: 0;
  z-index: 110;
}

.burger__bar {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--text-primary);
  transition: transform var(--tr), opacity var(--tr);
  transform-origin: center;
}

.burger.is-open .burger__bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.burger.is-open .burger__bar:nth-child(2) {
  opacity: 0;
}
.burger.is-open .burger__bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Mobile overlay nav */
.mobile-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 105;
  background: var(--bg-base);
  min-height: 540px;
  height: min(680px, 66vh);
  padding: 88px 1.5rem 2rem;
  gap: 1.75rem;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
  overflow: hidden;
  /* Slide-down animation */
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.4s;
}

.mobile-nav.is-open {
  transform: translateY(0);
  visibility: visible;
}

.mobile-nav__close {
  position: absolute;
  top: 24px;
  right: clamp(24px, 7vw, 40px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 0;
  background: transparent;
  color: var(--text-primary);
}

.mobile-nav__close-bar {
  position: absolute;
  width: 30px;
  height: 2px;
  background: currentColor;
  transform-origin: center;
}

.mobile-nav__close-bar:first-child {
  transform: rotate(45deg);
}

.mobile-nav__close-bar:last-child {
  transform: rotate(-45deg);
}

.mobile-nav__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: min(261px, 100%);
}

.mobile-nav__list li {
  width: 100%;
}

.mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 53px;
  width: 100%;
  font-size: 1.25rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  transition: color 0.2s ease;
}

.mobile-nav__link:hover,
.mobile-nav__link:focus,
.mobile-nav__link.active {
  color: var(--accent-mid);
}

.mobile-nav__contact-icons {
  display: flex;
  gap: 1rem;
  margin-top: 0.35rem;
  padding-top: 0;
  border-top: 0;
}

.mobile-nav__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.72);
  transition: border-color var(--tr), background var(--tr), color var(--tr);
}

.mobile-nav__icon-btn:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

.mobile-nav__icon-btn svg {
  display: block;
}

/* 8. Hero
   ============================================================ */
.hero {
  padding-block: var(--sp-2xl);
  position: relative;
  overflow: hidden;
}

.hero__inner {
  max-width: 820px;
}

.hero__h1 {
  margin-bottom: var(--sp-md);
}

.hero__text {
  margin-bottom: var(--sp-lg);
  font-size: 1.05rem;
  line-height: 1.75;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
}

.section--cards {
  padding-top: calc(var(--sp-xl) - 0.75rem);
}

.hero__video,
.hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  pointer-events: none;
  z-index: 1;
}

/* Hero – page variant (smaller) */
.hero--page {
  padding-block: 4.5rem 4rem;
  border-bottom: 1px solid var(--border);
  isolation: isolate;
}

.hero--page::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(5, 10, 21, 0.58);
  pointer-events: none;
  z-index: 2;
}

.hero--page .container {
  position: relative;
  z-index: 3;
}

.hero--page .hero__h1 {
  font-size: clamp(1.9rem, 4vw, 2.55rem);
}

.hero--page .hero__inner {
  max-width: 780px;
}

.hero--page .hero__text {
  max-width: 48rem;
  margin-bottom: 1rem;
}

.hero--page .hero__text:last-of-type {
  margin-bottom: 0;
}

.hero--page .hero__actions {
  margin-top: 1.5rem;
}

/* Page: Über uns */
.about-page .hero--page .kicker {
  display: inline-block;
  margin-bottom: 1.15rem;
  font-size: 0.92rem;
  letter-spacing: 0.12em;
  color: var(--accent-mid);
}

.about-page .hero--page .hero__h1 {
  font-size: clamp(2rem, 7.5vw, 2.875rem); /* max ~46px, skaliert auf Handy herunter */
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: normal;
}

/* 9. Cards
   ============================================================ */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-md) var(--sp-md) calc(var(--sp-md) + 0.5rem);
  transition: border-color var(--tr), background var(--tr), transform var(--tr), box-shadow var(--tr);
}

.card:hover {
  border-color: var(--border-hover);
  background: var(--bg-elevated);
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.14);
}

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 3.75rem;
  margin: 0 auto 1rem;
}

.card__icon-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--tr), opacity var(--tr), filter var(--tr);
}

.card:hover .card__icon-image {
  transform: translateY(-1px);
  opacity: 0.96;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.16));
}

.card__title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.card__text {
  margin-top: 0.6rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  max-width: none;
}

/* 10. Statement / Explain Block
   ============================================================ */
.statement {
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.statement__quote {
  font-size: clamp(1.15rem, 2.5vw, 1.5rem);
  line-height: 1.65;
  font-weight: 400;
  color: var(--text-secondary);
  border-left: 2px solid var(--accent-mid);
  padding-left: var(--sp-md);
}

/* 11. Contact / Form Section
   ============================================================ */
.contact-section {
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
}

.contact-overview {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-block: calc(var(--sp-xl) - 0.5rem);
}

.contact-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.contact-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-md);
  min-height: 180px;
  transition: border-color var(--tr), background var(--tr), transform var(--tr);
}

.contact-card:hover {
  border-color: var(--border-hover);
  background: var(--bg-surface);
  transform: translateY(-1px);
}

.contact-card__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.85rem;
}

.contact-card__text,
.contact-card__value {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

.contact-card__value a:hover {
  color: var(--text-primary);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: var(--sp-xl);
  align-items: start;
}

/* 12. Form
   ============================================================ */
.form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form__group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.form__label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.03em;
}

.form__label .req {
  color: var(--text-muted);
  margin-left: 2px;
}

.form__input,
.form__select,
.form__textarea {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0.7rem 0.9rem;
  color: var(--text-primary);
  font-size: 0.9rem;
  transition: border-color var(--tr), background var(--tr);
  outline: none;
  width: 100%;
}

.form__input::placeholder,
.form__textarea::placeholder {
  color: var(--text-muted);
}

.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  border-color: var(--border-hover);
  background: var(--bg-surface);
}

.form__input.error,
.form__select.error,
.form__textarea.error {
  border-color: rgba(220, 80, 80, 0.5);
}

.form__select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234c5a7a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.2rem;
  cursor: pointer;
}

.form__select option {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.form__textarea {
  resize: vertical;
  min-height: 130px;
}

.form__file-wrapper {
  position: relative;
}

.form__file-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0.7rem 0.9rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color var(--tr);
}

.form__file-label:hover {
  border-color: var(--border-hover);
  color: var(--text-secondary);
}

.form__file {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
}

.form__file-name {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
  padding-left: 0.2rem;
}

.form__checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.form__checkbox {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--accent-mid);
  cursor: pointer;
}

.form__checkbox-label {
  font-size: 0.825rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.form__checkbox-label a {
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form__checkbox-label a:hover {
  color: var(--text-primary);
}

.form__error-msg {
  font-size: 0.75rem;
  color: rgba(220, 80, 80, 0.85);
  display: none;
}

.form__error-msg.visible {
  display: block;
}

.form__submit {
  align-self: flex-start;
  margin-top: 0.5rem;
}

/* Waehrend des Sendens: main.js setzt disabled und aendert den Text. */
.form__submit:disabled {
  opacity: 0.6;
  cursor: progress;
  transform: none;
  box-shadow: none;
}

/* Dateifeld mit abgelehnter Datei: das Input selbst ist unsichtbar (opacity 0
   ueber dem Label), also bekommt das Label den roten Rand. */
.form__file-label:has(.form__file.error) {
  border-color: rgba(220, 80, 80, 0.5);
}

/* Kleingedrucktes im Label, etwa die erlaubten Dateitypen */
.form__label-hint {
  font-weight: 400;
  opacity: 0.8;
}

/* Honeypot (Feld `website`): fuer Menschen unsichtbar und nicht fokussierbar,
   fuer Bots ein normales Textfeld. Wer es fuellt, bekommt von der Function
   ein 202 und wird nicht gespeichert. Kein display:none — das ueberspringen
   manche Bots. position:absolute nimmt das Feld aus dem Flex-Fluss, es
   erzeugt also weder Luecke (gap) noch Platz. */
.form__hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Nach erfolgreichem Versand: main.js setzt .is-sent, die Felder klappen ein,
   nur der Hinweis bleibt stehen. */
.form.is-sent > :not(.form-note) {
  display: none;
}

/* Hinweis unter dem Formular: Erfolg oder Fehler nach dem Versand */
.form-note {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--border-hover);
  border-radius: var(--r-md);
  background: var(--bg-elevated);
}

.form-note--fehler {
  border-color: rgba(220, 80, 80, 0.5);
}

.form.is-sent .form-note--erfolg {
  margin-top: 0;
}

.form-note__text {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-primary);
  max-width: 44rem;
}

.form-note a {
  color: var(--accent-mid);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}


/* Contact page specifics */
.contact-page .contact-overview {
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.contact-page .contact-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  padding: var(--sp-lg) var(--sp-md);
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-page .contact-section {
  background: linear-gradient(180deg, rgba(8, 13, 27, 0.98) 0%, rgba(6, 10, 21, 0.98) 100%);
  border-top: 1px solid var(--border);
}

.contact-page__intro {
  max-width: 600px;
  margin: 0 auto var(--sp-lg);
  text-align: center;
}

.contact-page__heading {
  font-size: clamp(1.75rem, 3.5vw, 2.4rem);
  font-weight: 500;
  margin-bottom: 0.75rem;
  color: var(--text-primary);
}

.contact-page__lead {
  font-size: 1rem;
  color: var(--text-secondary);
  max-width: 44ch;
  margin: 0 auto;
}

.contact-page .contact-grid {
  grid-template-columns: 1fr;
  max-width: 800px;
  margin: 0 auto;
  gap: 0;
}

.contact-page .contact-form {
  padding: 2rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

/* 13. Footer
   ============================================================ */
.footer {
  background: #050a15;
  border-top: 1px solid var(--border);
  padding-block: 2.8rem 1.6rem;
}

.footer__inner {
  display: grid;
  grid-template-columns: 88px 1.1fr 1fr 1fr;
  gap: 2rem;
  align-items: start;
  padding-bottom: 1.7rem;
  border-bottom: 1px solid var(--border);
}

.footer__logo-block {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.footer__mark-image {
  display: block;
  width: 4rem;
  height: auto;
}

.footer__heading {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-mid);
  margin-bottom: 1rem;
}

.footer__text {
  font-size: 0.92rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
  max-width: 24ch;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
}

.footer__link {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.78);
  transition: color var(--tr);
}

.footer__link:hover {
  color: var(--text-primary);
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  padding-top: 1rem;
}

.footer__copy {
  font-size: 0.775rem;
  color: rgba(255, 255, 255, 0.54);
  max-width: none;
}

.footer__legal {
  display: flex;
  gap: 1.5rem;
}

/* 14. Page sections
   ============================================================ */

/* Über uns */

/* About page – image band */
.about-band {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.about-statement {
  padding: var(--sp-xl) 0;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(9, 14, 29, 0.85) 0%, rgba(7, 11, 23, 0.85) 100%);
}

.about-statement__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
  gap: var(--sp-xl);
  align-items: start;
}

.about-statement__text {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 72ch;
  border-left: 2px solid var(--accent-mid);
  padding-left: var(--sp-md);
}

.about-statement__detail {
  font-size: 1rem;
  line-height: 1.75;
  max-width: 48ch;
}

.about-principles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: var(--sp-lg);
}

.principle {
  background: var(--bg-surface);
  padding: var(--sp-md);
  transition: background var(--tr);
}

.principle:hover {
  background: var(--bg-elevated);
}

.principle__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.principle__text {
  margin-top: 0.75rem;
  max-width: none;
  font-size: 0.9rem;
  line-height: 1.7;
}

.about-contact {
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.about-contact__heading {
  text-align: center;
  margin-bottom: var(--sp-lg);
}

.about-contact__heading h2 {
  font-size: clamp(2rem, 3.8vw, 2.8rem);
  font-weight: 500;
}

/* Portrait wie im Original: zentriert unter der Überschrift, Radius 4%. */
.about-contact__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin: 0;
}

.about-contact__portrait-img {
  display: block;
  width: 100%;
  max-width: 571px;
  /* height: auto ist Pflicht: das <img> traegt height="767", und sobald
     max-width die Breite drueckt, bliebe die Hoehe sonst bei 767 px stehen —
     ein schmaler, ueberlanger Streifen (Screenshot Operator 2026-09-19). */
  height: auto;
  aspect-ratio: 571 / 767;
  object-fit: cover;
  object-position: center top;
  border-radius: 4%;
}

.about-contact__caption {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  text-align: center;
}

.about-contact__name {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.about-contact__role {
  font-size: 1rem;
  color: var(--text-secondary);
  max-width: none;
  text-align: center;
}

/* Blaues Band wie im Original, aber rund 35% abgedunkelt: die Richtung und der
   Farbton bleiben, der Abschnitt dominiert die Seite aber nicht mehr.
   Original: 90deg, #23365b -> #3c5385. */
.about-values {
  background: linear-gradient(90deg, #17233b 0%, #273656 100%);
  border-top: 1px solid rgba(209, 238, 235, 0.18);
  border-bottom: 1px solid rgba(209, 238, 235, 0.18);
}

.about-values__intro {
  text-align: center;
  margin-bottom: var(--sp-lg);
}

.about-values__eyebrow {
  display: block;
  margin-bottom: 0.6rem;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
}

.about-values__heading {
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 500;
}

.about-values .about-principles {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.25rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  margin-top: 0;
}

.about-values .principle {
  border: 1px solid rgba(209, 238, 235, 0.42);
  border-radius: var(--r-lg);
  background: rgba(7, 12, 24, 0.22);
  text-align: center;
  padding: 2rem 1.25rem;
  transition: background var(--tr), border-color var(--tr);
}

.about-values .principle:hover {
  background: rgba(7, 12, 24, 0.45);
  border-color: rgba(209, 238, 235, 0.62);
}

.about-values .principle__title {
  font-size: 1.2rem;
}

.about-values .principle__text {
  color: rgba(255, 255, 255, 0.88);
}

.about-values__cta {
  border-top: 0;
  padding-block: 2rem 0;
}

.about-closing {
  background:
    radial-gradient(circle at 50% 50%, rgba(27, 56, 112, 0.28), transparent 52%),
    linear-gradient(180deg, rgba(10, 16, 32, 0.98) 0%, rgba(6, 10, 21, 1) 100%);
  padding-block: 8rem;
  text-align: center;
  border-top: 1px solid var(--border);
}

.about-closing__mark {
  display: block;
  width: 3.5rem;
  height: auto;
  margin: 2.5rem auto 0;
  opacity: 0.36;
}

.about-closing__quote {
  font-size: clamp(2.2rem, 4.5vw, 3rem);
  font-weight: 500;
  color: var(--text-primary);
  font-style: normal;
  letter-spacing: -0.02em;
  max-width: 24ch;
  margin: 0 auto;
  line-height: 1.25;
}

.leistungen-leit {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: var(--sp-lg);
}

.leit-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-md);
  transition: border-color var(--tr), background var(--tr), transform var(--tr);
}

.leit-card:hover {
  border-color: var(--border-hover);
  background: var(--bg-surface);
  transform: translateY(-1px);
}

/* Icon-Kachel wie im Original: 87×90px, Radius 25%, Mint bei 23% Deckkraft. */
.leit-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 87px;
  height: 90px;
  border-radius: 25%;
  background: rgba(209, 238, 235, 0.23);
  margin-bottom: 1.25rem;
}

.leit-card__icon-image {
  width: 65px;
  height: 90px;
  object-fit: contain;
}

.leit-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.leit-card__text {
  margin-top: 0.7rem;
  max-width: none;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.leistungen-detail {
  border-bottom: 1px solid var(--border);
  padding-block: calc(var(--sp-xl) - 0.4rem);
}

/* Services page – image band */
.services-band {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Bildband. Das Bild bringt seine Abdunklung selbst mit und laeuft nach unten
   dunkel aus; die Karten liegen darueber in der dunklen Haelfte. */
.services-band,
.recruiting-band,
.about-band {
  position: relative;
  overflow: hidden;
}

.services-band__bg,
.recruiting-band__bg,
.about-band__bg {
  position: relative;
  height: 760px;
  line-height: 0;
}

/* Die Fotos laufen nach unten in ein neutrales Grau aus, die Seite ist dunkles
   Marineblau. Am Bandende trifft Grau auf Blau und es entsteht eine sichtbare
   Kante quer hinter den Karten. Dieser Verlauf fuehrt das Band in die
   Seitenfarbe, damit der Uebergang verschwindet. */
.services-band__bg::after,
.recruiting-band__bg::after,
.about-band__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(5, 10, 21, 0) 48%,
    rgba(5, 10, 21, 0.55) 78%,
    var(--bg-base) 100%);
  pointer-events: none;
}

.services-band__img,
.recruiting-band__img,
.about-band__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Bildausschnitt je Motiv, jeweils gemessen. Zwei Bedingungen mussten zusammen
   erfüllt sein: Das Motiv muss vollständig oberhalb der Karten liegen, und die
   Karten müssen in der dunklen unteren Bildzone sitzen, damit ihr Text AA
   erreicht. Deshalb unterscheiden sich die Werte je Bild. */
.services-band__img {
  object-position: center 30%;
}

.recruiting-band__img {
  object-position: center 15%;
}

.about-band__img {
  object-position: center 35%;
}

.services-band__cards,
.recruiting-band__cards {
  position: relative;
  z-index: 1;
  margin-top: -12.5rem;
  padding-bottom: var(--sp-xl);
}

.services-page .leistungen-leit {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 0;
}

.services-page .leit-card {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgb(139, 139, 139);
  border-radius: 7px;
  padding: 20px 15px 40px;
  transition: background var(--tr), border-color var(--tr);
}

.services-page .leit-card:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.55);
  transform: none;
}

/* Services page – alternating detail splits */
.leistungen-detail {
  border-bottom: 1px solid var(--border);
  padding-block: 0;
}

.detail-split {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 4.5rem;
  align-items: center;
  padding-block: var(--sp-xl);
  border-bottom: 1px solid var(--border);
}

.detail-split:last-child {
  border-bottom: none;
}

.detail-split--reversed {
  grid-template-columns: 1fr 380px;
  background: linear-gradient(180deg, rgba(9, 14, 28, 0.55) 0%, rgba(7, 11, 22, 0.55) 100%);
}

.detail-split--reversed .detail-split__media {
  order: 2;
}

.detail-split__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  line-height: 0;
}

.detail-split__img {
  display: block;
  width: 100%;
  height: auto;
}

.detail-split__body {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.detail-split__body .btn {
  align-self: flex-start;
}

.detail-split__title {
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.detail-split__lead {
  font-size: 1.05rem;
  line-height: 1.72;
  color: var(--text-primary);
  max-width: none;
}

.detail-split__text {
  font-size: 0.95rem;
  line-height: 1.78;
  color: var(--text-secondary);
  max-width: none;
}

.services-contact {
  border-top: 1px solid var(--border);
  text-align: center;
  padding-top: calc(var(--sp-xl) - 0.35rem);
  background: linear-gradient(180deg, rgba(8, 13, 27, 0.98) 0%, rgba(6, 10, 21, 0.98) 100%);
}

.services-contact__intro {
  max-width: 760px;
  margin: 0 auto;
}

.services-contact__heading {
  margin-bottom: var(--sp-md);
  font-size: clamp(2rem, 4vw, 2.85rem);
  font-weight: 500;
}

.services-contact__text {
  margin: 0 auto var(--sp-lg);
  font-size: 1rem;
}

.services-contact__actions {
  display: flex;
  justify-content: center;
}

.recruiting-leit {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: var(--sp-lg);
}

/* Recruiting page – image band */
.recruiting-band {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.recruiting-page .recruiting-leit {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 0;
}

.recruiting-page .leit-card {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgb(139, 139, 139);
  border-radius: 7px;
  padding: 20px 15px 40px;
  transition: background var(--tr), border-color var(--tr);
}

.recruiting-page .leit-card:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.55);
  transform: none;
}

/* Recruiting process */
.recruiting-process {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.recruiting-process__cta {
  margin-top: var(--sp-lg);
  text-align: center;
}

.recruiting-process__intro {
  max-width: 720px;
}

.recruiting-process__heading {
  font-size: clamp(2rem, 4vw, 2.7rem);
  font-weight: 500;
  color: var(--text-primary);
}

.process-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--sp-lg);
  border-top: 1px solid var(--border);
}

.process-step {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--sp-md);
  padding-block: var(--sp-md);
  border-bottom: 1px solid var(--border);
  transition: background var(--tr);
}

.process-step:hover {
  background: var(--bg-surface);
}

.process-step__num {
  font-size: 2rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.14);
  letter-spacing: -0.05em;
  line-height: 1;
  padding-top: 0.2rem;
}

.process-step__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.3rem;
}

.process-step__text {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* CTA section */
.cta-section {
  border-top: 1px solid var(--border);
  padding-block: var(--sp-xl);
  text-align: center;
}

/* 15. Legal pages
   ============================================================ */
.legal-content {
  max-width: 740px;
  padding-block: var(--sp-xl);
}

.legal-content h1 {
  font-size: 1.75rem;
  margin-bottom: var(--sp-lg);
}

.legal-content h2 {
  font-size: 1.15rem;
  font-weight: 600;
  margin-top: var(--sp-lg);
  margin-bottom: var(--sp-sm);
  color: var(--text-primary);
}

.legal-content h2:first-of-type {
  margin-top: 0;
}

.legal-content h3 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-top: var(--sp-md);
  margin-bottom: 0.5rem;
  color: var(--text-secondary);
}

.legal-content p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}

.legal-content p:last-child {
  margin-bottom: 0;
}

.legal-content a {
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-content a:hover {
  color: var(--text-primary);
}

/* Homepage parity adjustments
   ============================================================ */
.home-page {
  --container: 1200px;
  --header-h: 108px;
}

.home-page .header__logo-image {
  width: clamp(160px, 20vw, 240px);
}

.home-page .container {
  padding-inline: 2rem;
}

.home-page .section {
  padding-block: 4.5rem;
}

.home-page .section--lg {
  padding-block: 350px 100px;
}

.home-page .header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-h);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background var(--tr), border-color var(--tr), backdrop-filter var(--tr);
}

.home-page .header.header--scrolled {
  background: rgba(5, 10, 21, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--border);
}

.home-page .header__inner {
  padding-top: 1rem;
}

.home-page .hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #050d26;
}

.home-page .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 10, 21, 0.18) 0%, rgba(5, 10, 21, 0.62) 100%),
    radial-gradient(circle at 88% 16%, rgba(90, 140, 190, 0.07), transparent 20%);
  pointer-events: none;
  z-index: 2;
}

.home-page .hero::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 110%;
  background: linear-gradient(145deg, rgba(10, 22, 55, 0.62) 0%, rgba(8, 16, 40, 0.36) 100%);
  clip-path: polygon(22% 0%, 100% 0%, 100% 100%, 0% 100%);
  pointer-events: none;
  z-index: 2;
}

.home-page .hero .container {
  position: relative;
  z-index: 3;
}

.home-page .hero__inner {
  max-width: 70rem;
}

.home-page .kicker {
  margin-bottom: 1.15rem;
  color: #fff;
}

.home-page .hero__h1 {
  max-width: none;
  margin-bottom: 1.2rem;
  font-size: 45px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: normal;
}

.home-page .hero__text {
  max-width: 60rem;
  margin-bottom: 2.5rem;
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
}

.home-page .cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 0;
  row-gap: 30px;
  border: 0;
  background: transparent;
  max-width: 1156px;
  margin: 0 auto;
}

.home-page .card {
  min-height: 17rem;
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 1.25rem 1.125rem;
  background: var(--bg-surface);
  text-align: center;
}

.home-page .card:nth-child(even) {
  border-left: 0;
}

.home-page .card:hover {
  background: #0c1728;
  box-shadow: inset 0 0 0 1px rgba(209, 238, 235, 0.28);
}

.home-page .card__icon {
  height: 4.125rem;
  margin: 0.625rem auto;
}

.home-page .card__title {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
}

.home-page .card__text {
  margin-top: 0.9rem;
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.74);
  max-width: 26.8rem;
  margin-inline: auto;
}

.home-page .statement {
  background: rgba(9, 17, 33, 0.72);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.statement__split {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  min-height: 736px;
}

.statement__panel {
  position: relative;
  overflow: hidden;
}

/* 0.58 ist gemessen, nicht geschaetzt: der sichtbare Ausschnitt der Quelldateien
   gegen die Live-Seite gerechnet ergab links 0,57 und rechts 0,59. */
.statement__panel-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.58;
}

.statement__panel-img--rechts {
  object-position: right center;
}

.statement__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5rem 3.5rem;
  text-align: center;
}

.statement__vline {
  width: 1px;
  height: 7rem;
  background: rgba(209, 238, 235, 0.42);
  margin-bottom: 2.25rem;
  flex-shrink: 0;
}

.statement__content .statement__vline:last-child {
  margin-bottom: 0;
  margin-top: 2.25rem;
}

.home-page .statement__quote {
  border-left: none;
  padding-left: 0;
  font-size: 1.5rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.84);
  text-align: center;
  max-width: 46rem;
}

.home-page .contact-section {
  background: linear-gradient(180deg, rgba(14, 20, 42, 0.98) 0%, rgba(10, 15, 32, 0.98) 100%);
  border-top: 1px solid var(--border);
  position: relative;
  padding-top: 5.4rem;
  overflow: hidden;
}

.home-page .contact-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 9rem;
  background: linear-gradient(135deg, rgba(22, 38, 78, 0.68) 0%, rgba(18, 32, 66, 0.44) 55%, rgba(12, 20, 44, 0.18) 100%);
  clip-path: polygon(0 0, 100% 0, 100% 28%, 0 100%);
  pointer-events: none;
}

.home-page .contact-section__intro {
  max-width: 50rem;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.home-page .contact-section__eyebrow {
  margin-bottom: 0.9rem;
}

.home-page .contact-section__heading {
  max-width: none;
  margin: 0 auto 1rem;
  font-size: clamp(2.2rem, 4vw, 2.85rem);
  line-height: 1.08;
  font-weight: 500;
}

.home-page .contact-section__lead {
  max-width: 44rem;
  margin: 0 auto;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.84);
}

.home-page .contact-grid {
  grid-template-columns: 1fr;
  gap: 0;
  max-width: 1120px;
  margin: 0 auto;
}

.home-page .contact-form {
  padding: 0;
  border: none;
  background: transparent;
}

.home-page .form__row:first-child {
  grid-template-columns: 1fr 1fr 1fr;
}

.home-page .form__row + .form__row {
  grid-template-columns: 1fr;
}

.form__label,
.contact-data__label,
.footer__heading {
  color: var(--accent-mid);
}

.home-page .form__input,
.home-page .form__select,
.home-page .form__textarea {
  border-color: rgba(209, 238, 235, 0.34);
  background: rgba(255, 255, 255, 0.10);
}

.home-page .form__file-label {
  background: transparent;
  border: none;
  padding: 0.25rem 0;
  color: var(--accent-mid);
  font-size: 0.82rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.home-page .form__submit {
  align-self: center;
}

.home-page .form__file-label:hover {
  border-color: transparent;
}


.home-page .section--panel {
  background: linear-gradient(180deg, rgba(8, 14, 30, 0.98) 0%, rgba(11, 18, 36, 0.98) 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.home-page .section--cards {
  padding-top: 5rem;
  padding-bottom: 1.875rem;
}

.home-page .section--cards .container {
  max-width: none;
  padding-inline: 40px;
}

.home-page .cards__cta {
  text-align: center;
  margin-top: 2.5rem;
}

@media (max-width: 1024px) {
  .home-page .form__row:first-child {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .footer__inner {
    grid-template-columns: 88px 1.1fr 1fr 1fr;
    gap: 1.25rem;
  }
}

@media (max-width: 800px) {
  .nav__cta {
    display: inline-flex;
  }

  .mobile-nav {
    background: rgba(5, 10, 21, 0.98);
  }

  .mobile-nav__link {
    font-size: 1.15rem;
  }

  .footer__inner {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }

  .footer__logo-block {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .home-page .container {
    padding-inline: 1rem;
  }

  .home-page .section--lg {
    padding-block: 4rem 5rem;
  }

  .home-page .hero__h1 {
    font-size: clamp(1.75rem, 7vw, 2.6rem);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: 0;
    max-width: 100%;
  }

  .home-page .hero__inner {
    text-align: center;
  }

  .home-page .hero__actions {
    justify-content: center;
  }

  .home-page .header__logo-image {
    width: clamp(130px, 30vw, 180px);
  }

  .btn--primary {
    padding: 0.9rem 2.5rem;
    min-width: 220px;
  }

  .home-page .hero__text {
    font-size: 1.1rem;
    line-height: 1.68;
  }

  .home-page .kicker {
    margin-bottom: 1rem;
  }

  .home-page .hero::before {
    background:
      linear-gradient(180deg, rgba(5, 10, 21, 0.35) 0%, rgba(5, 10, 21, 0.65) 100%);
  }

  .home-page .card__icon {
    margin-bottom: 0.85rem;
  }

  .home-page .contact-section {
    padding-top: 4.8rem;
  }

  .home-page .contact-section__heading {
    font-size: clamp(1.9rem, 8vw, 2.4rem);
  }

  .home-page .contact-section__lead {
    font-size: 0.98rem;
  }

  .home-page .contact-form {
    padding: 1rem;
  }

  .home-page .form__row:first-child {
    grid-template-columns: 1fr;
  }
}

/* 17. Responsive
   ============================================================ */
@media (max-width: 1120px) {
  .home-page {
    --header-h: 122px;
  }

  .home-page .container {
    padding-inline: 40px;
  }

  .home-page .section--lg {
    padding-block: 350px 100px;
  }

  .home-page .nav__list,
  .home-page .nav__cta,
  .home-page .nav__contacts {
    display: none;
  }

  .home-page .burger {
    display: flex;
    width: 52px;
    height: 52px;
    gap: 7px;
  }

  .home-page .burger__bar {
    width: 30px;
    height: 2px;
  }

  .home-page .burger.is-open .burger__bar:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }

  .home-page .burger.is-open .burger__bar:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }

  .home-page .header__logo-image {
    width: clamp(320px, 40vw, 430px);
  }
}

@media (min-width: 901px) and (max-width: 1120px) {
  .home-page .hero {
    min-height: clamp(809px, calc(949.6px - 12.56vw), 836px);
  }
}

@media (min-width: 1121px) and (max-width: 1400px) {
  .home-page .hero {
    min-height: 809px;
  }
}

@media (max-width: 900px) {
  .nav__list,
  .nav__cta,
  .nav__contacts {
    display: none;
  }

  .burger {
    display: flex;
  }

  .home-page .header__logo-image {
    width: clamp(140px, 20vw, 200px);
  }

  .home-page .hero::after {
    display: none;
  }

  /* Eine Spalte: das linke Panel faellt weg, das rechte wird zum Band ueber
     dem Text - so hat es die Vorlage auf dem Handy auch geloest. */
  .statement__split {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .statement__panel--left {
    display: none;
  }

  .statement__panel--right {
    height: 260px;
    order: -1;
  }

  .statement__panel-img--rechts {
    object-position: center;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-lg);
  }

  .contact-cards {
    grid-template-columns: 1fr;
  }

  .footer__inner {
    grid-template-columns: 88px 1.1fr 1fr 1fr;
    gap: 1rem;
  }

  .leistungen-leit {
    grid-template-columns: 1fr;
  }

  .services-page .leistungen-leit {
    grid-template-columns: 1fr;
  }

  .services-page .leit-card {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .services-page .leit-card:last-child {
    border-bottom: 0;
  }

  .recruiting-page .recruiting-leit {
    grid-template-columns: 1fr;
  }

  .recruiting-page .leit-card {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .recruiting-page .leit-card:last-child {
    border-bottom: 0;
  }


  .services-band__bg,
  .recruiting-band__bg,
  .about-band__bg {
    height: 300px;
  }

  .services-band__cards,
  .recruiting-band__cards {
    margin-top: -2rem;
  }

  .detail-split,
  .detail-split--reversed {
    grid-template-columns: 1fr;
    gap: var(--sp-lg);
  }

  .detail-split--reversed .detail-split__media {
    order: -1;
  }

  .recruiting-leit {
    grid-template-columns: 1fr;
  }

  .about-statement__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-lg);
  }

  .about-contact__portrait-img {
    /* Am Handy nicht ueber die volle Breite: das Hochformat 3:4 wuerde sonst
       den ganzen Bildschirm fuellen (Rueckmeldung Operator 2026-09-19 gegen
       das Original). Im Original (Screenshot 2026-09-19, Galaxy S731B) ist das
       Portrait etwa 53 % der Bildschirmbreite breit — daran gemessen. */
    max-width: min(54vw, 280px);
  }

  .about-values .about-principles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  :root {
    --sp-xl:  3.5rem;
    --sp-2xl: 5rem;
  }

  .home-page .container {
    padding-inline: 1rem;
  }

  .home-page .section--lg {
    padding-block: 8.5rem 5rem;
  }

  .header__logo-image {
    width: clamp(150px, 44vw, 176px);
  }

  .hero--page {
    padding-block: 3.75rem 3.25rem;
  }

  .cards {
    grid-template-columns: 1fr;
  }

  .form__row {
    grid-template-columns: 1fr;
  }

  .footer__inner {
    grid-template-columns: 1fr;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .about-principles {
    grid-template-columns: 1fr 1fr;
  }

  .about-values .about-principles {
    grid-template-columns: 1fr;
  }

  .process-step {
    grid-template-columns: 56px 1fr;
  }

  .process-step__num {
    font-size: 1.5rem;
  }

  .cta-section {
    text-align: left;
  }

  .services-band__bg {
    height: 200px;
  }

  .services-band__cards {
    margin-top: -2rem;
  }

  .recruiting-band__bg {
    height: 200px;
  }

  .recruiting-band__cards {
    margin-top: -2rem;
  }

  .about-band__bg {
    height: 220px;
  }

  .about-values .about-principles {
    grid-template-columns: 1fr;
  }

  .about-closing {
    padding-block: 5rem;
  }

  .contact-page .contact-form {
    padding: 1rem;
  }

  .form__input,
  .form__select,
  .form__textarea {
    font-size: 1rem;
  }

  .form__label {
    font-size: 0.85rem;
  }

  .home-page .hero::after {
    display: none;
  }

  .statement__content {
    padding: 3rem 1.5rem;
  }

  .home-page .card {
    min-height: auto;
  }
}

/* ============================================================
   GG-029 – Hero Geometry
   ============================================================ */
.hero-geo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.hero-geo__face {
  position: absolute;
  will-change: transform;
}

.hero-geo__face--1 {
  top: -15%;
  right: -4%;
  width: 54%;
  height: 130%;
  background: linear-gradient(148deg, rgba(14, 30, 70, 0.22), rgba(7, 15, 38, 0.09));
  clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 2% 100%);
  animation: geo-a 15s ease-in-out infinite;
}

.hero-geo__face--2 {
  top: 12%;
  right: 2%;
  width: 44%;
  height: 72%;
  background: linear-gradient(132deg, rgba(38, 78, 148, 0.24), rgba(10, 25, 58, 0.10));
  clip-path: polygon(30% 0%, 100% 0%, 70% 100%, 0% 100%);
  animation: geo-b 20s ease-in-out infinite;
}

.hero-geo__face--3 {
  top: -10%;
  right: 20%;
  width: 32%;
  height: 60%;
  background: linear-gradient(162deg, rgba(55, 105, 180, 0.16), transparent);
  clip-path: polygon(6% 0%, 100% 9%, 91% 100%, 0% 90%);
  animation: geo-c 24s ease-in-out infinite;
}

.hero-geo__face--4 {
  bottom: -14%;
  right: 5%;
  width: 50%;
  height: 58%;
  background: linear-gradient(114deg, rgba(18, 42, 95, 0.16), rgba(7, 16, 42, 0.06));
  clip-path: polygon(14% 0%, 100% 20%, 86% 100%, 0% 80%);
  animation: geo-d 17s ease-in-out infinite;
}

@keyframes geo-a {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%       { transform: translateY(-11px) rotate(0.28deg); }
  66%       { transform: translateY(8px) rotate(-0.14deg); }
}

@keyframes geo-b {
  0%, 100% { transform: translate(0, 0); }
  28%       { transform: translate(-8px, -13px); }
  72%       { transform: translate(6px, 11px); }
}

@keyframes geo-c {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-18px) scale(1.018); }
}

@keyframes geo-d {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  42%       { transform: translateX(9px) rotate(0.22deg); }
  68%       { transform: translateX(-6px) rotate(-0.14deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
  .hero-geo__face { animation: none; }
  .mobile-nav {
    transform: none;
    transition: opacity 0.1s ease, visibility 0s linear 0.1s;
  }
  .mobile-nav.is-open {
    transform: none;
    transition: opacity 0.1s ease, visibility 0s;
  }
}

@media (max-width: 900px) {
  .hero-geo__face--3,
  .hero-geo__face--4 { display: none; }
}

@media (max-width: 640px) {
  .hero-geo__face--2 { display: none; }
  .hero-geo__face--1 {
    top: auto;
    bottom: -10%;
    right: -8%;
    width: 70%;
    height: 65%;
    clip-path: polygon(40% 0%, 100% 15%, 100% 100%, 0% 100%);
    background: linear-gradient(200deg, rgba(14, 32, 78, 0.52), rgba(8, 16, 42, 0.22));
  }
}

/* ============================================================
   GG-029 – Scroll Reveal
   ============================================================ */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 540px) {
  .home-page .cards {
    grid-template-columns: 1fr;
  }

  .home-page .card {
    min-height: auto;
  }

  .home-page .card:nth-child(even) {
    border-left: 1px solid var(--border);
  }
}