@import url("../fonts/schriften.css");

/* ═══════════════════════════════════════════════════════════════════════════
   Küchen*Art Messebau — Neubau 09/2026
   Ersetzt WordPress 4.9 mit X Theme, Cornerstone und revslider durch reines
   HTML. Kein CMS, keine Plugins, nichts von Dritten geladen — deshalb auch
   kein Einwilligungsbanner.

   Farben stammen aus dem Logo: Anthrazit #1e1916, Petrol #2899aa.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --tinte:      #1e1916;          /* aus dem Logo */
  --tinte-weich:#3a3330;
  --petrol:     #2899aa;          /* aus dem Logo */
  --petrol-tief:#1d7383;
  --papier:     #ffffff;
  --papier-warm:#f6f4f2;
  --linie:      #e2ddd9;
  --grau:       #6b625d;

  --schrift: "Archivo", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --rand: 1.25rem;
  --max: min(78rem, 100% - 2 * var(--rand));
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--tinte);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--petrol-tief); }
:focus-visible { outline: 3px solid var(--petrol); outline-offset: 3px; }

h1, h2, h3 { font-weight: 700; line-height: 1.08; letter-spacing: -.022em; margin: 0 0 .6em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 6.4vw, 4rem); }
h2 { font-size: clamp(1.7rem, 4.4vw, 2.6rem); }
h3 { font-size: clamp(1.1rem, 2.6vw, 1.3rem); font-weight: 600; }
p  { margin: 0 0 1.1em; text-wrap: pretty; }

.huelle { width: var(--max); margin-inline: auto; }
.schmal { max-width: 42rem; }

.marke {
  font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--petrol); margin: 0 0 1rem; display: flex; align-items: center; gap: .75rem;
}
.marke::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .35; }

/* ─── Kopf ─────────────────────────────────────────────────────────────── */
.kontaktleiste {
  background: var(--tinte); color: #cfc8c3;
  font-size: .82rem; padding: .55rem 0;
}
.kontaktleiste .huelle { display: flex; flex-wrap: wrap; gap: .35rem 1.4rem; align-items: center; }
.kontaktleiste a { color: #cfc8c3; text-decoration: none; }
.kontaktleiste a:hover { color: #fff; }

.kopf {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255,255,255,.94); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linie);
}
.kopf .huelle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 0; }
.kopf img { width: 165px; height: auto; }
.nav { display: flex; align-items: center; gap: clamp(.8rem, 2.5vw, 1.9rem); }
.nav a {
  color: var(--tinte); text-decoration: none;
  font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.nav a:hover { color: var(--petrol-tief); }
.nav .knopf { color: #fff; }
@media (max-width: 34rem) { .nav a.verstecken { display: none; } }

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.9rem; padding: 0 1.4rem;
  background: var(--petrol); color: #fff; text-decoration: none;
  font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  border: 0; border-radius: 2px; cursor: pointer; transition: background .2s;
}
.knopf:hover { background: var(--petrol-tief); }
.knopf--hell { background: #fff; color: var(--tinte); }
.knopf--hell:hover { background: var(--papier-warm); }

/* ─── Bühne ────────────────────────────────────────────────────────────── */
.buehne { position: relative; background: var(--tinte); color: #fff; overflow: hidden; }
.buehne-bild { position: absolute; inset: 0; }
.buehne-bild img { width: 100%; height: 100%; object-fit: cover; }
.buehne-bild::after {
  content: ""; position: absolute; inset: 0;
  /* Mobil einspaltig: senkrechter Schleier, sonst steht der Fliesstext im Bild.
     Ab Tablet zusaetzlich der diagonale Verlauf — dort liegt der Text links. */
  background: linear-gradient(to bottom, rgba(30,25,22,.86) 0%, rgba(30,25,22,.80) 55%, rgba(30,25,22,.72) 100%);
}
@media (min-width: 44rem) {
  .buehne-bild::after {
    background: linear-gradient(105deg, rgba(30,25,22,.93) 0%, rgba(30,25,22,.78) 42%, rgba(30,25,22,.28) 100%);
  }
}
.buehne .huelle { position: relative; padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(3rem, 7vw, 5.5rem); }
.buehne h1 { color: #fff; max-width: 18ch; }
.buehne h1 em { font-style: normal; color: var(--petrol); }
.buehne p { color: #d6cfca; max-width: 44ch; font-size: clamp(1.02rem, 2.2vw, 1.18rem); }
.buehne-knoepfe { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

/* ─── Abschnitte ───────────────────────────────────────────────────────── */
.teil { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.teil--warm { background: var(--papier-warm); }
.teil--dunkel { background: var(--tinte); color: #d6cfca; }
.teil--dunkel h2, .teil--dunkel h3 { color: #fff; }

.gitter { display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); }
@media (min-width: 44rem) { .gitter--2 { grid-template-columns: 1fr 1fr; } .gitter--3 { grid-template-columns: repeat(3, 1fr); } }

.leistung { border-top: 2px solid var(--petrol); padding-top: 1rem; }
.leistung h3 { margin-bottom: .35rem; }
.leistung p { color: var(--grau); margin: 0; font-size: .98rem; }
.teil--dunkel .leistung p { color: #a99f99; }

/* Kennzahlen */
.zahlen { display: grid; gap: 1.6rem; }
@media (min-width: 40rem) { .zahlen { grid-template-columns: repeat(3, 1fr); } }
.zahl b { display: block; font-size: clamp(2.2rem, 5.5vw, 3.2rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--petrol); }
.zahl span { display: block; margin-top: .45rem; font-size: .92rem; color: var(--grau); }
.teil--dunkel .zahl span { color: #a99f99; }

/* Länderliste */
.laender { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 1.5rem 0 0; padding: 0; }
.laender li {
  border: 1px solid var(--linie); border-radius: 2px;
  padding: .4rem .85rem; font-size: .9rem; font-weight: 500;
}
.teil--dunkel .laender li { border-color: rgba(255,255,255,.22); }

/* Galerie */
.galerie { display: grid; gap: .7rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 50rem) { .galerie { grid-template-columns: repeat(4, 1fr); } .galerie figure:first-child { grid-column: span 2; grid-row: span 2; } }
.galerie figure { margin: 0; overflow: hidden; background: var(--papier-warm); }
.galerie img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3/2; transition: transform .5s cubic-bezier(.22,.7,.3,1); }
.galerie figure:first-child img { aspect-ratio: 3/2; }
.galerie figure:hover img { transform: scale(1.04); }

/* Messen */
.messen { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1.6rem, 4vw, 3rem); margin-top: 1.8rem; }
.messen img { height: 44px; width: auto; opacity: .65; filter: grayscale(1); transition: opacity .25s, filter .25s; }
.messen img:hover { opacity: 1; filter: none; }

/* Kontakt */
.kontakt { display: grid; gap: 2.2rem; }
@media (min-width: 46rem) { .kontakt { grid-template-columns: 1fr 1fr; gap: 3.5rem; } }
.kontaktdaten { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .9rem; }
.kontaktdaten li { display: grid; grid-template-columns: 5.5rem 1fr; gap: .8rem; align-items: baseline; }
.kontaktdaten dt, .kontaktdaten .art {
  font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--petrol);
}
.kontaktdaten a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }

/* ─── Rechtsseiten ─────────────────────────────────────────────────────── */
.rechtstext { max-width: 44rem; }
.rechtstext h2 { font-size: clamp(1.3rem, 3vw, 1.6rem); margin-top: 2.4rem; }
.rechtstext h3 { font-size: 1.05rem; margin-top: 1.6rem; }
.rechtstext ul { padding-left: 1.2rem; }
.rechtstext li { margin-bottom: .35rem; }

/* ─── Fuß ──────────────────────────────────────────────────────────────── */
.fuss { background: var(--tinte); color: #a99f99; padding: 3.5rem 0 2.5rem; font-size: .9rem; }
.fuss a { color: #d6cfca; text-decoration: none; }
.fuss a:hover { color: #fff; }
.fuss-gitter { display: grid; gap: 2rem; }
@media (min-width: 46rem) { .fuss-gitter { grid-template-columns: 1.6fr 1fr 1fr; } }
.fuss h4 { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--petrol); margin: 0 0 .9rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.fuss-unten { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .8rem; }

.nur-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }