/* ==========================================================================
   OnServio Kontur - Kernbloecke
   Bringt die Standard-Bloecke von WordPress auf die Optik des Themes.
   Die is-style-Klassen entstehen aus den Blockstilen in inc/blocks.php und
   sind im Editor rechts unter "Stile" auswaehlbar.
   ========================================================================== */

/* --- Abschnitte ---------------------------------------------------------- */
.wp-block-group.is-style-abschnitt        { padding-block: var(--space-xl); }
.wp-block-group.is-style-abschnitt-grau   { padding-block: var(--space-xl); background: var(--surface); }
.wp-block-group.is-style-abschnitt-schmal { padding-block: var(--space-lg); }

/* --- Kopfbereich einer Seite --------------------------------------------- */
.wp-block-group.is-style-kopfbereich {
  padding-top: clamp(64px, 9vh, 104px);
  padding-bottom: clamp(48px, 6vh, 72px);
  text-align: center;
}
.wp-block-group.is-style-kopfbereich .wp-block-heading {
  margin-inline: auto;
  max-width: 15ch;
}
.wp-block-group.is-style-kopfbereich p {
  margin: 22px auto 0;
  max-width: 620px;
}

/* --- Zentrierter Block ---------------------------------------------------- */
.wp-block-group.is-style-mittig { text-align: center; }
.wp-block-group.is-style-mittig .wp-block-buttons { justify-content: center; }

/* --- Schmale Textspalte --------------------------------------------------- */
.wp-block-group.is-style-textspalte {
  max-width: 720px;
  margin-inline: auto;
}

/* --- Prinzipien: drei Spalten mit Haarlinie ------------------------------ */
.wp-block-group.is-style-prinzipien {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 48px;
}
.wp-block-group.is-style-prinzipien > * { margin-block-start: 0 !important; }
.wp-block-group.is-style-prinzip {
  padding-top: 26px;
  border-top: 1.5px solid var(--ink);
}
.wp-block-group.is-style-prinzip > * + * { margin-block-start: 12px; }

/* --- Karte ---------------------------------------------------------------- */
.wp-block-group.is-style-karte {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(26px, 3.4vw, 40px);
}
.wp-block-group.is-style-karte > * + * { margin-block-start: 14px; }

/* --- Hervorgehobener Kasten ---------------------------------------------- */
.wp-block-group.is-style-rahmen {
  border: 1.5px solid var(--ink);
  border-radius: var(--r-md);
  padding: clamp(30px, 4.2vw, 56px);
  background: #FFFFFF;
}

/* --- Ueberschriften und Text --------------------------------------------- */
.wp-block-heading { text-wrap: balance; }
.has-text-align-center { text-align: center; }

/* Einleitungstext mittig, wie .lede-center */
.is-style-einleitung-mittig { max-width: 660px; margin-inline: auto; }

/* --- Buttons ------------------------------------------------------------- */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 14px; }
.wp-block-buttons.is-content-justification-center { justify-content: center; }

.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
  padding: 17px 30px;
  border: 1px solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #FFFFFF;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity .18s ease, background-color .18s ease, color .18s ease;
}
.wp-block-button__link:hover,
.wp-block-button__link:focus { opacity: .82; color: #FFFFFF; text-decoration: none; }

.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--ink);
  color: #FFFFFF;
  opacity: 1;
}

/* --- Listen -------------------------------------------------------------- */
.wp-block-list { display: grid; gap: 10px; padding-left: 22px; }
.wp-block-list li { list-style: disc; }
ol.wp-block-list li { list-style: decimal; }

.wp-block-list.is-style-haken { display: grid; gap: 14px; padding-left: 0; }
.wp-block-list.is-style-haken li { position: relative; padding-left: 26px; list-style: none; color: var(--ink); }
.wp-block-list.is-style-haken li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 12px; height: 6px;
  border-left: 1.4px solid var(--ink);
  border-bottom: 1.4px solid var(--ink);
  transform: rotate(-45deg);
}

.wp-block-list.is-style-striche { display: grid; gap: 0; padding-left: 0; }
.wp-block-list.is-style-striche li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
  list-style: none;
}
.wp-block-list.is-style-striche li:last-child { border-bottom: 1px solid var(--line); }
.wp-block-list.is-style-striche li::before {
  content: '';
  flex: 0 0 auto;
  width: 13px; height: 1.4px;
  background: var(--ink);
  margin-top: 14px;
}

/* --- Bilder -------------------------------------------------------------- */
.wp-block-image { margin: 0; }
.wp-block-image img { display: block; height: auto; max-width: 100%; }
.wp-block-image figcaption {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 10px;
  text-align: left;
}

/* --- Trennlinie ---------------------------------------------------------- */
.wp-block-separator {
  border: 0;
  border-top: 1px solid var(--line);
  margin-block: var(--space-md);
  opacity: 1;
  max-width: none;
}

/* --- Zitat --------------------------------------------------------------- */
.wp-block-quote {
  border-left: 1.5px solid var(--ink);
  padding-left: 24px;
  font-size: 1.125rem;
  color: var(--ink);
}

/* --- Tabelle ------------------------------------------------------------- */
.wp-block-table table { width: 100%; border-collapse: collapse; }
.wp-block-table td, .wp-block-table th {
  border: 0;
  border-top: 1px solid var(--line);
  padding: 14px 0;
  text-align: left;
  font-size: 0.9375rem;
}
.wp-block-table th { color: var(--ink); font-weight: 600; }

/* --- Spalten ------------------------------------------------------------- */
.wp-block-columns { gap: 20px; }

/* --- Aufklappbares Element ----------------------------------------------- */
.wp-block-details {
  border-top: 1px solid var(--line);
  padding-block: 22px;
}
.wp-block-details:last-of-type { border-bottom: 1px solid var(--line); }
.wp-block-details summary {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.7vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.35;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details > *:not(summary) { margin-top: 14px; max-width: 68ch; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 960px) {
  .wp-block-group.is-style-prinzipien { grid-template-columns: repeat(2, 1fr); gap: 32px 40px; }
}
@media (max-width: 720px) {
  .wp-block-group.is-style-prinzipien { grid-template-columns: 1fr; gap: 0; }
  .wp-block-group.is-style-prinzip { padding-bottom: 26px; }
  .wp-block-group.is-style-prinzip:last-child { padding-bottom: 0; }
  .wp-block-buttons .wp-block-button,
  .wp-block-buttons .wp-block-button__link { width: 100%; }
}

/* ==========================================================================
   Bestehende Theme-Klassen als Bloecke
   Die Bloecke tragen dieselben Klassen wie frueher die PHP-Vorlagen. Hier wird
   nur der Standardabstand von WordPress herausgenommen, damit die Abstaende
   exakt die aus main.css bleiben.
   ========================================================================== */

.wp-block-group.hero > *,
.wp-block-group.card > *,
.wp-block-group.plan > *,
.wp-block-group.plan__price > *,
.wp-block-group.step > *,
.wp-block-group.steps > *,
.wp-block-group.grid > *,
.wp-block-group.callout > *,
.wp-block-group.form-shell > *,
.wp-block-group.contact-row > *,
.wp-block-group.rule-top > *,
.wp-block-group.narrow > *,
.wp-block-group.narrow--center > * { margin-block-start: 0; }

/* Kopfbereich in der breiten Variante. */
.wp-block-group.is-style-kopfbereich .hero__title--wide { max-width: 20ch; }
.wp-block-group.is-style-kopfbereich .wp-block-buttons { margin-top: var(--space-md); }

/* Startseiten-Kopf. */
.wp-block-group.hero .wp-block-heading { margin-inline: auto; max-width: 15ch; }
.wp-block-group.hero p { margin: 26px auto 0; max-width: 620px; }
.wp-block-group.hero .wp-block-buttons { margin-top: var(--space-md); }

/* Buttons in Theme-Groessen. */
.wp-block-button.btn--sm .wp-block-button__link { padding: 13px 24px; font-size: 0.9375rem; }
.wp-block-button.btn--block,
.wp-block-button.btn--block .wp-block-button__link { width: 100%; }

/* Karten- und Paketfuss kleben unten. */
.wp-block-buttons.card__foot,
.wp-block-buttons.plan__foot { margin-top: auto; }

/* Paketkarte: Preis und Zeitraum in einer Zeile. */
.wp-block-group.plan__price p { margin: 0; }

/* Kontaktzeilen. */
.wp-block-group.contact-row > p:first-of-type {
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin: 0;
}
.wp-block-group.contact-row > p:last-of-type {
  color: var(--ink);
  font-size: 1.0625rem;
  margin: 3px 0 0;
}

/* Listen, die die Theme-Klassen tragen. */
.wp-block-list.list-check,
.wp-block-list.plan__list { padding-left: 0; }
.wp-block-list.list-check li,
.wp-block-list.plan__list li { list-style: none; }
.wp-block-list.list-rules { padding-left: 0; gap: 0; }
.wp-block-list.list-rules li { list-style: none; }

/* Aufklappbare Fragen: Zeilen mit Plus und Minus, wie im Theme. */
.wp-block-details {
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 0;
}
.wp-block-details:first-of-type { border-top: 1px solid var(--line); }
.wp-block-details summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.7vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.35;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.wp-block-details summary::marker,
.wp-block-details summary::-webkit-details-marker { content: ''; display: none; }
.wp-block-details summary::after {
  content: '';
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 5px;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 16px 1.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 1.5px 16px no-repeat;
}
.wp-block-details[open] summary::after {
  background: linear-gradient(var(--ink), var(--ink)) center / 16px 1.5px no-repeat;
}
.wp-block-details > *:not(summary) {
  margin-top: 0;
  padding-bottom: 28px;
  max-width: 68ch;
}

/* Formularhuelle. */
.wp-block-group.form-shell .wpforms-container { margin: 0 !important; }

@media (max-width: 720px) {
  .wp-block-buttons.card__foot .wp-block-button,
  .wp-block-buttons.plan__foot .wp-block-button { width: 100%; }
}
/* --- Paketkarte: Innenabstaende wie im Theme ----------------------------- */
.wp-block-group.plan > .plan__meta  { margin-top: 8px; }
.wp-block-group.plan > .plan__intro { margin-top: 18px; }
.wp-block-group.plan > .plan__list  { margin-top: 18px; }
.wp-block-group.plan > .plan__intro + .plan__list { margin-top: 16px; }
.wp-block-group.plan > .plan__foot  { margin-top: auto; padding-top: var(--space-md); }
.wp-block-group.plan > .plan__badge { margin: 0; }
/* --- Schriftgroessen der Theme-Klassen absichern -------------------------
   theme.json gibt jeder Ueberschriftsebene eine Groesse. Damit eine Zeile
   ihre Groesse behaelt, wenn sich ihre Ebene aendert, gewinnen hier die
   Klassen aus dem Theme.                                                    */
.wp-block-heading.t-hero {
  font-size: clamp(2.5rem, 5.8vw, 4.25rem);
  line-height: 1.03;
  letter-spacing: -0.032em;
}
.wp-block-heading.t-h1 {
  font-size: clamp(2.125rem, 4.6vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
}
.wp-block-heading.t-h2 {
  font-size: clamp(1.625rem, 3.1vw, 2.375rem);
  line-height: 1.12;
  letter-spacing: -0.026em;
}
.wp-block-heading.t-h3 {
  font-size: clamp(1.1875rem, 1.7vw, 1.375rem);
  line-height: 1.25;
  letter-spacing: -0.018em;
}

/* --- Begruessung ganz oben ----------------------------------------------- */
.wp-block-group.is-style-begruessung {
  padding-top: clamp(72px, 11vh, 132px);
  padding-bottom: 0;
  text-align: center;
}
.wp-block-group.is-style-begruessung .wp-block-image {
  margin: 0 auto 28px;
}
.wp-block-group.is-style-begruessung .wp-block-image img {
  margin-inline: auto;
}