/* Bötel Verwaltungs GmbH — Website, Design-System v5.0 "Blau trägt"
   Gemeinsames Stylesheet für alle fünf Seiten. Ersetzt die Inline-Styles der
   .dc.html-Entwürfe durch Klassen, damit ein Layout nur an einer Stelle
   geändert werden muss und damit Medienabfragen überhaupt möglich sind.

   Drei Bruchpunkte:
     Desktop  ab 1025px   — Originalmaße des Entwurfs (1440px-Raster)
     Tablet   641–1024px  — Randabstand und Mehrspalten-Raster reduziert
     Mobil    bis 640px   — folgt Mobil.dc.html, der bereits geprüften
                             Handy-Fassung der Startseite; auf die vier
                             anderen Seiten übertragen, die bisher keine
                             eigene Handy-Gestaltung hatten.

   Die Schriftgrößen (16/18/20/24/28/40px) sind Teil der Markenregel
   (bar.md Mechanismus 3) und bleiben über alle Bruchpunkte hinweg fest —
   nur das Layout fließt um, nicht die Typografie. Genau so war es schon
   in der geprüften Handy-Fassung der Startseite gelöst. */

@font-face { font-family: 'Greycliff CF'; font-weight: 300; font-style: normal; src: local('Greycliff CF Light'), local('GreycliffCF-Light'), local('Greycliff-CF-Light'); }
@font-face { font-family: 'Greycliff CF'; font-weight: 900; font-style: normal; src: local('Greycliff CF Heavy'), local('GreycliffCF-Heavy'), local('Greycliff-CF-Heavy'); }
/* local() zeigt Greycliff CF nur auf Geräten, auf denen die Schrift
   installiert ist — auf jedem anderen Gerät greift der Ersatzstapel unten. */

:root {
  --tinte: #213a55;      /* Blau dunkel — einziger Dunkelton */
  --akzent: #4a6d99;     /* Blau — Akzent auf Weiß */
  --blass: #a9c0d8;      /* Blau blass — Akzent auf Dunkel, alle Trennlinien */
  --sand: #efe9df;       /* Sand — Badge "Vermietet" */
  --weiss: #ffffff;
  --schrift: 'Greycliff CF', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --rand-desktop: 120px;
  --rand-tablet: 60px;
  --rand-mobil: 40px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--schrift);
  font-weight: 300;
  color: var(--tinte);
  background: var(--weiss);
}

a { color: var(--tinte); text-decoration: none; }
a:hover { color: var(--akzent); }

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

.seite { width: 100%; max-width: 1440px; margin: 0 auto; background: var(--weiss); display: flex; flex-direction: column; }

/* ---------- Textbausteine ---------- */

.kicker { display: flex; align-items: center; gap: 12px; }
.kicker-linie { width: 12px; height: 1px; background: var(--akzent); flex: none; }
.kicker-linie--hell { background: var(--weiss); }
.kicker-wort { font-size: 16px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.4; color: var(--akzent); }
.kicker-wort--hell { color: var(--weiss); }

.h-40 { margin: 0; font-size: 40px; font-weight: 900; line-height: 1.22; }
.h-28 { margin: 0; font-size: 28px; font-weight: 900; line-height: 1.25; }
.h-24 { margin: 0; font-size: 24px; font-weight: 300; line-height: 1.25; }
.t-20 { margin: 0; font-size: 20px; font-weight: 300; line-height: 1.3; }
.t-18 { margin: 0; font-size: 18px; font-weight: 300; line-height: 1.45; }
.t-16 { margin: 0; font-size: 16px; font-weight: 300; line-height: 1.4; }

.auf-hell { color: var(--tinte); }
.auf-dunkel { color: var(--weiss); }
.gedaempft-auf-hell { color: var(--akzent); }
.gedaempft-auf-dunkel { color: var(--blass); }

.symbolbild-hinweis { font-size: 16px; font-weight: 300; line-height: 1.4; color: var(--akzent); padding-top: 2px; }

/* ---------- Buttons & Links ---------- */

.btn-umriss {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; box-sizing: border-box; padding: 0 24px;
  border-radius: 8px; background: transparent;
  font-size: 18px; font-weight: 300; line-height: 1.4;
}
.btn-umriss--dunkel { border: 1px solid var(--weiss); color: var(--weiss); }
.btn-umriss--hell { border: 1px solid var(--tinte); color: var(--tinte); }

.link-unterstrichen { border-bottom: 1px solid var(--blass); padding-bottom: 2px; }
.link-unterstrichen--akzent { border-bottom: 1px solid var(--akzent); padding-bottom: 1px; }

.pfeil-link { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 300; line-height: 1.4; min-height: 44px; }
.pfeil-link svg { flex: none; }

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

.kopf {
  display: flex; justify-content: space-between; align-items: center;
  padding: 32px var(--rand-desktop);
}
.kopf-logo { height: 52px; width: auto; }
.kopf-nav { display: flex; align-items: center; gap: 36px; }
.kopf-nav a { font-size: 18px; }
.kopf-menue-link { display: none; }

/* Kapitelkopf der Unterseiten: 260px hohe dunkle Fläche mit Logo/Navigation
   oben und Kapitelüberschrift unten links (kein Hero, kein Foto). */
.kapitelkopf {
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 260px; padding: 32px var(--rand-desktop) 56px var(--rand-desktop);
  background: var(--tinte);
}
.kapitelkopf-titel { display: flex; flex-direction: column; gap: 16px; }

/* ---------- Hero (Startseite) ---------- */

.hero {
  width: 100%; height: 100svh; max-height: 900px; min-height: 560px;
  background: var(--tinte) url('hero.jpg') center / cover no-repeat;
  overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
}
.hero-kopf { display: flex; justify-content: space-between; align-items: center; padding: 32px var(--rand-desktop); }
.hero-zeile { padding: 0 var(--rand-desktop) 100px var(--rand-desktop); display: flex; flex-direction: column; gap: 4px; align-items: flex-start; max-width: 100%; }
.hero-zeile .t-20 { max-width: 100%; }

/* ---------- Sektionen ---------- */

.sek { padding: 100px var(--rand-desktop); display: flex; flex-direction: column; gap: 48px; }
.sek--dunkel { background: var(--tinte); }
.sek--hell { background: var(--weiss); }
.sek-kopf { display: flex; flex-direction: column; gap: 24px; }
.sek-vorspann { max-width: 640px; }

.zweispaltig { display: grid; grid-template-columns: 380px 1fr; gap: 100px; }
.zweispaltig > :last-child { display: flex; flex-direction: column; gap: 24px; max-width: 680px; }

.foto-slot { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.foto-1200 img, .foto-1200 { aspect-ratio: 1200 / 680; }
.foto-1200 { overflow: hidden; }
.foto-1200 img { width: 100%; height: 100%; object-fit: cover; }
.foto-580 { aspect-ratio: 580 / 387; overflow: hidden; }
.foto-580 img { width: 100%; height: 100%; object-fit: cover; }

.drei-leistungen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }

/* Kennzahlen (Über uns) */
.kennzahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; padding-top: 56px; border-top: 1px solid var(--blass); margin-top: 16px; }
.kennzahl-wert { font-size: 40px; font-weight: 900; line-height: 1.1; }

/* Objekte-Teaser (Startseite) und Objektübersicht */
.objekt-teaser { display: flex; flex-direction: column; gap: 48px; }
.objekt-teaser-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.objekt-karte { display: flex; flex-direction: column; gap: 8px; }
.objekt-karte-teaser { display: flex; flex-direction: column; gap: 6px; }
.objekt-name { font-size: 20px; font-weight: 300; line-height: 1.3; color: var(--tinte); }
.objekt-status { display: inline-block; align-self: flex-start; font-size: 16px; font-weight: 300; line-height: 1.4; border-radius: 8px; padding: 4px 14px; background: var(--sand); color: var(--tinte); }
.objekt-status--verfuegbar { font-weight: 900; }

.objekte-raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 60px 40px; }
.objekte-raster--eins { grid-template-columns: 1fr; }
.objekte-zwischentitel { display: grid; grid-template-columns: 480px 1fr; gap: 40px; align-items: baseline; }

/* Kontaktzeilen mit Haarlinien (Direktkontakt, Footer-Inhalt) */
.kontakt-tabelle { display: flex; flex-direction: column; }
.kontakt-zeile { display: grid; grid-template-columns: 180px 1fr; gap: 24px; border-top: 1px solid var(--blass); padding: 20px 0; }
.kontakt-zeile--letzte { border-bottom: 1px solid var(--akzent); }
.kontakt-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }

/* Markenmoment-Block (der eine Reinschwarz-Block je Seite) */
.markenmoment { padding: 100px var(--rand-desktop); background: var(--tinte); display: flex; flex-direction: column; gap: 56px; }
.drei-schritte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.schritt { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--weiss); padding-top: 24px; }

/* ---------- Footer ---------- */

.footer { background: var(--tinte); padding: 100px var(--rand-desktop) 48px var(--rand-desktop); display: flex; flex-direction: column; gap: 72px; }
.footer-raster { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; }
.footer-spalte { display: flex; flex-direction: column; gap: 24px; }
.footer-links { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.footer-unten { border-top: 1px solid var(--blass); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.footer-unten-links { display: flex; align-items: center; gap: 24px; }

/* Schlichter Footer der Unterseiten (Impressum/Datenschutz) */
.footer-schlicht-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }

/* ---------- Rechtsseiten (Impressum, Datenschutz) ---------- */

.rechtsinhalt { display: flex; flex-direction: column; gap: 100px; padding: 100px var(--rand-desktop); max-width: 1200px; margin: 0 auto; width: 100%; }
.rechtsblock { display: flex; flex-direction: column; gap: 40px; max-width: 720px; }
.rechtsabschnitt { display: flex; flex-direction: column; gap: 16px; border-top: 1px solid rgba(33, 58, 85, 0.2); padding-top: 40px; }
.rechtsabschnitt:first-child { border-top: 0; padding-top: 0; }
.adresszeilen { display: flex; flex-direction: column; gap: 6px; font-size: 18px; line-height: 1.45; }
.rechte-liste { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; font-size: 18px; line-height: 1.45; }
.rechte-liste li { margin: 0; }

/* ---------- Mieteranfrage-Formular ---------- */

.formular-bereich { display: flex; gap: 80px; }
.formular-spalte { display: flex; flex-direction: column; gap: 48px; flex: 0 0 720px; min-width: 0; }
.formular-bildspalte { flex: 0 0 400px; }
.formular-bildspalte img { aspect-ratio: 400 / 720; width: 100%; height: 100%; object-fit: cover; }
.formular-felder { display: flex; flex-direction: column; gap: 40px; }
.feld-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.feld { display: flex; flex-direction: column; gap: 4px; }
.feld label { font-size: 18px; font-weight: 300; line-height: 1.4; color: var(--tinte); }
.feld input[type="text"], .feld input[type="email"], .feld input[type="tel"], .feld textarea {
  width: 100%; box-sizing: border-box; margin: 0; border: 0; border-bottom: 1px solid var(--akzent);
  border-radius: 0; background: transparent; padding: 6px 0 12px 0;
  font-size: 18px; font-family: inherit; font-weight: 300; line-height: 1.4; color: var(--tinte); outline: none;
}
.feld textarea { height: 120px; resize: none; }
.feld input:focus, .feld textarea:focus { border-bottom-color: var(--blass); }
.feld-hinweis { padding-top: 8px; font-size: 16px; font-weight: 300; line-height: 1.4; }

.radio-gruppe { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.radio-option { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; min-height: 44px; }
.radio-option input[type="radio"] {
  appearance: none; -webkit-appearance: none; margin: 0;
  width: 18px; height: 18px; border: 1px solid var(--tinte); border-radius: 9px;
  background: transparent; display: inline-flex; align-items: center; justify-content: center;
  flex: none; cursor: pointer;
}
.radio-option input[type="radio"]:checked::after { content: ""; width: 8px; height: 8px; border-radius: 4px; background: var(--tinte); }
.radio-option input[type="radio"]:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

.einwilligung { display: flex; gap: 12px; align-items: flex-start; }
.einwilligung input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; margin: 3px 0 0 0;
  width: 18px; height: 18px; border: 1px solid var(--tinte); background: transparent;
  flex: none; cursor: pointer;
}
.einwilligung input[type="checkbox"]:checked { background: var(--tinte); }
.einwilligung input[type="checkbox"]:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.einwilligung label { font-size: 18px; font-weight: 300; line-height: 1.4; color: var(--tinte); max-width: 640px; }

.btn-absenden {
  display: inline-flex; align-items: center; box-sizing: border-box; margin: 0;
  font-size: 18px; font-family: inherit; font-weight: 300; line-height: 1.4;
  color: var(--tinte); border: 1px solid var(--tinte); border-radius: 8px;
  padding: 12px 32px; background: transparent; cursor: pointer; min-height: 48px;
}
.btn-absenden:hover { background: var(--sand); }

/* Rückmeldung nach dem Absenden — serverseitig gefüllt, hier nur die
   Zustände als Klassen vorbereitet; ohne Backend bleibt sie unsichtbar. */
.formular-rueckmeldung { display: none; font-size: 18px; font-weight: 300; line-height: 1.4; padding: 16px 0; }
.formular-rueckmeldung.ist-sichtbar { display: block; }
.formular-rueckmeldung--erfolg { color: var(--tinte); }
.formular-rueckmeldung--fehler { color: #8c3a2b; }

/* =====================================================================
   TABLET  641–1024px
   ===================================================================== */
@media (max-width: 1024px) {
  .kopf, .hero-kopf, .kapitelkopf, .sek, .markenmoment, .footer, .rechtsinhalt {
    padding-left: var(--rand-tablet); padding-right: var(--rand-tablet);
  }
  .hero-zeile { padding-left: var(--rand-tablet); padding-right: var(--rand-tablet); }

  .zweispaltig { grid-template-columns: 1fr; gap: 40px; }
  .drei-leistungen { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .objekte-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .objekte-zwischentitel { grid-template-columns: 1fr; gap: 8px; }
  .kontakt-spalten { grid-template-columns: 1fr; gap: 40px; }
  .footer-raster { grid-template-columns: 1fr 1fr; }
  .drei-schritte { grid-template-columns: 1fr 1fr; gap: 24px; }
  .formular-bereich { gap: 40px; }
  .formular-spalte { flex-basis: auto; flex: 1 1 auto; }
  .formular-bildspalte { flex: 0 0 260px; }
}

/* =====================================================================
   MOBIL  bis 640px — folgt der geprüften Handy-Startseite (Mobil.dc.html)
   ===================================================================== */
@media (max-width: 640px) {
  .kopf, .hero-kopf, .kapitelkopf, .sek, .markenmoment, .footer, .rechtsinhalt {
    padding-left: var(--rand-mobil); padding-right: var(--rand-mobil);
  }
  .hero-zeile { padding: 0 var(--rand-mobil) 40px var(--rand-mobil); }
  .hero-kopf { padding-top: 20px; }

  .kopf-logo { height: 40px; }
  .kapitelkopf { padding-top: 28px; }

  /* Kein Hamburger-Overlay: derselbe Geist-Link wie in der bisherigen
     Handy-Fassung, der zur Seitenliste im Footer springt. Kein neues
     Muster, sondern das bereits geprüfte. */
  .kopf-nav-links { display: none; }
  .kopf-menue-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 18px; font-weight: 300; }

  .sek { padding-top: 100px; padding-bottom: 100px; gap: 40px; }
  .sek-kopf { gap: 16px; }
  .h-40 { font-size: 28px; line-height: 1.25; }
  .kapitelkopf .h-40 { font-size: 40px; } /* Kapitelüberschrift bleibt groß, nur die Sektions-H-40 der Inhalte schrumpft */

  .zweispaltig { grid-template-columns: 1fr; gap: 24px; }
  .drei-leistungen { grid-template-columns: 1fr; gap: 48px; }
  .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .objekte-raster, .objekte-raster--eins { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .objekt-teaser-zeile { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .kontakt-zeile { grid-template-columns: 1fr; gap: 4px; }
  .footer-raster, .footer-schlicht-raster { grid-template-columns: 1fr; gap: 40px; }
  .drei-schritte { grid-template-columns: 1fr; gap: 32px; }

  .formular-bereich { flex-direction: column; gap: 48px; }
  .formular-spalte { flex: 1 1 auto; }
  .formular-bildspalte { flex: 0 0 auto; }
  .formular-bildspalte img { aspect-ratio: 4 / 3; }
  .feld-zeile { grid-template-columns: 1fr; gap: 24px; }

  .footer-unten { flex-direction: column; align-items: flex-start; }
}