/* DSW Logistik – Übergangsseite im Stil der neuen Website (Marineblau, Gelb, schmale Versalien) */
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url(/fonts/barlow-condensed-700.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-display: swap; src: url(/fonts/barlow-condensed-800.woff2) format("woff2"); }
:root {
  --bg: #0b1829; --bg-2: #13284a; --karte: #10223b; --feld: #1d3456;
  --ink: #ffffff; --ink-2: #b9c4d3; --ink-3: #7f8da1; --line: rgba(255,255,255,.14);
  --gelb: #f4c20d; --gelb-ink: #0b1829;
  --display: "Barlow Condensed", "Bahnschrift", "Arial Narrow", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
svg { max-width: 100%; }
.breite { max-width: 1320px; margin: 0 auto; padding: 0 32px; }

/* Überschriften: schmal, fett, Versalien */
h1, h2, h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; line-height: .92; letter-spacing: -.005em; margin: 0; font-stretch: condensed; }
h1 { font-size: clamp(64px, 10.5vw, 150px); }
h2 { font-size: clamp(44px, 6vw, 84px); }
h3 { font-size: clamp(28px, 2.6vw, 38px); line-height: 1; }
.label { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 14px; }
.label.gelb { color: var(--gelb); letter-spacing: .06em; text-transform: none; font-size: 13px; }
.punkt::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--gelb); margin-right: 10px; vertical-align: 1px; }

/* Knöpfe */
.btn { display: inline-flex; align-items: center; gap: 10px; background: var(--gelb); color: var(--gelb-ink); border: 1px solid var(--gelb);
       border-radius: 999px; padding: 12px 24px; font: inherit; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; transition: filter .2s, background .2s; }
.btn:hover { filter: brightness(1.08); }
.btn.rahmen { background: transparent; color: var(--ink); border-color: rgba(255,255,255,.55); }
.btn.rahmen:hover { background: rgba(255,255,255,.08); filter: none; }
.btn .pfeil { transition: transform .2s; }
.btn:hover .pfeil { transform: translateX(3px); }

/* Navigation */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 20; transition: background .3s, border-color .3s; border-bottom: 1px solid transparent; }
.topbar.fest { background: rgba(11,24,41,.88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: var(--line); }
.topbar .innen { max-width: 1320px; margin: 0 auto; padding: 0 32px; height: 76px; display: flex; align-items: center; gap: 32px; }
.topbar .logo { display: block; width: 190px; color: #fff; line-height: 0; flex: none; }
.topbar .logo svg { width: 100%; height: auto; }
.topbar nav { flex: 1; display: flex; justify-content: center; gap: 34px; }
.topbar nav a { text-decoration: none; font-size: 15px; color: rgba(255,255,255,.88); }
.topbar nav a:hover { color: var(--gelb); }
.topbar .btn { padding: 9px 20px; font-size: 14px; }
.menue { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; background: transparent; color: #fff; cursor: pointer; }
.menue span { display: block; width: 22px; height: 2px; background: currentColor; margin: 6px auto; transition: transform .25s; }
.menue[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.menue[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* Einstieg */
.held { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
        background:
          radial-gradient(70% 60% at 62% 32%, rgba(120,170,230,.20), transparent 70%),
          linear-gradient(180deg, #0f2442 0%, #0b1829 78%); }
.regale { position: absolute; inset: 0; opacity: .5; pointer-events: none; }
.held .gross-logo { position: absolute; right: max(32px, calc((100vw - 1320px) / 2 + 32px)); top: 34%; transform: translateY(-50%); width: min(40vw, 580px); color: #fff; opacity: .95; }
.held .gross-logo svg { width: 100%; height: auto; filter: drop-shadow(0 20px 60px rgba(0,0,0,.45)); }
.held .breite { position: relative; width: 100%; padding-top: 140px; padding-bottom: 40px; }
.held h1 { max-width: 900px; }
.held .fuss { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.held .fuss p { margin: 0; max-width: 430px; color: rgba(255,255,255,.9); font-size: 15px; }
.reihe { display: flex; gap: 10px; flex-wrap: wrap; }

/* Leistungen */
section { padding: 120px 0; }
.kopf { display: grid; grid-template-columns: 1fr 3fr; align-items: end; gap: 24px; margin-bottom: 48px; }
.kopf .label { margin: 0 0 8px; }
.band { position: relative; border-radius: 4px; overflow: hidden; min-height: 340px; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding: 56px;
        background: linear-gradient(100deg, rgba(11,24,41,.92) 0%, rgba(19,40,74,.75) 55%, rgba(19,40,74,.35) 100%),
                    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 80px), var(--bg-2); }
.band .nr { position: absolute; top: 28px; left: 56px; font-family: var(--mono); font-size: 12px; color: var(--gelb); }
.band h3 { font-size: clamp(54px, 7vw, 96px); line-height: .9; }
.band p { color: var(--ink-2); margin: 16px 0 0; max-width: 520px; }
.band .kisten { position: absolute; right: 0; top: 0; bottom: 0; width: 46%; opacity: .55; pointer-events: none; }
.ffn { position: relative; background: var(--gelb); color: var(--gelb-ink); width: 330px; flex: none; padding: 22px 24px; border-radius: 2px; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.ffn header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.ffn b { font-family: var(--display); font-weight: 800; font-size: 28px; letter-spacing: .01em; }
.ffn small { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.ffn ul { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.ffn li { padding: 9px 0; border-top: 1px solid rgba(11,24,41,.2); }
.karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 22px; }
.karte .bild { aspect-ratio: 16 / 10.4; border-radius: 4px; background: var(--karte); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.karte .bild::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 70% at 50% 100%, rgba(244,194,13,.10), transparent 70%), repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 40px); }
.karte .bild svg { width: 46%; height: auto; color: #dfe7f1; position: relative; }
.karte .nr { font-family: var(--mono); font-size: 12px; color: var(--gelb); margin: 22px 0 8px; }
.karte p { color: var(--ink-2); margin: 10px 0 14px; font-size: 15px; }
.karte a { font-weight: 600; font-size: 14px; text-decoration: none; }
.karte a:hover { color: var(--gelb); }

/* Standort */
.standort { border-top: 1px solid var(--line); }
.spalten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 48px; }
.spalten > div { border-top: 1px solid var(--line); padding-top: 22px; }
.spalten small { display: block; font-family: var(--mono); font-size: 13px; color: var(--gelb); margin-bottom: 12px; }
.spalten p { margin: 0; line-height: 1.7; }
.spalten a { text-decoration: none; }
.spalten a:hover { color: var(--gelb); }

/* Kontakt */
.kontakt { background: var(--bg-2); }
.kontakt .raster { display: grid; grid-template-columns: 1fr 1.3fr; gap: 64px; }
.kontakt .text-l p { color: var(--ink-2); margin: 18px 0 0; }
.kontakt .text-l p b { color: #fff; font-weight: 600; }
.kontakt .text-l a { text-decoration: none; }
form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
form .ganz { grid-column: 1 / -1; }
form label { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }
form input, form select, form textarea { width: 100%; background: var(--feld); border: 1px solid rgba(255,255,255,.12); border-radius: 3px; color: #fff; font: inherit; font-size: 15px; padding: 12px 14px; }
form textarea { min-height: 140px; resize: vertical; }
form input:focus, form select:focus, form textarea:focus { outline: 2px solid var(--gelb); outline-offset: -1px; border-color: transparent; }
form .hilfe { font-size: 13px; color: var(--ink-3); margin: 8px 0 0; }

/* Fußzeile */
footer { background: #08121f; border-top: 1px solid var(--line); }
footer .innen { max-width: 1320px; margin: 0 auto; padding: 28px 32px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); }
footer .logo-fuss { width: 120px; color: #fff; line-height: 0; }
footer .logo-fuss svg { width: 100%; height: auto; }
footer nav { flex: 1; display: flex; justify-content: center; gap: 24px; }
footer a { color: var(--ink-2); text-decoration: none; }
footer a:hover { color: var(--gelb); }

/* Unterseiten */
.unterseite .topbar { background: rgba(11,24,41,.95); border-bottom-color: var(--line); }
.text { max-width: 820px; margin: 0 auto; padding: 150px 32px 110px; }
.text h1 { font-size: clamp(56px, 8vw, 96px); margin-bottom: 30px; }
.text h2 { font-size: 28px; margin: 36px 0 8px; }
.text p { color: var(--ink-2); }
.text a { color: var(--gelb); }
.fehlerseite { min-height: 80vh; display: flex; flex-direction: column; justify-content: center; padding: 150px 32px 80px; max-width: 1320px; margin: 0 auto; }
.fehlerseite p { color: var(--ink-2); max-width: 520px; margin: 18px 0 30px; }

/* noch auszufüllende Angaben – vor Veröffentlichung ersetzen */
.platzhalter { background: #fff3c4; color: #5c4400; border: 1px dashed #c99a00; border-radius: 3px; padding: 0 4px; }

/* sanftes Einblenden */
html.js .zeigen { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s ease; }
html.js .zeigen.da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } html.js .zeigen { opacity: 1; transform: none; transition: none; } }

@media (max-width: 1100px) {
  .held .gross-logo { width: 52vw; top: 34%; transform: translateY(-50%); opacity: .9; }
  .karten { grid-template-columns: 1fr 1fr; }
  .band { flex-direction: column; align-items: flex-start; }
  .kontakt .raster { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 820px) {
  .breite, .topbar .innen, footer .innen { padding-left: 20px; padding-right: 20px; }
  .topbar .innen { height: 64px; flex-wrap: wrap; }
  .topbar .logo { width: 140px; }
  .menue { display: block; }
  .topbar nav, .topbar .innen > .btn { display: none; }
  .topbar.offen { background: rgba(11,24,41,.97); }
  .topbar.offen .innen { height: auto; padding-bottom: 20px; }
  .topbar.offen nav { display: flex; flex-direction: column; flex-basis: 100%; gap: 0; order: 3; }
  .topbar.offen nav a { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 34px; padding: 6px 0; }
  .topbar.offen .innen > .btn { display: inline-flex; order: 4; margin-top: 12px; }
  .held .gross-logo { position: relative; right: auto; top: auto; transform: none; width: 78%; margin: 110px 20px 0; }
  .held .breite { padding-top: 34px; }
  section { padding: 80px 0; }
  .kopf { grid-template-columns: 1fr; }
  .band { padding: 64px 24px 24px; min-height: 0; }
  .band .nr { left: 24px; }
  .ffn { width: 100%; }
  .karten, .spalten { grid-template-columns: 1fr; }
  form { grid-template-columns: 1fr; }
  footer nav { justify-content: flex-start; }
  .text { padding-top: 110px; }
}

/* Direktkontakt statt Formular */
.direkt { align-self: end; }
.direkt .weg { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4px 20px; padding: 22px 0; border-top: 1px solid var(--line); text-decoration: none; }
.direkt .weg:last-of-type { border-bottom: 1px solid var(--line); }
.direkt .weg small { grid-column: 1 / -1; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gelb); }
.direkt .weg b { font-family: var(--display); font-weight: 800; text-transform: none; font-size: clamp(30px, 4vw, 54px); line-height: 1; overflow-wrap: anywhere; }
.direkt .weg .pfeil { font-size: 28px; color: var(--gelb); transition: transform .2s; }
.direkt .weg:hover b { color: var(--gelb); }
.direkt .weg:hover .pfeil { transform: translateX(6px); }

/* Variante mit Lager-Video im Einstieg */
.held.mit-video { background: #0b1829; }
.held-video { position: absolute; inset: 0; overflow: hidden; }
.held-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.held-video::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,24,41,.55) 0%, rgba(11,24,41,.15) 35%, rgba(11,24,41,.55) 70%, #0b1829 100%),
              linear-gradient(90deg, rgba(11,24,41,.75) 0%, rgba(11,24,41,.2) 60%, rgba(11,24,41,.35) 100%); }
.held.mit-video .gross-logo { opacity: .9; }
.held.mit-video .gross-logo svg { filter: drop-shadow(0 6px 30px rgba(0,0,0,.6)); }
.video-pause { position: absolute; right: max(32px, calc((100vw - 1320px) / 2 + 32px)); top: 96px; z-index: 3; width: 36px; height: 36px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.6); background: rgba(11,24,41,.35); color: #fff; cursor: pointer; display: grid; place-items: center; }
.video-pause span { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.video-pause.aus span { width: 0; height: 0; border: 0; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.video-pause:hover { border-color: var(--gelb); color: var(--gelb); }
@media (max-width: 820px) { .video-pause { top: 78px; right: 20px; } }