/* ============================================================
   ZUKOWSKY CLASSIC CARS — Hamburg
   Nachbau der Canva-Landingpage als statische Seite, 24.08.2026.
   CI (Stand 23.07.2026): Racing-Gruen #1D5C43 · Gold #C9A25A ·
   Sand #EFE9DC · Cormorant Garamond (Ueberschriften) + Lato (Text).
   Gold nur als Akzent, keine grossen Goldflaechen.
   ============================================================ */

:root{
  --gruen:#1D5C43;
  --gold:#C9A25A;
  --sand:#EFE9DC;
  --tinte:#14231C;
  --weiss:#FFFFFF;
  --champagner:#E7D6A8;
}

*{box-sizing:border-box;margin:0;padding:0}

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

body{
  font-family:"Lato",system-ui,-apple-system,sans-serif;
  font-weight:400;
  color:var(--tinte);
  background:var(--sand);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

/* Fuer Screenreader und Suche, optisch nicht sichtbar */
.verborgen{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ============================================================
   GRUNDRISS — links Sandfeld, rechts Werkstattbild
   ============================================================ */

.karte{
  display:grid;
  grid-template-columns:minmax(320px,38%) 1fr;
  min-height:100vh;
  min-height:100svh;
}

/* ---------- Linkes Feld ---------- */

.feld{
  background:var(--sand);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:clamp(2rem,4vw,3.5rem) clamp(1.75rem,3.5vw,3rem);
}

.feld-inhalt{
  margin:auto 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  width:100%;
}

.logo{
  width:clamp(150px,58%,240px);
  height:auto;
  margin-bottom:clamp(1.5rem,3vw,2.25rem);
}

.ort{
  font-family:"Lato",sans-serif;
  font-weight:700;
  font-size:clamp(.82rem,1.1vw,.95rem);
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gruen);
  padding-left:.34em; /* gleicht das Sperrsatz-Loch rechts aus */
}

.regel{
  width:100%;
  max-width:22rem;
  height:1px;
  border:0;
  background:var(--gold);
  margin:clamp(.85rem,1.6vw,1.15rem) 0;
}

.wortmarke{
  font-family:"Cormorant Garamond",Garamond,Georgia,serif;
  font-weight:500;
  /* auf einer Zeile halten wie im Original — Groesse folgt der Spaltenbreite */
  font-size:clamp(1.35rem,2.15vw,2.35rem);
  line-height:1.15;
  letter-spacing:.19em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--gruen);
  padding-left:.19em;
}

/* ---------- Kontakt ---------- */

.kontakt{
  font-style:normal;
  margin-top:clamp(2.5rem,5vw,4rem);
  font-size:clamp(.98rem,1.25vw,1.08rem);
  font-weight:300;
  line-height:1.95;
  color:var(--tinte);
}

.kontakt .draht{margin-top:1.5rem}

.kontakt a{
  border-bottom:1px solid transparent;
  transition:border-color .2s ease,color .2s ease;
}
.kontakt a:hover,
.kontakt a:focus-visible{
  color:var(--gruen);
  border-bottom-color:var(--gold);
}

/* ---------- Fusszeile ---------- */

.fuss{
  margin-top:2.5rem;
  text-align:center;
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gruen);
  opacity:.65;
}
.fuss a{border-bottom:1px solid rgba(201,162,90,.5)}
.fuss a:hover,
.fuss a:focus-visible{opacity:1;border-bottom-color:var(--gold)}

/* ---------- Rechtes Bildfeld ---------- */

.bild{position:relative;background:var(--tinte);overflow:hidden}
.bild img{width:100%;height:100%;object-fit:cover;object-position:center center}

/* ============================================================
   SCHMALE BILDSCHIRME — untereinander statt nebeneinander
   ============================================================ */

@media (max-width:820px){
  .karte{
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    min-height:0;
  }
  .feld{
    order:1;
    padding:clamp(2.5rem,8vw,3.5rem) 1.5rem clamp(1.75rem,5vw,2.5rem);
  }
  .bild{order:2;aspect-ratio:4/3}
  .wortmarke{font-size:clamp(1.5rem,6.4vw,2.6rem)}
  .kontakt{margin-top:2rem}
  .fuss{margin-top:2rem}
}

/* ============================================================
   IMPRESSUM / DATENSCHUTZ
   ============================================================ */

.blatt{
  max-width:44rem;
  margin:0 auto;
  padding:clamp(2.5rem,6vw,5rem) clamp(1.5rem,5vw,2.5rem) 5rem;
}

.blatt-kopf{
  display:flex;
  align-items:center;
  gap:1rem;
  padding-bottom:1.5rem;
  border-bottom:1px solid var(--gold);
  margin-bottom:clamp(2rem,4vw,3rem);
}
.blatt-kopf img{width:58px;flex:none}
.blatt-kopf .name{
  font-family:"Cormorant Garamond",Garamond,Georgia,serif;
  font-size:1.4rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gruen);line-height:1.2;
}

.blatt h1{
  font-family:"Cormorant Garamond",Garamond,Georgia,serif;
  font-weight:500;
  font-size:clamp(1.9rem,4vw,2.6rem);
  letter-spacing:.04em;
  color:var(--gruen);
  margin-bottom:2rem;
}

.blatt h2{
  font-family:"Cormorant Garamond",Garamond,Georgia,serif;
  font-weight:500;
  font-size:clamp(1.25rem,2.4vw,1.5rem);
  letter-spacing:.03em;
  color:var(--gruen);
  margin:2.5rem 0 .75rem;
}

.blatt h3{
  font-family:"Lato",sans-serif;
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.02em;
  color:var(--tinte);
  margin:1.75rem 0 .35rem;
}

.blatt p{font-weight:300;margin-bottom:.9rem}
.blatt ul{font-weight:300;margin:0 0 .9rem 1.2rem}
.blatt li{margin-bottom:.35rem}
.blatt a{border-bottom:1px solid rgba(201,162,90,.6)}
.blatt a:hover,.blatt a:focus-visible{color:var(--gruen);border-bottom-color:var(--gold)}

.zurueck{
  display:inline-block;
  margin-top:3rem;
  font-size:.74rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gruen);
  border:1px solid var(--gold);
  padding:.8rem 1.9rem;
  transition:background .25s ease,color .25s ease;
}
.zurueck:hover,.zurueck:focus-visible{background:var(--gruen);color:var(--sand);border-color:var(--gruen)}