/* Gemeinsame Ergaenzungen der englischen Seiten zu /assets/css/site.css.
   Die Regeln gelten nur unter /en/ und aendern keine Farben oder Abstandsstufen des allgemeinen
   Stylesheets, sondern schliessen Luecken, die sich erst im englischen Text zeigen. */

/* Vertrauenszeile unter den Schaltflaechen: auf jeder Seite gleich gesetzt. */
.hero__trust-micro, .feature-hero__micro, .pr-hero__trust-micro, .uc-hero__trust-micro,
.branche-hero__trust-micro, .subhero__trust-micro, .page-hero__micro, .ds-hero__micro {
  font-family: inherit;
  font-size: var(--text-xs);
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

/* Der zweite Verweis im Abschlussband bricht als Ganzes um und laesst kein einzelnes Wort allein. */
.cta-band__secondary { display: inline-block; text-wrap: balance; }

/* Adressen und Paragrafen werden nicht mitten im Ausdruck getrennt. */
a[href^="mailto:"] { white-space: nowrap; }

/* Vertrauenskarten tragen eine h3 (die Seite hat davor eine h2); gleiche Schrift wie bisher die h4. */
.trust-badge h3 { font-size: var(--text-base); font-weight: var(--weight-semibold); }

/* Zwei Verweise im Abschlussband: unter 520 px untereinander, ohne verwaisten Trennpunkt. */
@media (max-width: 520px) {
  .cta-band__sep { display: none; }
  .cta-band__secondary { display: block; margin-top: var(--space-2); }
}

/* Untertitel der Gespraechspartner in den Telefonansichten (Beruf, Branche, Typ) brechen um, statt zu enden. */
.mock-persona-info span { white-space: normal; overflow: visible; text-overflow: clip; }

/* Eine Aussage der Vertrauenszeile bricht nie in der Mitte um. */
i.vz { font-style: normal; white-space: nowrap; }

/* Punktzahl und Rahmenname in den Telefonansichten: der Rahmenname rutscht in eine eigene Zeile,
   statt die Punktzahl zu stauchen. */
.mock-score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin-bottom: 0.75rem;
}

/* Vergleichstabellen auf dem Telefon: jede Zeile eine Karte, die Spaltenkoepfe stehen als Beschriftung
   ueber dem Wert (die Spalte "sip.coach" bleibt nicht ausserhalb des Bildes). */
@media (max-width: 600px) {
  .data-table-wrap { overflow: visible; border: none; background: none; }
  .data-table { min-width: 0; }
  .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .data-table, .data-table tbody, .data-table tr, .data-table tbody th, .data-table td { display: block; width: 100%; }
  .data-table tbody tr {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
  }
  .data-table tbody th { padding: 0 0 var(--space-2); border: none; font-size: var(--text-base); text-align: left; }
  .data-table td { padding: var(--space-1) 0; border: none; font-size: var(--text-sm); text-align: left; }
  .data-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
  }
}

/* Gegenueberstellungen (Verarbeiter, Datenschutzfakten, Bewertung) auf dem Telefon: jede Zeile eine Karte,
   der Spaltenkopf steht als Beschriftung ueber dem Wert, so bleibt keine Spalte (etwa das Land) ausserhalb
   des Bildes. */
@media (max-width: 600px) {
  .compare-wrap { overflow: visible; }
  .compare-table { min-width: 0; }
  .compare-table caption { display: block; width: 100%; }
  .compare-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare-table, .compare-table tbody, .compare-table tr, .compare-table tbody th, .compare-table td { display: block; width: 100%; }
  .compare-table tbody tr {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
  }
  .compare-table tbody th { padding: 0 0 var(--space-2); border: none; font-size: var(--text-base); }
  .compare-table td { padding: var(--space-1) 0; border: none; }
  .compare-table td.col-sip { background: none; }
  .compare-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
  }
  .card:has(> .compare-wrap) { background: none; border: none; box-shadow: none; }
}

/* Preiskarten im Einspalter: jede Karte so hoch wie ihr Inhalt. Gleich hohe Zeilen (grid-auto-rows: 1fr)
   liessen unter der Merkmalsliste bis zu 190 Pixel Leerraum bis zur Schaltflaeche. */
@media (max-width: 768px) {
  .pricing-grid, .pricing-grid--all { grid-auto-rows: auto; }
}

/* Der Absatz unter "The scale" steht mit Abstand zur ersten Karte der Skala. */
.score-scale > p { margin: var(--space-3) 0 var(--space-5); }

/* Die Kennzahl mit Zaehler steht ueber ihrer Beschriftung (die allgemeine Regel fuer [data-counter]
   steht spaeter im allgemeinen Stylesheet und machte sie sonst zum Inline-Block neben dem Text). */
.metric-value[data-counter] { display: block; }

/* Die beiden Schaltflaechen im Kopf der Uebersichtsseiten stehen auf dem Telefon gleich breit untereinander. */
@media (max-width: 480px) {
  .subhero__cta { flex-direction: column; align-items: stretch; }
  .subhero__cta .btn-primary, .subhero__cta .btn-secondary { width: 100%; justify-content: center; }
}

/* Der Block mit den Kennzahlen folgt dem Verweis auf die Methodik mit Abstand statt direkt darunter. */
#metrics { margin-top: var(--space-10); }