/**
 * Responsive Layer.
 *
 * Das Design ist ein festes 1440px-Desktop-Artboard: alle Maße stehen als
 * Inline-Styles im Markup, das aus dem Export generiert wird. Diese Datei
 * lässt das Markup unangetastet und überschreibt die Maße nur unterhalb der
 * Desktop-Breite. Ab 1440px greift keine einzige Regel hier — die Seite
 * rendert dann pixelgleich wie im Design.
 *
 * Weil die Maße inline stehen, gewinnt eine Stylesheet-Regel nur mit
 * !important. Das ist hier der Preis dafür, dass das generierte Markup
 * unverändert bleibt und ein neuer Design-Export ohne Nacharbeit durchläuft.
 *
 * Angesprochen wird über die Muster, die das Design selbst benutzt:
 *   .notiara-page > div[style*="box-sizing:border-box"]  ein Seitenband
 *   [style*="width:1200px"] / [style*="width:760px"]     die Inhaltsspalten
 *   [style*="display:grid"] / [style*="display:flex"]    die Raster und Reihen
 *
 * Diese Datei wird von Hand gepflegt, nicht generiert.
 */

img,
svg {
  max-width: 100%;
}

/* Burger-Schaltflaeche. Ab 900px unsichtbar — dort steht die Navigation
   ausgeschrieben in der Kopfzeile, genau wie im Design. */
.notiara-burger {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #E3E6EE;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.notiara-burger span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: #1E2A5A;
  transition: transform .18s, opacity .18s;
}

.notiara-header[data-open="true"] .notiara-burger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.notiara-header[data-open="true"] .notiara-burger span:nth-child(2) {
  opacity: 0;
}

.notiara-header[data-open="true"] .notiara-burger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .notiara-burger span {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   < 1440px — die Seite selbst darf schmaler werden als das Artboard.
   Ohne diese Regel scrollt schon ein 1366er-Notebook horizontal.
   -------------------------------------------------------------------------- */
@media (max-width: 1439px) {
  .notiara-page {
    width: 100%;
    max-width: 100%;
  }

  /* Eine 1fr-Spalte schrumpft per Voreinstellung nicht unter die
     Min-Content-Breite ihres Inhalts — genau daran laeuft das Layout sonst
     zwischen 900px und 1200px ueber. min-width:0 hebt das auf. */
  .notiara-page [style*="display:grid"] > *,
  .notiara-page [style*="display:flex"] > *,
  .notiara-contact-grid > * {
    min-width: 0;
  }
}

/* --------------------------------------------------------------------------
   < 1200px — die Inhaltsspalten werden flüssig und bekommen Seitenabstand.
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .notiara-page [style*="width:1200px"] {
    width: 100% !important;
    max-width: 1200px;
    box-sizing: border-box;
    padding-left: 24px;
    padding-right: 24px;
  }

  .notiara-page [style*="width:760px"] {
    width: 100% !important;
    max-width: 760px;
    box-sizing: border-box;
    padding-left: 24px;
    padding-right: 24px;
  }

  .notiara-content {
    width: 100%;
    box-sizing: border-box;
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Reihen umbrechen lassen: das Trust-Band mit funf 120px-Kacheln passt
     sonst nicht mehr neben seine Beschriftung. */
  .notiara-page [style*="display:flex"] {
    flex-wrap: wrap;
  }

  /* Infokarte schmaler, statt das Formular zu quetschen. */
  .notiara-contact-grid {
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: 32px;
  }
}

/* --------------------------------------------------------------------------
   < 900px — Tablet und Smartphone.
   Die festen Bandhöhen fallen weg, Raster werden einspaltig, Reihen brechen um.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {

  /* Seitenbänder: feste Höhe aufheben, sonst überlappt der gestapelte Inhalt. */
  .notiara-page > div[style*="box-sizing:border-box"] {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  /* Die Kopfzeile ist ein Band, braucht aber keine 56px Luft. */
  .notiara-page > div[style*="box-sizing:border-box"]:first-child {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  /* Alle Raster einspaltig. */
  .notiara-page [style*="display:grid"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* Kopfzeile: nur Wortmarke und Burger. Navigation und Aktionen klappen
     darunter auf, wenn nav.js data-open setzt. */
  .notiara-burger {
    display: flex;
  }

  .notiara-header-inner {
    flex-wrap: wrap;
  }

  .notiara-nav,
  .notiara-actions {
    display: none !important;
  }

  .notiara-header[data-open="true"] .notiara-nav,
  .notiara-header[data-open="true"] .notiara-actions {
    display: flex !important;
    width: 100%;
    justify-content: center !important;
  }

  .notiara-header[data-open="true"] .notiara-nav {
    flex-direction: column;
    align-items: center;
    gap: 20px !important;
    padding: 24px 0 22px;
    border-top: 1px solid #ECEEF3;
    margin-top: 14px;
  }

  .notiara-header[data-open="true"] .notiara-actions {
    padding-bottom: 10px;
  }

  /* Das Trust-Band zentriert seine Logo-Kacheln statt sie rechts zu drängen. */
  .notiara-page [style*="justify-content:flex-end"] {
    justify-content: center !important;
  }

  /* Fußzeile: die beiden Reihen mittig stapeln. */
  .notiara-page > div[style*="box-sizing:border-box"]:last-child [style*="justify-content:space-between"] {
    justify-content: center !important;
    text-align: center;
    gap: 18px 28px !important;
  }

  .notiara-page > div[style*="box-sizing:border-box"]:last-child img {
    align-self: center !important;
  }

  /* Überschriften: die Design-Größen sind für 1440px gesetzt. */
  .notiara-page h1 {
    font-size: 38px !important;
    line-height: 1.2 !important;
  }

  .notiara-page h2 {
    font-size: 27px !important;
    line-height: 1.25 !important;
  }

  .notiara-page h3 {
    font-size: 18px !important;
  }

  /* Kontaktseite: Infokarte über das Formular. */
  .notiara-contact-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .notiara-content {
    padding-top: 48px;
    padding-bottom: 64px;
  }
}

/* --------------------------------------------------------------------------
   < 600px — Smartphone.
   -------------------------------------------------------------------------- */
@media (max-width: 599px) {
  .notiara-page [style*="width:1200px"],
  .notiara-page [style*="width:760px"],
  .notiara-content {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .notiara-page > div[style*="box-sizing:border-box"] {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }

  /* Auf schmalen Schirmen darf nichts mehr auf einer Zeile erzwungen werden. */
  .notiara-page [style*="white-space:nowrap"] {
    white-space: normal !important;
  }

  .notiara-page h1 {
    font-size: 30px !important;
  }

  .notiara-page h2 {
    font-size: 23px !important;
  }

  /* Karten und Kacheln: das Innenmaß des Designs ist für Mobil zu groß. */
  .notiara-page [style*="padding:32px"],
  .notiara-page [style*="padding:28px"] {
    padding: 22px !important;
  }

  .notiara-form-card {
    padding: 22px;
  }

  .notiara-contact-card {
    padding: 28px 22px;
  }

  /* Vor- und Nachname untereinander. */
  .notiara-field-row {
    grid-template-columns: 1fr;
  }
}