/* ============================================
   UFO Transports – style.css
   Fonts: Inter (Text) + Sora (Headings/UI)
   Lokal eingebunden für DSGVO-Konformität –
   siehe assets/fonts/README.txt für die Download-Links.
   ============================================ */

/* ---- Fonts (lokal, DSGVO-konform) ---- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/inter-400.woff2") format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/inter-500.woff2") format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/inter-600.woff2") format('woff2');
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/sora-500.woff2") format('woff2');
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/sora-600.woff2") format('woff2');
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/sora-700.woff2") format('woff2');
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/fonts/sora-800.woff2") format('woff2');
}

/* ---- Reset & Basis ---- */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  color: #0B2228;
  line-height: 1.6;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
a { color: #0E9C8C; text-decoration: none; }
a:hover { color: #0E3A44; }

/* ---- Navigation ---- */
a.ufo-navlink { color: #0E3A44; font-weight: 500; font-size: 15px; }
a.ufo-navlink:hover { color: #0E9C8C; }

.ufo-nav-links { display: flex; align-items: center; gap: 28px; }

.ufo-burger {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.ufo-burger span {
  display: block;
  width: 24px;
  height: 2.5px;
  background: #0E3A44;
  margin: 5px 0;
  border-radius: 2px;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: Sora, sans-serif;
  font-weight: 600;
  font-size: 15px;
  padding: 13px 22px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: .18s;
  white-space: nowrap;
}
.btn--primary { background: #14B8A6; color: #03302B; }
.btn--primary:hover { background: #0E9C8C; transform: translateY(-1px); }

.btn--outline { border-color: #DCE7E7; background: transparent; color: #0E3A44; }
.btn--outline:hover { border-color: #0E3A44; background: #EDF3F3; }

.btn--block { width: 100%; justify-content: center; margin-top: 6px; }

.ufo-hide-mobile { display: inline-flex; }

/* ---- Logo-Platzhalter (bis echtes Logo da ist) ---- */
.ufo-logo-placeholder {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: #EDF3F3;
  color: #0E3A44;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Sora, sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .04em;
  flex-shrink: 0;
}
.ufo-logo-placeholder--footer { width: 46px; height: 46px; background: rgba(255,255,255,.08); color: #fff; }

/* ---- Route-Card (Hero) ---- */
@keyframes ufo-dash { to { stroke-dashoffset: -44; } }
.ufo-dash { animation: ufo-dash 1.1s linear infinite; }

/* ---- Leistungen-Karten ---- */
.ufo-card {
  background: #F6FAFA;
  border: 1px solid #DCE7E7;
  border-radius: 18px;
  padding: 24px 22px;
  transition: .2s;
}
.ufo-card:hover {
  border-color: #14B8A6;
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -24px rgba(14,58,68,.35);
}

/* ---- Formular (Kontakt) ---- */
.form-input {
  width: 100%;
  padding: 12px 13px;
  border: 1.5px solid #DCE7E7;
  border-radius: 10px;
  font-family: inherit;
  font-size: 15px;
  color: #0B2228;
  background: #F6FAFA;
  transition: .15s;
}
.form-input:focus {
  outline: none;
  border-color: #14B8A6;
  background: #fff;
}
.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #0E3A44;
  margin-bottom: 6px;
}
.form-field { margin-bottom: 14px; }

/* ---- Footer-Links ---- */
.footer-link { color: #a9c6c4; }
.footer-link:hover { color: #fff; }

/* ---- Kontakt-Sektion: E-Mail-Link (heller Hintergrund) ---- */
.kontakt-email {
  font-family: Sora, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  word-break: break-word;
}
.kontakt-email:hover { color: #14B8A6; }

/* ---- Layout-Klassen ---- */
.ufo-section { padding: 72px 0; }
.ufo-grid4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.ufo-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; padding: 70px 0 64px; }
.ufo-k-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.ufo-f-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 34px; }
.ufo-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ---- Responsive ---- */
@media (max-width: 960px) {
  .ufo-grid4 { grid-template-columns: repeat(2,1fr); }
  .ufo-hero-grid, .ufo-k-grid, .ufo-f-grid { grid-template-columns: 1fr; }
  .ufo-route-card { order: -1; }
}

@media (max-width: 720px) {
  .ufo-nav-links {
    display: none;
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-bottom: 1px solid #DCE7E7;
    padding: 8px 0;
    z-index: 60;
  }
  .ufo-nav-links.open { display: flex; }
  .ufo-nav-links a { padding: 14px 22px; border-bottom: 1px solid #EDF3F3; }
  .ufo-hide-mobile { display: none; }
  .ufo-burger { display: block; }
  .ufo-two { grid-template-columns: 1fr; }
  .ufo-section { padding: 56px 0; }
}

@media (max-width: 460px) {
  .ufo-grid4 { grid-template-columns: 1fr; }
  .ufo-brand-sub { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---- Rechtstext-Seiten (Impressum / Datenschutz) ---- */
.legal-header {
  border-bottom: 1px solid #DCE7E7;
}
.legal-header-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.legal-back {
  font-family: Sora, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #0E3A44;
}
.legal-back:hover { color: #0E9C8C; }

.legal-main {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 22px 90px;
}
.legal-main h1 {
  font-family: Sora, sans-serif;
  letter-spacing: -.02em;
  font-size: clamp(28px, 4.5vw, 40px);
  color: #0E3A44;
  margin: 0 0 8px;
  font-weight: 700;
}
.legal-updated {
  font-size: 13px;
  color: #7fa19f;
  margin: 0 0 40px;
}
.legal-main h2 {
  font-family: Sora, sans-serif;
  letter-spacing: -.01em;
  font-size: 19px;
  color: #0E3A44;
  margin: 34px 0 10px;
  font-weight: 700;
}
.legal-main h3 {
  font-family: Sora, sans-serif;
  font-size: 15.5px;
  color: #0E3A44;
  margin: 20px 0 8px;
  font-weight: 600;
}
.legal-main p {
  font-size: 15.5px;
  color: #33484A;
  margin: 0 0 14px;
}
.legal-main ul {
  margin: 0 0 14px;
  padding-left: 22px;
}
.legal-main li {
  font-size: 15.5px;
  color: #33484A;
  margin-bottom: 6px;
}
.legal-main a { color: #0E9C8C; }
.legal-main a:hover { color: #0E3A44; }
.legal-address {
  font-style: normal;
  font-size: 15.5px;
  color: #33484A;
  line-height: 1.7;
  margin: 0 0 20px;
}
.legal-todo {
  background: #FFF7E6;
  border: 1px solid #F0D9A0;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
  color: #6B5100;
  margin: 0 0 24px;
}