/* ============================================================
   DEMO / VOGT BAU

   ------------------------------------------------------------
   GESTALTUNGSENTSCHEIDUNGEN
   ------------------------------------------------------------
   FARBE   Betongrau, Anthrazit, Signalgelb. Die Farben, die auf
           einer Baustelle ohnehin liegen. Kein Blau: das nutzt
           jedes zweite Bauunternehmen, weil es "solide" wirken
           soll, und wirkt dadurch beliebig.
   SCHRIFT Barlow Condensed fuer Ueberschriften. Schmal und
           kraeftig, aus der Beschilderungs-Tradition: vertraegt
           grosse Grade auf wenig Platz, genau wie ein Bauschild.
           Inter fuer Fliesstext.
   RASTER  Kanten statt Rundungen, sichtbare Linien, klare
           Bloecke. Kein weicher Schatten irgendwo.
   AUFBAU  Telefonnummer als Erstes und als Letztes. Im Handwerk
           wird unter Druck gesucht: Die Entscheidung faellt in
           Minuten, und sie faellt fuer den, der erreichbar wirkt.
   ============================================================ */

:root {
  --beton:      #E8E6E1;
  --beton-tief: #D6D3CC;
  --anthrazit:  #1C1D1F;
  --grau:       #5E6166;
  --gelb:       #F2B705;
  --weiss:      #FFFFFF;
  --linie:      #C3BFB6;
  --linie-dunkel: #34363A;

  --schrift-titel: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --schrift-text:  "Inter", system-ui, -apple-system, sans-serif;

  --rand:  clamp(1.25rem, 5vw, 3rem);
  --maxw:  74rem;
  --lesen: 36rem;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--beton);
  color: var(--anthrazit);
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  line-height: 1.62;
}

img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--schrift-titel);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1rem; max-width: var(--lesen); }
a { color: var(--anthrazit); }

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--gelb);
  outline-offset: 2px;
}

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

.eyebrow {
  font-family: var(--schrift-text);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--grau); margin: 0 0 0.75rem;
}

/* --- Hinweisband -------------------------------------------- */
.demo-band { background: var(--anthrazit); color: var(--beton); font-size: 0.8125rem; }
.demo-band .wrap {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1rem;
  align-items: center; justify-content: space-between; padding-block: 0.6rem;
}
.demo-band a { color: var(--gelb); text-underline-offset: 3px; }

/* --- Notleiste ganz oben: Erreichbarkeit ---------------------- */
.top { background: var(--anthrazit); color: var(--beton); font-size: 0.875rem; }
.top .wrap {
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem;
  justify-content: space-between; align-items: center; padding-block: 0.6rem;
}
.top b { color: var(--gelb); font-variant-numeric: tabular-nums; }

/* --- Kopf ---------------------------------------------------- */
.kopf {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--beton) 93%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--anthrazit);
}
.kopf .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 0.55rem; min-height: 62px;
}
.logo {
  font-family: var(--schrift-titel); font-size: 1.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.01em;
  text-decoration: none; color: var(--anthrazit);
  min-height: 44px; display: inline-flex; align-items: center; gap: 0.5rem;
}
.logo i { width: 14px; height: 24px; background: var(--gelb); display: block; transform: skewX(-12deg); }
.kopf-nav { display: none; gap: 1.5rem; }
.kopf-nav a {
  text-decoration: none; color: var(--anthrazit); font-size: 0.9375rem; font-weight: 500;
  min-height: 44px; display: inline-flex; align-items: center;
}
.kopf-nav a:hover { color: var(--grau); }
@media (min-width: 60rem) { .kopf-nav { display: flex; } }

/* --- Knoepfe -------------------------------------------------- */
.call, .btn-2 {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0.75rem 1.5rem;
  font: inherit; font-size: 1rem; font-weight: 700;
  text-decoration: none; border: 2px solid var(--anthrazit); cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.call { background: var(--gelb); color: var(--anthrazit); }
.call:hover { background: var(--anthrazit); color: var(--gelb); }
.btn-2 { background: transparent; color: var(--anthrazit); }
.btn-2:hover { background: var(--anthrazit); color: var(--beton); }
.call svg, .btn-2 svg { width: 18px; height: 18px; flex: none; }

/* --- Hero ----------------------------------------------------- */
.hero { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.hero .wrap { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 62rem) { .hero .wrap { grid-template-columns: 1.05fr 0.95fr; } }
.hero h1 { font-size: clamp(2.6rem, 7.5vw, 5rem); margin-bottom: 1rem; }
.hero > .wrap > div > p:not(.eyebrow) { font-size: 1.125rem; color: var(--grau); }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.hero figure { margin: 0; border: 2px solid var(--anthrazit); }
.hero figure img { width: 100%; aspect-ratio: 6 / 5; max-height: 30rem; object-fit: cover; }

.trust { display: grid; gap: 1px; background: var(--linie); border: 2px solid var(--anthrazit); margin-top: 2rem; }
@media (min-width: 30rem) { .trust { grid-template-columns: repeat(3, 1fr); } }
.trust > div { background: var(--beton); padding: 0.9rem 1rem; }
.trust strong {
  display: block; font-family: var(--schrift-titel); font-size: 1.75rem;
  font-weight: 700; line-height: 1; text-transform: uppercase;
}
.trust span { font-size: 0.8125rem; color: var(--grau); }

/* --- Leistungen ------------------------------------------------ */
.services { background: var(--beton-tief); padding-block: clamp(3rem, 8vw, 5.5rem); }
.services h2, .work h2, .contact h2 { font-size: clamp(1.9rem, 5vw, 3.2rem); margin-bottom: 1.75rem; }
.grid-3 { display: grid; gap: 1px; background: var(--linie); border: 2px solid var(--anthrazit); }
@media (min-width: 46rem) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.svc { background: var(--beton); padding: clamp(1.25rem, 3vw, 1.75rem); }
.svc i {
  display: block; font-family: var(--schrift-titel); font-style: normal;
  font-size: 0.875rem; font-weight: 700; letter-spacing: 0.1em;
  color: var(--anthrazit); background: var(--gelb);
  width: 2.25rem; text-align: center; padding: 0.1rem 0; margin-bottom: 0.85rem;
}
.svc h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.svc p { font-size: 0.9375rem; color: var(--grau); margin: 0; max-width: none; }

/* --- Referenzen ------------------------------------------------- */
.work { padding-block: clamp(3rem, 8vw, 5.5rem); }
.work-grid { display: grid; gap: 1rem; }
@media (min-width: 46rem) { .work-grid { grid-template-columns: 1.4fr 1fr; } }
.work-grid figure { margin: 0; border: 2px solid var(--anthrazit); background: var(--beton-tief); }
.work-grid img { width: 100%; object-fit: cover; }
.work-grid .tall img { aspect-ratio: 3 / 2; height: 100%; }
.work-col { display: grid; gap: 1rem; }
.work-col img { aspect-ratio: 5 / 3; }
.work-grid figcaption {
  font-family: var(--schrift-titel); font-size: 1.0625rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.6rem 0.85rem; border-top: 2px solid var(--anthrazit);
}

/* --- Zitat ------------------------------------------------------ */
.quote { background: var(--anthrazit); color: var(--beton); padding-block: clamp(3rem, 8vw, 5rem); }
.quote .wrap { display: grid; gap: 2rem; }
@media (min-width: 52rem) { .quote .wrap { grid-template-columns: auto 1fr; align-items: center; } }
.rating-box { border: 2px solid var(--gelb); padding: 1.25rem 1.5rem; text-align: center; }
.rating-box strong { display: block; font-family: var(--schrift-titel); font-size: 3rem; line-height: 1; color: var(--gelb); }
.rating-box span { font-size: 0.8125rem; color: var(--beton-tief); }
.stars { color: var(--gelb); letter-spacing: 0.15em; font-size: 1.125rem; }
.quote blockquote {
  margin: 0.5rem 0 0.75rem;
  font-family: var(--schrift-titel); font-size: clamp(1.4rem, 3vw, 2.1rem);
  font-weight: 600; line-height: 1.2; text-transform: none; letter-spacing: 0;
  max-width: 40rem;
}
.quote cite { font-style: normal; font-size: 0.9375rem; color: var(--beton-tief); }

/* --- Fragen ----------------------------------------------------- */
.fragen { max-width: 46rem; border-top: 2px solid var(--anthrazit); }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 1rem 2.5rem 1rem 0; min-height: 48px;
  display: flex; align-items: center;
  font-family: var(--schrift-titel); font-size: 1.3rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.01em;
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after {
  content: ""; position: absolute; right: 0.4rem; top: 50%; margin-top: -1px;
  width: 14px; height: 2px; background: var(--anthrazit);
  box-shadow: 0 0 0 0 transparent;
}
.fragen summary::before {
  content: ""; position: absolute; right: 0.4rem; top: 50%; margin-top: -7px;
  width: 14px; height: 14px;
  background: linear-gradient(var(--anthrazit) 0 0) center / 2px 14px no-repeat;
  transition: transform 0.2s ease;
}
.fragen details[open] summary::before { transform: rotate(90deg); }
.fragen details p { padding-bottom: 1rem; color: var(--grau); }

/* --- Kontakt ----------------------------------------------------- */
.contact { background: var(--beton-tief); padding-block: clamp(3rem, 8vw, 5.5rem); }
.contact .wrap { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 60rem) { .contact .wrap { grid-template-columns: 1fr 1fr; } }
.facts { display: grid; gap: 0; border: 2px solid var(--anthrazit); background: var(--beton); }
.facts > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--linie); }
.facts > div:last-child { border-bottom: 0; }
.facts b { font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grau); }
.facts span { font-size: 0.9375rem; }
.facts a { font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }

.field { display: grid; gap: 0.35rem; margin-bottom: 1rem; }
.field label { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.field input, .field textarea {
  font: inherit; font-size: 1rem; min-height: 48px;
  padding: 0.7rem 0.85rem; border: 2px solid var(--anthrazit);
  background: var(--beton); color: var(--anthrazit); border-radius: 0;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--gelb); outline-offset: 1px; }
.hint { font-size: 0.8125rem; color: var(--grau); }

/* --- Fuss --------------------------------------------------------- */
.fuss { background: var(--anthrazit); color: var(--beton); padding-block: clamp(2.5rem, 6vw, 4rem) 1.5rem; }
.fuss a { color: var(--beton); }
.fuss__raster { display: grid; gap: 2rem; }
@media (min-width: 46rem) { .fuss__raster { grid-template-columns: 1.5fr 1fr 1fr; } }
.fuss h3 { font-family: var(--schrift-text); font-size: 0.75rem; letter-spacing: 0.14em; color: var(--beton-tief); margin-bottom: 0.8rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li a { text-decoration: none; font-size: 0.9375rem; min-height: 44px; display: inline-flex; align-items: center; }
.fuss li a:hover { color: var(--gelb); }
.fuss__unten {
  margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--linie-dunkel);
  font-size: 0.8125rem; color: var(--beton-tief);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between;
}

.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--gelb); color: var(--anthrazit); padding: 0.75rem 1.25rem; }
.skip:focus { left: 0; }