/* turbopress Styleguide v2 – Design-Tokens und wiederkehrende Blöcke.
   Quelle: turbopress-docs/wp-turbopress-de/styleguide.md. Gestaltet wird der Hellmodus;
   html[data-theme="dark"] (tp-darkmode) schaltet helle Flächen auf die dunklen Werte um. */

:root {
  --tp-orange: #FF7300;
  --tp-orange-hover: #FF8A26;
  --tp-orange-soft: #FF73001F;
  --tp-orange-text-light: #B34F00; /* Orange als kleiner Text auf hellem Grund (Kontrast) */
  --tp-ink: #0B0C10;
  --tp-ink-2: #14151B;
  --tp-card-dark: #1C1E26;
  --tp-line-dark: #FFFFFF20;
  --tp-fg2-dark: #B9BDC7;
  --tp-white: #FFFFFF;
  --tp-creme: #FAF7F2;
  --tp-line-light: #0B0C1020;
  --tp-fg2-light: #5C606B;
  --tp-radius-card: 14px;
  --tp-radius-btn: 8px;
  --tp-font: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Kontext: dunkle Fläche (Standard) oder helle Fläche (Klasse tp-ctx-light) */
.tp-rrbox, .tp-gleiste, .tp-rrfaq {
  --tp-c-card: var(--tp-card-dark);
  --tp-c-fg: #FFFFFF;
  --tp-c-fg2: var(--tp-fg2-dark);
  --tp-c-line: var(--tp-line-dark);
  --tp-c-link: var(--tp-orange);
}
.tp-ctx-light.tp-rrbox, .tp-ctx-light .tp-rrbox, .tp-ctx-light.tp-gleiste, .tp-ctx-light .tp-gleiste, .tp-ctx-light.tp-rrfaq, .tp-ctx-light .tp-rrfaq {
  --tp-c-card: var(--tp-white);
  --tp-c-fg: var(--tp-ink);
  --tp-c-fg2: var(--tp-fg2-light);
  --tp-c-line: var(--tp-line-light);
  --tp-c-link: var(--tp-orange-text-light);
}
html[data-theme="dark"] .tp-ctx-light.tp-rrbox, html[data-theme="dark"] .tp-ctx-light .tp-rrbox,
html[data-theme="dark"] .tp-ctx-light.tp-gleiste, html[data-theme="dark"] .tp-ctx-light .tp-gleiste,
html[data-theme="dark"] .tp-ctx-light.tp-rrfaq, html[data-theme="dark"] .tp-ctx-light .tp-rrfaq {
  --tp-c-card: var(--tp-card-dark);
  --tp-c-fg: #FFFFFF;
  --tp-c-fg2: var(--tp-fg2-dark);
  --tp-c-line: var(--tp-line-dark);
  --tp-c-link: var(--tp-orange);
}

/* Beratungsbox „Unsicher, welcher Tarif passt?“ */
.tp-rrbox { box-sizing: border-box; max-width: 960px; margin: 0 auto; display: flex; align-items: center; gap: 24px; padding: 24px 28px; border: 1px solid var(--tp-c-line); border-radius: var(--tp-radius-card); background: var(--tp-c-card); font: 400 15px/1.6 var(--tp-font); color: var(--tp-c-fg2); }
.tp-rrbox p { margin: 0; }
.tp-rrbox .tp-rrbox__foto { flex: 0 0 64px; width: 64px; height: 64px; margin: 0; border-radius: 50%; object-fit: cover; }
.tp-rrbox__text { flex: 1 1 auto; min-width: 0; }
.tp-rrbox .tp-rrbox__titel { font: 600 20px/1.3 var(--tp-font); color: var(--tp-c-fg); }
.tp-rrbox .tp-rrbox__lead { margin-top: 4px; color: var(--tp-c-fg2); }
.tp-rrbox a.tp-rrbox__knopf, .tp-rrbox a.tp-rrbox__knopf:visited { flex: 0 0 auto; display: inline-block; padding: 16px 28px; border-radius: var(--tp-radius-btn); background: var(--tp-orange); color: var(--tp-ink); font: 600 14px/1.2 var(--tp-font); letter-spacing: 1px; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.tp-rrbox a.tp-rrbox__knopf:hover, .tp-rrbox a.tp-rrbox__knopf:focus-visible { background: var(--tp-orange-hover); color: var(--tp-ink); }
.tp-rrbox a.tp-rrbox__knopf:focus-visible, a.tp-rrleiste:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
a.tp-rrleiste { display: none; }
@media (max-width: 767px) {
  .tp-rrbox { flex-direction: column; gap: 12px; padding: 24px 20px; text-align: center; }
  .tp-rrbox a.tp-rrbox__knopf, .tp-rrbox a.tp-rrbox__knopf:visited { display: block; width: 100%; box-sizing: border-box; text-align: center; white-space: normal; }
  a.tp-rrleiste, a.tp-rrleiste:visited { display: inline-block; position: fixed; left: 16px; bottom: 16px; z-index: 990; padding: 10px 16px; border-radius: 999px; background: var(--tp-orange); color: var(--tp-ink); font: 600 14px/1.2 var(--tp-font); text-decoration: none; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
}

/* Garantie-Leiste */
.tp-gl-wrap { display: flex; align-items: center; gap: 16px; max-width: 1140px; margin: 0 auto; }
.tp-gl-wrap .tp-gleiste { flex: 1; margin: 0; }
.tp-gleiste { box-sizing: border-box; max-width: 1140px; margin: 0 auto; padding: 16px 24px; border: 1px solid var(--tp-c-line); border-radius: var(--tp-radius-card); background: var(--tp-c-card); text-align: center; font: 400 15px/1.6 var(--tp-font); color: var(--tp-c-fg2); }
.tp-gleiste p { margin: 0; }
.tp-gleiste .tp-gl-p { display: inline-block; margin: 2px 12px; font: 600 16px/1.4 var(--tp-font); color: var(--tp-c-fg); }
.tp-gleiste .tp-gl-p::before { content: "✓\00a0"; color: var(--tp-orange); font-weight: 700; }
.tp-gleiste .tp-gl-k { margin-top: 6px; font-size: 13px; color: var(--tp-c-fg2); }
.tp-gleiste a { color: var(--tp-c-link); text-decoration: underline; }
.tp-gl-pe { flex: none; display: block; line-height: 0; }
.tp-gl-pe img { width: 92px; height: 92px; border-radius: 8px; }
@media (max-width: 767px) {
  .tp-gl-wrap { flex-direction: column; gap: 12px; }
  .tp-gleiste { padding: 12px 16px; }
  .tp-gleiste .tp-gl-p { display: block; margin: 2px 0; font-size: 15px; }
  .tp-gl-pe img { width: 84px; height: 84px; }
}

/* FAQ-Kontaktzeile „Deine Frage ist nicht dabei?“ */
.tp-rrfaq { margin: 16px 0 0; text-align: center; font: 400 15px/1.6 var(--tp-font); color: var(--tp-c-fg2); }
.tp-rrfaq a, .tp-rrfaq a:visited { color: var(--tp-c-link); font-weight: 600; text-decoration: underline; }
.tp-rrfaq a:hover { color: var(--tp-orange-hover); }

/* Umbrüche: Überschriften ausgewogen umbrechen, Fließtext ohne einzelne Wörter in der letzten Zeile */
.elementor-heading-title, .elementor-headline, .elementor-icon-box-title, .elementor-image-box-title { text-wrap: balance; }
.elementor-widget-text-editor p, .elementor-icon-box-description, .elementor-image-box-description { text-wrap: pretty; }