:root {
    --brand: #005899;
    --brand-2: #2b84c6;
    --text: #ffffff;
    --muted: #ffffff;
    --bg: #ffffff;
    --chip-bg: rgba(9,14,23,.55);
    --chip-br: rgba(255,255,255,.12);
    --chip-dot: #2bd673;
    --cta: #0ea5e9;
    --cta-h: #0284c7;
    --card-br: #0f172a;

    --section-bg: var(--brand);
    --card-bg: rgba(0, 0, 0, .20);
    --card-border: rgba(255, 255, 255, .25);
    --card-shadow: 0 10px 24px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .06);
    --radius: 16px;
    --input-bg: rgba(0, 0, 0, .22);
    --input-border: rgba(255, 255, 255, .18);
    --input-focus: rgba(24, 179, 255, .6);
    --button-bg: #0ea5e9;
    --button-bg-hover: #0284c7;
}

/* Box-Sizing */
* {
    box-sizing: border-box;
}

/* Allgemeine Styles für HTML und Body */
html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", "Arial";
}
a {
    color: inherit;
    text-decoration: none;
}

.container {
    width: 100%;
    max-width: 1120px;
    margin-inline: auto;
    padding-inline: 20px;
}

/* Header */
.header{
  height:120px;background:var(--brand);display:flex;align-items:center;
  position:sticky;top:0;z-index:20
}
.header__inner{display:flex;align-items:center;gap:18px;width:100%}
.brand img{height:56px;width:auto;display:block;image-rendering:auto}

/* Header/Navi gegen Richtungswechsel absichern */
.header { direction: ltr; }
.langswitch { direction: ltr; }

/* Sprachumschalter */
.langswitch {
  display:flex;
  align-items:center;
  gap:10px;
  margin-inline-start:auto; /* statt margin-left:auto */
}

.langswitch button {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid #e3e6ee;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
  cursor:pointer;
  font-weight:700;
  line-height:1;
  transform:scale(1);
  transform-origin:center;
  transition:box-shadow .15s ease, transform .15s ease;
  backface-visibility:hidden;
  -webkit-font-smoothing:antialiased;
}

.langswitch button:hover { box-shadow:0 2px 6px rgba(0,0,0,.08) }

.langswitch button:focus-visible {
  outline:2px solid rgba(24,179,255,.6);
  outline-offset:2px;
}

.langswitch button[aria-current="true"] {
  outline:2px solid rgba(24,179,255,.32);
  background:#f7fbff;
  pointer-events:auto;
  transform:scale(1.12); /* gesamte Kachel größer */
}

/* Flaggen (CDN: .fi) – nicht mehr skalieren */
.langswitch .fi {
  width:20px;
  height:15px;
  display:inline-block;
  border-radius:2px;
}

.lang-label { font-size:14px }

/* Responsive */
@media (max-width:520px){
  .header{height:auto;padding-block:14px}
  .brand img{height:48px}
  .langswitch{gap:8px}
  .langswitch button{padding:6px 10px}
  .langswitch .fi{width:18px;height:14px}
  .lang-label{font-size:13px}
}

/* Bevorzugt reduzierte Bewegung */
@media (prefers-reduced-motion: reduce){
  .langswitch button { transition:none }
}


/* Hero */
.hero{position:relative;isolation:isolate;background:#0b1220}
.hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.6)}
.hero__inner{position: relative;z-index: 1;max-width: 920px;padding-block: 84px;text-align: left;margin-left: 713px;}
.status-chip{display:inline-flex;align-items:center;gap:10px;background:var(--chip-bg);border:1px solid var(--chip-br);color:#fff;border-radius:14px;padding:10px 16px;font-size:16px;font-weight:700}
.status-chip .dot{width:10px;height:10px;border-radius:50%;background:var(--chip-dot);box-shadow:0 0 0 6px rgba(43,214,115,.18) inset}
.clamp-26{font-size:clamp(22px,3vw,26px)}
.clamp-36{font-size:clamp(28px,4vw,36px)}
.hero h1{color:#ffffff;margin:16px 0 10px 0;font-weight:700}
.hero p{color:#ffffff;line-height:1.65;margin:0 0 12px 0}
.hero em{font-style:normal;font-weight:700}

/* About */
.about {
  background: #fff;
  color: #000; /* Text im About-Bereich schwarz */
}

.about__inner {
  padding-block: 84px;
}

.about h2 {
  margin: 0 0 8px 0;
}

.about .subtitle {
  color: #000; /* statt var(--text) (weiß) */
  opacity: .9;
  margin: 0 0 28px 0;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: stretch;
}

.card {
  flex: 1 1 280px;
  min-height: 140px;
  border: 2px solid var(--card-border);
  padding: 20px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .10), 0 2px 6px rgba(0, 0, 0, .06);
  display: flex;
  align-items: center;
  transition: transform .16s ease, box-shadow .16s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .12), 0 4px 10px rgba(0, 0, 0, .08);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.card h3 {
  font-size: clamp(18px, 2.4vw, 20px);
  line-height: 1.35;
  margin: 0;
}

.shape {
  width: 28px;
  height: 28px;
  display: block;
  flex: 0 0 28px;
  font-size: 28px;
  margin-bottom: 12px;
  color: var(--brand);
}

.title {
  margin: 0;
  font-size: clamp(18px, 2.4vw, 20px);
  font-weight: 700;
  line-height: 1.35;
}

.shape.square {background: var(--brand);border-radius: 4px;}
.shape.hexagon {background: var(--brand);clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);}
.shape.circle {background: var(--brand);border-radius: 999px;}


/* Outlook */
.outlook {position: relative;background: #0b1220;}
.outlook .bg {position: absolute;inset: 0;z-index: 0;overflow: hidden;}
.outlook .bg img {width: 100%;height: 100%;object-fit: cover;filter: brightness(.6);}
.outlook__inner {position: relative;z-index: 1;max-width: 920px;padding-block: 84px;text-align: left;margin-left: 713px; /* Diesen Wert nach Bedarf anpassen */}
.outlook p,
.outlook li {color: #fff;line-height: 1.65;font-size: clamp(22px, 3vw, 26px); /* Gleiche Schriftgröße wie der Haupttext */}
.outlook p:first-of-type {font-weight: 700;}
.outlook__list {padding-left: 18px;}
.outlook li {margin-bottom: 12px; /* Abstand zwischen den Listenelementen */}

/* Kontaktbereich */
.contact {
    background-color: var(--section-bg);
    color: var(--text);
    padding: 50px 0;
}

.contact__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 1120px;
    margin: 0 auto;
    grid-auto-flow: row;
}

/* ── Überschrift + Subheadline: volle Breite, alles Weitere darunter ───────── */
.contact-info { 
    display: contents; /* "hebt" Kinder zu direkten Grid-Items */
}

.contact__grid h2,
.contact__grid .sub {
    grid-column: 1 / -1; /* über beide Spalten spannen */
}

.contact__grid h2 { 
    margin: 0 0 0px;  /* sehr kleiner Abstand zur Subheadline */
}

.contact__grid .sub { 
    margin: 0 0 24px;
    font-size: 18px;      /* feste Schriftgröße für Subheadline */
    line-height: 1.6;     /* angenehmer Zeilenabstand */
}

/* Karten nebeneinander, gleiche (fixe) Höhe */
.contact__grid .person { 
    grid-column: auto; 
    height: 114px;        /* fixe Höhe: entspricht der ersten Karte */
    overflow: hidden; 
}

/* Erste & zweite Personenkarte explizit in Spalte 1 bzw. 2 */
.contact__grid > .person:first-of-type { grid-column: 1; }
.contact__grid > .person:nth-of-type(2) { grid-column: 2; }

/* Keine zusätzliche Vertikallücke zwischen den beiden Karten auf Desktop */
.contact__grid .person + .person { margin-top: 0; }

/* Formular: volle Breite unter den Karten */
.contact__grid .contact-form { grid-column: 1 / -1; }

/* Responsive: eine Spalte; Karten wieder flexibel in der Höhe und mit Abstand */
@media (max-width: 900px) {
    .contact__grid { grid-template-columns: 1fr; }
    .contact__grid .person,
    .contact__grid .contact-form { grid-column: 1; }
    .contact__grid .person { height: auto; }
    .contact__grid .person + .person { margin-top: 16px; }
}

/* Kontaktinformationen (Struktur innerhalb des Bereichs) */
/* Hinweis: Layout übernimmt jetzt das Grid via display:contents */
.contact-info {
    /* ursprünglich: display:flex; flex-direction:column; gap:24px;  – entfällt */
}

/* Personenkarte */
.person {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
    padding: 18px;
}

.avatar {
    width: 78px;
    height: 78px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
    background: #000;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.meta { flex-grow: 1; }

.name {
    display: block;       /* Name eigene Zeile */
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
}

.role {
    display: block;       /* Rolle unter dem Namen */
    font-size: 15px;
    color: var(--muted);
    margin-bottom: 1em;   /* größerer Abstand zu den Mail-Links (≈ Schriftgröße) */
}

.links a {
    color: #a8e1ff;
    text-decoration: none;
    font-size: 15px;
}
.links a:hover { text-decoration: underline; }

/* Mobilnummer */
.phone {
    color: #a8e1ff;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
/* .phone::before { content: "📱"; } */

/* Formularbereich */
.contact-form {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: var(--card-shadow);
}

/* Formular-Layout: Name + E-Mail nebeneinander, Nachricht volle Breite */
.contact-form form {
    display: grid;
    grid-template-columns: 1fr 1fr; /* zwei Spalten */
    gap: 24px;                      /* 24px Abstand */
}

/* Standard: Felder in Formular-Gitter ohne zusätzliche Bottom-Margins */
.contact-form form > .field { 
    grid-column: 1 / -1; 
    margin-bottom: 0;
}

/* Name + E-Mail nebeneinander */
.contact-form form > .field:nth-of-type(1),
.contact-form form > .field:nth-of-type(2) {
    grid-column: span 1;
}

/* "Ihre Nachricht" über volle Breite (robust + Fallback) */
.contact-form form > .field:has(textarea) { grid-column: 1 / -1; }
.contact-form form > .field:nth-of-type(3) { grid-column: 1 / -1; } /* Fallback */

/* Aktionen/Buttons über volle Breite */
.contact-form form > .actions { grid-column: 1 / -1; }

.field { margin-bottom: 16px; } /* außerhalb des Formular-Grids weiterhin erlaubt */

label {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 6px;
    display: block;
}

input, textarea {
    width: 100%;
    border-radius: 10px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--text);
    padding: 12px 14px;
    outline: none;
}

input:focus, textarea:focus {
    box-shadow: 0 0 0 3px var(--input-focus);
    border-color: transparent;
}

textarea {
    min-height: 160px;
    resize: vertical;
}

/* Button und Hinweis */
.actions {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-top: 14px;
}

.btn {
    background: var(--button-bg);
    color: #fff;
    padding: 12px 18px;
    border-radius: 12px;
    font-weight: 600;
    border: none;
    cursor: pointer;
}
.btn:hover { background: var(--button-bg-hover); }

.hint {
    font-size: 13px;
    color: var(--muted);
    background: rgba(0,0,0,.2);
    border: 1px solid var(--card-border);
    padding: 10px 12px;
    border-radius: 999px;
}

/* (unverändert) – zusätzlicher allgemeiner Mobile-Block */
@media (max-width: 900px) {
  .contact__grid {
    grid-template-columns: 1fr; /* Eine Spalte für mobile Ansicht */
  }
  .contact-form form {
    grid-template-columns: 1fr; /* Formular-Felder untereinander auf Mobile */
  }
}

/* Footer */
.footer {
  height:120px;
  background:#fff;
  border-top:1px solid #e5e7eb;
  display:flex;
  align-items:center;
  color:#000; /* gesamte Footer-Textfarbe schwarz */
}
.foot {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:18px;
  width:100%;
}
.foot .left small {
  display:block;
  color:#000; /* überschreibt var(--muted) (weiß) */
}
.foot .mid img {
  height:80px;
  object-fit:contain;
  display:block;
}
.foot .right {
  justify-self:end;
  display:flex;
  gap:14px;
  align-items:center;
}
.foot .right a {
  font-weight:700;
  text-decoration:underline; /* Farbe erbt #000 vom Footer */
}