/* ============================================================
   Schmitz Feuerwehrtechnik Ticketportal – Design-Update
   Angleichung an das neue Website-Design (schmitz-feuerwehr.de)
   Werte direkt aus der Live-Seite ausgelesen (Chrome).
   Ergänzt die bestehenden CSS-Dateien, überschreibt gezielt.
   ============================================================ */

/* Marken-Schrift der Live-Seite */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

/* --- Marken-Variablen (exakt aus der Live-Seite) --- */
:root {
  --schmitz-red:       #e5261f;   /* rgb(229,38,31) – Buttons, Akzente */
  --schmitz-red-dark:  #c41d17;   /* Hover-Zustand */
  --alizarin-crimson:  #e5261f;   /* Basis-CSS-Variable überschreiben */

  /* EIN durchgehender Dunkelton: Title-Band, Nav-Text UND Footer */
  --schmitz-dark:      #172a2e;   /* rgb(23,42,46) */

  --portal-bg:         #f5f5f3;
  --font-brand:        'Poppins', sans-serif;
}


/* ================================================================
   GRUNDSCHRIFT – Poppins wie auf der Live-Seite
   ================================================================ */

.page,
.page__content,
.formular,
.formular__text,
.formular__textarea,
.button,
.portal-hero-strip,
.page-header,
.page-footer {
  font-family: var(--font-brand);
}


/* ================================================================
   LOGOS – korrektes Seitenverhältnis erzwingen
   Das Basis-CSS legt eine feste Breite auf die Logos; zusammen mit
   einer festen Höhe verzerrt das Bild. Hier: Höhe fix, Breite auto.
   ================================================================ */

.page-header__logo,
img.page-header__logo {
  height: 4.8rem !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  /* kein display:block -> ursprüngliche Zentrierung des Headers bleibt erhalten */
}

.page-footer__logo,
img.page-footer__logo {
  height: 4rem !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;   /* linksbündig über den Icons */
  display: block;
  /* Rotes Logo auf dunklem Footer weiß einfärben (wie Live-Seite) */
  filter: brightness(0) invert(1);
}

/* TÜV-Logo (Footer, Spalte 4): auf weißer Kachel, NICHT invertieren
   (Invertieren macht das Zertifikatslogo unleserlich) */
.page-footer__column-4 img {
  height: auto !important;
  width: auto !important;
  max-width: 11rem !important;
  object-fit: contain !important;
  background: #ffffff;
  padding: 0.8rem;
  border-radius: 0.4rem;
  opacity: 1 !important;
  filter: none !important;
}


/* ================================================================
   HEADER
   ================================================================ */

.page-header__meta {
  background: var(--schmitz-dark);
  color: #ffffff;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.page-header__main {
  background: #ffffff;
  border-bottom: 0.1rem solid #ececec;
  padding: 1.6rem 0;
}


/* ================================================================
   HERO / TITLE-BAND  (dunkles #172a2e wie auf der Live-Seite)
   ================================================================ */

.portal-hero-strip {
  background: var(--schmitz-dark);
  padding: 5rem 0 4.5rem;
}

.portal-hero-strip h1 {
  color: #ffffff;
  font-family: var(--font-brand);
  font-size: 5.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 1.2rem;
  text-transform: none;   /* Live-Seite: H1 nicht versal */
}

.portal-hero-strip .portal-hero__sub {
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.7rem;
  font-weight: 400;
  max-width: 64rem;
  margin: 0;
  line-height: 1.6;
}


/* ================================================================
   FORMULAR-BEREICH
   ================================================================ */

.section--form {
  background: var(--portal-bg);
  padding: 4rem 0 6rem;
}

.section--form .formular p {
  color: #444;
  line-height: 1.7;
}

.formular__text,
.formular__textarea {
  background: #ffffff;
  border-bottom-color: #c4c4c4;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.formular__text:focus,
.formular__textarea:focus {
  outline: none;
  border-bottom-color: var(--schmitz-red);
  box-shadow: 0 0.2rem 0 0 var(--schmitz-red);
}

.formular__checkbox {
  accent-color: var(--schmitz-red);
  width: 1.6rem;
  height: 1.6rem;
  cursor: pointer;
}

.formular__row--text {
  color: #555;
  font-size: 1.5rem;
}


/* ================================================================
   BUTTONS  (Live-Seite: Rot, Radius 4px, 600, NICHT versal)
   ================================================================ */

.button--primary {
  background: var(--schmitz-red);
  border-color: var(--schmitz-red);
  color: #ffffff;
  border-radius: 0.4rem;
  padding: 1.1rem 2.4rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.6rem;
  transition: background 0.2s, border-color 0.2s;
}

.button--primary:hover,
.button--primary:focus {
  background: var(--schmitz-red-dark);
  border-color: var(--schmitz-red-dark);
}

.button--secondary {
  border-radius: 0.4rem;
  font-weight: 500;
}


/* ================================================================
   AJAX-FEHLERBOX
   ================================================================ */

#_ajax_error {
  background: #fff0f0 !important;
  border: 0.2rem solid var(--schmitz-red) !important;
  color: var(--schmitz-red) !important;
  border-radius: 0.4rem !important;
  font-size: 1.5rem !important;
}


/* ================================================================
   FOOTER  (Live-Seite: durchgehend #172a2e, Poppins, weiße Links)
   ================================================================ */

.page-footer__main,
.page-footer__meta {
  background: var(--schmitz-dark);
}

.page-footer__main p,
.page-footer__main strong {
  color: rgba(255, 255, 255, 0.82);
}

.page-footer__main a {
  color: #ffffff;
}

.page-footer__main a:hover,
.page-footer__main a:focus {
  color: var(--schmitz-red);
}

.page-footer__column-2 strong,
.page-footer__column-3 strong {
  color: #ffffff;
  font-size: 1.5rem;
}

.page-footer__social-links li a {
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.2s;
}

.page-footer__social-links li a:hover,
.page-footer__social-links li a:focus {
  background: var(--schmitz-red);
}

.page-footer__social-links li a svg {
  fill: #ffffff;
}


/* Unterste Footer-Leiste: gleicher Dunkelton, dezente Links */
.page-footer__meta ul li a {
  color: rgba(255, 255, 255, 0.6);
}

.page-footer__meta ul li a:hover,
.page-footer__meta ul li a:focus {
  color: #ffffff;
}


/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 768px) {
  .portal-hero-strip h1 {
    font-size: 3.6rem;
  }
  .portal-hero-strip {
    padding: 3.5rem 0 3rem;
  }
  .page-header__logo,
  img.page-header__logo {
    height: 4rem !important;
  }
}