/* ===== Karriere & Rechtliches — Stylesheet =====
   Für: Karriere_Rechtliches.html
   Empfehlung: Diese Datei nach site.css laden (überschreibt Inline-Styles wenn nötig).
*/

/* Variablen */
:root{
  --bg: #ffffff;
  --ink: #0b1220;
  --muted: #64748b;
  --accent: #0b1220;
  --accent-2: #0ea5e9;
  --card: #ffffff;
  --radius: 12px;
  --shadow: 0 12px 30px rgba(2,6,23,.08);
  --wrap: 1100px;
  --gap: 16px;
  --header-h: 72px;
}

/* Grundlegendes */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* Header */
.site-header{
  position:sticky;
  top:0;
  left:0;
  right:0;
  z-index:1200;
  background:transparent;
  transition:background .22s ease, box-shadow .22s ease;
}
.site-header.scrolled{ background: linear-gradient(180deg, rgba(11,18,32,.96), rgba(11,18,32,.96)); box-shadow: 0 2px 10px rgba(2,6,23,.12); }

.site-header .wrap{ display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:clamp(10px,2vw,20px); min-height:var(--header-h); padding-inline:clamp(12px,3vw,36px) }

/* Navigation (split layout) */
nav.split{ grid-column: 1 / 4; display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; white-space:nowrap }
.nav-left{ grid-column:1; justify-self:end; display:flex; gap:clamp(8px,1.5vw,18px); align-items:center; flex-wrap:nowrap; min-width:0 }
.nav-right{ grid-column:3; justify-self:start; display:flex; gap:clamp(8px,1.5vw,18px); align-items:center; flex-wrap:nowrap; min-width:0 }
nav.split a{ color:#fff; padding:8px clamp(10px,1.6vw,14px); border-radius:10px; font-weight:600; text-decoration:none; display:inline-block; white-space:nowrap; font-size:clamp(14px,1.0vw,16px) }
nav.split a:hover{ background: rgba(255,255,255,.04) }
nav.split a.active{ background: linear-gradient(90deg,var(--accent),var(--accent-2)); color:#fff }

/* Menu toggle (mobile) */
.menu-toggle{ display:none; background:transparent; border:0; color:#e6eef8; font-size:18px; padding:8px; border-radius:10px }

/* Hero */
.hero.bg{
  position:relative;
  min-height:56vh;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding-top:calc(var(--header-h) + 8vh);
}
.hero.bg .bg-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; filter:brightness(.6);
}
.overlay{
  position:relative; z-index:5; max-width:960px; margin:0 auto; padding:48px 24px; border-radius:var(--radius);
}
.overlay h1{ margin:0 0 8px; color:#fff; font-size:clamp(28px,4vw,42px); line-height:1.08; font-weight:800 }
.overlay p{ margin:0; color: rgba(255,255,255,.92); font-size:clamp(15px,1.5vw,18px) }

/* Form-Container */
form#bewerbung {
  max-width: 1000px;
  margin: 40px auto 64px;
  background: linear-gradient(135deg, #ffffff, #f9fbff);
  border-radius: 18px;
  padding: 32px;
  box-shadow: 0 12px 32px rgba(14, 25, 43, 0.18);
  border: 1px solid rgba(14, 165, 233, 0.15);
  position: relative;
  overflow: hidden;
}

/* Dekorative Akzentleiste oben */
form#bewerbung::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, #0b1220, #0ea5e9);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

/* Legenden markanter */
form#bewerbung legend {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 16px;
  color: #0b1220;
  border-left: 5px solid #0ea5e9;
  padding-left: 10px;
}

/* Inputs mit stärkerem Fokus-Effekt */
form#bewerbung input[type="text"],
form#bewerbung input[type="email"],
form#bewerbung input[type="tel"],
form#bewerbung select,
form#bewerbung textarea {
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #fff;
  transition: all 0.2s ease;
}
form#bewerbung input:focus,
form#bewerbung select:focus,
form#bewerbung textarea:focus {
  border-color: #0ea5e9;
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.15);
}

/* Submit-Button stärker */
form#bewerbung button[type="submit"] {
  font-size: 16px;
  letter-spacing: 0.5px;
  padding: 14px 22px;
  border-radius: 12px;
  background: orange; /*linear-gradient(90deg, #0ea5e9, #2563eb)*/
  color: #fff;
  font-weight: 800;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
form#bewerbung button[type="submit"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.3);
}

/* Consent / Checkbox box */
.consent-box{
  display:flex; gap:12px; align-items:flex-start; padding:12px; border-radius:10px;
  background:#f8fafc; border:1px solid rgba(15,23,42,0.04);
}
.consent-box p{ margin:0; color:var(--muted) }
.consent-box input[type="checkbox"]{ transform:translateY(2px); margin-right:8px }

/* reCAPTCHA centering */
.g-recaptcha{ display:flex; justify-content:center; margin:12px 0 }

/* Buttons */
form#bewerbung .actions{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:6px }
form#bewerbung button[type="submit"]{
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#fff; border:0; padding:12px 18px; border-radius:10px; font-weight:800; cursor:pointer;
  box-shadow: 0 6px 18px rgba(16,24,40,.12);
  transition: transform .12s ease, box-shadow .12s ease;
}
form#bewerbung button[type="submit"]:hover{ transform:translateY(-2px); box-shadow:0 12px 34px rgba(16,24,40,.16) }

/* Formular-Hinweis */
#form-hint{ margin:0; color:var(--muted); font-size:14px }

/* Fokuszustände (Accessibility) */
input:focus, select:focus, textarea:focus, button:focus, a:focus{
  outline: 3px solid rgba(14,165,233,0.14);
  outline-offset:3px;
  box-shadow: 0 4px 20px rgba(14,165,233,0.06);
}

/* Checkbox focus: remove outline from label, apply to checkbox only */
input[type="checkbox"]:focus {
  outline: none;
  box-shadow: none;
}

/* Rechtliches / Impressum-Abschnitt */
.Impressum, .impressum, .datenschutz{
  max-width:720px; margin: 40px auto; padding: 28px 18px 64px; color: #334155; line-height:1.6;
  background:transparent;
}
.Impressum h2, .impressum h2, .datenschutz h2{ margin-top:0; color:var(--ink) }
.Impressum p, .impressum p, .datenschutz p{ margin:.6em 0 }

/* Footer */
.site-footer{
  background:#0b1220; color:#cbd5e1; padding:36px 0; margin-top:32px;
  border-top-left-radius:12px; border-top-right-radius:12px;
}
.site-footer h4{ color:#fff; margin:0 0 8px }
.site-footer a{ color: #cbd5e1; text-decoration:none }
.site-footer a:hover{ text-decoration:underline }

/* Floating action buttons (fab) */
.fab{ position:fixed; right:16px; bottom:16px; display:flex; flex-direction:column; gap:12px; z-index:1400 }
.fab .fab-btn{ width:54px; height:54px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:orange; color:#fff; text-decoration:none; box-shadow: 0 8px 22px rgba(2,6,23,.12); border:0 }

/* Responsive */
@media (max-width: 900px){
  .nav-left, .nav-right{ display:none } /* Mobile: einfacher */
  .menu-toggle{ display:inline-flex; grid-column: 3/4; justify-self:end }
  nav.split{ position:fixed; top:var(--header-h); left:0; right:0; height:calc(100vh - var(--header-h)); background:rgba(11,18,32,.96); display:none; padding:18px; z-index:1300 }
  nav.split.open{ display:grid }
  .brand-name{ display:inline-block }

  /* Hero kleiner */
  .hero.bg{ min-height:46vh; padding-top: calc(var(--header-h) + 6vh) }
  .overlay{ padding:20px; border-radius:12px }

  /* Form einspaltig */
  .form-grid{ grid-template-columns:1fr }
  form#bewerbung{ padding:18px; margin:18px 12px 40px }
}

/* Kleinere Geräte */
@media (max-width: 480px){
  .overlay{ padding:16px }
  .brand img{ height:40px }
  .fab{ right:12px; bottom:12px }
}

/* Utility: Inline-grid override (falls HTML benutzt inline styles) */
form#bewerbung > fieldset > div[style*="display:grid"]{
  display:grid;
  gap:var(--gap);
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width:720px){
  form#bewerbung > fieldset > div[style*="display:grid"]{ grid-template-columns: 1fr !important }
}

/* End CSS */
/* ===== ENDE Karriere & Rechtliches ===== */