/* 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 --- */
.miet-hero {
  padding: 56px 56px 44px;
  border-bottom: 1px solid var(--farbe-rand);
}
.miet-hero h1 {
  font-size: 52px;
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.02em;
  max-width: 15em;
  text-wrap: balance;
}
/* Handgezeichneter Schwung unter dem Schluss der Überschrift. Gleiche Regel wie auf der
   Lehrgangsseite (lehrgang.css) -- die beiden Seiten laden ihr CSS jeweils selbst, deshalb
   steht sie hier noch einmal, statt eine Seite an die andere zu koppeln. */
.wort-kringel { position: relative; display: inline-block; }
.wort-kringel svg { position: absolute; left: 0; right: 0; bottom: -0.16em; width: 100%; height: 0.34em; }

.miet-hero-text {
  margin-top: 20px;
  font-size: 18px;
  line-height: 1.55;
  color: #4a463f;
  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: #4a463f;
}
.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-sektion { border-bottom: 1px solid var(--farbe-rand); }
.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-size: 32px;
  font-weight: 800;
  letter-spacing: -0.015em;
}
.miet-raum-kicker { color: var(--farbe-teal); }
.miet-raum-beschreibung {
  margin-bottom: 22px;
  font-size: 16px;
  line-height: 1.6;
  color: #4a463f;
  max-width: 34em;
}
.miet-raum-bild {
  position: relative;
  min-height: 100%;
  background: #F1EEE8;
  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: #22403F;
  background: var(--farbe-teal-hell);
  padding: 6px 12px;
}

/* --- Tarif-Tabelle --- */
.miet-tarife {
  border: 1px solid var(--farbe-rand);
  background: #fff;
  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: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a49c8c;
  padding: 11px 16px;
  border-bottom: 2px solid var(--farbe-teal);
}
.miet-tarif-zeile {
  padding: 11px 16px;
  border-bottom: 1px solid #EFECE5;
  font-size: 14px;
}
.miet-tarif-rechts { text-align: right; white-space: nowrap; }
.miet-tarif-blass { color: #6B665E; }
.miet-tarif-hinweis { padding: 9px 16px; margin: 0; font-size: 11px; color: #8A8377; }

/* --- 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-size: 30px;
  font-weight: 800;
  letter-spacing: -0.015em;
}
.miet-anfrage-text {
  margin-bottom: 26px;
  font-size: 15px;
  line-height: 1.6;
  color: #4a463f;
  max-width: 34em;
}
.miet-anfrage-danke h3 { font-size: 24px; font-weight: 800; margin: 10px 0 8px; }
.miet-anfrage-danke p { font-size: 15px; line-height: 1.6; color: #4a463f; margin-bottom: 20px; }

.miet-anfrage-info {
  padding: 52px 44px;
  background: #F4F1EA;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.miet-info-label {
  font-family: var(--schrift-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8A8377;
  margin-bottom: 12px;
}
.miet-info-direkt { display: flex; flex-direction: column; gap: 10px; }
.miet-info-direkt a { font-size: 18px; font-weight: 700; }
.miet-info-direkt a:hover { color: var(--farbe-teal); }
.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: #6B665E; }
.miet-info-hand {
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid #E1DCD1;
  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: 40px 22px 34px; }
  .miet-hero h1 { font-size: 38px; line-height: 1.05; }
  .miet-raum-text,
  .miet-raum--gedreht .miet-raum-text,
  .miet-anfrage-formular,
  .miet-anfrage-info { padding-left: 22px; padding-right: 22px; }
}