/* ==========================================================================
   BM TROCKENBAU — Editorial Scroll Site
   Farbwelt = die echten Plattenfarben des Gewerks:
   weiß (Spachtel) · karton (Gipskarton) · grün (imprägniert) · rot (Feuerschutz)
   ========================================================================== */

:root {
  --navy: #0D1B84;
  --weiss: #FFFFFF;
  --karton: #DCD6C9;   /* Gipskarton-Oberfläche */
  --grau:   #C4C8CE;   /* Metallprofil / Kartonrückseite */
  --gruen:  #4C6F55;   /* GKBI – imprägniert */
  --rot:    #A33B2C;   /* GKF – Feuerschutz */
  --blau:   #2B5288;   /* Hartgipsplatte – Knauf Diamant / Rigips Die Blaue */
  --tinte:  #14161C;
  --tinte-weich: rgba(20, 22, 28, 0.55);
  --weiss-weich: rgba(255, 255, 255, 0.6);

  --pad: clamp(16px, 4.2vw, 64px);
  --gap: clamp(14px, 1.6vw, 26px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

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

body {
  font-family: "Manrope", -apple-system, "Segoe UI", sans-serif;
  background: var(--weiss);
  color: var(--tinte);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* ---------- Typo-Klassen ---------- */
.t-riesig {
  font-size: clamp(2.9rem, 10.4vw, 10.5rem);
  line-height: 0.88;
  letter-spacing: -0.035em;
  font-weight: 800;
  text-transform: uppercase;
}
.t-gross {
  font-size: clamp(2.1rem, 6.6vw, 6.4rem);
  line-height: 0.94;
  letter-spacing: -0.03em;
  font-weight: 800;
  text-transform: uppercase;
}
.t-mittel {
  font-size: clamp(1.5rem, 3.1vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-weight: 800;
}
.t-lauf {
  font-size: clamp(1.05rem, 1.28vw, 1.35rem);
  line-height: 1.55;
  font-weight: 400;
}
.t-klein { font-size: clamp(0.86rem, 0.95vw, 1rem); line-height: 1.6; }
em, .kursiv { font-style: normal; font-weight: 200; letter-spacing: -0.02em; }

/* ---------- Layout ---------- */
.wrap { padding-inline: var(--pad); }
.sect { position: relative; padding-block: clamp(72px, 11vh, 150px); }

/* Farbflächen */
.bg-weiss  { background: var(--weiss);  color: var(--tinte); }
.bg-karton { background: var(--karton); color: var(--tinte); }
.bg-grau   { background: var(--grau);   color: var(--tinte); }
.bg-navy   { background: var(--navy);   color: var(--weiss); }
.bg-gruen  { background: var(--gruen);  color: var(--weiss); }
.bg-rot    { background: var(--rot);    color: var(--weiss); }
.bg-blau   { background: var(--blau);   color: var(--weiss); }
.bg-tinte  { background: var(--tinte);  color: var(--weiss); }

/* ---------- Preloader ---------- */
.pre {
  position: fixed; inset: 0; z-index: 100;
  background: var(--tinte); color: var(--weiss);
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: var(--pad);
}
.pre__zahl { font-size: clamp(3.4rem, 15vw, 13rem); line-height: 0.8; font-weight: 800; letter-spacing: -0.05em; }
.pre__wort { text-align: right; max-width: 40ch; }
.pre__balken {
  position: absolute; left: var(--pad); right: var(--pad); bottom: calc(var(--pad) - 1px);
  height: 1px; background: rgba(255,255,255,0.22);
}
.pre__balken i { display: block; height: 100%; width: 0%; background: var(--weiss); }
.pre.weg { transform: translateY(-100%); transition: transform 700ms var(--ease); }

/* ---------- Cursor ---------- */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 90;
  width: 12px; height: 12px; border-radius: 50%;
  background: currentColor; color: var(--navy);
  pointer-events: none; mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  transition: width 260ms var(--ease), height 260ms var(--ease);
}
.cursor.gross { width: 76px; height: 76px; }
.cursor span {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700;
  color: var(--weiss); opacity: 0; transition: opacity 200ms;
}
.cursor.gross span { opacity: 1; }
@media (hover: none), (max-width: 860px) { .cursor { display: none; } }

/* ---------- Kopf ---------- */
.kopf {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(12px, 1.7vw, 22px) var(--pad);
  color: var(--tinte);
  transition: color 280ms var(--ease);
}
.kopf--dunkel { color: var(--weiss); }
/* Logo plus Zugehörigkeitszeile: erbt die Kopffarbe, wechselt also
   zusammen mit dem Logo auf hell, sobald ein dunkler Block darunter liegt. */
.kopf__marke { display: flex; flex-direction: column; gap: 7px; }
.kopf__mutter { font-size: clamp(9.5px, 0.7vw, 11.5px); line-height: 1.2; opacity: 0.7; white-space: nowrap; }
.kopf__logo { display: block; position: relative; line-height: 0; }
.kopf__logo img { width: auto; height: clamp(34px, 3.1vw, 44px); transition: opacity 280ms var(--ease); }
.kopf__logo__dunkel { position: absolute; top: 0; left: 0; opacity: 0; }
.kopf--dunkel .kopf__logo__hell { opacity: 0; }
.kopf--dunkel .kopf__logo__dunkel { opacity: 1; }
.kopf__nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); font-size: clamp(14px, 1vw, 15.5px); font-weight: 600; }
.kopf__nav a, .kopf__nav button { position: relative; }
.kopf__nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -4px;
  height: 1px; background: currentColor; transition: right 340ms var(--ease);
}
.kopf__nav a:hover::after { right: 0; }
@media (max-width: 860px) { .kopf__nav .versteck-m { display: none; } }

/* ---------- Held ---------- */
.held {
  min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: clamp(96px, 14vh, 160px); padding-bottom: clamp(30px, 6vh, 74px);
  position: relative;
}
.held__titel { position: relative; z-index: 3; }
.held__z { display: block; overflow: hidden; }
.held__z > span { display: block; will-change: transform; }
.held__fuss { display: flex; justify-content: space-between; align-items: flex-end; gap: clamp(24px, 5vw, 90px); margin-top: clamp(26px, 4vh, 54px); flex-wrap: wrap; }
.held__fuss p { max-width: 46ch; }
.held__scroll { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.held__scroll i { display: block; width: 40px; height: 1px; background: currentColor; transform-origin: left; animation: zieh 2.1s var(--ease) infinite; }
@keyframes zieh { 0% { transform: scaleX(0); } 55% { transform: scaleX(1); } 100% { transform: scaleX(0); transform-origin: right; } }

/* ---------- Bild-Flip (zwei Platten, die sich überlagern) ---------- */
.flip { position: relative; overflow: hidden; }
.flip__a, .flip__b { position: relative; }
.flip__b { position: absolute; inset: 0; }
.flip__b img { height: 100%; object-fit: cover; }
.flip img { object-fit: cover; }

.voll { height: clamp(62vh, 82vh, 900px); }
.voll img { height: 100%; object-fit: cover; }

/* ---------- Manifest (Zeilen, wechselnde Ausrichtung) ---------- */
.manifest__zeilen { display: grid; gap: clamp(2px, 0.4vw, 8px); }
.manifest__z { display: block; overflow: hidden; }
.manifest__z > span { display: block; will-change: transform; }
.re { text-align: right; }
.manifest__text { margin-top: clamp(30px, 5vh, 62px); display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 861px) { .manifest__text { grid-template-columns: 5fr 6fr; } .manifest__text p { grid-column: 2; max-width: 52ch; } }

/* ---------- Zwei-Bild-Block ---------- */
.duo { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 861px) { .duo { grid-template-columns: 6fr 5fr; align-items: end; } .duo .hoch { margin-bottom: clamp(40px, 8vh, 110px); } }
.duo__text { margin-top: clamp(28px, 5vh, 60px); max-width: 60ch; }

/* ---------- Prinzipien (Bild folgt der Maus) ---------- */
.prinz { position: relative; }
.prinz__reihe {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(14px, 3vw, 46px);
  align-items: start;
  padding-block: clamp(26px, 4.4vh, 54px);
  border-top: 1px solid currentColor;
  position: relative; z-index: 2;
}
.prinz__reihe:last-child { border-bottom: 1px solid currentColor; }
.prinz__num { opacity: 0.4; padding-top: 0.9em; font-size: clamp(12px, 0.95vw, 14px); font-weight: 600; min-width: 2.2em; }
.prinz__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.prinz__titel { transition: opacity 340ms var(--ease); }
.prinz__text { max-width: 44ch; opacity: 0.62; }
@media (min-width: 861px) {
  .prinz__kopf { flex-wrap: nowrap; }
  .prinz__text { flex: 0 0 34%; }
  .prinz.hat-hover .prinz__titel { opacity: 0.32; }
  .prinz__reihe:hover .prinz__titel { opacity: 1; }
}
.prinz__bild {
  position: fixed; top: 0; left: 0; z-index: 1;
  width: clamp(230px, 21vw, 340px); aspect-ratio: 3/4;
  overflow: hidden; pointer-events: none;
  opacity: 0; transform: translate(-50%, -50%) scale(0.94);
  transition: opacity 300ms var(--ease), transform 420ms var(--ease);
}
.prinz__bild.an { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.prinz__bild img { height: 100%; object-fit: cover; }
@media (max-width: 860px) { .prinz__bild { display: none; } }

/* ---------- Leistungen als Plattenstapel ---------- */
.platte { position: relative; overflow: hidden; }
.platte__innen {
  display: grid; gap: clamp(20px, 3vw, 46px);
  grid-template-columns: 1fr; align-items: center;
  padding-block: clamp(46px, 7vh, 92px);
}
@media (min-width: 861px) {
  .platte__innen { grid-template-columns: 5fr 6fr; }
  /* jede zweite Platte gespiegelt — wie ein versetzter Plattenstoß */
  .platte:nth-of-type(even) .platte__innen { grid-template-columns: 6fr 5fr; }
  .platte:nth-of-type(even) .platte__bild { order: -1; }
}
.platte__kopf {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: clamp(10px, 1.4vw, 16px);
  font-size: clamp(13px, 1vw, 15px); font-weight: 600; opacity: 0.66;
}
.platte__nr { font-variant-numeric: tabular-nums; opacity: 0.7; }
.platte__titel { margin-bottom: clamp(12px, 1.6vw, 20px); }
.platte__text { max-width: 48ch; opacity: 0.78; }
.platte__bild { overflow: hidden; }
.platte__bild img { aspect-ratio: 4/3; object-fit: cover; }

/* ---------- Über uns ---------- */
.ueber { display: grid; gap: clamp(24px, 4vw, 60px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 861px) { .ueber { grid-template-columns: 6fr 5fr; } }
.ueber__bild { overflow: hidden; }
.ueber__bild img { aspect-ratio: 4/3; object-fit: cover; }
.ueber__text p + p { margin-top: 1em; }

/* ---------- Referenzen ---------- */
.refs {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px) clamp(20px, 2.6vw, 36px);
}
@media (min-width: 640px) { .refs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .refs { grid-template-columns: repeat(3, 1fr); } }
.ref__bild { overflow: hidden; margin-bottom: clamp(14px, 1.6vw, 20px); }
.ref__bild img { aspect-ratio: 4/3; object-fit: cover; }
.ref__meta {
  display: flex; gap: 14px; margin-bottom: 8px;
  font-size: clamp(12px, 0.85vw, 13.5px); font-weight: 600; opacity: 0.6;
}
.ref__meta span + span::before { content: '·'; margin-right: 14px; }
.ref__titel { font-size: clamp(18px, 1.5vw, 23px); margin-bottom: 8px; line-height: 1.2; }
.ref__text { font-size: clamp(14px, 1vw, 15.5px); opacity: 0.76; max-width: 42ch; }
.refs__hinweis {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 16px 40px;
  margin-top: clamp(48px, 6vw, 96px); padding-top: clamp(20px, 2.4vw, 32px);
  border-top: 1px solid currentColor;
}
.refs__hinweis p { max-width: 52ch; opacity: 0.7; }
.refs__hinweis a { font-weight: 700; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.refs__hinweis a svg { transition: transform 340ms var(--ease); }
.refs__hinweis a:hover svg { transform: translateX(5px); }

/* ---------- Knopf ---------- */
.knopf {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid currentColor; padding: 13px 24px;
  font-weight: 700; font-size: clamp(14px, 1vw, 15.5px);
  transition: background 300ms var(--ease), color 300ms var(--ease);
}
.knopf svg { transition: transform 340ms var(--ease); }
.knopf:hover { background: currentColor; }
.knopf:hover span, .knopf:hover svg { color: var(--weiss); stroke: var(--weiss); }
.knopf:hover svg { transform: translateX(5px); }
.knopf--gross { padding: 16px 30px; font-size: clamp(15px, 1.15vw, 17px); }
.bg-navy .knopf:hover, .knopf--hell:hover { background: var(--weiss); color: var(--navy); }
.bg-navy .knopf:hover svg, .knopf--hell:hover svg { stroke: var(--navy); }

/* ---------- Weiterführende Karten (Startseite) ---------- */
.weiter { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 760px) { .weiter { grid-template-columns: 1fr 1fr; } }
.weiter__karte {
  display: flex; flex-direction: column; gap: 10px;
  border: 1px solid currentColor; padding: clamp(24px, 3.4vw, 44px);
  transition: background 320ms var(--ease);
}
.weiter__karte:hover { background: rgba(20, 22, 28, 0.05); }
.weiter__label { font-size: clamp(13px, 0.95vw, 15px); font-weight: 600; opacity: 0.6; }
.weiter__titel { display: block; }
.weiter__text { opacity: 0.7; max-width: 40ch; }
.weiter__pfeil {
  margin-top: auto; padding-top: clamp(14px, 2vh, 22px);
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: clamp(14px, 1vw, 15.5px);
}
.weiter__pfeil svg { transition: transform 340ms var(--ease); }
.weiter__karte:hover .weiter__pfeil svg { transform: translateX(5px); }

/* ---------- Kontaktformular ---------- */
.formular { display: grid; gap: clamp(30px, 4vw, 70px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .formular { grid-template-columns: 5fr 6fr; } }
.formular__direkt { margin-top: clamp(24px, 3.4vh, 40px); }
.formular__mail {
  font-size: clamp(1.1rem, 1.6vw, 1.5rem); font-weight: 700; letter-spacing: -0.02em;
  position: relative; display: inline-block;
}
.formular__mail::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; transform-origin: right; transition: transform 420ms var(--ease);
}
.formular__mail:hover::after { transform: scaleX(0); transform-origin: left; }

.formular__feld { display: grid; gap: clamp(14px, 1.8vw, 20px); }
.feld__paar { display: grid; gap: clamp(14px, 1.8vw, 20px); grid-template-columns: 1fr; }
@media (min-width: 560px) { .feld__paar { grid-template-columns: 1fr 1fr; } }
.feld label {
  display: block; margin-bottom: 7px;
  font-size: clamp(13px, 0.95vw, 14.5px); font-weight: 600; opacity: 0.75;
}
.feld input, .feld select, .feld textarea {
  width: 100%; font: inherit; font-size: clamp(15px, 1.05vw, 16.5px);
  color: inherit; background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 12px 14px; border-radius: 0;
  transition: border-color 260ms var(--ease), background 260ms var(--ease);
}
.feld textarea { resize: vertical; min-height: 120px; }
.feld select option { color: #14161C; }
.feld input::placeholder, .feld textarea::placeholder { color: currentColor; opacity: 0.42; }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none; border-color: currentColor; background: rgba(255, 255, 255, 0.06);
}
.feld input:user-invalid, .feld textarea:user-invalid { border-color: #FF9A8B; }

.feld__haken { display: flex; gap: 12px; align-items: flex-start; font-size: clamp(12.5px, 0.9vw, 14px); opacity: 0.82; line-height: 1.5; cursor: pointer; }
.feld__haken input { flex: none; width: 19px; height: 19px; margin-top: 2px; accent-color: var(--weiss); cursor: pointer; }
.feld__haken a { text-decoration: underline; text-underline-offset: 3px; }

.formular__feld .knopf { justify-self: start; }
.formular__hinweis { font-size: clamp(13px, 0.95vw, 14.5px); min-height: 1.4em; }
.formular__hinweis.gut { color: #A7E8C0; }
.formular__hinweis.schlecht { color: #FFB3A7; }

/* ---------- Kontakt ---------- */
.kontakt { text-align: center; }
.kontakt__titel { margin-block: clamp(18px, 3vh, 40px); }
.kontakt__mail { display: inline-block; position: relative; }
.kontakt__mail::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.1em; height: 1px; background: currentColor; transform-origin: right; transition: transform 420ms var(--ease); }
.kontakt__mail:hover::after { transform: scaleX(0); transform-origin: left; }
.kontakt__zwei { display: grid; gap: var(--gap); grid-template-columns: 1fr; margin-top: clamp(40px, 7vh, 86px); text-align: left; }
@media (min-width: 861px) { .kontakt__zwei { grid-template-columns: 1fr 1fr; } }
.kontakt__karte { border: 1px solid currentColor; padding: clamp(22px, 3vw, 38px); display: flex; flex-direction: column; gap: 10px; }
.karte__wer { font-size: clamp(13px, 0.95vw, 15px); font-weight: 600; opacity: 0.6; }
.kontakt__karte a { font-size: clamp(14px, 1vw, 15.5px); font-weight: 600; }
.fuss__reihe { font-size: clamp(13px, 0.95vw, 15px); }
.pre__wort { font-size: clamp(13px, 1.1vw, 16px); font-weight: 600; line-height: 1.5; }
.prinz__num { font-variant-numeric: tabular-nums; }
.kontakt__karte b { font-size: clamp(1.15rem, 1.7vw, 1.6rem); font-weight: 800; letter-spacing: -0.02em; }
.kontakt__karte p { opacity: 0.68; max-width: 40ch; }
.kontakt__karte a { margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 8px; }
.kontakt__karte a svg { flex: none; transition: transform 340ms var(--ease); }
.kontakt__karte a:hover svg { transform: translateX(5px); }

/* ---------- Fuß ---------- */
.fuss { padding-top: clamp(50px, 8vh, 100px); }
.fuss__marke { line-height: 0.72; letter-spacing: -0.06em; font-weight: 800; font-size: clamp(6rem, 33vw, 34rem); text-transform: uppercase; overflow: hidden; }
.fuss__marke span { display: block; will-change: transform; }
.fuss__reihe { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-top: clamp(20px, 3vh, 34px); margin-top: clamp(20px, 3vh, 34px); border-top: 1px solid currentColor; opacity: 0.6; }
.fuss__reihe nav { display: flex; gap: 18px; flex-wrap: wrap; }
/* Zugehörigkeit zur Muttergesellschaft: mitlesbar, ohne den Fuß zu dominieren */
.fuss__firma { display: flex; flex-direction: column; gap: 5px; }
.fuss__mutter { font-size: 0.88em; opacity: 0.86; }

/* ---------- Reveal ---------- */
.rv { opacity: 0; transform: translateY(26px); }
.rv.da { opacity: 1; transform: none; transition: opacity 760ms var(--ease), transform 760ms var(--ease); }
.rv-bild { clip-path: inset(0 0 100% 0); }
.rv-bild.da { clip-path: inset(0 0 0% 0); transition: clip-path 1000ms var(--ease); }

/* ---------- Statik-Modus (für Screenshots/Tests) + Reduced Motion ---------- */
.statik .pre { display: none; }
.statik .rv, .statik .rv-bild { opacity: 1 !important; transform: none !important; clip-path: none !important; }
.statik .held__z > span, .statik .manifest__z > span, .statik .fuss__marke span { transform: none !important; opacity: 1 !important; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .rv, .rv-bild { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .held__z > span, .manifest__z > span, .fuss__marke span { transform: none !important; }
}

/* Honigtopf gegen Bots — für Menschen unsichtbar, für Screenreader ausgeblendet */
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }