/* ===========================================================================
   Transport Fix GmbH
   Vibe: Soft Structuralism, warm. Helles Papier statt Near-Black.
   Hero: Foto ueber die volle Flaeche, Typo auf massiver Karte darauf.
   Kein Abdunkeln, keine weisse Schrift auf Bild.
   Uebernommen aus der mmmmenu-Referenz: Hairline-Ringe statt Rahmen,
   kleine Bedienelemente, enge Laufweite, keine Scroll-Animation.
   Geaendert gegenueber DESIGN.md: heller, waermer, runder, andere Schrift.
   =========================================================================== */

@font-face {
  font-family: "Jakarta";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

:root {
  color-scheme: light;

  /* Warmes Papier. Kein reines Weiss als Flaeche, kein Schwarz als Tinte. */
  --paper:      #F6F4F0;
  --surface:    #FFFFFF;
  --ink:        #1B1A17;
  --body:       #6C6559;
  --muted:      #9B9285;

  /* Konturen als Ring, nie als border. Warm getoent, nicht schwarz. */
  --hairline:        rgba(27, 26, 23, 0.07);

  /* Markenakzent aus der Bildmarke. Einziger Akzent der Seite. */
  --signal:      #2B5BA7;
  --signal-deep: #21477F;
  --on-signal:   #FFFFFF;

  /* Runder als die Referenz. Konzentrisch: Schale minus Polsterung. */
  --r-shell: 28px;
  --r-core:  22px;
  --r-soft:  14px;
  --r-pill:  9999px;
  --pad-shell: 6px;

  /* Diffuse, warm getoente Schatten. Niemals reines Schwarz. */
  --lift-soft:  0 0 0 1px var(--hairline), 0 2px 4px rgba(27, 26, 23, 0.02), 0 12px 28px -12px rgba(27, 26, 23, 0.10);
  --lift-deep:  0 0 0 1px var(--hairline), 0 4px 10px rgba(27, 26, 23, 0.03), 0 32px 64px -28px rgba(27, 26, 23, 0.22);
  --inner-top:  inset 0 1px 0 rgba(255, 255, 255, 0.9);

  --s-1: 6px;  --s-2: 8px;  --s-3: 16px;  --s-4: 20px;
  --s-5: 32px; --s-6: 56px; --s-7: 72px;  --s-8: 96px; --s-9: 120px;

  --container:    1200px;
  --measure-text: 540px;

  /* Traege, physikalisch wirkende Kurve. Kein ease-in-out. */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur:  0.24s;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: "Jakarta", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 450;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

img, picture, svg { display: block; max-width: 100%; }

h1, h2, h3 { margin: 0; color: var(--ink); text-wrap: balance; font-weight: 700; }
h1 { font-size: clamp(2.35rem, 1.5rem + 3.2vw, 3.4rem); line-height: 1.04; letter-spacing: -0.042em; }
h2 { font-size: clamp(1.9rem, 1.4rem + 1.9vw, 2.6rem); line-height: 1.1;  letter-spacing: -0.038em; }
h3 { font-size: 1.1875rem; line-height: 1.35; letter-spacing: -0.022em; }

p { margin: 0; }
a { color: inherit; }

.soft { color: var(--body); font-weight: 450; font-size: 1.0125rem; line-height: 1.68; max-width: var(--measure-text); }
.meta { color: var(--muted); font-size: 0.875rem; line-height: 1.5; }

.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--s-4); }
@media (min-width: 768px) { .wrap { padding-inline: var(--s-5); } }

/* Grosszuegige Sektionshoehen. Die Seite darf atmen. */
section { padding-block: clamp(3.5rem, 9vw, var(--s-8)); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--signal); color: var(--on-signal);
  padding: 12px 18px; border-radius: 0 0 var(--r-soft) 0;
  font-size: 0.875rem; font-weight: 600; text-decoration: none;
}
.skip:focus { left: 0; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 6px; }

/* ------------------------------------------------- Schwebende Kopfzeile --- */
/* Abgesetzte Pille statt einer Leiste, die oben am Rand klebt. */

.site-header { position: sticky; top: 0; z-index: 40; padding-top: var(--s-3); }
.site-header .bar {
  max-width: var(--container);
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  height: 62px;
  padding: 0 10px 0 var(--s-4);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: saturate(170%) blur(18px);
  -webkit-backdrop-filter: saturate(170%) blur(18px);
  box-shadow: var(--lift-soft), var(--inner-top);
}
@media (max-width: 719px) { .site-header .bar { padding-left: var(--s-3); } }

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand .mark { height: 26px; width: auto; }
.brand .word { height: 14px; width: auto; }

.nav { display: flex; align-items: center; gap: var(--s-4); }
.nav .link {
  display: none;
  font-size: 0.9rem; font-weight: 550; letter-spacing: -0.015em;
  color: var(--body); text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.nav .link:hover { color: var(--ink); }
@media (min-width: 720px) { .nav .link { display: inline; } }

/* ------------------------------------------------------------- Buttons --- */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 8px 10px 8px 22px;
  border: 0; border-radius: var(--r-pill);
  font: inherit; font-size: 0.975rem; font-weight: 600; letter-spacing: -0.015em;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn.no-dot { padding-inline: 22px; }
.btn:active { transform: scale(0.98); }

/* Der Pfeil sitzt nie nackt neben dem Text, sondern in eigenem Kreis. */
.btn .dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--r-pill);
  font-size: 0.95rem; line-height: 1;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.btn:hover .dot { transform: translateX(2px); }

.btn-primary { background: var(--signal); color: var(--on-signal); box-shadow: 0 8px 20px -10px rgba(43, 91, 167, 0.7); }
.btn-primary:hover { background: var(--signal-deep); }
.btn-primary .dot { background: rgba(255, 255, 255, 0.18); }

.btn-quiet { background: var(--surface); color: var(--ink); box-shadow: var(--lift-soft); }
.btn-quiet:hover { box-shadow: var(--lift-deep); }
.btn-quiet .dot { background: rgba(27, 26, 23, 0.05); }

.btn-sm { min-height: 40px; font-size: 0.9rem; padding: 6px 18px; }

/* ---------------------------------------------------------------- Hero --- */
/* Mobil: Das Foto ist ein eigener Block, die Karte steht darunter und ragt
   nur mit ihrer Oberkante ins Bild. Ab 900px liegt die Karte wie bisher
   vollstaendig auf dem Foto. Das Bild bleibt in beiden Faellen hell, es
   braucht weder Abdunkeln noch weisse Schrift.
   Keine Pillen, keine Labels auf dem Foto. */

.hero {
  position: relative;
  isolation: isolate;
  padding: 0;
  /* Wie weit die Karte ins Bild ragt. Entspricht rund 10 Prozent ihrer
     Hoehe auf einem Telefon. */
  --hero-overlap: 2.4rem;
}

.hero-shot {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  aspect-ratio: 4 / 3;
}
.hero-shot picture { display: block; width: 100%; height: 100%; }
.hero-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 58%; }

/* Zarter Aufhellungsverlauf oben, damit die Navigationspille auf hellem
   Himmel sitzt und nicht auf einer Dachkante. Kein Abdunkeln. */
.hero-shot::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(246, 244, 240, 0.55) 0%, rgba(246, 244, 240, 0) 22%);
}

.hero > .wrap {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--hero-overlap));
  padding-bottom: clamp(2rem, 7vw, 3.25rem);
}

.hero-card {
  background: var(--paper);
  border-radius: var(--r-shell);
  padding: clamp(1.4rem, 5vw, 2.9rem);
  max-width: 620px;
  box-shadow: var(--lift-deep);
}

/* Ab hier liegt die Karte wieder auf dem Foto. */
@media (min-width: 900px) {
  .hero {
    min-height: min(88dvh, 780px);
    display: flex;
    align-items: flex-end;
  }
  .hero-shot { position: absolute; inset: 0; z-index: -1; aspect-ratio: auto; }
  .hero > .wrap {
    margin-top: 0;
    padding-block: clamp(7rem, 26vw, 13rem) clamp(1.25rem, 4vw, 3.5rem);
  }
}

.hero h1 {
  font-size: clamp(2.25rem, 1.2rem + 4.4vw, 4rem);
  line-height: 1.0;
  letter-spacing: -0.048em;
  max-width: 12ch;
}
.hero h1 .accent { color: var(--signal); }

.hero .lede {
  margin-top: clamp(0.85rem, 1.8vw, 1.35rem);
  max-width: 44ch;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1rem);
  line-height: 1.6;
  color: var(--body);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(1.25rem, 2.6vw, 1.9rem); }

/* ----------------------------------------------------------- Abschnitt --- */

.head { max-width: 620px; }
.head h2 { margin-top: var(--s-3); }
.head .soft { margin-top: var(--s-3); }

/* Leistungen: breite Leitkarte, darunter zwei gleich breite. Keine leere Zelle. */
.services { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
@media (min-width: 860px) {
  .services { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
}

.svc {
  padding: var(--pad-shell);
  border-radius: var(--r-shell);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: var(--lift-soft);
  transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}
.svc:hover { box-shadow: var(--lift-deep); transform: translateY(-2px); }
.svc > .core {
  border-radius: var(--r-core); overflow: hidden; background: var(--surface);
  display: flex; flex-direction: column; height: 100%;
}
/* Ohne Foto: Icon, Ueberschrift und Text mittig auf einer Achse. */
.svc-body {
  padding: var(--s-6) var(--s-4);
  display: grid; gap: 10px;
  justify-items: center; text-align: center;
}
@media (min-width: 860px) { .svc-body { padding: var(--s-6) var(--s-5); } }
.svc .soft { font-size: 0.9625rem; line-height: 1.65; max-width: 30ch; }

/* Icons aus dem Tabler-Set (MIT), eine Familie, einheitliche Strichstaerke. */
.svc .icon { width: 44px; height: 44px; color: var(--signal); stroke-width: 1.4; margin-bottom: var(--s-2); }



/* Warum wir: zweispaltig. Die Ueberschrift bleibt links stehen, rechts
   laufen die Punkte durch. Bricht die Folge flacher Textbloecke auf. */
.split { display: grid; gap: var(--s-4); }
@media (min-width: 920px) {
  .split { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: var(--s-7); align-items: start; }
  .split-head { position: sticky; top: 104px; }
}
.split-head h2 { max-width: 13ch; }
.split-head .soft { margin-top: var(--s-3); font-size: 0.9625rem; max-width: 34ch; }

.points { display: grid; }
.points .item { padding-block: var(--s-5); box-shadow: inset 0 1px 0 0 var(--hairline); }
.points .item h3 { margin-bottom: 4px; }
.points .item .soft { font-size: 0.9625rem; }

/* Ablauf: drei Schritte, durch Hairlines getrennt statt in Karten gesteckt. */
.steps { display: grid; margin-top: var(--s-6); }
@media (min-width: 840px) {
  .steps { grid-template-columns: repeat(3, 1fr); column-gap: var(--s-6); }
}
.steps .step { padding-block: var(--s-5); box-shadow: inset 0 1px 0 0 var(--hairline); }
.steps .step h3 { margin-bottom: 4px; }
.steps .step .soft { font-size: 0.9625rem; }

/* Kontakt */
.contact-grid { display: grid; gap: var(--s-6); margin-top: var(--s-6); }
@media (min-width: 920px) {
  .contact-grid { grid-template-columns: 1fr 400px; gap: var(--s-7); align-items: start; }
}

/* Nummer und Zeiten nebeneinander, solange beide in eine Zeile passen.
   Sonst rutschen die Zeiten komplett darunter, statt in sich umzubrechen. */
.tel-line { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-decoration: none; }
@media (min-width: 430px) {
  .tel-line { flex-flow: row wrap; align-items: baseline; gap: 4px var(--s-3); }
}
.tel-line .meta { white-space: nowrap; }
.tel-line .num {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.5rem);
  font-weight: 700; letter-spacing: -0.04em; line-height: 1.1; color: var(--ink);
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.tel-line:hover .num { color: var(--signal); }

.detail { display: grid; gap: 3px; padding-block: var(--s-4); box-shadow: inset 0 1px 0 0 var(--hairline); }
.detail .label { font-size: 0.75rem; font-weight: 600; color: var(--muted); letter-spacing: 0.01em; }
.detail .val { font-size: 1.0125rem; font-weight: 550; color: var(--ink); letter-spacing: -0.015em; text-decoration: none; word-break: break-word; }
a.val:hover { color: var(--signal); }
.detail address { font-style: normal; font-size: 1.0125rem; font-weight: 550; color: var(--ink); line-height: 1.5; }

.ask { padding: var(--pad-shell); border-radius: var(--r-shell); background: rgba(255,255,255,0.55); box-shadow: var(--lift-deep); }
.ask > .core { border-radius: var(--r-core); background: var(--surface); padding: var(--s-5); display: grid; gap: var(--s-3); }
.ask .soft { font-size: 0.9625rem; }
.ask .btn { width: 100%; justify-content: space-between; }
.ask .note { font-size: 0.75rem; color: var(--muted); line-height: 1.5; }

/* -------------------------------------------------------------- Footer --- */

.site-footer { padding-block: var(--s-6) var(--s-5); box-shadow: inset 0 1px 0 0 var(--hairline); }
.footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); }
.footer-brand { display: inline-flex; align-items: center; gap: 11px; }
.footer-brand .mark { height: 30px; width: auto; }
.footer-brand .word { height: 16px; width: auto; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.site-footer nav a {
  font-size: 0.9rem; font-weight: 550; color: var(--body); text-decoration: none;
  letter-spacing: -0.015em; transition: color var(--dur) var(--ease);
}
.site-footer nav a:hover { color: var(--ink); }
.footer-bottom {
  margin-top: var(--s-5); padding-top: var(--s-4);
  box-shadow: inset 0 1px 0 0 var(--hairline);
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); justify-content: space-between;
  font-size: 0.8125rem; color: var(--muted);
}

/* -------------------------------------------------------- Rechtsseiten --- */

.legal { padding-block: var(--s-6) var(--s-8); }
.legal .wrap { max-width: 720px; }
.legal h1 { margin-bottom: var(--s-2); }
.legal h2 { font-size: 1.1875rem; letter-spacing: -0.022em; margin-top: var(--s-6); margin-bottom: var(--s-2); }
.legal p, .legal li, .legal address { font-size: 1rem; line-height: 1.72; color: var(--body); }
.legal address { font-style: normal; }
.legal strong { color: var(--ink); font-weight: 650; }
.legal a { color: var(--signal); }
.legal ul { padding-left: 1.1rem; }
.legal li { margin-bottom: var(--s-1); }
.back { display: inline-block; margin-bottom: var(--s-5); font-size: 0.9rem; font-weight: 550; color: var(--body); text-decoration: none; }
.back:hover { color: var(--ink); }

/* ------------------------------------------------------------ Bewegung --- */
/* Bewusst keine Einblendung beim Scrollen. Die Referenz hat null
   Scroll-Animation, und eine Animation, die Inhalte auf opacity 0 setzt,
   verschluckt bei jedem Aussetzer Text und verhindert das Laden von
   lazy-Bildern. Bewegung gibt es nur als Antwort auf eine Handlung. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.001ms !important; }
}