/* ===================================================================
   BEKLOG Logistics GmbH
   Warmes Papier, Anthrazit, Markenrot als Akzent.
   Aufbau: 1 Grundlagen · 2 Elemente · 3 Kopf · 4 Abschnitte · 5 Fuß · 6 Umbrüche
   =================================================================== */

/* ---------- 1. Grundlagen ---------------------------------------------- */
:root {
  /* Farben */
  --tinte:        #17191c;   /* Überschriften, Fuß */
  --tinte-weich:  #33383d;   /* Fließtext */
  --grau:         #64696f;   /* Nebentext */
  --papier:       #fbfaf8;   /* Grundfläche */
  --papier-warm:  #f2efea;   /* getönte Abschnitte */
  --linie:        #e0dbd4;   /* Haarlinien */
  --linie-stark:  #c9c3ba;
  --rot:          #da0e17;   /* Markenrot */
  --rot-tief:     #ae0b12;   /* Hover, Text auf Papier */

  /* Maße */
  --breite: 1408px;
  --rand: clamp(1.25rem, 5vw, 4rem);
  --luft-klein: clamp(2.5rem, 5vw, 4rem);
  --luft: clamp(4rem, 8vw, 7rem);

  /* Schrift */
  --serifenlos: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --titel: "Libre Franklin", "Inter", system-ui, sans-serif;
}

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

/* schlaegt spaetere display-Regeln (z. B. .mobilnav im Umbruch) */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte-weich);
  font-family: var(--serifenlos);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--titel);
  color: var(--tinte);
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin: 0 0 .75rem;
  text-wrap: balance;
  hyphens: auto;                 /* deutsche Komposita brechen sauber */
}
h1 { font-size: clamp(2rem, 1.35rem + 2.5vw, 3.15rem); font-weight: 700; line-height: 1.12; }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.15rem); font-weight: 700; }
h3 { font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.005em; }

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }

::selection { background: var(--rot); color: #fff; }

:focus-visible {
  outline: 2px solid var(--rot);
  outline-offset: 3px;
}

.wrap {
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--tinte); color: #fff; padding: .75rem 1.25rem;
}
.skip:focus { left: 0; }

.eyebrow {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grau);
  margin: 0 0 1.25rem;
}

.prosa p { max-width: 62ch; }
.prosa h3 { margin-top: 1.75rem; }
.prosa h3:first-child { margin-top: 0; }

/* ---------- 2. Elemente ------------------------------------------------ */
.button {
  display: inline-block;
  background: var(--rot);
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  padding: 1rem 1.6rem;
  border: 0;
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease;
}
.button:hover { background: var(--rot-tief); }
.button--block { display: block; text-align: center; }

.textlink {
  display: inline-block;
  color: var(--tinte);
  font-weight: 600;
  text-decoration: none;
  padding-bottom: .2rem;
  border-bottom: 2px solid var(--rot);
  transition: color 160ms ease;
}
.textlink:hover { color: var(--rot-tief); }

.liste li {
  position: relative;
  padding: .55rem 0 .55rem 1.15rem;
  border-bottom: 1px solid var(--linie);
}
.liste li::before {
  content: "";
  position: absolute; left: 0; top: 1.35rem;
  width: .4rem; height: 1px;
  background: var(--linie-stark);
}
.liste--haken li::before { background: var(--rot); width: .55rem; }

abbr[title] { color: var(--rot-tief); text-decoration: none; border: 0; }

/* ---------- 3. Kopfbereich --------------------------------------------- */
.utility {
  background: var(--tinte);
  color: #b9bcc0;
  font-size: .8125rem;
}
.utility__row {
  display: flex; flex-wrap: wrap; gap: .25rem 1.5rem;
  align-items: center; justify-content: space-between;
  min-height: 2.5rem;
}
.utility p { margin: 0; }
.utility a { color: #e8e9ea; text-decoration: none; }
.utility a:hover { color: #fff; text-decoration: underline; }
.utility__links { display: flex; align-items: center; gap: 1.25rem; }
.utility__sep { width: 1px; height: .875rem; background: #3a3f45; }
@media (max-width: 620px) { .utility__place { display: none; } }

.masthead {
  position: sticky; top: 0; z-index: 40;
  background: var(--papier);
  border-bottom: 1px solid var(--linie);
}
.masthead__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem;
  min-height: 5.25rem;
}
.masthead__logo { display: inline-flex; align-items: center; padding-block: .45rem; }
.masthead__logo img { height: 2.25rem; width: auto; }

.mainnav ul { display: flex; gap: 1.75rem; }
.mainnav a {
  display: block;
  font-size: .96875rem;
  font-weight: 500;
  color: var(--tinte-weich);
  text-decoration: none;
  padding: .35rem 0;
  border-bottom: 2px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.mainnav a:hover { color: var(--tinte); border-bottom-color: var(--rot); }

.masthead__cta { display: flex; align-items: center; gap: 1rem; }
.masthead__cta .button { padding: .8rem 1.25rem; }

.burger {
  display: none; align-items: center; gap: .5rem;
  background: none; border: 1px solid var(--linie-stark); border-radius: 2px;
  padding: .6rem .8rem; min-height: 2.75rem;
  font: inherit; font-size: .875rem; font-weight: 600; color: var(--tinte);
  cursor: pointer;
}
.burger__bars, .burger__bars::before, .burger__bars::after {
  display: block; width: 1.1rem; height: 2px; background: var(--tinte);
}
.burger__bars { position: relative; }
.burger__bars::before, .burger__bars::after { content: ""; position: absolute; left: 0; }
.burger__bars::before { top: -.35rem; }
.burger__bars::after { top: .35rem; }
.burger[aria-expanded="true"] .burger__bars { background: transparent; }
.burger[aria-expanded="true"] .burger__bars::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars::after { top: 0; transform: rotate(-45deg); }

.mobilnav { display: none; border-top: 1px solid var(--linie); background: var(--papier); }
.mobilnav a { display: block; text-decoration: none; }
.mobilnav > ul > li > a {
  padding: .95rem var(--rand);
  border-bottom: 1px solid var(--linie);
  font-weight: 500; color: var(--tinte);
}
.mobilnav__foot { padding: 1.25rem var(--rand) 1.75rem; }
.mobilnav__foot p { margin: 1rem 0 0; font-size: .9375rem; }

/* ---------- 4. Abschnitte ---------------------------------------------- */
.block { padding-block: var(--luft); }
.block--getoent { background: var(--papier-warm); }
.block__kopf { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.block__kopf p { color: var(--grau); margin-top: 1rem; }

/* Einstieg */
.intro { padding-block: clamp(2.5rem, 5vw, 4.5rem) 0; }
.intro__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 1000px) {
  .intro__grid { grid-template-columns: 1fr .82fr; gap: 4.5rem; }
}
.intro__lead {
  font-size: 1.1875rem;
  color: var(--tinte-weich);
  max-width: 40rem;
  margin-top: 1.5rem;
}
.intro__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem;
  margin: 2rem 0 0;
}
.intro__assurance {
  margin: 2.25rem 0 0; padding-top: 1.25rem;
  border-top: 1px solid var(--linie);
  font-size: .9375rem; color: var(--grau);
}
.intro__bild img { width: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
@media (max-width: 999px) {
  .intro__bild img { aspect-ratio: 16 / 10; }
}

/* Zwei Spalten: Überschrift links, Inhalt rechts */
.zwei-spalten { display: grid; gap: 1.5rem clamp(2rem, 6vw, 5rem); }
@media (min-width: 900px) {
  .zwei-spalten { grid-template-columns: 21rem 1fr; }
  .zwei-spalten__links h2 { position: sticky; top: 7.5rem; }
}
.zwei-spalten__links h2 { padding-top: .75rem; border-top: 3px solid var(--rot); }

.fakten { margin: 2.5rem 0 0; display: grid; gap: 0; max-width: 34rem; }
.fakten div {
  display: grid; grid-template-columns: 12rem 1fr; gap: 1rem;
  padding: .7rem 0; border-top: 1px solid var(--linie);
  font-size: .9375rem;
}
.fakten div:last-child { border-bottom: 1px solid var(--linie); }
.fakten dt { color: var(--grau); }
.fakten dd { margin: 0; color: var(--tinte); font-weight: 500; }
@media (max-width: 560px) {
  .fakten div { grid-template-columns: 1fr; gap: .1rem; }
}

/* Leistungen als redaktionelle Zeilen */
.leistungen { border-top: 1px solid var(--linie-stark); }
.leistungen li {
  display: grid; gap: .25rem 2.5rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--linie);
}
@media (min-width: 760px) {
  .leistungen li { grid-template-columns: 4.5rem 1fr; padding: 1.9rem 0; }
}
.leistungen__nr {
  font-family: var(--titel);
  font-size: .875rem; font-weight: 600; color: var(--grau);
  padding-top: .3rem; letter-spacing: .04em;
}
.leistungen__inhalt h3 { margin-bottom: .35rem; }
.leistungen__inhalt p { max-width: 58ch; color: var(--grau); margin: 0; }
.leistungen li { transition: background 160ms ease; }
.leistungen li:hover { background: rgba(23, 25, 28, .025); }
.leistungen li:hover .leistungen__nr { color: var(--rot); }

/* Deutschland–Türkei */
.tuerkei { padding-block: var(--luft); background: var(--papier); }

.tuerkei__oben { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 900px) {
  .tuerkei__oben { grid-template-columns: minmax(0, .72fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); }
}
.tuerkei__bild img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.tuerkei__bild figcaption {
  margin-top: .7rem; font-size: .8125rem; color: var(--grau);
  padding-left: .9rem; border-left: 2px solid var(--rot);
}
.tuerkei__einstieg h2 { padding-top: .75rem; border-top: 3px solid var(--rot); }
.tuerkei__lead { font-size: 1.1875rem; color: var(--tinte-weich); max-width: 44ch; }
.richtung { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--linie); }
.richtung h3 { margin-bottom: .4rem; }
.richtung p { margin: 0; color: var(--grau); max-width: 60ch; }

/* Wegstrecke mit dem Lkw aus der Firmensignatur */
.strasse {
  display: flex; align-items: center; gap: clamp(.75rem, 2vw, 1.75rem);
  margin-block: clamp(2.5rem, 5vw, 4rem);
}
.strasse__ort {
  margin: 0; flex: none;
  font-family: var(--titel); font-size: .8125rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--grau);
}
.strasse__ort--ziel { color: var(--tinte); }
.strasse__bahn {
  flex: 1 1 auto; min-width: 0;
  border-bottom: 2px solid var(--tinte);
  padding-bottom: .3rem;
}
.strasse__bahn img {
  width: 100%; max-width: 34rem; height: auto;
  margin-inline: auto;
}
/* schmale Schirme: Orte in eine Zeile, die Strecke darunter ueber die volle Breite */
@media (max-width: 700px) {
  .strasse { flex-wrap: wrap; justify-content: space-between; row-gap: 1rem; }
  .strasse__bahn { order: 3; flex: 1 0 100%; }
}

.tuerkei__themen { display: grid; gap: clamp(1.75rem, 3vw, 3rem); }
@media (min-width: 820px) { .tuerkei__themen { grid-template-columns: repeat(3, 1fr); } }
.thema h3 {
  padding-bottom: .6rem; margin-bottom: .35rem;
  border-bottom: 2px solid var(--tinte);
}
.thema p { color: var(--grau); max-width: 46ch; }
.thema .liste li { font-size: .96875rem; }
.thema__hinweis { margin-top: 1.1rem; font-size: .9375rem; }
.thema__cta { margin-top: 1.25rem; }

/* Relationen */
.relationen { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); }
@media (min-width: 760px) { .relationen { grid-template-columns: repeat(3, 1fr); } }
.relationen h3 {
  padding-bottom: .6rem; margin-bottom: .35rem;
  border-bottom: 2px solid var(--tinte);
}
.relationen .liste li { font-size: .96875rem; }

/* Versetzte Bild/Text-Abschnitte */
.versatz { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) {
  .versatz { grid-template-columns: minmax(0, .78fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); }
  .versatz--gedreht { grid-template-columns: minmax(0, 1fr) minmax(0, .78fr); }
  .versatz--gedreht .versatz__text { order: 1; }
  .versatz--gedreht .versatz__bild { order: 2; }
}
.versatz__bild img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.versatz__text h2 { padding-top: .75rem; border-top: 3px solid var(--rot); }
.versatz__text .liste { margin: 1.5rem 0; }

/* Gründe für die Zusammenarbeit */
.gruende li { padding: 1.4rem 0; border-top: 1px solid var(--linie); }
.gruende li:first-child { border-top: 0; padding-top: 0; }
.gruende h3 { margin-bottom: .3rem; }
.gruende p { margin: 0; color: var(--grau); max-width: 58ch; }

/* Ablauf */
.ablauf { display: grid; gap: 0; }
@media (min-width: 820px) {
  .ablauf { grid-template-columns: repeat(4, 1fr); gap: 2.5rem; }
}
.ablauf li {
  padding-top: 1.1rem;
  border-top: 2px solid var(--tinte);
}
@media (max-width: 819px) {
  .ablauf li { border-top: 1px solid var(--linie); padding: 1.25rem 0; }
  .ablauf li:first-child { border-top: 2px solid var(--tinte); }
}
.ablauf__nr {
  display: block;
  font-family: var(--titel); font-size: .8125rem; font-weight: 600;
  letter-spacing: .1em; color: var(--rot-tief); margin-bottom: .4rem;
}
.ablauf h3 { margin-bottom: .35rem; }
.ablauf p { margin: 0; font-size: .9375rem; color: var(--grau); }

/* Menschen */
.menschen { padding-block: var(--luft); background: var(--papier-warm); }

/* Kontakt */
.kontakt { padding-block: var(--luft); border-top: 1px solid var(--linie); }
.kontakt__grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 960px) { .kontakt__grid { grid-template-columns: 22rem 1fr; } }
.kontakt__intro h2 { padding-top: .75rem; border-top: 3px solid var(--rot); }
.kontakt__lead { color: var(--grau); }

.visitenkarte { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--linie); }
.visitenkarte__name { font-family: var(--titel); font-weight: 700; color: var(--tinte); margin-bottom: 1rem; }
.visitenkarte dl { margin: 0; display: grid; gap: .9rem; }
.visitenkarte dt {
  font-size: .75rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--grau);
}
.visitenkarte dd { margin: .1rem 0 0; font-size: .96875rem; color: var(--tinte); }
.visitenkarte dd a { color: var(--tinte); }
.visitenkarte .offen { color: var(--grau); font-style: italic; }
.visitenkarte__social { display: flex; gap: 1.25rem; margin-top: 1.5rem; font-size: .9375rem; font-weight: 500; }

/* Formular */
.anfrage__feldgruppe { margin-bottom: 2.25rem; }
.anfrage__legende {
  font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--grau); margin: 0 0 1rem; padding-bottom: .6rem;
  border-bottom: 1px solid var(--linie);
}
.anfrage__feldgruppe { display: grid; gap: 1.25rem 1.5rem; }
@media (min-width: 620px) {
  .anfrage__feldgruppe { grid-template-columns: 1fr 1fr; }
  .anfrage__legende { grid-column: 1 / -1; }
  .feld--breit { grid-column: 1 / -1; }
}
.feld label {
  display: block; font-size: .9375rem; font-weight: 500;
  color: var(--tinte); margin-bottom: .4rem;
}
.feld input, .feld select, .feld textarea {
  width: 100%;
  font: inherit; font-size: 1rem;
  color: var(--tinte);
  background: #fff;
  border: 1px solid var(--linie-stark);
  border-radius: 2px;
  padding: .8rem .9rem;
  min-height: 3rem;
  transition: border-color 160ms ease;
}
.feld textarea { min-height: 7rem; resize: vertical; }
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: var(--grau); }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  border-color: var(--tinte); outline: 2px solid var(--rot); outline-offset: 1px;
}
.feld input::placeholder, .feld textarea::placeholder { color: #9aa0a6; }

.fehler {
  display: none;
  margin: .45rem 0 0; font-size: .875rem; color: var(--rot-tief);
}
.feld--fehlerhaft .fehler { display: block; }
.feld--fehlerhaft input,
.feld--fehlerhaft select,
.feld--fehlerhaft textarea { border-color: var(--rot); }

.feld--kasten { background: var(--papier-warm); padding: 1.1rem 1.25rem; }
.einwilligung { display: flex; gap: .75rem; align-items: flex-start; font-weight: 400; margin: 0; }
.einwilligung input { width: 1.15rem; height: 1.15rem; min-height: 0; margin-top: .3rem; flex: none; accent-color: var(--rot); }
.einwilligung span { font-size: .9375rem; line-height: 1.6; color: var(--tinte-weich); }
.einwilligung a { color: var(--tinte); }

.anfrage__abschluss {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
  margin-top: 1.75rem;
}
.anfrage__hinweis { margin: 0; font-size: .875rem; color: var(--grau); }
.anfrage__status { margin: 1.25rem 0 0; }
.anfrage__status:not(:empty) {
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--rot);
  background: var(--papier-warm);
  font-size: .96875rem;
}

/* ---------- 5. Fuß ------------------------------------------------------ */
.fuss {
  background: var(--tinte);
  color: #a8adb3;
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  font-size: .9375rem;
}
.fuss__grid { display: grid; gap: 2.5rem; }
@media (min-width: 760px) { .fuss__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .fuss__grid { grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 3rem; } }
.fuss__marke img { height: 2.1rem; width: auto; margin-bottom: 1.25rem; }
.fuss__marke p { max-width: 32ch; }
.fuss h2 {
  font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; margin-bottom: 1rem;
}
.fuss__spalte li { margin-bottom: .55rem; }
.fuss a { color: #cfd3d7; text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss address { font-style: normal; line-height: 1.65; }
.fuss__unten {
  display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between;
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid #2c3136;
  font-size: .875rem;
}
.fuss__unten ul { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.fuss__unten p { margin: 0; }

/* ---------- 6. Umbrüche ------------------------------------------------- */
@media (max-width: 940px) {
  .mainnav, .masthead__cta .button { display: none; }
  .burger { display: inline-flex; }
  .mobilnav { display: block; }
  .masthead__row { min-height: 4.5rem; }
}

/* auf Touch-Geraeten grosszuegigere Trefferflaechen */
@media (max-width: 940px) {
  .textlink { padding-block: .55rem .5rem; }
  .visitenkarte dd a,
  .visitenkarte__social a,
  .fuss__spalte a,
  .fuss address a,
  .fuss__unten a { display: inline-block; padding-block: .5rem; }
  .fuss__unten ul { gap: .25rem 1.5rem; }
  .visitenkarte dl { gap: .5rem; }
  .fuss__spalte li { margin-bottom: 0; }
  .einwilligung input { width: 1.35rem; height: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

@media print {
  .utility, .masthead, .mobilnav, .anfrage, .fuss__unten { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .tuerkei__bild, .versatz__bild, .intro__bild { break-inside: avoid; }
}