/* =========================================================
   Maintenance Pro – erstellt von Tobias Lüdorf
   ---------------------------------------------------------
   Das ist die CSS-Datei, welche das Aussehen der Wartungsseite steuert.
   ========================================================= */


/* =========================================================
   1) Google Font / Globale Schriftart
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500;600;700&display=swap');


/* =========================================================
   2) Globale Variablen
   ========================================================= */
:root{
  --mpro-bg: #e30511;                                   /* Echter Seiten-Hintergrund ohne Bild */
  --mpro-surface: linear-gradient(180deg, #eee, #eee, #eee, #fff);
  --mpro-border: #e3e3e3;
  --mpro-text: #2f2f2f;
  --mpro-muted: #6f6f6f;

  --mpro-accent: #e30511;
  --mpro-accent-hover: #e30511;
  --mpro-accent-soft: #ffffff;

  --mpro-shadow: 2px 2px 4px rgba(0,0,0,.06);
  --mpro-radius: 8px;
  --mpro-radius-pill: 4px;
  --mpro-wrap-width: 850px;
}


/* =========================================================
   3) Basis / Reset
   ---------------------------------------------------------
   Das sind die Standard-Einstellungen.
   ========================================================= */
*,
*::before,
*::after{
  box-sizing: border-box;
}

html,
body{
  margin: 0;
  padding: 0;
  min-height: 100%;
}


/* =========================================================
   4) Seitenhintergrund
   ---------------------------------------------------------
   Wenn kein Hintergrundbild gesetzt ist, ist der Hintergrund
   auf die Hex-Farbe: #e30511 gesetzt.
   ========================================================= */
body.mpro-body{
  font-family: 'Roboto Slab', serif;
  color: var(--mpro-text);
  background-color: var(--mpro-bg);
  background-image: var(--mpro-bg-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


/* =========================================================
   5) Overlay
   ---------------------------------------------------------
   Sehr dezent gehalten, damit das Rot sichtbar bleibt.
   Wenn gar kein Overlay gewünscht ist, bitte background: transparent; setzen.
   ========================================================= */
.mpro-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.04);
  backdrop-filter: blur(1px);
  z-index: 1;
}


/* =========================================================
   6) Haupt-Wrapper
   ========================================================= */
.mpro-wrap{
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
}


/* =========================================================
   7) Hauptkarte / Wartungsbox
   ========================================================= */
.mpro-card{
  width: 100%;
  max-width: var(--mpro-wrap-width);
  background: var(--mpro-surface);
  border: 1px solid var(--mpro-border);
  border-radius: var(--mpro-radius);
  box-shadow: var(--mpro-shadow);
  padding: 38px 28px;
  text-align: center;
}


/* =========================================================
   8) Kleine Info-Pill / Badge
   ========================================================= */
.mpro-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  margin: 0 0 18px;
  border-radius: var(--mpro-radius-pill);
  border: 1.5px solid #e30511;
  background: #fff;
  color: #e30511;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .03em;
}


/* =========================================================
   9) Logo-Bereich
   ========================================================= */
.mpro-logo-wrap{
  margin-bottom: 18px;
}

.mpro-logo{
  max-width: 168px;
  max-height: 168px;
  width: auto;
  height: auto;
  display: inline-block;
}


/* =========================================================
   10) Haupttitel und Text
   ========================================================= */
.mpro-title{
  margin: 0 0 16px;
  font-size: 40px;
  line-height: 1.25;
  color: #e30511;
  font-weight: 600;
}

.mpro-title{
  display: table;
  margin: 0 auto 26px;
  padding-bottom: 0px;
  border-bottom: 1.5px solid #e30511;
}

.mpro-text{
  margin: 0 auto 22px;
  max-width: 650px;
  font-size: 13px;
  line-height: 1.25;
  color: var(--mpro-text);
  font-weight: 500;
}

.mpro-text p{
  margin: 0 0 10px;
}


/* =========================================================
   11) Countdown-Box
   ========================================================= */
.mpro-countdown-box{
  margin: 28px auto 22px;
  max-width: 550px;
  background: #fff;
  border: 1.5px solid var(--mpro-border);
  border-radius: var(--mpro-radius);
  padding: 18px 16px;
}

.mpro-countdown-label{
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--mpro-muted);
  margin-bottom: 5px;
}

.mpro-countdown-date{
  font-size: 16px;
  margin-bottom: 15px;
  letter-spacing: 1.25px;
  word-spacing: 3px;
  color: #e30511;
  font-weight: 500;
}

.mpro-countdown{
  line-height: 1.25;
}


/* =========================================================
   Countdown – kompakte Blockdarstellung
   ---------------------------------------------------------
   4 kompakte Einheiten: Tage / Stunden / Minuten / Sekunden
   Weniger Abstand als im Beispiel-Screenshot.
   ========================================================= */
.mpro-countdown-grid{
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 30px;
  justify-content: center;
  align-items: start;
  justify-items: center;
  text-align: center;
}

.mpro-count-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.mpro-count-num{
  display: block;
  color: #e30511;
  font-size: 28px;
  line-height: 1.25;
  font-weight: 600;
}

.mpro-count-label{
  display: block;
  margin-top: 6px;
  color: #e30511;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 500;
}


/* =========================================================
   12) Aktionsbereich / Buttons
   ========================================================= */
.mpro-actions{
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 26px;
}

.mpro-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: var(--mpro-radius-pill);
  border: 1.5px solid #e30511;
  background: #fff;
  color: #e30511;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease;
}

.mpro-btn:hover{
  background: #e30511;
  border-color: #e30511;
  color: #fff;
}

.mpro-btn-secondary{
  background: #fff;
  color: #e30511;
  border-color: #e30511;
}

.mpro-btn-secondary:hover{
  background: #e30511;
  color: #fff;
  border-color: #e30511;
}


/* =========================================================
   13) Footer / Zusatzinfos / Links unten
   ========================================================= */
.mpro-footer{
  margin-top: 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--mpro-text);
}

.mpro-footer a{
  color: #e30511;
  text-decoration: none;
}

.mpro-footer a:hover{
  text-decoration: underline;
}


/* =========================================================
   Plain-Seite / reduzierte Einzelansicht
   ---------------------------------------------------------
   Für Seiten wie:
   /schreibe-uns/?maintenance-plain=1
   Zeigt nur den Seiteninhalt ohne komplettes Website-Gerüst.
   ========================================================= */
.mpro-plain-wrap{
  padding-top: 40px;
  padding-bottom: 40px;
}

.mpro-plain-card{
  text-align: left;
}

.mpro-plain-actions{
  display: flex;
  justify-content: flex-start;
  margin-bottom: 22px;
}

.mpro-plain-content{
  max-width: 100%;
  margin: 0;
  text-align: left;
}

.mpro-plain-content > *:first-child{
  margin-top: 0 !important;
}

.mpro-plain-content > *:last-child{
  margin-bottom: 0 !important;
}


/* =========================================================
   1) Überschrift im Seiteninhalt
   ---------------------------------------------------------
   Da der Plugin-Titel entfernt wurde, wird die erste
   Überschrift im Seiteninhalt direkt gestaltet.
   ========================================================= */
.mpro-plain-content h1:first-of-type,
.mpro-plain-content h2:first-of-type{
  color: #e30511 !important;
  font-size: 23px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}


/* =========================================================
   2) Beschreibungstext unter der Überschrift
   ---------------------------------------------------------
   Abstand unter dem Einleitungstext.
   ========================================================= */
.mpro-plain-content h1:first-of-type + p,
.mpro-plain-content h2:first-of-type + p{
  margin-bottom: 0 !important;
}


/* =========================================================
   3) Abstand vor dem Kontakt-HTML-Block
   ---------------------------------------------------------
   Der eigentliche Formular-Wrapper beginnt mit #fckcWrap.
   Hier wird der gewünschte Abstand sauber gesetzt.
   ========================================================= */
.mpro-plain-content #fckcWrap{
  margin-top: 34px !important;
}

/* =========================================================
   14) Floating-Hinweis vor geplanter Wartung
   ---------------------------------------------------------
   Dezent rechts mittig im Browserfenster.
   Nicht wegklickbar, bewusst kompakt und mit leichter
   Trennung zur eigentlichen Wartungsseite.
   ========================================================= */
.mpro-floating-notice{
  position: fixed;
  top: 50%;
  right: 22px;
  transform: translateY(-50%);
  z-index: 30;
  width: min(360px, calc(100vw - 28px));
  pointer-events: none;
}

.mpro-floating-notice-card{
  background: linear-gradient(180deg, #eee, #eee, #fff, #fff);
  border: 1.5px solid #e3e3e3;
  border-radius: 10px;
  box-shadow: 2px 2px 4px rgba(0,0,0,.06);
  padding: 16px 16px 15px;
  color: #2f2f2f;
}

.mpro-floating-notice-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  margin: 0 0 12px;
  border-radius: 4px;
  border: 1.5px solid #e30511;
  background: #fff;
  color: #e30511;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
}

.mpro-floating-notice-title{
  margin: 0 0 10px;
  color: #e30511;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 600;
}

.mpro-floating-notice-text{
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.45;
  color: #2f2f2f;
  font-weight: 500;
}

.mpro-floating-notice-text p{
  margin: 0 0 8px;
}

.mpro-floating-notice-text p:last-child{
  margin-bottom: 0;
}

.mpro-floating-notice-meta{
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px dashed #e3e3e3;
  border-radius: 8px;
  background: rgba(255,255,255,.72);
}

.mpro-floating-notice-meta-row{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  line-height: 1.4;
  color: #2f2f2f;
}

.mpro-floating-notice-meta-row + .mpro-floating-notice-meta-row{
  margin-top: 6px;
}

.mpro-floating-notice-meta-label{
  color: #6f6f6f;
  font-weight: 500;
}

.mpro-floating-notice-meta-value{
  color: #2f2f2f;
  font-weight: 600;
  text-align: right;
}

.mpro-floating-countdown{
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px dashed #e3e3e3;
}

.mpro-floating-countdown-label{
  margin: 0 0 8px;
  color: #6f6f6f;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.mpro-floating-countdown-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.mpro-floating-count-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 8px 6px;
  border: 1px solid #ececec;
  border-radius: 8px;
  background: #fff;
}

.mpro-floating-count-num{
  color: #e30511;
  font-size: 20px;
  line-height: 1.1;
  font-weight: 600;
}

.mpro-floating-count-label{
  margin-top: 4px;
  color: #e30511;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 500;
}

/* =========================================================
   15) Responsive / Mobile
   ---------------------------------------------------------
   Floating-Hinweis wird mobil nicht rechts mittig,
   sondern sauber untereinander und voller nutzbarer Breite
   dargestellt.
   ========================================================= */
@media (max-width: 900px){
  .mpro-floating-notice{
    top: auto;
    right: 14px;
    bottom: 14px;
    left: 14px;
    width: auto;
    transform: none;
  }
}

@media (max-width: 640px){
  .mpro-floating-notice-card{
    padding: 14px 14px 13px;
  }

  .mpro-floating-notice-title{
    font-size: 16px;
  }

  .mpro-floating-notice-text{
    font-size: 12px;
  }

  .mpro-floating-countdown-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .mpro-floating-count-item{
    min-height: 54px;
  }

  .mpro-floating-count-num{
    font-size: 18px;
  }

  .mpro-floating-count-label{
    font-size: 10px;
  }

/* =========================================================
   14) Responsive / Mobile
   ========================================================= */
@media (max-width: 640px){
  .mpro-card{
    padding: 28px 18px;
  }

  .mpro-text{
    font-size: 16px;
  }

  .mpro-countdown{
    line-height: 1.25;
  }

  .mpro-countdown-grid{
    grid-template-columns: repeat(2, minmax(88px, 1fr));
    gap: 12px 10px;
  }

  .mpro-count-num{
    font-size: 24px;
  }

  .mpro-count-label{
    font-size: 12px;
  }

  .mpro-actions{
    flex-direction: column;
    align-items: stretch;
  }

  .mpro-btn{
    width: 100%;
  }
}