/* ============================================================
   GARAGE ELIO GmbH — robust / handwerklich
   Marke: Schwarz + kräftiges Rot (aus Logo) · Barlow
   ============================================================ */

:root{
  --ink:        #1a1815;
  --ink-2:      #25221e;
  --ink-3:      #322e29;
  --red:        #d11a0e;
  --red-dark:   #a31309;
  --red-bright: #e8261a;
  --paper:      #f4f1ea;
  --paper-2:    #e9e3d8;
  --paper-3:    #ded7c9;
  --steel:      #6f6a61;
  --steel-2:    #4a463f;
  --line:       rgba(26,24,21,.14);
  --line-soft:  rgba(26,24,21,.08);
  --white:      #ffffff;

  --maxw: 1200px;
  --gut: clamp(20px, 5vw, 64px);

  --f-head: "Barlow Condensed", "Arial Narrow", sans-serif;
  --f-body: "Barlow", system-ui, sans-serif;
  --f-mono: "Barlow Semi Condensed", ui-monospace, monospace;

  --shadow: 0 18px 50px -22px rgba(20,18,15,.45);
  --shadow-sm: 0 8px 24px -14px rgba(20,18,15,.4);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:78px; }
body{
  font-family:var(--f-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.62;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

.container{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }

/* ---------- Typography helpers ---------- */
h1,h2,h3,h4{ font-family:var(--f-head); font-weight:700; line-height:1.02; letter-spacing:.01em; }
.kicker{
  font-family:var(--f-mono);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:13px;
  color:var(--red);
  display:inline-flex; align-items:center; gap:12px;
}
.kicker::before{ content:""; width:30px; height:3px; background:var(--red); display:inline-block; }
.sec-title{ font-size:clamp(34px,5vw,60px); text-transform:uppercase; letter-spacing:-.005em; }
.lead{ font-size:clamp(18px,2.1vw,21px); color:var(--steel-2); max-width:62ch; }

/* hazard stripe accent */
.stripe{
  height:10px;
  background:repeating-linear-gradient(-45deg, var(--ink) 0 16px, var(--red) 16px 32px);
}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--red); --fg:#fff;
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-head); font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; font-size:16px;
  padding:14px 26px; background:var(--bg); color:var(--fg);
  border:2px solid var(--bg); cursor:pointer;
  transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.btn:hover{ background:var(--red-dark); border-color:var(--red-dark); transform:translateY(-2px); }
.btn--ghost{ --bg:transparent; --fg:var(--ink); border-color:rgba(26,24,21,.3); }
.btn--ghost:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }
.btn--light{ --bg:transparent; --fg:#fff; border-color:rgba(255,255,255,.35); }
.btn--light:hover{ background:#fff; border-color:#fff; color:var(--ink); }
.btn svg{ width:17px; height:17px; }

/* ---------- Image placeholder ---------- */
.ph{
  position:relative; overflow:hidden;
  background:
    repeating-linear-gradient(135deg, var(--paper-2) 0 14px, var(--paper-3) 14px 28px);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--steel);
}
.ph::after{
  content:attr(data-label);
  font-family:var(--f-mono); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
  background:var(--ink); color:var(--paper);
  padding:7px 13px; max-width:80%; text-align:center; line-height:1.4;
}
.ph--dark{ background:repeating-linear-gradient(135deg,#211e1a 0 14px,#2b2723 14px 28px); }
.ph--dark::after{ background:var(--red); color:#fff; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  background:rgba(21,19,16,.96);
  border-bottom:2px solid var(--red);
  backdrop-filter:saturate(140%) blur(6px);
  transition:box-shadow .25s ease, transform .3s ease;
}
.site-header.scrolled{ box-shadow:0 10px 30px -16px rgba(0,0,0,.7); }
.header-inner{
  max-width:var(--maxw); margin-inline:auto; padding:0 var(--gut);
  height:74px; display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand img{ height:38px; width:auto; }
.nav{ display:flex; align-items:center; gap:4px; }
.nav a{
  font-family:var(--f-head); text-transform:uppercase; letter-spacing:.05em;
  font-weight:500; font-size:16px; color:#e7e3db; padding:9px 13px;
  position:relative; transition:color .18s ease;
}
.nav a::after{
  content:""; position:absolute; left:13px; right:13px; bottom:4px; height:2px;
  background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .22s ease;
}
.nav a:hover, .nav a.active{ color:#fff; }
.nav a:hover::after, .nav a.active::after{ transform:scaleX(1); }
.header-cta{ display:flex; align-items:center; gap:14px; }
.phone-link{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-head); font-weight:600; font-size:18px; color:#fff; letter-spacing:.02em;
  white-space:nowrap;
}
.phone-link svg{ width:18px; height:18px; color:var(--red-bright); }
.phone-link:hover{ color:var(--red-bright); }
.burger{ display:none; background:none; border:0; cursor:pointer; padding:8px; }
.burger span{ display:block; width:26px; height:2.5px; background:#fff; margin:5px 0; transition:.25s; }
.burger.open span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; background:var(--ink); color:#fff;
  padding-top:74px; overflow:hidden;
}
.hero-media{
  position:absolute; inset:74px 0 0 0; z-index:0;
}
.hero-img{ width:100%; height:100%; object-fit:cover; object-position:60% center; }
.hero-media .ph{
  width:100%; height:100%; border:0;
  background:repeating-linear-gradient(135deg,#1f1c18 0 18px,#272320 18px 36px);
}
.hero-media .ph::after{ background:rgba(209,26,14,.92); }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(95deg, rgba(20,18,15,.97) 0%, rgba(20,18,15,.88) 32%, rgba(20,18,15,.6) 56%, rgba(20,18,15,.32) 82%, rgba(20,18,15,.28)),
    linear-gradient(to top, rgba(20,18,15,.6), rgba(20,18,15,0) 40%);
}
.hero-inner{
  position:relative; z-index:2;
  max-width:var(--maxw); margin-inline:auto; padding:clamp(70px,11vw,140px) var(--gut) clamp(64px,9vw,120px);
}
.hero h1{
  font-size:clamp(48px,8.5vw,108px); text-transform:uppercase; letter-spacing:-.01em;
  max-width:15ch;
}
.hero h1 em{ color:var(--red-bright); font-style:normal; }
.hero .lead{ color:#d9d4cc; margin-top:24px; max-width:50ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }
.hero-meta{
  display:flex; flex-wrap:wrap; gap:30px 46px; margin-top:54px;
  padding-top:30px; border-top:1px solid rgba(255,255,255,.16);
}
.hero-meta div{ }
.hero-meta dt{ font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.16em; font-size:11.5px; color:var(--red-bright); }
.hero-meta dd{ font-family:var(--f-head); font-size:21px; font-weight:600; margin-top:4px; }

/* ============================================================
   SECTION SHELL
   ============================================================ */
section[id]{ scroll-margin-top:74px; }
.block{ padding:clamp(64px,9vw,118px) 0; }
.block--alt{ background:var(--paper-2); }
.block--dark{ background:var(--ink); color:#fff; }
.sec-head{ max-width:760px; margin-bottom:clamp(36px,5vw,60px); }
.sec-head .sec-title{ margin-top:16px; }
.sec-head p{ margin-top:18px; }
.block--dark .lead, .block--dark .sec-head p{ color:#cfc9bf; }

/* ---------- Über uns ---------- */
.about{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,68px); align-items:center; }
.about-figure{ position:relative; }
.about-figure .ph{ aspect-ratio:4/3.4; }
.about-figure .badge{
  position:absolute; left:-14px; bottom:-14px; background:var(--red); color:#fff;
  font-family:var(--f-head); text-transform:uppercase; letter-spacing:.04em;
  padding:16px 22px; box-shadow:var(--shadow-sm);
  clip-path:polygon(0 0,100% 0,100% 100%,16px 100%,0 calc(100% - 16px));
}
.about-figure .badge b{ display:block; font-size:30px; line-height:1; }
.about-figure .badge span{ font-size:14px; opacity:.92; }
.about-body p + p{ margin-top:18px; }
.about-body .lead{ font-size:22px; color:var(--ink); margin-bottom:22px; }
.about-body p{ color:var(--steel-2); }
.about-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.signature{ margin-top:26px; padding-left:18px; border-left:4px solid var(--red); }
.signature b{ font-family:var(--f-head); font-size:24px; text-transform:uppercase; letter-spacing:.02em; display:block; line-height:1; }
.signature span{ font-family:var(--f-mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--steel); }
.tag{
  font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.1em; font-size:12.5px;
  border:1px solid var(--line); padding:8px 14px; color:var(--steel-2); background:#fff;
}

/* ---------- Dienstleistungen ---------- */
.svc-row{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,60px); align-items:center;
  padding:clamp(34px,5vw,56px) 0; border-top:1px solid var(--line);
}
.svc-row:first-of-type{ border-top:0; }
.svc-row.rev .svc-figure{ order:2; }
.svc-figure .ph{ aspect-ratio:5/3.6; }
.svc-num{
  font-family:var(--f-head); font-weight:700; font-size:15px; color:var(--red);
  letter-spacing:.18em; text-transform:uppercase; display:flex; align-items:center; gap:12px;
}
.svc-num::before{ content:""; width:34px; height:3px; background:var(--red); }
.svc-content h3{ font-size:clamp(30px,4vw,44px); text-transform:uppercase; margin:14px 0 6px; }
.svc-content .svc-intro{ color:var(--steel-2); margin-bottom:20px; }
.svc-list{ display:grid; grid-template-columns:1fr 1fr; gap:10px 28px; }
@media(max-width:520px){ .svc-list{ grid-template-columns:1fr; } }
.svc-list li{
  display:flex; align-items:flex-start; gap:11px; font-weight:500;
  padding-bottom:10px; border-bottom:1px solid var(--line-soft);
}
.svc-list li svg{ width:15px; height:15px; color:var(--red); flex:none; margin-top:5px; }

/* ---------- STEMA ---------- */
.stema{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,5vw,70px); align-items:center;
}
.stema-logo{
  background:#fff; border:1px solid rgba(255,255,255,.12); aspect-ratio:16/10;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow);
}
.stema-logo .ph{ width:100%; height:100%; border:0; }
.stema-logo img{ max-width:80%; max-height:78%; object-fit:contain; }
.stema-body h2{ font-size:clamp(30px,4.4vw,52px); text-transform:uppercase; }
.stema-body .red{ color:var(--red-bright); }
.stema-body p{ color:#cfc9bf; margin-top:18px; }
.stema-feats{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }

/* ---------- Verkauf ---------- */
.verkauf{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px,5vw,64px); align-items:center; }
.verkauf-card{
  background:#fff; border:1px solid var(--line); padding:clamp(28px,4vw,44px);
  box-shadow:var(--shadow-sm); position:relative;
}
.verkauf-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--red); }
.as-logo{
  display:block; width:auto; height:46px; margin-bottom:6px;
}
.note{
  font-family:var(--f-mono); font-size:13px; color:var(--steel); letter-spacing:.04em;
  margin-top:18px; display:flex; align-items:center; gap:9px;
}
.note svg{ width:15px; height:15px; flex:none; }

/* ---------- Vermietung ---------- */
.rent-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.5vw,30px); margin-top:8px;
}
.rent-card{
  background:#fff; border:1px solid var(--line); display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.rent-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.rent-card .ph{ aspect-ratio:4/3; border:0; border-bottom:1px solid var(--line); }
.rent-body{ padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.rent-body h3{ font-size:25px; text-transform:uppercase; letter-spacing:.01em; }
.rent-body .rent-desc{ color:var(--steel-2); font-size:15.5px; margin:8px 0 16px; flex:1; }
.rent-specs{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px; }
.rent-specs span{
  font-family:var(--f-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.07em;
  background:var(--paper-2); padding:5px 10px; color:var(--steel-2);
}
.rent-foot{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  border-top:1px solid var(--line); padding-top:16px; }
.rent-price b{ font-family:var(--f-head); font-size:30px; color:var(--ink); }
.rent-price span{ font-family:var(--f-mono); font-size:12px; color:var(--steel); display:block; letter-spacing:.08em; text-transform:uppercase; }
.rent-foot .btn{ padding:11px 18px; font-size:14px; }

/* ---------- Kontakt ---------- */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,52px); }
.contact-card{ background:var(--ink-2); border:1px solid rgba(255,255,255,.08); padding:clamp(28px,4vw,44px); }
.contact-block + .contact-block{ margin-top:30px; padding-top:30px; border-top:1px solid rgba(255,255,255,.12); }
.contact-block h3{ font-size:15px; text-transform:uppercase; letter-spacing:.18em; color:var(--red-bright); margin-bottom:14px; }
.contact-line{ display:flex; align-items:flex-start; gap:14px; }
.contact-line + .contact-line{ margin-top:12px; }
.contact-line svg{ width:19px; height:19px; color:var(--red-bright); flex:none; margin-top:3px; }
.contact-line > :not(svg){ flex:1; min-width:0; }
.contact-line .v{ font-family:var(--f-head); font-size:21px; font-weight:600; }
.contact-line a.v:hover{ color:var(--red-bright); }
.contact-line small{ display:block; font-family:var(--f-body); font-size:13.5px; color:#a39d92; font-weight:400; letter-spacing:0; margin-top:3px; }
.hours{ width:100%; border-collapse:collapse; }
.hours td{ padding:9px 0; border-bottom:1px solid rgba(255,255,255,.1); font-size:15.5px; }
.hours td:first-child{ font-family:var(--f-head); font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
.hours td:last-child{ text-align:right; color:#d9d4cc; font-variant-numeric:tabular-nums; }
.hours tr.muted td:last-child{ color:var(--red-bright); font-family:var(--f-head); font-weight:600; }
.hours-note{ font-size:13.5px; color:#a39d92; margin-top:14px; }
.map-wrap{ position:relative; min-height:340px; border:1px solid rgba(255,255,255,.1); overflow:hidden; }
.map-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; filter:grayscale(.25) contrast(1.02); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:#100e0c; color:#cfc9bf; padding:56px 0 30px; }
.footer-top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:30px; align-items:flex-start; }
.footer-top img{ height:40px; }
.footer-nav{ display:flex; flex-wrap:wrap; gap:6px 22px; }
.footer-nav a{ font-family:var(--f-head); text-transform:uppercase; letter-spacing:.05em; font-size:15px; color:#cfc9bf; }
.footer-nav a:hover{ color:#fff; }
.footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;
  margin-top:36px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1);
  font-family:var(--f-mono); font-size:12.5px; letter-spacing:.05em; color:#8c867c; }
.footer-bottom a:hover{ color:#fff; }

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
  .reveal.in{ opacity:1; transform:none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:980px){
  .nav, .header-cta .phone-link span{ display:none; }
  .burger{ display:block; }
  .about, .stema, .verkauf, .contact, .svc-row{ grid-template-columns:1fr; }
  .svc-row.rev .svc-figure{ order:0; }
  .rent-grid{ grid-template-columns:repeat(2,1fr); }
  .header-cta{ gap:8px; }
  /* mobile nav drawer */
  .nav.open{
    display:flex; position:fixed; inset:74px 0 auto 0; flex-direction:column; align-items:stretch;
    gap:0; background:var(--ink); border-bottom:2px solid var(--red); padding:8px 0 16px;
  }
  .nav.open a{ font-size:21px; padding:14px var(--gut); border-bottom:1px solid rgba(255,255,255,.07); }
  .nav.open a::after{ display:none; }
}
@media(max-width:600px){
  .rent-grid{ grid-template-columns:1fr; }
  .hero-meta{ gap:20px 32px; }
}