/* Seite „Vermietung" -- Kopfbereich, Raum-Blöcke mit Tarif-Tabelle, Anfrage-Split.
   Marken-Farben kommen aus den Tokens in website/css/basis.css; die Sekundärwerte
   (Sektions-Hintergrund, gedämpfte Textfarben) stehen wie im übrigen Bestand direkt hier
   -- siehe about.css/blog.css, die es genauso halten.
   Formular-Raster (.teamevent-form-grid) und Panel-Stile kommen aus teamevent.css/buchung.css. */

/* --- Kopfbereich --- */
/* Polster (Karte 637, E6): oben die Stufe der Bänder; unten knapp wie ein Kopf (44 px, bis 760 px 34 px). Seitlich
   stehen über 760 px schon 56 px, nicht erst ab 1024 px wie beim Token (Befund S10, Umbruchstellen offen). */
.miet-hero {
  padding: var(--band-oben) 56px 44px;
}
/* Stufe „Bühne“ (`.seitentitel-kopf--gross`, website/css/basis.css; bis Karte 637, E4 hier 52 px, unter 760 px 38 px).
   Hier nur Breite und Umbruch. */
.miet-hero h1 {
  max-width: 15em;
  text-wrap: balance;
}

.miet-hero-text {
  margin-top: 20px;
  font-size: var(--titelsatz);
  line-height: var(--titelsatz-zeile);
  color: var(--farbe-text-neben);
  max-width: 38em;
}
.miet-sprungmarken {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 26px;
  font-family: var(--schrift-mono);
  font-size: 12px;
}
.miet-sprungmarken a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--farbe-rand);
  padding: 9px 15px;
  color: var(--farbe-text-neben);
}
.miet-sprungmarken a:hover { border-color: var(--farbe-teal); color: var(--farbe-teal); }

/* --- Raum-Block: Text und Bild je zur Hälfte, jeder zweite Raum gespiegelt --- */
.miet-raum { display: grid; grid-template-columns: 1fr 1fr; }
.miet-raum-text {
  padding: 52px 48px 52px 56px;
  display: flex;
  flex-direction: column;
}
.miet-raum-text h2 {
  margin-bottom: 14px;
  font-weight: 800;
}
.miet-raum-kicker { color: var(--farbe-teal); }
.miet-raum-beschreibung {
  margin-bottom: 22px;
  font-size: var(--lesetext);
  line-height: var(--lesetext-zeile);
  color: var(--farbe-text-neben);
  max-width: 34em;
}
.miet-raum-bild {
  position: relative;
  min-height: 100%;
  background: var(--farbe-flaeche);
  border-left: 1px solid var(--farbe-rand);
}
.miet-raum-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Gespiegelte Variante: Bild links, Text rechts. Im Markup steht der Text bewusst zuerst
   (Vorlesereihenfolge, Mobil-Ansicht); getauscht wird nur optisch über die Spalten-Reihenfolge. */
.miet-raum--gedreht .miet-raum-text { order: 2; padding: 52px 56px 52px 48px; }
.miet-raum--gedreht .miet-raum-bild { order: 1; border-left: none; border-right: 1px solid var(--farbe-rand); }

/* --- Schlagworte --- */
.miet-schlagworte { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.miet-schlagwort {
  font-family: var(--schrift-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--farbe-teal-tief);
  background: var(--farbe-teal-hell);
  padding: 6px 12px;
}

/* --- Tarif-Tabelle --- */
.miet-tarife {
  border: 1px solid var(--farbe-rand);
  background: var(--farbe-weiss);
  margin-bottom: 24px;
}
.miet-tarif-kopf,
.miet-tarif-zeile { display: grid; gap: 0 14px; align-items: baseline; }
.miet-tarif--3 { grid-template-columns: 1.3fr 1fr 1fr; }
.miet-tarif--2 { grid-template-columns: 1.6fr 1fr; }
.miet-tarif-kopf {
  font-family: var(--schrift-mono);
  font-size: var(--mono-etikett);   /* nichts unter 10 px; bis Karte 637 (F5) 9 px in #A49C8C mit 2,7 : 1 */
  letter-spacing: var(--mono-etikett-laufweite);
  text-transform: uppercase;
  color: var(--farbe-muted);
  padding: 11px 16px;
  border-bottom: 2px solid var(--farbe-teal);
}
.miet-tarif-zeile {
  padding: 11px 16px;
  border-bottom: 1px solid var(--farbe-linie-leise);
  font-size: 14px;
}
.miet-tarif-rechts { text-align: right; white-space: nowrap; }
.miet-tarif-blass { color: var(--farbe-muted); }
.miet-tarif-hinweis { padding: 9px 16px; margin: 0; font-size: 11px; color: var(--farbe-muted); }

/* --- Aktionen: unten bündig, auch wenn die Raumtexte unterschiedlich lang sind --- */
.miet-raum-aktionen { display: flex; gap: 12px; flex-wrap: wrap; margin-top: auto; }
.miet-raum-aktionen .icon { width: 15px; height: 15px; }

/* --- Anfrage --- */
.miet-anfrage { display: grid; grid-template-columns: 1.15fr 0.85fr; }
.miet-anfrage-formular { padding: 52px 56px; border-right: 1px solid var(--farbe-rand); }
.miet-anfrage-titel {
  margin-bottom: 8px;
  font-weight: 800;
}
.miet-anfrage-text {
  margin-bottom: 26px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--farbe-text-neben);
  max-width: 34em;
}

.miet-anfrage-info {
  padding: 52px 44px;
  background: var(--farbe-flaeche);
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.miet-info-label {
  font-family: var(--schrift-mono);
  font-size: var(--mono-etikett);
  letter-spacing: var(--mono-etikett-laufweite);
  text-transform: uppercase;
  color: var(--farbe-muted);
  margin-bottom: 12px;
}
/* Karte 619: „Direkt“ und die Bürozeiten sind Bausteine der Kontaktseite, gestaltet nur in teamevent/css/kontakt.css.
   Hier stand bis dahin eine zweite Gestaltung desselben Blocks. */
.miet-info-name { font-weight: 700; font-size: 15px; margin: 0 0 2px; }
.miet-info-text { margin: 0; font-size: 15px; line-height: 1.7; color: var(--farbe-muted); }
.miet-info-hand {
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid var(--farbe-rand);
  font-family: var(--schrift-hand);
  font-size: 26px;
  color: var(--farbe-terrakotta);
  line-height: 1;
  transform: rotate(-2deg);
}

/* --- Schmale Ansichten --- */
@media (max-width: 960px) {
  .miet-raum { grid-template-columns: 1fr; }
  .miet-raum-bild,
  .miet-raum--gedreht .miet-raum-bild {
    order: -1;
    min-height: 260px;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid var(--farbe-rand);
  }
  .miet-raum--gedreht .miet-raum-text { order: 0; }
  .miet-anfrage { grid-template-columns: 1fr; }
  .miet-anfrage-formular { border-right: none; border-bottom: 1px solid var(--farbe-rand); }
}
@media (max-width: 760px) {
  .miet-hero { padding: var(--band-oben) var(--seiten-rand) 34px; }
  .miet-raum-text,
  .miet-raum--gedreht .miet-raum-text,
  .miet-anfrage-formular,
  .miet-anfrage-info { padding-left: 22px; padding-right: 22px; }
}