/* MR Bausanierung – Designsystem: design-system/mr-bausanierung-online/MASTER.md */

:root {
  /* Farben – Navy und Orange aus dem Logo */
  --bg: #EEF1F4;            /* Betongrau */
  --flaeche: #FFFFFF;
  --text: #1B2430;          /* 14:1 auf --bg */
  --text-leise: #55606E;    /* 5,8:1 auf --bg */
  --marke: #013773;         /* Navy, 11,7:1 auf Weiß */
  --marke-tief: #0A2347;
  --akzent: #F48221;        /* Orange – nie als Text auf Hell */
  --auf-akzent: #0A2347;    /* Text auf Orange, 6:1 */
  --auf-marke-leise: #B9C6D8; /* 6,8:1 auf Navy */
  --linie: #D3D9E0;

  /* Schrift */
  --schrift: "Archivo", "Arial Narrow", Arial, sans-serif;
  --schmal: 62%;            /* Extra Condensed für Überschriften */
  --breit: 125%;            /* Logo-Schriftzug */

  /* Abstände (Dichte 2: großzügig) */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 6rem;

  --breite: 72rem;
  --rand: clamp(1rem, 4vw, 2rem);
  --dauer: .2s;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-stretch: 100%;
}

img, svg { display: block; max-width: 100%; height: auto; }
picture { display: block; }

h1, h2, h3 {
  margin: 0;
  font-stretch: var(--schmal);
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .005em;
  color: var(--marke);
}
h2 { font-size: clamp(2.5rem, 6vw, 4rem); }
h3 { font-size: 1.6rem; }
p { margin: 0; }

a { color: inherit; }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 3px;
}

.container { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }

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

.skip-link {
  position: absolute; left: var(--space-3); top: -4rem; z-index: 100;
  padding: var(--space-2) var(--space-3);
  background: var(--akzent); color: var(--auf-akzent); font-weight: 700;
}
.skip-link:focus { top: var(--space-3); }

.icon { width: 1.25em; height: 1.25em; flex: none; }

.eyebrow {
  font-weight: 700;
  font-size: .875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--marke);
}
.eyebrow--hell { color: var(--auf-marke-leise); }

/* ---------- Logo ---------- */

.logo {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--marke); text-decoration: none;
  min-height: 44px;
}
.logo .marke { width: 2.6rem; }
.logo__wort {
  font-stretch: var(--breit);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* ---------- Knöpfe ---------- */

.knopfreihe { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3.25rem;
  padding: .75rem 1.4rem;
  border: 2px solid transparent;
  font-weight: 750;
  font-size: 1.0625rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dauer), color var(--dauer), border-color var(--dauer), transform var(--dauer);
}
.knopf:active { transform: translateY(1px); }
.knopf--orange { background: var(--akzent); color: var(--auf-akzent); }
.knopf--orange:hover { background: #FF9A44; }
.knopf--rand-hell { border-color: #FFFFFF; color: #FFFFFF; }
.knopf--rand-hell:hover { background: #FFFFFF; color: var(--marke); }

.textlink {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 44px;
  color: inherit; text-decoration: underline; text-underline-offset: .2em;
  text-decoration-color: var(--akzent); text-decoration-thickness: 2px;
  word-break: break-word;
}

/* ---------- Kopf ---------- */

.kopf {
  position: sticky; top: 0; z-index: 50;
  background: var(--flaeche);
  border-bottom: 4px solid var(--akzent);
}
.kopf__innen {
  display: flex; align-items: center; gap: var(--space-4);
  min-height: 4.5rem;
  flex-wrap: wrap;
}
.kopf .logo { margin-right: auto; }
.kopf__nav ul { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; padding: 0; list-style: none; }
.kopf__nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 650; text-decoration: none; color: var(--text);
  border-bottom: 2px solid transparent;
  transition: border-color var(--dauer), color var(--dauer);
}
.kopf__nav a:hover { color: var(--marke); border-bottom-color: var(--akzent); }
.kopf__tel {
  display: none;
  align-items: center; gap: .5rem; min-height: 44px;
  padding: .5rem 1rem;
  background: var(--marke); color: #FFFFFF;
  font-weight: 750; text-decoration: none;
  transition: background-color var(--dauer);
}
.kopf__tel:hover { background: var(--marke-tief); }

.kopf__menue {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  padding: 0; border: 2px solid var(--marke); background: none; color: var(--marke);
  cursor: pointer;
}
.kopf__menue[hidden] { display: none; }
.kopf__menue .icon { width: 1.6rem; height: 1.6rem; }

/* ohne JS: Navigation einfach unter dem Logo */
.no-js .kopf__nav { width: 100%; padding-bottom: var(--space-2); }

@media (max-width: 899px) {
  .js .kopf__nav {
    display: none;
    width: 100%;
    padding-bottom: var(--space-3);
  }
  .js .kopf__nav.ist-offen { display: block; }
  .js .kopf__nav ul { flex-direction: column; gap: 0; }
  .js .kopf__nav a { width: 100%; min-height: 48px; border-bottom: 1px solid var(--linie); }
}
@media (min-width: 900px) {
  .kopf__innen { flex-wrap: nowrap; }
  .kopf__menue { display: none !important; }
  .no-js .kopf__nav { width: auto; padding: 0; }
  .kopf__tel { display: inline-flex; }
}

/* ---------- Hero: Bauschild ---------- */

.hero {
  padding-block: var(--space-6) var(--space-7);
  background:
    linear-gradient(180deg, transparent 0 70%, rgba(1, 55, 115, .06) 70% 100%),
    var(--bg);
}
.hero__innen {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.bauschild { position: relative; max-width: 50rem; }
.bauschild__tafel {
  position: relative; z-index: 1;
  background: var(--marke);
  color: #FFFFFF;
  border-top: 12px solid var(--akzent);
  padding: var(--space-5) clamp(1.25rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 2.75rem);
  box-shadow: 0 1.5rem 2.5rem -1.5rem rgba(10, 35, 71, .55);
}
/* Schraubenköpfe in den Ecken – wie bei einer verschraubten Tafel */
.bauschild__tafel::before,
.bauschild__tafel::after {
  content: "";
  position: absolute; top: .9rem;
  width: .7rem; height: .7rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #9FB0C6, #3D5A80);
}
.bauschild__tafel::before { left: .9rem; }
.bauschild__tafel::after { right: .9rem; }

.bauschild__kopf {
  display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap;
  padding-bottom: var(--space-3);
  border-bottom: 2px solid rgba(255, 255, 255, .85);
  font-stretch: var(--breit);
  font-weight: 800;
  font-size: .9rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.bauschild__titel {
  margin-block: var(--space-4) var(--space-5);
  color: #FFFFFF;
  font-size: clamp(3.25rem, 11vw, 5.5rem);
  font-weight: 900;
  line-height: .9;
}
.bauschild__felder { margin: 0 0 var(--space-5); }
.bauschild__felder > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: .1rem;
  padding-block: .7rem;
  border-top: 1px solid rgba(255, 255, 255, .35);
}
.bauschild__felder dt {
  font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--auf-marke-leise);
}
.bauschild__felder dd { margin: 0; font-weight: 550; }
.bauschild__preis dd {
  justify-self: start;
  padding: .1rem .6rem;
  background: var(--akzent); color: var(--auf-akzent);
  font-stretch: var(--schmal); font-weight: 900; font-size: 1.75rem;
  text-transform: uppercase; line-height: 1.15;
}
.bauschild__pfosten { display: none; }

/* Vorher/Nachher-Paar des Kunden – auf dem Handy ganz oben, auf Desktop rechts oben */
.hero__vergleich {
  order: -1;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
  width: 100%; max-width: 30rem;
  justify-self: center;
  padding-top: var(--space-3);
}
.hero__vergleich figure { margin: 0; }
.hero__vergleich .klebefoto { transform: rotate(-2deg); }
.hero__vergleich figure:last-child .klebefoto { transform: rotate(2deg); }
.hero__vergleich img { width: 100%; }
.klebefoto {
  position: relative;
  display: block;
  padding: .5rem;
  background: var(--flaeche);
  box-shadow: 0 .8rem 1.6rem -.8rem rgba(10, 35, 71, .45);
  transform: rotate(2deg);
}
.klebefoto::before {
  content: "";
  position: absolute; top: -.8rem; left: 50%;
  width: 5.5rem; height: 1.6rem;
  background: rgba(244, 130, 33, .75);
  transform: translateX(-50%) rotate(-4deg);
}

@media (min-width: 640px) {
  .bauschild__felder > div { grid-template-columns: 9rem 1fr; gap: var(--space-3); align-items: baseline; }
}

@media (min-width: 1000px) {
  .hero { padding-block: var(--space-7) 0; }
  .hero__innen { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); align-items: start; gap: var(--space-6); }
  .hero__vergleich { order: 0; align-self: start; padding-top: 0; }
  /* zwei Pfosten unter der Tafel */
  .bauschild__pfosten {
    display: flex; justify-content: space-between;
    height: 4rem; padding-inline: 18%;
  }
  .bauschild__pfosten::before,
  .bauschild__pfosten::after {
    content: "";
    width: .9rem;
    background: linear-gradient(90deg, #8D99A6, #B9C2CC 45%, #7C8895);
  }
}

/* ---------- Abschnitte ---------- */

.abschnitt { padding-block: var(--space-7); }
@media (min-width: 900px) { .abschnitt { padding-block: var(--space-8); } }

.abschnitt__kopf {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 4px solid var(--marke);
}
.abschnitt__intro { color: var(--text-leise); font-size: 1.125rem; }

/* Werkzeug-Sechsecke aus dem Flyer */
.werkzeuge { display: flex; gap: .4rem; }
.werkzeuge svg { width: 2.75rem; }

/* ---------- Leistungen ---------- */

.leistungen__liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: var(--space-4);
  margin: 0; padding: 0; list-style: none;
}
.leistung {
  position: relative;
  padding: var(--space-4) var(--space-3) var(--space-4) calc(var(--space-4) + 1.2rem);
  background: var(--flaeche);
  border-bottom: 3px solid transparent;
  transition: border-color var(--dauer);
}
.leistung:hover { border-bottom-color: var(--akzent); }
.leistung::before {
  content: "";
  position: absolute; left: var(--space-4); top: calc(var(--space-4) + .35rem);
  width: .75rem; height: .75rem;
  background: var(--akzent);
}
.leistung h3 { margin-bottom: var(--space-2); font-size: 1.45rem; hyphens: auto; overflow-wrap: break-word; }
.leistung p { color: var(--text-leise); }
.leistungen__mehr { margin-top: var(--space-5); font-size: 1.125rem; }
.leistungen__mehr strong { color: var(--marke); }

/* ---------- Vorher & nachher ---------- */

.ergebnisse { background: var(--flaeche); }
.ergebnisse__raster { display: grid; gap: var(--space-6) var(--space-5); }
.vergleich h3 { margin-bottom: var(--space-3); }
.vergleich__paar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); max-width: 34rem; }
.vergleich__doppel { display: grid; gap: var(--space-5); }
.vergleich figure { position: relative; margin: 0; }
.vergleich img { width: 100%; border: 1px solid var(--linie); }

/* Etikett wie im Flyer, nur als Fläche – Orange trägt hier keinen Text auf Hell */
.marke-etikett {
  position: absolute; left: 0; top: 0;
  padding: .15rem .55rem;
  background: var(--marke); color: #FFFFFF;
  font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.vergleich__paar figure:last-child .marke-etikett { background: var(--akzent); color: var(--auf-akzent); }

.flachdach { display: grid; gap: var(--space-2); }
.flachdach__klein { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.flachdach img { width: 100%; height: 100%; object-fit: cover; border: 1px solid var(--linie); }
.flachdach__gross { max-width: 46rem; }

@media (min-width: 760px) {
  .ergebnisse__raster { grid-template-columns: 1fr 1fr; }
  .vergleich--breit { grid-column: 1 / -1; }
  .vergleich__doppel { grid-template-columns: 1fr 1fr; }
  .flachdach { grid-template-columns: 10rem minmax(0, 46rem); }
  .flachdach__klein { grid-template-columns: 1fr; }
}

/* ---------- Festpreis ---------- */

.festpreis {
  padding-block: var(--space-7);
  background: var(--marke);
  color: #FFFFFF;
  border-top: 12px solid var(--akzent);
}
.festpreis__innen { display: grid; gap: var(--space-6); }
.festpreis__spruch {
  color: #FFFFFF;
  font-size: clamp(3.25rem, 11vw, 5.75rem);
  font-weight: 900;
  line-height: .88;
}
.festpreis__spruch span { display: block; color: var(--akzent); } /* Großschrift: 4,5:1 auf Navy */
.festpreis__text { font-size: 1.1875rem; margin-bottom: var(--space-4); }

.ablauf { margin: 0; padding: 0; list-style: none; counter-reset: schritt; }
.ablauf li {
  counter-increment: schritt;
  display: grid; grid-template-columns: 3.25rem 1fr; column-gap: var(--space-3);
  padding-block: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, .35);
}
.ablauf li::before {
  content: counter(schritt);
  grid-row: span 2;
  font-stretch: var(--schmal); font-weight: 900; font-size: 3.25rem; line-height: .85;
  color: var(--akzent);
}
.ablauf h3 { color: #FFFFFF; margin-bottom: var(--space-1); }
.ablauf p { color: var(--auf-marke-leise); }

@media (min-width: 900px) {
  .festpreis { padding-block: var(--space-8); }
  .festpreis__innen { grid-template-columns: 1.1fr 1fr; align-items: center; }
}

/* ---------- Für wen ---------- */

.fuerwen__raster { display: grid; gap: var(--space-5); }
.fuerwen__block { padding-left: var(--space-4); border-left: 6px solid var(--akzent); }
.fuerwen__satz {
  margin-top: var(--space-2);
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  font-weight: 600; line-height: 1.3;
  color: var(--text);
}
@media (min-width: 760px) { .fuerwen__raster { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }

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

.kontakt {
  padding-block: var(--space-7);
  background: var(--marke);
  color: #FFFFFF;
}
.kontakt__innen { display: grid; gap: var(--space-6); }
.kontakt h2 { color: #FFFFFF; margin-block: var(--space-2) var(--space-4); }
.kontakt__text { max-width: 34rem; color: #E3E9F1; font-size: 1.125rem; }
.kontakt__nummer {
  display: inline-block;
  margin-block: var(--space-4);
  font-stretch: var(--schmal); font-weight: 900;
  font-size: clamp(2.75rem, 9vw, 4.5rem); line-height: 1;
  color: #FFFFFF; text-decoration: none;
  border-bottom: 5px solid var(--akzent);
}
.kontakt__daten { margin: 0; display: grid; gap: var(--space-4); align-content: start; }
.kontakt__daten > div { padding-top: var(--space-3); border-top: 1px solid rgba(255, 255, 255, .35); }
.kontakt__daten dt {
  font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--auf-marke-leise);
}
.kontakt__daten dd { margin: .2rem 0 0; font-size: 1.0625rem; }

@media (min-width: 900px) {
  .kontakt { padding-block: var(--space-8); }
  .kontakt__innen { grid-template-columns: 1.4fr 1fr; align-items: start; }
}

/* ---------- Fuß ---------- */

.fuss {
  padding-block: var(--space-6);
  background: var(--marke-tief);
  color: #E3E9F1;
  border-top: 6px solid var(--akzent);
}
.fuss__innen { display: grid; gap: var(--space-4); }
.logo--fuss { color: #FFFFFF; }
.fuss__adresse { font-size: .9375rem; line-height: 1.8; }
.fuss__adresse a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; word-break: break-word; }
.fuss__links { display: flex; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.fuss__links a { display: inline-flex; align-items: center; min-height: 44px; color: #FFFFFF; }
@media (min-width: 900px) {
  .fuss__innen { grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-6); }
}

/* ---------- Schnellkontakt (Handy) ---------- */

.schnellkontakt {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 3px solid var(--akzent);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--marke);
}
.schnellkontakt__knopf {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3.5rem;
  background: var(--akzent); color: var(--auf-akzent);
  font-weight: 800; text-decoration: none;
}
.schnellkontakt__knopf--wa { background: var(--marke); color: #FFFFFF; }
body { padding-bottom: 3.75rem; }
@media (min-width: 900px) {
  .schnellkontakt { display: none; }
  body { padding-bottom: 0; }
}

/* ---------- Einblenden beim Scrollen (nur mit JS und ohne reduzierte Bewegung) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .4s ease-out, transform .4s ease-out;
  }
  .js [data-reveal].ist-sichtbar { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* ---------- Rechtstexte ---------- */

.rechtstext__innen { max-width: 46rem; }
.rechtstext h1 { font-size: clamp(2.75rem, 8vw, 4.5rem); margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 4px solid var(--marke); hyphens: manual; }
.rechtstext h2 { font-size: 1.6rem; margin: var(--space-5) 0 var(--space-2); }
.rechtstext p, .rechtstext ul { margin: 0 0 var(--space-3); }
.rechtstext ul { padding-left: 1.25rem; }
.rechtstext a { color: var(--marke); text-decoration-color: var(--akzent); text-decoration-thickness: 2px; text-underline-offset: .2em; word-break: break-word; }
.rechtstext__stand { margin-top: var(--space-5); color: var(--text-leise); }