/* Liedtke GmbH — Stylesheet. Alle Farben, Schriften, Größen und Abstände sind hier als CSS-Variablen definiert. */
:root{
  --c-blue:#005192; --c-blue-dark:#003a6e; --c-blue-deep:#00243f; --c-red:#e2001a;
  --c-ink:#11171e; --c-body:#4c5a66; --c-white:#ffffff; --c-bg:#f4f6f8; --c-bg-alt:#eaeef2;
  --c-line:#dde3e9; --c-line-blue:#1b4a7d; --c-line-strong:#b9c3cc; --c-board:#6b7783;
  --c-shadow:rgba(0,36,63,.16);
  --f-head:"Barlow Condensed", "Arial Narrow", sans-serif;
  --f-body:"Barlow", "Helvetica Neue", Helvetica, sans-serif;
  --f-mono:"IBM Plex Mono", "Courier New", monospace;
  --fs-display:62px; --fs-h1:44px; --fs-h2:34px; --fs-h3:21px; --fs-lead:20px;
  --fs-body:17px; --fs-small:15px; --fs-label:12px; --fs-num:13px; --fs-mega:96px;
  --lh-tight:1.04; --lh-head:1.12; --lh-body:1.6;
  --ls-wide:.14em; --ls-head:-.01em; --ls-none:0em;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --b-1:1px; --b-2:2px; --b-3:3px;
  --w-page:1180px; --w-text:62ch; --w-narrow:760px;
  --h-logo:44px; --h-logo-sm:34px; --h-hero:560px; --h-thumb:230px; --h-map:340px; --h-band:180px;
  --z-head:20;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
img{ border:0; }

body{ display:flex; flex-direction:column; min-height:100vh; font-family:var(--f-body); font-size:var(--fs-body); line-height:var(--lh-body); color:var(--c-body); background:var(--c-white); }
a{ text-decoration:none; }
.wrap{ width:100%; max-width:var(--w-page); margin-left:auto; margin-right:auto; padding-left:var(--s-6); padding-right:var(--s-6); }

/* Header */
.site-head{ position:sticky; top:0; z-index:var(--z-head); background:var(--c-blue); border-bottom:var(--b-3) solid var(--c-red); }
.head-inner{ display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:var(--s-5); padding-top:var(--s-3); padding-bottom:var(--s-3); }
.brand{ display:flex; align-items:center; }
.brand-img{ height:var(--h-logo); width:auto; display:block; }
.main-nav{ display:flex; flex-direction:row; align-items:center; gap:var(--s-5); }
.nav-link{ font-family:var(--f-head); font-size:var(--fs-h3); font-weight:500; text-transform:uppercase; letter-spacing:var(--ls-wide); color:var(--c-white); padding-bottom:var(--s-1); border-bottom:var(--b-2) solid transparent; }
.nav-link:hover{ color:var(--c-red); border-bottom-color:var(--c-red); }
.nav-link-on{ border-bottom-color:var(--c-red); }
.head-call{ display:flex; flex-direction:column; align-items:flex-end; }
.head-call-l{ font-family:var(--f-mono); font-size:var(--fs-label); text-transform:uppercase; letter-spacing:var(--ls-wide); color:var(--c-white); opacity:.75; }
.head-call-n{ font-family:var(--f-head); font-size:var(--fs-h3); font-weight:600; color:var(--c-white); }
.burger{ display:none; align-items:center; background:none; border:var(--b-1) solid var(--c-white); padding:var(--s-3) var(--s-4); font-family:var(--f-mono); font-size:var(--fs-label); text-transform:uppercase; letter-spacing:var(--ls-wide); color:var(--c-white); cursor:pointer; }
.mobile-nav{ display:none; flex-direction:column; background:var(--c-blue-dark); border-top:var(--b-1) solid var(--c-line-blue); }
.mobile-nav-open{ display:flex; }
.mobile-nav-link{ font-family:var(--f-head); font-size:var(--fs-h2); font-weight:500; text-transform:uppercase; letter-spacing:var(--ls-wide); color:var(--c-white); padding:var(--s-3) var(--s-5); border-bottom:var(--b-1) solid var(--c-line-blue); }
.mobile-nav-link:hover{ color:var(--c-red); }

/* Sections and text */
.main{ display:flex; flex-direction:column; flex:1 1 auto; }
.sec{ display:flex; flex-direction:column; padding-top:var(--s-9); padding-bottom:var(--s-9); }
.sec-tight{ padding-top:var(--s-8); padding-bottom:var(--s-8); }
.sec-grey{ background:var(--c-bg); }
.eyebrow{ display:flex; flex-direction:row; align-items:center; gap:var(--s-3); font-family:var(--f-mono); font-size:var(--fs-label); text-transform:uppercase; letter-spacing:var(--ls-wide); color:var(--c-blue); margin:0; }
.eyebrow-light{ color:var(--c-white); opacity:.85; }
.rule{ display:block; width:var(--s-7); height:var(--b-2); background:var(--c-red); }
.h-display{ font-family:var(--f-head); font-size:var(--fs-display); line-height:var(--lh-tight); font-weight:700; letter-spacing:var(--ls-head); color:var(--c-ink); text-transform:uppercase; margin:0; text-wrap:pretty; }
.h1{ font-family:var(--f-head); font-size:var(--fs-h1); line-height:var(--lh-head); font-weight:700; letter-spacing:var(--ls-head); text-transform:uppercase; color:var(--c-ink); margin:0; text-wrap:pretty; }
.h2{ font-family:var(--f-head); font-size:var(--fs-h2); line-height:var(--lh-head); font-weight:600; text-transform:uppercase; color:var(--c-ink); margin:0; text-wrap:pretty; }
.h3{ font-family:var(--f-head); font-size:var(--fs-h3); line-height:var(--lh-head); font-weight:600; text-transform:uppercase; color:var(--c-ink); margin:0; }
.on-dark{ color:var(--c-white); }
.lead{ font-size:var(--fs-lead); line-height:var(--lh-body); margin:0; max-width:var(--w-text); text-wrap:pretty; }
.p{ font-size:var(--fs-body); line-height:var(--lh-body); margin:0; max-width:var(--w-text); text-wrap:pretty; }
.p-dark{ color:var(--c-white); opacity:.9; }
.small{ font-size:var(--fs-small); line-height:var(--lh-body); margin:0; }
.mono{ font-family:var(--f-mono); font-size:var(--fs-label); text-transform:uppercase; letter-spacing:var(--ls-wide); margin:0; }
.stack-3{ display:flex; flex-direction:column; gap:var(--s-3); }
.stack-4{ display:flex; flex-direction:column; gap:var(--s-4); }
.stack-5{ display:flex; flex-direction:column; gap:var(--s-5); }
.stack-6{ display:flex; flex-direction:column; gap:var(--s-6); }
.row-4{ display:flex; flex-direction:row; flex-wrap:wrap; gap:var(--s-4); }

.btn-primary{ display:inline-flex; align-items:center; justify-content:center; font-family:var(--f-head); font-size:var(--fs-h3); font-weight:600; text-transform:uppercase; letter-spacing:var(--ls-wide); padding:var(--s-3) var(--s-6); background:var(--c-red); color:var(--c-white); border:var(--b-2) solid var(--c-red); cursor:pointer; }
.btn-primary:hover{ background:var(--c-blue); border-color:var(--c-blue); color:var(--c-white); }
.btn-ghost{ display:inline-flex; align-items:center; justify-content:center; font-family:var(--f-head); font-size:var(--fs-h3); font-weight:600; text-transform:uppercase; letter-spacing:var(--ls-wide); padding:var(--s-3) var(--s-6); background:transparent; color:var(--c-ink); border:var(--b-2) solid var(--c-line-strong); cursor:pointer; }
.btn-ghost:hover{ border-color:var(--c-blue); color:var(--c-blue); }
.btn-ghost-light{ color:var(--c-white); border-color:var(--c-white); }
.btn-ghost-light:hover{ color:var(--c-white); border-color:var(--c-red); background:var(--c-red); }

/* Hero, facts */
.hero{ display:flex; flex-direction:row; align-items:stretch; background:var(--c-blue-deep); }
.hero-text{ display:flex; flex-direction:column; justify-content:center; gap:var(--s-5); flex:1 1 50%; padding:var(--s-9) var(--s-8); }
.hero-media{ flex:1 1 50%; display:flex; }
.hero-img{ width:100%; height:100%; min-height:var(--h-hero); object-fit:cover; display:block; }
.facts{ display:flex; flex-direction:row; background:var(--c-blue); }
.fact{ display:flex; flex-direction:column; gap:var(--s-1); flex:1 1 25%; padding:var(--s-5) var(--s-6); border-left:var(--b-1) solid var(--c-line-blue); }
.fact-k{ font-family:var(--f-head); font-size:var(--fs-h2); font-weight:700; color:var(--c-white); line-height:var(--lh-tight); }
.fact-v{ font-family:var(--f-mono); font-size:var(--fs-label); text-transform:uppercase; letter-spacing:var(--ls-wide); color:var(--c-white); opacity:.85; }

/* Leistungen */
.svc-group{ display:flex; flex-direction:row; gap:var(--s-6); padding-top:var(--s-5); padding-bottom:var(--s-5); border-top:var(--b-1) solid var(--c-line); }
.svc-head{ flex:0 0 26%; display:flex; flex-direction:column; gap:var(--s-2); }
.svc-items{ flex:1 1 auto; display:flex; flex-direction:row; flex-wrap:wrap; gap:var(--s-3); }
.svc-item{ display:flex; flex-direction:row; align-items:baseline; gap:var(--s-3); flex:0 1 calc(50% - var(--s-3)); padding:var(--s-3) var(--s-4); background:var(--c-bg); border-left:var(--b-3) solid var(--c-blue); }
.svc-num{ font-family:var(--f-mono); font-size:var(--fs-num); color:var(--c-red); }
.svc-name{ font-size:var(--fs-body); color:var(--c-ink); font-weight:500; }

.cards{ display:flex; flex-direction:row; gap:var(--s-5); }
.card{ display:flex; flex-direction:column; gap:var(--s-3); flex:1 1 33%; padding:var(--s-6); background:var(--c-white); border:var(--b-1) solid var(--c-line); border-top:var(--b-3) solid var(--c-blue); }
.card-red{ border-top-color:var(--c-red); }

.split{ display:flex; flex-direction:row; gap:var(--s-8); align-items:flex-start; }
.split-media{ flex:1 1 46%; display:flex; flex-direction:column; gap:var(--s-3); }
.split-text{ flex:1 1 54%; display:flex; flex-direction:column; gap:var(--s-5); }
.split-img{ width:100%; height:auto; display:block; }

.gal{ display:flex; flex-direction:row; flex-wrap:wrap; gap:var(--s-4); }
.gal-item{ display:flex; flex-direction:column; flex:0 1 calc(33.333% - var(--s-4)); background:var(--c-white); border:var(--b-1) solid var(--c-line); }
.gal-item-wide{ flex:0 1 calc(66.666% - var(--s-3)); }
.gal-img{ width:100%; height:var(--h-thumb); object-fit:cover; display:block; }
.gal-cap{ display:flex; flex-direction:column; gap:var(--s-1); padding:var(--s-4); }
.gal-tag{ font-family:var(--f-mono); font-size:var(--fs-label); text-transform:uppercase; letter-spacing:var(--ls-wide); color:var(--c-red); }
.gal-txt{ font-size:var(--fs-small); color:var(--c-ink); }

.steps{ display:flex; flex-direction:row; gap:var(--s-5); }
.step{ display:flex; flex-direction:column; gap:var(--s-3); flex:1 1 25%; padding-top:var(--s-4); border-top:var(--b-3) solid var(--c-red); }
.step-n{ font-family:var(--f-head); font-size:var(--fs-mega); font-weight:700; line-height:var(--lh-tight); color:var(--c-line-strong); }

.tl{ display:flex; flex-direction:column; }
.tl-row{ display:flex; flex-direction:row; gap:var(--s-6); padding-top:var(--s-5); padding-bottom:var(--s-5); border-top:var(--b-1) solid var(--c-line); }
.tl-year{ flex:0 0 var(--s-10); font-family:var(--f-mono); font-size:var(--fs-small); color:var(--c-red); }
.tl-body{ flex:1 1 auto; display:flex; flex-direction:column; gap:var(--s-1); }

.list-check{ display:flex; flex-direction:column; gap:var(--s-3); margin:0; padding:0; list-style:none; }
.li{ display:flex; flex-direction:row; align-items:flex-start; gap:var(--s-3); }
.dot{ display:block; flex:0 0 var(--s-2); width:var(--s-2); height:var(--s-2); margin-top:var(--s-3); background:var(--c-red); }
.li-txt{ font-size:var(--fs-body); color:var(--c-body); }

.cta{ display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:var(--s-6); background:var(--c-blue); padding:var(--s-8); }

.contact-cols{ display:flex; flex-direction:row; gap:var(--s-8); align-items:flex-start; }
.contact-col{ flex:1 1 50%; display:flex; flex-direction:column; gap:var(--s-5); }
.kv{ display:flex; flex-direction:row; gap:var(--s-4); padding-top:var(--s-3); padding-bottom:var(--s-3); border-top:var(--b-1) solid var(--c-line); }
.kv-k{ flex:0 0 var(--s-10); font-family:var(--f-mono); font-size:var(--fs-label); text-transform:uppercase; letter-spacing:var(--ls-wide); color:var(--c-body); padding-top:var(--s-1); }
.kv-v{ flex:1 1 auto; font-size:var(--fs-body); color:var(--c-ink); }
.kv-link{ color:var(--c-blue); }
.kv-link:hover{ color:var(--c-red); }

.form{ display:flex; flex-direction:column; gap:var(--s-4); padding:var(--s-6); background:var(--c-bg); border:var(--b-1) solid var(--c-line); }
.form-note{ display:flex; align-items:center; gap:var(--s-2); align-self:flex-start; font-family:var(--f-mono); font-size:var(--fs-label); text-transform:uppercase; letter-spacing:var(--ls-wide); color:var(--c-white); background:var(--c-ink); padding:var(--s-2) var(--s-3); }
.field{ display:flex; flex-direction:column; gap:var(--s-2); flex:1 1 100%; }
.field-half{ flex:1 1 calc(50% - var(--s-4)); }
.field-l{ font-family:var(--f-mono); font-size:var(--fs-label); text-transform:uppercase; letter-spacing:var(--ls-wide); color:var(--c-body); }
.field-box{ display:flex; align-items:center; width:100%; padding:var(--s-3) var(--s-4); background:var(--c-white); border:var(--b-1) solid var(--c-line-strong); font-family:var(--f-body); font-size:var(--fs-body); line-height:var(--lh-body); color:var(--c-ink); }
.field-box::placeholder{ color:var(--c-board); }
.field-box:focus{ outline:var(--b-2) solid var(--c-blue); }
.field-box-tall{ min-height:var(--h-band); align-items:flex-start; }

.map{ display:flex; flex-direction:column; justify-content:flex-end; height:var(--h-map); padding:var(--s-4); border:var(--b-1) solid var(--c-line-strong);
  background-color:var(--c-bg); background-image:repeating-linear-gradient(135deg, var(--c-line) 0, var(--c-line) var(--b-1), transparent var(--b-1), transparent var(--s-3)); }
.map-tag{ align-self:flex-start; font-family:var(--f-mono); font-size:var(--fs-label); text-transform:uppercase; letter-spacing:var(--ls-wide); color:var(--c-white); background:var(--c-ink); padding:var(--s-2) var(--s-3); }

.band{ display:flex; flex-direction:row; height:var(--h-band); }
.band-img{ flex:1 1 25%; min-width:0; width:100%; height:100%; object-fit:cover; display:block; }

.legal{ display:flex; flex-direction:column; gap:var(--s-5); max-width:var(--w-narrow); }
.legal-block{ display:flex; flex-direction:column; gap:var(--s-2); padding-top:var(--s-5); border-top:var(--b-1) solid var(--c-line); }

/* Footer */
.site-foot{ display:flex; flex-direction:column; background:var(--c-blue-deep); }
.foot-main{ display:flex; flex-direction:row; gap:var(--s-8); padding-top:var(--s-8); padding-bottom:var(--s-8); }
.foot-col{ display:flex; flex-direction:column; gap:var(--s-3); flex:1 1 25%; }
.foot-brand-img{ background:var(--c-blue); padding:var(--s-3); align-self:flex-start; }
.foot-h{ font-family:var(--f-mono); font-size:var(--fs-label); text-transform:uppercase; letter-spacing:var(--ls-wide); color:var(--c-white); opacity:.7; }
.foot-t{ font-size:var(--fs-small); color:var(--c-white); opacity:.85; }
.foot-link{ font-size:var(--fs-small); color:var(--c-white); opacity:.85; }
.foot-link:hover{ opacity:1; color:var(--c-red); }
.foot-bar{ display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:var(--s-4); padding-top:var(--s-4); padding-bottom:var(--s-4); border-top:var(--b-1) solid var(--c-line-blue); }
.foot-legal{ display:flex; flex-direction:row; gap:var(--s-5); }

.preview-note{ display:flex; align-items:center; justify-content:center; gap:var(--s-3); padding:var(--s-2) var(--s-4); background:var(--c-ink); font-family:var(--f-mono); font-size:var(--fs-label); text-transform:uppercase; letter-spacing:var(--ls-wide); color:var(--c-white); }

/* Tablet */
@media (max-width:1100px){
  :root{ --fs-display:46px; --fs-h1:34px; --fs-h2:28px; --fs-h3:19px; --fs-lead:18px; --fs-body:16px; --fs-mega:64px; --h-hero:420px; --h-thumb:200px; }
  .head-call{ display:none; }
  .nav-link{ font-size:var(--fs-body); }
  .main-nav{ gap:var(--s-4); }
  .brand-img{ height:var(--h-logo-sm); }
  .sec{ padding-top:var(--s-8); padding-bottom:var(--s-8); }
  .hero{ flex-direction:column; }
  .hero-text{ padding:var(--s-8) var(--s-6); }
  .facts{ flex-wrap:wrap; }
  .fact{ flex:1 1 50%; }
  .svc-group{ flex-direction:column; gap:var(--s-4); }
  .cards{ flex-wrap:wrap; }
  .card{ flex:1 1 100%; }
  .split{ flex-direction:column; gap:var(--s-6); }
  .gal-item{ flex:0 1 calc(50% - var(--s-3)); }
  .gal-item-wide{ flex:1 1 100%; }
  .steps{ flex-wrap:wrap; }
  .step{ flex:1 1 calc(50% - var(--s-5)); }
  .cta{ flex-direction:column; align-items:flex-start; padding:var(--s-6); }
  .contact-cols{ flex-direction:column; gap:var(--s-7); }
  .foot-main{ flex-wrap:wrap; gap:var(--s-6); }
  .foot-col{ flex:1 1 calc(50% - var(--s-6)); }
}

/* Mobile */
@media (max-width:640px){
  :root{ --fs-display:34px; --fs-h1:28px; --fs-h2:24px; --fs-h3:18px; --fs-lead:17px; --fs-body:16px; --fs-mega:44px; --h-hero:300px; --h-thumb:190px; --h-map:220px; }
  .wrap{ padding-left:var(--s-5); padding-right:var(--s-5); }
  .burger{ display:flex; }
  .main-nav{ display:none; }
  .sec{ padding-top:var(--s-7); padding-bottom:var(--s-7); }
  .hero{ flex-direction:column-reverse; }
  .hero-text{ padding:var(--s-6) var(--s-5) var(--s-7) var(--s-5); }
  .facts{ flex-direction:column; }
  .fact{ border-left:none; border-top:var(--b-1) solid var(--c-line-blue); padding:var(--s-4) var(--s-5); }
  .svc-item{ flex:1 1 100%; }
  .cards{ flex-direction:column; }
  .split{ gap:var(--s-5); }
  .gal-item{ flex:1 1 100%; }
  .steps{ flex-direction:column; }
  .step{ flex:1 1 auto; }
  .tl-row{ flex-direction:column; gap:var(--s-2); }
  .cta{ padding:var(--s-5); }
  .contact-cols{ gap:var(--s-6); }
  .btn-primary, .btn-ghost{ width:100%; }
  .field-half{ flex:1 1 100%; }
  .band{ height:auto; flex-wrap:wrap; }
  .band-img{ flex:1 1 50%; height:var(--s-10); }
  .foot-main{ flex-direction:column; gap:var(--s-6); }
  .foot-bar{ flex-direction:column; align-items:flex-start; }
}