/* Footer-Seiten -- Figma "ATZ 2026 - Zukunft", Canvas "Footer Sites - Mobile"
   (96-2098) und "Footer Sites - Desktop" (50-5907).

   Markup:  web/templates/web/help.html          (Hilfe)
            web/templates/web/forms.html         (Formulare zum Download)
            web/templates/web/client_info.html   (Fuer Auftraggeber)
            web/templates/web/fair_business.html (Fair Business)

   Die vier Seiten teilen sich dasselbe Geruest -- Hero, Inhaltsverzeichnis,
   Abschnitte mit Icon-Ueberschrift, Karten, Hinweisboxen --, deshalb ein
   Stylesheet statt vier. Was nur eine Seite braucht (Download-Kacheln,
   Lizenz-Preisboxen, Zitatkasten), steht unten in eigenen Bloecken.

   Mobile first: die Basis-Regeln beschreiben das 402px-Layout (einspaltig,
   Inhaltsverzeichnis als Kachel ueber dem Text), die Media-Queries ab 768px
   bzw. 992px stellen daraus das zweispaltige Desktop-Layout mit der
   mitlaufenden Seitenleiste her.

   Klassenpraefix `fp-` (footer pages), damit sich nichts mit `atz-`
   (base.css), `hp-` (Startseite), `ord-` (Auftragsliste), `own-`
   (AG-Auftrag), `rev-`, `dir-`, `lic-`, `tur-`/`tup-` oder `ow-`
   ueberschneidet. */

:root {
  --fp-shaded: #F7F7F7;
  --fp-border: #E7E7E7;
  --fp-line: #EFEFEF;
  --fp-muted: #7A7A7A;
  --fp-red-tint: #FCEAED;
  --fp-radius: 12px;
  --fp-radius-sm: 8px;
}

.fp-page {
  color: var(--atz-dark);
  font-size: 15px;
  line-height: 1.6;
}

.fp-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ------------------------------------------------------------------ Kopf */

.fp-hero {
  background: linear-gradient(180deg, #FDF5F6 0%, #FFFFFF 100%);
  padding: 28px 0 32px;
}

.fp-hero__eyebrow {
  margin: 0 0 10px;
  color: var(--atz-red);
  font-size: 13px;
  font-weight: 700;
}

.fp-hero__title {
  margin: 0 0 12px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
}

.fp-hero__lead {
  margin: 0;
  max-width: 62ch;
  color: var(--fp-muted);
  font-size: 15px;
}

/* Der Motto-Kasten steht auf dem Handy unter dem Text und ab 992px rechts
   daneben (nur Fair Business). */
.fp-hero__aside {
  margin-top: 24px;
}

/* --------------------------------------------------------------- Geruest */

.fp-body {
  background-color: var(--fp-shaded);
  padding: 24px 0 40px;
}

.fp-layout {
  display: block;
}

.fp-layout__side {
  margin-bottom: 24px;
}

/* Eine dritte Spalte gibt es nur auf Fair Business: der Registrieren-Aufruf.
   Auf dem Handy laeuft er als letztes Element mit, ab 992px zieht ihn
   .fp-layout--cta in die linke Spalte unter das Inhaltsverzeichnis. */
.fp-layout__cta {
  margin-top: 24px;
}

/* ------------------------------------------------- Inhaltsverzeichnis */

.fp-toc {
  background-color: #fff;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius);
  padding: 16px 18px;
}

.fp-toc__title {
  margin: 0 0 12px;
  color: var(--fp-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fp-toc__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fp-toc__link {
  display: block;
  padding: 7px 0 7px 12px;
  border-left: 2px solid var(--fp-border);
  color: var(--atz-dark);
  font-size: 14px;
}

.fp-toc__link:hover {
  color: var(--atz-red);
}

/* Der erste Eintrag ist der Einstieg in die Seite -- ohne JavaScript gibt es
   keinen Scroll-Zustand, also markiert das Design schlicht den Anfang. */
.fp-toc__item:first-child .fp-toc__link {
  border-left-color: var(--atz-red);
  font-weight: 700;
}

/* ----------------------------------------------------------- Abschnitte */

.fp-section {
  margin-bottom: 32px;
}

.fp-section:last-child {
  margin-bottom: 0;
}

.fp-section__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.fp-section__icon {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--atz-red);
}

.fp-section__title {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
}

.fp-subtitle {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 700;
}

.fp-lead {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.55;
}

.fp-prose p {
  margin: 0 0 14px;
  color: var(--fp-muted);
}

.fp-prose p:last-child {
  margin-bottom: 0;
}

.fp-divider {
  height: 1px;
  margin: 0 0 32px;
  border: 0;
  background-color: var(--fp-border);
}

/* -------------------------------------------------------- Hinweisboxen */

.fp-note {
  display: flex;
  gap: 10px;
  margin: 0 0 14px;
  padding: 14px 16px;
  border-radius: var(--fp-radius-sm);
  background-color: var(--fp-red-tint);
}

.fp-note__icon {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--atz-red);
}

.fp-note__text {
  margin: 0;
  color: var(--fp-muted);
  font-size: 14px;
}

/* -------------------------------------------------------------- Karten */

.fp-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0 0 16px;
}

.fp-card {
  background-color: #fff;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius);
  padding: 16px;
}

.fp-card__icon {
  width: 20px;
  height: 20px;
  margin-bottom: 10px;
  color: var(--atz-red);
}

.fp-card__title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
}

.fp-card__text {
  margin: 0;
  color: var(--fp-muted);
  font-size: 14px;
}

/* ------------------------------------------------------------ Knoepfe */

.fp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: var(--fp-radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}

.fp-btn--primary {
  background-color: var(--atz-red);
  border-color: var(--atz-red);
  color: #fff;
}

.fp-btn--primary:hover {
  background-color: #9E0720;
  border-color: #9E0720;
  color: #fff;
}

.fp-btn--block {
  width: 100%;
}

.fp-btn__icon {
  width: 16px;
  height: 16px;
}

/* --------------------------------------------- Lizenz-Preisboxen (Hilfe) */

.fp-licenses {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0 0 16px;
}

.fp-license {
  background-color: #fff;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius);
  padding: 16px;
}

.fp-license--featured {
  border-color: var(--atz-red);
}

.fp-license__name {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
}

.fp-license__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 8px;
}

.fp-license__amount {
  color: var(--atz-red);
  font-size: 24px;
  font-weight: 700;
}

.fp-license__period {
  color: var(--fp-muted);
  font-size: 13px;
}

.fp-license__tax {
  margin: 0 0 10px;
  color: var(--fp-muted);
  font-size: 12px;
}

/* Die Leistungszeilen kommen aus den License-Feldern; base.css raeumt die
   Liste bereits ab, der Punkt davor kommt von hier. */
.fp-license__features li {
  position: relative;
  padding-left: 14px;
  color: var(--fp-muted);
  font-size: 13px;
}

.fp-license__features li::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--atz-red);
}

/* ----------------------------------------------- Preisspannen (Hilfe) */

.fp-prices {
  margin: 0 0 16px;
  background-color: #fff;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius);
  overflow: hidden;
}

.fp-price-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--fp-line);
}

.fp-price-row:last-child {
  border-bottom: 0;
}

.fp-price-row__marker {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background-color: var(--fp-red-tint);
  color: var(--atz-red);
  font-size: 12px;
  font-weight: 700;
}

.fp-price-row__label {
  flex: 1 1 auto;
  font-size: 14px;
}

.fp-price-row__value {
  flex: none;
  color: var(--atz-red);
  font-size: 14px;
  font-weight: 700;
}

/* --------------------------------------------------------- Hakenlisten */

.fp-checks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0 0 16px;
  background-color: #fff;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius);
  overflow: hidden;
}

.fp-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--fp-line);
}

.fp-check:last-child {
  border-bottom: 0;
}

.fp-check__icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--atz-red);
}

.fp-check__text {
  margin: 0;
  color: var(--fp-muted);
  font-size: 14px;
}

/* ------------------------------------------------- Nummerierte Listen */

/* base.css raeumt nur `ul` ab -- die beiden nummerierten Listen sind `ol`
   und brauchen den Reset hier, sonst stuenden Browser-Ziffer und eigene
   Nummer nebeneinander. */
.fp-steps,
.fp-numbered {
  list-style: none;
  padding: 0;
}

.fp-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

.fp-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.fp-step__num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--atz-red);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.fp-step__text {
  margin: 0;
  color: var(--fp-muted);
  font-size: 14px;
}

/* Variante ohne Kreis: die Nummer steht rot neben dem Text (Formulare). */
.fp-numbered {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.fp-numbered__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--fp-border);
}

.fp-numbered__item:last-child {
  border-bottom: 0;
}

.fp-numbered__num {
  flex: none;
  width: 16px;
  color: var(--atz-red);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
}

.fp-numbered__title {
  margin: 0 0 3px;
  font-size: 15px;
  font-weight: 700;
}

.fp-numbered__text {
  margin: 0;
  color: var(--fp-muted);
  font-size: 14px;
}

/* ----------------------------------------- Dunkle Kaesten (Zitat/Kontakt) */

.fp-dark {
  padding: 20px;
  border-radius: var(--fp-radius);
  background-color: var(--atz-dark);
  color: #fff;
}

.fp-dark__label {
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fp-dark__icon {
  width: 22px;
  height: 22px;
  margin-bottom: 14px;
  color: #fff;
}

.fp-dark__title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

.fp-dark__text {
  margin: 0 0 16px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
}

.fp-dark__mail {
  display: block;
  padding: 11px 16px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--fp-radius-sm);
  color: #fff;
  font-size: 14px;
  text-align: center;
  overflow-wrap: anywhere;
}

.fp-dark__mail:hover {
  border-color: #fff;
  color: #fff;
}

/* ------------------------------------------------ Fazit / Registrieren */

.fp-fazit {
  padding: 20px;
  background-color: #fff;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius);
  font-size: 17px;
  line-height: 1.5;
}

.fp-cta {
  padding: 18px;
  background-color: #fff;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius);
}

.fp-cta__title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
}

.fp-cta__text {
  margin: 0 0 14px;
  color: var(--fp-muted);
  font-size: 14px;
}

/* ------------------------------------------- Download-Kacheln (Formulare) */

.fp-downloads {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 32px;
}

.fp-download {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius);
  overflow: hidden;
}

/* Die angedeutete Formularseite im Kopf der Kachel -- reine Dekoration, der
   echte Inhalt steht im PDF. */
.fp-download__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background-color: var(--fp-shaded);
  border-bottom: 1px solid var(--fp-border);
}

.fp-download__sheet {
  width: 120px;
  height: auto;
}

.fp-download__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 16px;
}

.fp-download__meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  color: var(--atz-dark);
  font-size: 12px;
  font-weight: 700;
}

.fp-download__meta-icon {
  width: 14px;
  height: 14px;
  color: var(--atz-red);
}

.fp-download__title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
}

.fp-download__text {
  margin: 0 0 16px;
  color: var(--fp-muted);
  font-size: 14px;
}

/* Schiebt den Knopf in allen Kacheln einer Reihe auf dieselbe Hoehe. */
.fp-download__action {
  margin-top: auto;
}

/* ------------------------------------------------------------- Desktop */

@media (min-width: 768px) {
  .fp-hero {
    padding: 40px 0 44px;
  }

  .fp-hero__title {
    font-size: 38px;
  }

  .fp-hero__lead {
    font-size: 16px;
  }

  .fp-cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .fp-licenses {
    grid-template-columns: repeat(2, 1fr);
  }

  .fp-downloads {
    grid-template-columns: repeat(2, 1fr);
  }

  .fp-checks {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Im zweispaltigen Raster trennt die rechte Spalte eine eigene Linie; die
     Zeilentrenner der Mobilansicht wuerden sonst doppelt laufen. */
  .fp-check:nth-child(odd) {
    border-right: 1px solid var(--fp-line);
  }

  .fp-section__title {
    font-size: 23px;
  }
}

@media (min-width: 992px) {
  /* Nur der Kopf mit Nebenkasten wird zweispaltig (Fair Business). Ohne den
     Modifikator bliebe rechts eine leere Spalte stehen und der Einleitungstext
     waere grundlos schmal. */
  .fp-hero__inner--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 32px;
  }

  .fp-hero__aside {
    margin-top: 0;
  }

  .fp-body {
    padding: 40px 0 56px;
  }

  .fp-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: start;
    gap: 40px;
  }

  .fp-layout__side {
    position: sticky;
    top: 24px;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .fp-layout--cta {
    grid-template-areas:
      "side main"
      "cta  main";
    grid-template-rows: auto 1fr;
  }

  .fp-layout--cta .fp-layout__side {
    grid-area: side;
    position: static;
  }

  .fp-layout--cta .fp-layout__main {
    grid-area: main;
  }

  .fp-layout--cta .fp-layout__cta {
    grid-area: cta;
    margin-top: 0;
    position: sticky;
    top: 24px;
  }

  .fp-section {
    margin-bottom: 48px;
  }

  .fp-divider {
    margin-bottom: 48px;
  }

  /* Die Formulare-Seite stellt den Kontaktkasten neben die Hinweisliste. */
  .fp-two-col {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    gap: 40px;
  }
}