/* Global-Styles-Embed (Finsweet Client-First)
   In Webflow: Embed-Element "global-styles" als Symbol oben in der page-wrapper anlegen
   und diesen Inhalt in <style>…</style> einfügen. Enthält nur Code, den der Designer
   nicht abbilden kann. */

/* ---------- Client-First Basis ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
[hidden] { display: none !important; }
svg { display: block; max-width: 100%; }

/* Richtungs-Klassen für Spacing-Wrapper, z. B. class="margin-bottom margin-medium" */
.margin-top { margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; }
.margin-bottom { margin-top: 0 !important; margin-right: 0 !important; margin-left: 0 !important; }
.margin-left { margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; }
.margin-right { margin-top: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; }
.margin-vertical { margin-right: 0 !important; margin-left: 0 !important; }
.margin-horizontal { margin-top: 0 !important; margin-bottom: 0 !important; }
.padding-top { padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; }
.padding-bottom { padding-top: 0 !important; padding-right: 0 !important; padding-left: 0 !important; }
.padding-left { padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; }
.padding-right { padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; }
.padding-vertical { padding-right: 0 !important; padding-left: 0 !important; }
.padding-horizontal { padding-top: 0 !important; padding-bottom: 0 !important; }

/* Fließende Überschriften zwischen den Breakpoints */
@media screen and (min-width: 992px) {
  h1, .heading-style-h1 { font-size: clamp(2.6rem, 4.4vw, 3.3rem); }
  h2, .heading-style-h2 { font-size: clamp(2rem, 3vw, 2.35rem); }
}

/* ---------- Ratgeber-Dropdown (in Webflow alternativ das native Dropdown-Element) ---------- */

.navbar_dropdown:hover .navbar_dropdown-list,
.navbar_dropdown:focus-within .navbar_dropdown-list { display: block; }
.navbar_dropdown-list::before { content: ""; position: absolute; left: 0; right: 0; top: -.75rem; height: .75rem; }
.navbar_dropdown-toggle::after { content: " ▾"; font-size: .8em; }

/* ---------- Tagline-Linie ---------- */

.text-style-tagline::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--sheen), var(--sheen-violet));
}

/* ---------- Häkchen-Listen ---------- */

.checklist_item::before,
.pricing_trust-item::before,
.pricing_feature::before {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
}
.checklist_item::before,
.pricing_trust-item::before {
  background: var(--success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
.checklist_item::before { top: 5px; }
.pricing_trust-item::before { top: 3px; }
.pricing_feature::before {
  top: 4px;
  background: #e3f6ef url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%230b7d67' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
.pricing_feature.is-plus::before { display: none; }

/* ---------- Hero: Sprechblase & Animationen ---------- */

.hero_bubble::after {
  content: "";
  position: absolute;
  right: -7px;
  top: 18px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-right: 1px solid var(--line);
  border-top: 1px solid var(--line);
  transform: rotate(45deg);
}
.hero_mascot { animation: bt-bob 3.2s ease-in-out infinite; }
.flow_mail.is-doc { animation: bt-slide-in 5s ease-in-out infinite; }
.flow_mail.is-doc.is-delay-1 { animation-delay: .6s; }
.flow_mail.is-doc.is-delay-2 { animation-delay: 1.2s; }
.flow_arrow-icon { animation: bt-pulse 1.6s ease-in-out infinite; }

/* Ablauf von oben nach unten: Belege fallen von oben ein, der Pfeil (um 90° gedreht) pulsiert nach unten */
@keyframes bt-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes bt-slide-in {
  0%, 10% { opacity: 0; transform: translateY(-12px); }
  25%, 85% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}
@keyframes bt-pulse { 0%, 100% { transform: rotate(90deg) translateX(0); } 50% { transform: rotate(90deg) translateX(5px); } }

@media (prefers-reduced-motion: reduce) {
  .hero_mascot, .flow_mail.is-doc, .flow_arrow-icon { animation: none; }
}

/* ---------- Ergebnisse: lange Wörter wie "Umsatzsteuervoranmeldung" trennen ---------- */

.results_kpi-text { hyphens: auto; overflow-wrap: break-word; }

/* ---------- Rich Text: kein Abstand über dem ersten Element ---------- */

.text-rich-text > :first-child { margin-top: 0; }

/* ---------- Tabellen ---------- */

.table_component tr:last-child .table_row-header,
.table_component tr:last-child .table_cell { border-bottom: 0; }

/* ---------- details / summary (Funktionsvergleich & FAQ) ---------- */

.pricing_compare-toggle,
.faq_question { list-style: none; }
.pricing_compare-toggle::-webkit-details-marker,
.faq_question::-webkit-details-marker { display: none; }
.pricing_compare-toggle::after { content: " ▾"; }
.pricing_compare[open] .pricing_compare-toggle::after { content: " ▴"; }
.faq_question::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 12px;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--cta);
  transition: transform .2s ease;
}
.faq_item[open] .faq_question::after { transform: rotate(45deg); }