/* concept stay GmbH — Landingpage
   Schlank, ohne Framework, ohne externe Abhaengigkeiten.
   Farben zentral in :root. */

:root {
  --text: #17181a;
  --leise: #5a5d58;
  --linie: #e1e5df;
  --grund: #ffffff;
  --flaeche: #f2f5f1;
  --dunkel: #1b211a;
  --gruen: #79bc75;
  --gruen-dunkel: #3f7a3c;
  --gruen-tief: #34632f;
  --breite: 1140px;
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--schrift); font-size: 18px; line-height: 1.65;
  color: var(--text); background: var(--grund); -webkit-text-size-adjust: 100%;
}
img { max-width: 100%; display: block; }

.wrap { max-width: var(--breite); margin: 0 auto; padding: 0 24px; }
.schmal { max-width: 760px; }

/* Mikro-Label */
.label {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gruen-dunkel); margin: 0 0 14px;
}
.label-hell { color: var(--gruen); }
.label-leise { color: var(--leise); }

h1, h2, h3 { font-weight: 650; letter-spacing: -0.01em; margin: 0 0 18px; }
h1 { font-size: 52px; line-height: 1.1; }
h2 { font-size: 34px; line-height: 1.2; }
h3 { font-size: 20px; line-height: 1.3; margin-bottom: 8px; letter-spacing: 0; }
p { margin: 0 0 18px; }
.gross { font-size: 21px; color: var(--leise); }
.leise { color: var(--leise); }
.klein { font-size: 15px; color: var(--leise); }
a { color: var(--gruen-dunkel); }

/* Markenzeile, kein Menue */
.marke { border-bottom: 1px solid var(--linie); background: var(--grund); }
.marke .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; padding-bottom: 16px; }
.marke img { height: 28px; width: auto; }
.marke .ort { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--leise); }

/* Aufmacher */
.aufmacher { position: relative; background: var(--dunkel); overflow: hidden; }
.aufmacher img.bild { width: 100%; height: 620px; object-fit: cover; opacity: 0.82; }
.aufmacher .text {
  position: absolute; inset: 0; display: flex; align-items: flex-end;
  background: linear-gradient(to right, rgba(12,16,12,0.86) 0%, rgba(12,16,12,0.62) 45%, rgba(12,16,12,0.15) 100%);
}
.aufmacher .inhalt { padding-bottom: 60px; max-width: 720px; }
.aufmacher h1, .aufmacher p { color: #fff; }
.aufmacher p.gross { color: rgba(255,255,255,0.86); max-width: 600px; }
.bildnachweis {
  position: absolute; right: 20px; bottom: 14px; font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.6);
}

/* Knoepfe */
.knopf {
  display: inline-block; background: var(--gruen-dunkel); color: #fff; text-decoration: none;
  padding: 16px 30px; border-radius: 3px; font-size: 17px; font-weight: 600; border: 0; cursor: pointer;
  font-family: var(--schrift);
}
.knopf:hover { background: var(--gruen-tief); }
.knopf-hell { background: #fff; color: var(--text); }
.knopf-hell:hover { background: #e9efe8; }
.knopfreihe { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }

/* Baender */
.band { padding: 90px 0; }
.band-flaeche { background: var(--flaeche); }
.band-dunkel { background: var(--dunkel); color: #fff; }
.band-dunkel h2 { color: #fff; }
.band-dunkel p { color: rgba(255,255,255,0.82); }
.band-schmal { padding: 60px 0; }

/* Zahlenreihe */
.kennzahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.kennzahl .wert { font-size: 40px; font-weight: 650; line-height: 1.1; color: var(--gruen); }
.kennzahl .was { font-size: 16px; color: rgba(255,255,255,0.75); margin-top: 6px; }

/* Vorher Nachher */
.projekt + .projekt { margin-top: 70px; padding-top: 70px; border-top: 1px solid var(--linie); }
.projekt .kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.projekt .kopf h3 { font-size: 26px; margin: 0; }
.marker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--gruen); color: #17300f; padding: 5px 12px; border-radius: 2px; white-space: nowrap; }
.paar { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.bildblock img { width: 100%; height: 320px; object-fit: cover; border-radius: 3px; background: var(--flaeche); }
.bildblock .titel { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; margin: 12px 0 6px; color: var(--leise); }
.bildblock .titel.ist { color: var(--gruen-dunkel); }
.bildblock p { font-size: 16px; margin: 0; }
.bildblock p strong { font-weight: 650; }

/* Schritte */
.schritte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.schritt { border-top: 2px solid var(--gruen); padding-top: 20px; }
.schritt .nr { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; color: var(--gruen-dunkel); margin-bottom: 10px; }
.schritt p { font-size: 16px; color: var(--leise); margin: 0; }

/* Suchprofil */
.profilraster { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 54px; align-items: start; }
.profilraster img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; border-radius: 3px; }
.profil { border-left: 3px solid var(--gruen); padding: 2px 0 2px 24px; margin: 0 0 26px; }
.profil ul { margin: 0; padding-left: 20px; }
.profil li { margin-bottom: 12px; }
.nichtpassend { font-size: 16px; color: var(--leise); border-top: 1px solid var(--linie); padding-top: 18px; }

/* Vorteile */
.vorteile { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px 54px; }
.vorteil p { font-size: 16px; color: var(--leise); margin: 0; }

/* Galerie */
.galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.galerie figure { margin: 0; }
.galerie img { width: 100%; height: 300px; object-fit: cover; border-radius: 3px; }
.galerie figcaption { font-size: 14px; color: var(--leise); margin-top: 10px; }

/* Personen */
.personen { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; }
.person img { width: 132px; height: 132px; object-fit: cover; border-radius: 50%; margin-bottom: 18px; }
.person .rolle { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gruen-dunkel); margin: 0 0 10px; }
.person p { font-size: 16px; }

/* Formular */
.formularraster { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
form { max-width: 100%; }
.feld { margin-bottom: 20px; }
label { display: block; font-size: 16px; font-weight: 600; margin-bottom: 6px; }
input[type=text], input[type=email], input[type=tel], textarea, select {
  width: 100%; padding: 13px 14px; font-size: 17px; font-family: var(--schrift);
  border: 1px solid var(--linie); border-radius: 3px; background: #fff; color: var(--text);
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--gruen); outline-offset: 1px; border-color: var(--gruen); }
textarea { min-height: 130px; resize: vertical; }
.pflicht { color: var(--gruen-dunkel); }
.honig { position: absolute; left: -9999px; }
.zustimmung { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; font-weight: 400; line-height: 1.5; }
.zustimmung input { margin-top: 4px; }
.hinweis { padding: 16px 18px; border-radius: 3px; margin-bottom: 24px; font-size: 16px; }
.hinweis-gut { background: #eaf3e8; border: 1px solid #c6dcc1; }
.hinweis-fehler { background: #fbeeec; border: 1px solid #e6c6c0; }
.direkt { font-size: 17px; line-height: 1.8; }
.direkt a { text-decoration: none; }

/* Tabelle Rechtstexte */
table { border-collapse: collapse; width: 100%; font-size: 16px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { width: 34%; font-weight: 600; }
.recht h2 { margin-top: 36px; font-size: 24px; }
.recht h3 { margin-top: 24px; font-size: 18px; }
.recht p, .recht li { font-size: 17px; }

/* Fuss */
.fuss { border-top: 1px solid var(--linie); background: var(--flaeche); padding: 46px 0 54px; font-size: 16px; }
.fuss .spalten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: 8px; }
.fuss a { color: var(--text); text-decoration: none; }
.fuss a:hover { text-decoration: underline; }

/* Luecken sichtbar, nur im Entwurf */
.luecke { background: #fff3cd; border-bottom: 1px dashed #b8860b; color: #7a5c00; padding: 0 3px; }

@media (max-width: 900px) {
  body { font-size: 17px; }
  h1 { font-size: 34px; }
  h2 { font-size: 27px; }
  .band { padding: 56px 0; }
  .aufmacher img.bild { height: 480px; }
  .aufmacher .text { background: linear-gradient(to top, rgba(12,16,12,0.9) 10%, rgba(12,16,12,0.45) 70%); }
  .aufmacher .inhalt { padding-bottom: 40px; }
  .paar, .schritte, .profilraster, .vorteile, .galerie, .personen, .formularraster, .kennzahlen, .fuss .spalten {
    grid-template-columns: 1fr;
  }
  .schritte, .kennzahlen { gap: 28px; }
  .profilraster { gap: 32px; }
  .profilraster img { min-height: 240px; }
  .bildblock img { height: 240px; }
  .galerie img { height: 260px; }
  .personen { gap: 40px; }
  .projekt + .projekt { margin-top: 44px; padding-top: 44px; }
}

/* Klassen der Rechts- und Dankeseiten */
.block { padding: 72px 0; }
.block-flaeche { background: var(--flaeche); }
.knopf-leer { background: transparent; color: var(--text); border: 1px solid var(--linie); }
.knopf-leer:hover { background: var(--flaeche); }

/* ---- Referenzen im Layout der Vorher/Nachher-Strecke ---- */
.referenz + .referenz { margin-top: 72px; padding-top: 72px; border-top: 1px solid var(--linie); }
.ref-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.ref-nr { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--leise); margin: 0 0 6px; }
.ref-kopf h3 { font-size: 32px; line-height: 1.15; margin: 0 0 8px; }
.ref-unter { font-size: 17px; color: var(--leise); margin: 0; }
.stadt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  background: var(--gruen); color: #17300f; padding: 6px 13px; border-radius: 2px; white-space: nowrap; margin-top: 4px; }

.paar { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.paar figure { margin: 0; }
.zustand { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--leise); margin: 0 0 12px; }
.zustand::before { content: ""; width: 26px; height: 2px; background: #b9beb6; display: block; }
.zustand.ist { color: var(--gruen-dunkel); }
.zustand.ist::before { background: var(--gruen); }
.paar img { width: 100%; height: 360px; object-fit: cover; display: block; background: var(--flaeche); }
.paar figcaption { font-size: 16px; line-height: 1.6; color: var(--leise); margin-top: 16px; }
.paar figcaption strong { color: var(--text); font-weight: 650; }

.details { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; margin-top: 34px; }
.detail { padding-left: 16px; border-left: 2px solid var(--gruen); }
.detail:first-child { padding-left: 0; border-left: 0; }
.detail .was { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gruen-dunkel); margin: 0 0 7px; }
.detail p { font-size: 15px; line-height: 1.5; color: var(--leise); margin: 0; }

@media (max-width: 900px) {
  .ref-kopf { flex-direction: column; gap: 12px; }
  .ref-kopf h3 { font-size: 26px; }
  .paar { grid-template-columns: 1fr; gap: 30px; }
  .paar img { height: 250px; }
  .details { grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 26px; }
  .detail, .detail:first-child { padding-left: 14px; border-left: 2px solid var(--gruen); }
  .referenz + .referenz { margin-top: 44px; padding-top: 44px; }
}

/* Zwei Ansprechpartner, nach Stadt getrennt */
.ansprech { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 34px; }
.ort-kontakt { border-top: 2px solid var(--gruen); padding-top: 16px; }
.ort-kontakt .was { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gruen-dunkel); margin: 0 0 8px; }
.ort-kontakt .wer { font-size: 17px; font-weight: 650; color: var(--text); margin: 0 0 6px; }
.ort-kontakt .zeilen { font-size: 16px; line-height: 1.7; margin: 0; }
.ort-kontakt .zeilen a { text-decoration: none; }
.ort-kontakt .zeilen a:hover { text-decoration: underline; }
@media (max-width: 900px) { .ansprech { grid-template-columns: 1fr; gap: 22px; } }

/* Aufmacher auf dem Telefon: Bild oben, Text darunter, nichts wird abgeschnitten */
@media (max-width: 900px) {
  .umbruch-gross { display: none; }
  .aufmacher { display: block; }
  .aufmacher img.bild { height: 300px; opacity: 1; }
  .aufmacher .text {
    position: static; display: block; background: var(--dunkel); padding: 32px 0 38px;
  }
  .aufmacher .inhalt { padding-bottom: 0; max-width: none; }
  .aufmacher h1 { font-size: 32px; }
  .aufmacher p.gross { font-size: 18px; max-width: none; }
  .aufmacher .knopfreihe { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .aufmacher .knopf { text-align: center; }
  .bildnachweis { top: 274px; bottom: auto; right: 14px; }
}

/* Lange Woerter nie ueber den Rand schieben */
h1, h2, h3 { overflow-wrap: break-word; }
@media (max-width: 900px) {
  .aufmacher h1 { font-size: 30px; line-height: 1.14; hyphens: auto; }
  .bildnachweis {
    top: auto; bottom: auto; right: 0; left: 0; position: static;
    display: block; padding: 10px 24px 0; color: var(--leise);
    background: var(--dunkel);
  }
}