/* =========================================================
   arni-womo.de – Mietbedingungen
   Zentrale CSS-Datei

   Bereiche:
   1. Grundlayout
   2. Inhaltsblöcke
   3. Überschriften / Texte
   4. Hinweisboxen
   5. Schnellübersicht
   6. Suchfunktion
   7. Listen
   8. Ankersprünge
   9. Responsive
   ========================================================= */


/* =========================================================
   1. Grundlayout
   ========================================================= */

:root {
  --mb-blue: #17304f;
  --mb-text: #25364a;
  --mb-orange: #e87722;
  --mb-orange-hover: #c95f14;

  --mb-light: #f5f7fa;
  --mb-white: #ffffff;

  --mb-border: rgba(23, 48, 79, 0.12);

  --mb-shadow:
    0 4px 14px
    rgba(0, 0, 0, 0.08);

  --mb-shadow-hover:
    0 10px 24px
    rgba(23, 48, 79, 0.14);

  --mb-radius-section: 16px;
  --mb-radius-card: 14px;

  --mb-max-width: 1100px;
}


/* =========================================================
   2. Inhaltsblöcke
   ========================================================= */

body .entry-content
.mietbedingungen-block {
  width:
    calc(100% - 60px) !important;

  max-width:
    var(--mb-max-width) !important;

  margin:
    28px auto !important;

  padding:
    32px 34px;

  border-radius:
    var(--mb-radius-section);

  box-sizing:
    border-box;

  left:
    auto !important;

  right:
    auto !important;

  transform:
    none !important;
}


/* Grauer Block */

.mietbedingungen-block-grau {
  background:
    var(--mb-light);
}


/* Weißer Block mit orangener Linie */

.mietbedingungen-block-orange {
  background:
    var(--mb-white);

  border-left:
    6px solid
    var(--mb-orange);

  box-shadow:
    var(--mb-shadow);
}


/* =========================================================
   3. Überschriften und Texte
   ========================================================= */

.mietbedingungen-block h2 {
  margin:
    0 0 18px;

  color:
    var(--mb-blue);

  font-size:
    clamp(28px, 2.4vw, 38px);

  font-weight:
    800;

  line-height:
    1.2;

  overflow-wrap:
    normal;

  word-break:
    normal;

  hyphens:
    auto;
}


.mietbedingungen-block h3 {
  margin:
    24px 0 12px;

  color:
    var(--mb-blue);

  font-size:
    21px;

  font-weight:
    800;

  line-height:
    1.3;

  overflow-wrap:
    normal;

  word-break:
    normal;

  hyphens:
    auto;
}


.mietbedingungen-block p {
  margin:
    0 0 16px;

  color:
    var(--mb-text);

  font-size:
    16.5px;

  line-height:
    1.7;

  overflow-wrap:
    break-word;

  word-break:
    normal;

  hyphens:
    auto;
}


.mietbedingungen-block p:last-child {
  margin-bottom:
    0;
}


/* =========================================================
   4. Hinweisboxen
   ========================================================= */

/*
 * Standard-Hinweis:
 * weißer Hintergrund + orange Linie links
 *
 * Diese Variante gilt vor allem innerhalb grauer Hauptblöcke.
 */

.mietbedingungen-hinweis {
  margin-top: 22px;

  padding: 20px 22px;

  background: var(--mb-white);

  border: 1px solid var(--mb-border);

  border-left: 5px solid var(--mb-orange);

  border-radius: 12px;

  box-shadow:
    0 3px 10px
    rgba(0, 0, 0, 0.05);

  box-sizing: border-box;
}


/*
 * Liegt der Hinweis bereits innerhalb eines
 * weiß/orange gestalteten Hauptblocks,
 * bekommt er KEINE zweite orange Linie.
 */

.mietbedingungen-block-orange
.mietbedingungen-hinweis {
  background: var(--mb-light);

  border-left:
    1px solid var(--mb-border);
}


/* Überschriften innerhalb von Hinweisboxen */

.mietbedingungen-hinweis h3 {
  margin-top: 0;
  margin-bottom: 10px;

  font-size: 19px;
}


.mietbedingungen-hinweis p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   Spezielle Hinweisvarianten
   ========================================================= */


/*
 * Neutrale Hinweisbox:
 * keine orange Linie
 */

.mietbedingungen-hinweis-neutral {
  border-left:
    1px solid var(--mb-border);
}


/*
 * Weißer Hintergrund ohne orange Linie
 */

.mietbedingungen-hinweis-weiss {
  background:
    var(--mb-white);

  border-left:
    1px solid var(--mb-border);
}


/*
 * Grauer Hintergrund ohne orange Linie
 */

.mietbedingungen-hinweis-grau {
  background:
    var(--mb-light);

  border-left:
    1px solid var(--mb-border);
}


/*
 * Überschrift innerhalb der Hinweisbox
 * mit grauem Hintergrund hervorheben
 */

.mietbedingungen-hinweis-titel-grau h3 {
  margin:
    -20px -22px
    16px;

  padding:
    14px 22px;

  background:
    var(--mb-light);

  border-radius:
    11px 11px 0 0;
}


/* =========================================================
   5. Schnellübersicht
   ========================================================= */

.mietbedingungen-quickfacts {
  text-align:
    center;
}


/* Zwei Gutenberg-Spaltenblöcke innerhalb der Schnellübersicht */

.mietbedingungen-quickfacts
.wp-block-columns {
  display:
    grid !important;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    20px;

  margin-bottom:
    20px;
}


.mietbedingungen-quickfacts
.wp-block-columns:last-child {
  margin-bottom:
    0;
}


/* Einzelne Karte */

.mietbedingungen-quickcard {
  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  min-width:
    0;

  min-height:
    170px;

  padding:
    24px 22px;

  background:
    var(--mb-light);

  border:
    1px solid
    var(--mb-border);

  border-radius:
    var(--mb-radius-card);

  box-shadow:
    var(--mb-shadow);

  text-align:
    center;

  box-sizing:
    border-box;

  cursor:
    pointer;

  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}


.mietbedingungen-quickcard:hover,
.mietbedingungen-quickcard:focus-within {
  transform:
    translateY(-3px);

  border-color:
    rgba(232, 119, 34, 0.35);

  box-shadow:
    var(--mb-shadow-hover);
}


/* Überschrift innerhalb der Karte */

.mietbedingungen-quickcard h3 {
  margin:
    0 0 10px;

  color:
    var(--mb-blue);

  font-size:
    20px;

  font-weight:
    800;

  line-height:
    1.25;

  text-align:
    center;

  /*
   * Wichtig:
   * saubere Silbentrennung, aber keine zerstückelten Wörter
   */
  hyphens:
    auto;

  -webkit-hyphens:
    auto;

  overflow-wrap:
    normal;

  word-break:
    normal;
}


/* Text innerhalb der Karte */

.mietbedingungen-quickcard p {
  margin:
    0;

  color:
    var(--mb-text);

  font-size:
    15.5px;

  line-height:
    1.55;

  text-align:
    center;

  hyphens:
    auto;

  -webkit-hyphens:
    auto;

  overflow-wrap:
    normal;

  word-break:
    normal;
}


/* Links in den Karten */

.mietbedingungen-quickcard a {
  color:
    inherit;

  text-decoration:
    none;
}


/*
 * Macht die gesamte Karte klickbar,
 * wenn die Überschrift verlinkt ist.
 */

.mietbedingungen-quickcard a::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;
}


/* Tastaturfokus */

.mietbedingungen-quickcard
a:focus-visible {
  outline:
    none;
}


.mietbedingungen-quickcard:focus-within {
  outline:
    3px solid
    rgba(232, 119, 34, 0.30);

  outline-offset:
    3px;
}


/* =========================================================
   6. Suchfunktion
   ========================================================= */

.mietbedingungen-suche {
  width:
    calc(100% - 60px);

  max-width:
    var(--mb-max-width);

  margin:
    28px auto;

  padding:
    24px 28px;

  background:
    var(--mb-white);

  border:
    1px solid
    var(--mb-border);

  border-radius:
    var(--mb-radius-section);

  box-shadow:
    var(--mb-shadow);

  box-sizing:
    border-box;
}


.mietbedingungen-suche label {
  display:
    block;

  margin-bottom:
    10px;

  color:
    var(--mb-blue);

  font-size:
    18px;

  font-weight:
    800;
}


.mietbedingungen-suche-zeile {
  display:
    flex;

  gap:
    12px;
}


.mietbedingungen-suchfeld {
  flex:
    1;

  min-width:
    0;

  padding:
    13px 16px;

  background:
    var(--mb-white);

  color:
    var(--mb-text);

  border:
    1px solid
    rgba(23, 48, 79, 0.22);

  border-radius:
    12px;

  font-size:
    16px;

  box-sizing:
    border-box;
}


.mietbedingungen-suchfeld:focus {
  outline:
    none;

  border-color:
    var(--mb-orange);

  box-shadow:
    0 0 0 3px
    rgba(232, 119, 34, 0.16);
}


.mietbedingungen-suche-button {
  flex:
    0 0 auto;

  padding:
    13px 24px;

  background:
    var(--mb-orange);

  color:
    var(--mb-white);

  border:
    none;

  border-radius:
    999px;

  font-size:
    16px;

  font-weight:
    700;

  cursor:
    pointer;

  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}


.mietbedingungen-suche-button:hover,
.mietbedingungen-suche-button:focus-visible {
  background:
    var(--mb-blue);

  transform:
    translateY(-1px);
}


.mietbedingungen-suche-status {
  min-height:
    24px;

  margin:
    10px 0 0;

  color:
    var(--mb-text);

  font-size:
    14px;

  line-height:
    1.5;
}


/* =========================================================
   7. Listen
   ========================================================= */

.mietbedingungen-block ul,
.mietbedingungen-block ol {
  margin:
    14px 0 18px;

  padding-left:
    24px;
}


.mietbedingungen-block li {
  margin-bottom:
    8px;

  color:
    var(--mb-text);

  font-size:
    16px;

  line-height:
    1.6;

  hyphens:
    auto;

  -webkit-hyphens:
    auto;

  overflow-wrap:
    normal;

  word-break:
    normal;
}


.mietbedingungen-block li:last-child {
  margin-bottom:
    0;
}


/* =========================================================
   8. Smooth Scroll / Anker
   ========================================================= */

.mietbedingungen-block {
  scroll-margin-top:
    120px;
}


/* =========================================================
   9. Responsive
   ========================================================= */


/* Tablet */

@media (max-width: 900px) {

  .mietbedingungen-quickfacts
  .wp-block-columns {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


/* Mobil */

@media (max-width: 768px) {

  body .entry-content
  .mietbedingungen-block {
    width:
      calc(100% - 32px) !important;

    max-width:
      calc(100% - 32px) !important;

    padding:
      26px 20px;
  }


  .mietbedingungen-suche {
    width:
      calc(100% - 32px);

    padding:
      20px 18px;
  }


  .mietbedingungen-suche-zeile {
    flex-direction:
      column;
  }


  .mietbedingungen-suche-button {
    width:
      100%;
  }


  .mietbedingungen-block-orange {
    border-left-width:
      5px;
  }

}


/* Kleine Mobilgeräte */

@media (max-width: 600px) {

  .mietbedingungen-quickfacts
  .wp-block-columns {
    grid-template-columns:
      1fr;
  }


  .mietbedingungen-quickcard {
    min-height:
      auto;

    padding:
      22px 18px;
  }


  .mietbedingungen-quickcard h3 {
    font-size:
      19px;
  }


  .mietbedingungen-quickcard p {
    font-size:
      15px;
  }

}


/* =========================================================
   Bewegung reduzieren
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior:
      auto;
  }


  .mietbedingungen-quickcard,
  .mietbedingungen-suche-button {
    transition:
      none;
  }


  .mietbedingungen-quickcard:hover,
  .mietbedingungen-quickcard:focus-within,
  .mietbedingungen-suche-button:hover {
    transform:
      none;
  }
}
/* =========================================================
   Abschlussbereich
   ========================================================= */

body .entry-content
.mietbedingungen-block.mietbedingungen-abschluss {
  max-width: 1250px !important;
}
.mietbedingungen-suche-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding: 13px 24px;

  background: var(--mb-orange);
  color: var(--mb-white);

  border: none;
  border-radius: 999px;

  font-size: 16px;
  font-weight: 700;

  text-decoration: none;

  cursor: pointer;

  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}
a.mietbedingungen-suche-button,
a.mietbedingungen-suche-button:visited {
  color: var(--mb-white);
}

a.mietbedingungen-suche-button:hover,
a.mietbedingungen-suche-button:focus-visible {
  background: var(--mb-blue);
  color: var(--mb-white);

  transform: translateY(-1px);

  text-decoration: none;
}