/* Fax-Seiten: /fax-online-versenden/ (Vergleich) und /einfachfaxen/ (Produktseite) */

.fax-meta { font-size: var(--fs-sm); color: var(--text-secondary); margin-top: var(--space-sm); }
.fax-meta a { color: var(--purple-600); }

.fax-hinweis {
  background: var(--panel-cream);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--fs-sm);
  margin-top: var(--space-sm);
}

.fax-answer {
  background: var(--panel-violet);
  border-radius: var(--radius-card);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-md) 0;
}
.fax-answer p { margin: 0 0 var(--space-xs); }
.fax-answer p:last-child { margin-bottom: 0; }

.fax-table td, .fax-table th { vertical-align: top; }
.fax-caption {
  caption-side: top;
  text-align: left;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  padding: var(--space-sm) var(--space-md);
}
@media (max-width: 759px) {
  /* Tabellen werden mobil zu Karten (style.css), die Überschrift läuft dann über die volle Breite */
  .fax-caption { display: block; width: 100%; padding: 0 0 var(--space-xs); }
}
.fax-source { font-size: var(--fs-sm); color: var(--text-secondary); margin-top: var(--space-xs); }
.fax-source a { color: var(--purple-600); }

.fax-eigen {
  display: inline-block;
  margin-left: var(--space-2xs);
  padding: .15rem .55rem;
  border-radius: var(--radius-pill);
  background: var(--purple-100);
  color: var(--purple-700);
  font-size: var(--fs-xxs);
  font-weight: 600;
  white-space: nowrap;
}

/* Produktseite einfachfaxen */
.fax-fakten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-sm);
  margin: var(--space-md) 0;
  padding: 0;
  list-style: none;
}
.article__section ul.fax-fakten { padding-left: 0; }
.article__section .fax-fakten li {
  background: var(--panel-cream);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  margin: 0;
}
.fax-fakten strong { display: block; color: var(--text-primary); }

.fax-schritte { counter-reset: schritt; }

.fax-cta { margin: var(--space-lg) 0 0; }
.fax-cta__hinweis { font-size: var(--fs-sm); color: var(--text-secondary); margin-top: var(--space-xs); }

/* Hero der Produktseite: Text links, Formularkarte rechts (das eine schwebende Element der Seite) */
.fax-hero { display: grid; gap: var(--space-lg); align-items: start; }
@media (min-width: 1024px) {
  .fax-hero { grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); gap: var(--space-xl); }
}
.fax-hero__fuer { color: var(--text-secondary); margin-top: var(--space-sm); }

.fax-senden {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lift);
  padding: var(--space-lg);
  position: relative;
}
.fax-senden__titel { font-weight: 700; font-size: var(--fs-lg); color: var(--text-primary); margin: 0 0 var(--space-md); }
.fax-senden__felder { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--space-md); }
.fax-feld { display: grid; gap: var(--space-2xs); }
.fax-feld__label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); }
.fax-feld__hilfe { font-size: var(--fs-xs); color: var(--text-secondary); }
.fax-feld__eingabe,
.fax-feld__datei {
  font: inherit;
  font-size: var(--fs-body);
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.fax-feld__datei { padding: 8px; cursor: pointer; }
.fax-feld__datei::file-selector-button {
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-right: var(--space-sm);
  padding: 8px 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--purple-100);
  color: var(--purple-700);
  cursor: pointer;
}
.fax-feld__eingabe:focus-visible,
.fax-feld__datei:focus-visible { outline: 2px solid var(--purple-500); outline-offset: 2px; }
.fax-senden__knopf { width: 100%; justify-content: center; min-height: 52px; font-size: var(--fs-body); }
.fax-senden__felder:disabled { opacity: .6; }
.fax-senden__felder:disabled .fax-senden__knopf { cursor: not-allowed; }
.fax-senden__preis { font-size: var(--fs-xs); color: var(--text-secondary); margin: var(--space-sm) 0 0; }
.fax-senden .fax-hinweis { margin-top: var(--space-md); }

/* Sicherheiten unter jedem Knopf */
.fax-versprechen {
  list-style: none;
  padding: 0;
  margin: var(--space-sm) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}
/* Artikel-Listen sind Spalten mit Einzug (style.css); die Sicherheiten bleiben eine Zeile ohne Einzug */
.article__section ul.fax-versprechen { padding-left: 0; margin: var(--space-sm) 0 0; flex-direction: row; gap: var(--space-2xs) var(--space-md); }
.article__section .fax-versprechen li { margin: 0; padding-left: 0; line-height: 1.4; }
.fax-versprechen li { display: inline-flex; align-items: center; gap: 6px; }
.fax-versprechen svg { width: 16px; height: 16px; color: var(--purple-600); flex: none; }

/* Eigenes Angebot auf der Vergleichsseite: außerhalb der Rangfolge, klar gekennzeichnet */
.fax-cta-karte {
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  margin: var(--space-md) 0 0;
}
.fax-cta-karte .fax-eigen { margin-left: 0; }
.fax-cta-karte__titel { font-weight: 700; font-size: var(--fs-lg); color: var(--text-primary); margin: var(--space-sm) 0 var(--space-2xs); }
.fax-cta-karte__preis { font-weight: 600; color: var(--purple-700); font-variant-numeric: tabular-nums; margin: 0 0 var(--space-xs); }
.fax-cta-karte__text { margin: 0; }
.fax-cta-karte__aktion { margin-top: var(--space-md); }

/* GIF in der CTA-Karte: links groß ab Tablet, mobil über dem Text */
.fax-cta-karte { display: grid; gap: var(--space-lg); }
.fax-cta-karte__bild { display: block; max-width: 320px; }
.fax-cta-karte__bild img { display: block; width: 100%; height: auto; border-radius: var(--radius-card); box-shadow: 0 0 0 1px var(--line), 0 8px 24px -12px rgba(30, 10, 60, .25); }
@media (min-width: 760px) {
  .fax-cta-karte { grid-template-columns: 300px minmax(0, 1fr); align-items: center; }
}

/* How-to-Band: zwischen Hero und Artikel in voller Containerbreite, Video links groß */
.fax-howto-band {
  background: var(--panel-violet);
  border-radius: var(--radius-panel);
  padding: var(--space-lg);
  margin: 0 0 var(--space-xl);
}
.fax-howto { display: grid; gap: var(--space-lg); align-items: center; }
@media (min-width: 900px) {
  .fax-howto-band { padding: var(--space-xl); }
  .fax-howto { grid-template-columns: 440px minmax(0, 1fr); gap: var(--space-xl); }
}
.fax-howto__medien { margin: 0; }
.fax-howto__video { display: block; width: 100%; max-width: 440px; height: auto; border-radius: var(--radius-card); box-shadow: 0 0 0 1px var(--line), 0 16px 40px -16px rgba(30, 10, 60, .3); background: var(--paper); }
.fax-howto__medien figcaption { font-size: var(--fs-xs); color: var(--text-secondary); margin-top: var(--space-xs); }
.fax-howto__medien figcaption a { color: var(--purple-600); }
.fax-howto__text .article__heading { margin-top: var(--space-sm); }
.fax-schritte { margin: var(--space-md) 0 0; padding-left: var(--space-lg); display: grid; gap: var(--space-sm); }
.fax-schritte li { line-height: var(--lh-body); padding-left: var(--space-xs); }
.fax-schritte li::marker { color: var(--purple-500); font-weight: 700; }

/* Link zum Video im Hero */
.fax-hero__video { margin-top: var(--space-md); }
.fax-hero__video a { display: inline-flex; align-items: center; gap: var(--space-xs); font-weight: 600; color: var(--purple-600); text-decoration: none; }
.fax-hero__video a:hover { color: var(--purple-700); text-decoration: underline; }
.fax-hero__video svg { width: 28px; height: 28px; padding: 7px; border-radius: 50%; background: var(--purple-100); color: var(--purple-600); box-sizing: border-box; }

.fax-abschluss {
  background: var(--panel-violet);
  border-radius: var(--radius-panel);
  padding: var(--space-lg);
}
.fax-howto-band .article__badge { background: var(--white); }

/* Produkt-Hero: kompakte Überschrift, Kennzahlen statt Fließtext */
.fax-hero .page-hero__title { font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
.fax-hero__lead { font-size: var(--fs-lg); line-height: 1.55; color: var(--text-secondary); margin: var(--space-sm) 0 0; max-width: 34em; }
.fax-kennzahlen {
  list-style: none; padding: 0; margin: var(--space-lg) 0 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm);
}
.fax-kennzahlen li {
  background: var(--white); border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md);
  box-shadow: 0 0 0 1px var(--line); display: grid; gap: 2px; margin: 0;
}
.fax-kennzahlen strong { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1.2; }
.fax-kennzahlen span { font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.35; }
@media (max-width: 480px) {
  .fax-kennzahlen { grid-template-columns: 1fr; }
  .fax-kennzahlen li { grid-template-columns: auto 1fr; align-items: baseline; gap: var(--space-sm); }
}
.fax-hero .fax-hero__fuer { font-size: var(--fs-sm); margin-top: var(--space-md); }

/* Formularkarte als App-Ansicht */
.fax-senden__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-md); }
.fax-senden__kopf .fax-senden__titel { margin: 0; }
.fax-senden__marke { font-size: var(--fs-xxs); font-weight: 600; color: var(--purple-700); background: var(--purple-100); border-radius: var(--radius-pill); padding: .2rem .65rem; }

.fax-ablage {
  display: flex; gap: var(--space-md); align-items: center;
  padding: var(--space-sm); border-radius: var(--radius-sm);
  border: 1px dashed var(--line-strong); background: var(--paper);
  transition: border-color var(--dur-hover) ease, background-color var(--dur-hover) ease;
}
.fax-ablage--gefuellt { border-style: solid; border-color: var(--purple-400); background: var(--purple-50); }
.fax-ablage__blatt {
  width: 52px; height: 72px; flex: none; border-radius: 4px; background: var(--white);
  box-shadow: 0 0 0 1px var(--line-strong);
  background-image: repeating-linear-gradient(180deg, transparent 0 11px, rgba(30, 10, 60, .07) 11px 12px);
  background-size: 70% 100%; background-repeat: no-repeat; background-position: 50% 10px;
}
.fax-ablage__aktionen { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; min-width: 0; }
.fax-ablage__knopf {
  position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  border-radius: var(--radius-pill); background: var(--purple-100); color: var(--purple-700);
  font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
  transition: background-color var(--dur-hover) ease;
}
.fax-ablage__knopf:hover { background: var(--purple-50); }
.fax-ablage__knopf:focus-within { outline: 2px solid var(--purple-500); outline-offset: 2px; }
.fax-ablage__input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.fax-ablage__status { flex-basis: 100%; font-size: var(--fs-xs); color: var(--text-secondary); overflow-wrap: anywhere; }
.fax-ablage--gefuellt .fax-ablage__status { color: var(--purple-700); font-weight: 600; }
/* Kamera-Knopf nur auf Geräten mit Touch-Bedienung */
@media (hover: hover) and (pointer: fine) {
  .fax-ablage__knopf--kamera { display: none; }
}
.fax-senden__felder:disabled .fax-ablage__knopf,
.fax-senden__felder:disabled .fax-ablage__input { cursor: not-allowed; }