/*
 * Stall-Tabulum – Landing im nativen Gutenberg-Look.
 * Stylt STANDARD-Core-Blöcke (Gruppe/Überschrift/Absatz/Spalten/Button/Bild),
 * die über zusätzliche Klassen (stl-*) das Marken-Aussehen bekommen. Keine
 * eigenen Blöcke, keine Felder – der Betreiber bearbeitet alles nativ.
 */
:root {
  --stl-green: #1C3A2C;
  --stl-green2: #2C5642;
  --stl-brass: #A8763C;
  --stl-slate: #40668A;
  --stl-sand: #EFE7D7;
  --stl-paper: #FBF8F1;
  --stl-ink: #23271f;
  --stl-mut: #5D6660;
  --stl-line: #e7e1d3;
}

/* Grundtypo für die Landing-Abschnitte (Brand-Schriften aus fonts.css) */
.stl-hero, .stl-section, .stl-cta {
  font-family: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.stl-eyebrow {
  font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .8rem;
  color: var(--stl-brass);
  font-weight: 700;
  margin: 0 0 .4rem;
}

/* Hero */
.stl-hero {
  background: var(--stl-paper);
  text-align: center;
  padding: 64px 20px 52px;
}
.stl-hero h1 {
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.05;
  color: var(--stl-green);
  font-weight: 800;
  margin: .2em 0;
}
.stl-hero .stl-sub {
  font-size: 1.15rem;
  color: var(--stl-mut);
  max-width: 48ch;
  margin: 1rem auto;
}
.stl-hero .stl-micro { font-size: .85rem; color: var(--stl-mut); margin-top: 1rem; }

/* Abschnitte */
.stl-section { padding: 64px 20px; }
.stl-section.stl-tint { background: var(--stl-sand); }
.stl-section h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  color: var(--stl-green);
  text-align: center;
  font-weight: 800;
  margin: .2em 0;
}
.stl-section .stl-eyebrow { text-align: center; }
.stl-section .stl-lead { text-align: center; color: var(--stl-mut); max-width: 54ch; margin: .6rem auto 2rem; }

/* Funktions-Karten */
.stl-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, #fcfaf5 100%);
  border: 1px solid var(--stl-line);
  border-radius: 18px;
  padding: 28px 26px 30px;
  min-height: 220px;
  height: 100%;
  box-shadow: 0 16px 34px -28px rgba(20,35,28,.55);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.stl-card::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--stl-brass);
}
.stl-card::before {
  content: "";
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 0 22px;
  border-radius: 14px;
  background-color: rgba(168,118,60,.10);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 25px 25px;
}
.stl-section .wp-block-column:nth-child(1) .stl-card::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23A8763C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V8l8-5 8 5v13'/%3E%3Cpath d='M8 21v-8h8v8M4 11h16'/%3E%3C/svg%3E");
}
.stl-section .wp-block-column:nth-child(2) .stl-card::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23A8763C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h9l4 4v16H6z'/%3E%3Cpath d='M14 2v5h5M9 12h7M9 16h7M9 8h2'/%3E%3C/svg%3E");
}
.stl-section .wp-block-column:nth-child(3) .stl-card::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23A8763C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19V9M10 19V5M16 19v-7M22 19H2'/%3E%3Cpath d='m4 7 6-4 6 5 6-4'/%3E%3C/svg%3E");
}
.stl-card:hover {
  transform: translateY(-4px);
  border-color: rgba(168,118,60,.55);
  box-shadow: 0 22px 44px -30px rgba(20,35,28,.7);
}
.stl-card h3 {
  color: var(--stl-green);
  margin: 0 0 .55rem;
  font-size: 1.18rem;
  line-height: 1.2;
}
.stl-card p {
  color: var(--stl-mut);
  margin: 0;
  line-height: 1.55;
}

/* Preis-Karte */
.stl-price-card {
  background: #fff;
  border: 2px solid var(--stl-green);
  border-radius: 18px;
  padding: 28px;
  text-align: center;
  max-width: 440px;
  margin: 0 auto;
}
.stl-price-card .stl-price { font-size: 2.6rem; font-weight: 800; color: var(--stl-green); line-height: 1; }
.stl-price-card .stl-price small { font-size: 1rem; font-weight: 600; color: var(--stl-mut); }
.stl-price-card ul { list-style: none; padding: 0; margin: 1.2rem 0; text-align: left; }
.stl-price-card li { padding: .35rem 0 .35rem 1.7rem; position: relative; color: var(--stl-ink); }
.stl-price-card li::before { content: "✓"; position: absolute; left: 0; color: var(--stl-green2); font-weight: 800; }

/* Marken-Buttons (Core-Button + Klasse) */
.wp-block-button.stl-btn-primary .wp-block-button__link {
  background: var(--stl-green); color: #fff; border-radius: 999px; padding: .8em 1.7em; font-weight: 700;
}
.wp-block-button.stl-btn-ghost .wp-block-button__link {
  background: transparent; color: var(--stl-green); border: 1px solid var(--stl-green); border-radius: 999px; padding: .8em 1.7em; font-weight: 700;
}
.wp-block-button.stl-btn-light .wp-block-button__link {
  background: var(--stl-sand); color: var(--stl-green); border-radius: 999px; padding: .8em 1.7em; font-weight: 700;
}

/* Kopfzeile / Navigation */
.stl-header { background: var(--stl-paper); border-bottom: 1px solid var(--stl-line); padding: 12px 20px !important; }
.stl-header .stl-brand { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; color: var(--stl-green); font-size: 1.2rem; margin: 0; }
.stl-navlinks { margin: 0; display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.stl-navlinks a { color: var(--stl-ink); text-decoration: none; font-weight: 600; font-size: .95rem; }
.stl-navlinks a:hover { color: var(--stl-green); }

/* Monatsübersicht-Demo (dekorativer Shortcode) */
.stl-monat { background: #fff; border: 1px solid var(--stl-line); border-radius: 18px; padding: 22px; max-width: 640px; margin: 2rem auto 0; }
.stl-monat-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.stl-monat-head .stl-eyebrow { margin: 0; }
.stl-monat-sum { font-size: 1.5rem; font-weight: 800; color: var(--stl-green); }
.stl-monat-row { display: grid; grid-template-columns: 120px 1fr auto; gap: 12px; align-items: center; margin: 8px 0; font-size: .9rem; }
.stl-monat-row .bar { background: #efeadf; border-radius: 6px; height: 12px; overflow: hidden; }
.stl-monat-row .bar i { display: block; height: 100%; border-radius: 6px; }
.stl-monat-row .val { color: var(--stl-ink); font-weight: 700; }
.stl-monat-total { border-top: 1px solid var(--stl-line); margin-top: 10px; padding-top: 10px; font-weight: 800; }
.stl-monat-strip { display: flex; gap: 5px; align-items: flex-end; height: 60px; margin-top: 16px; }
.stl-monat-strip .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.stl-monat-strip .col i { width: 100%; background: #d9d2c2; border-radius: 4px 4px 0 0; }
.stl-monat-strip .col.on i { background: var(--stl-brass); }
.stl-monat-strip .col small { font-size: .65rem; color: var(--stl-mut); }

/* Fußzeile */
.stl-footer { background: var(--stl-green); color: #d9d2c2; padding: 32px 20px !important; }
.stl-footer a { color: #EFE7D7; text-decoration: none; }
.stl-footer a:hover { text-decoration: underline; }
.stl-rechtslinks { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }

/* Boxentafel-Demo (dekorativer Shortcode) */
.stl-board {
  background: var(--stl-green);
  border-radius: 18px;
  padding: 18px;
  max-width: 940px;
  margin: 2.4rem auto 0;
  color: #fff;
}
.stl-board-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  font-family: "DM Mono", ui-monospace, monospace;
  color: #d9c9a8;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.13);
}
.stl-board-title { display: flex; flex-direction: column; gap: 4px; }
.stl-board-title strong { font-size: .8rem; letter-spacing: .11em; text-transform: uppercase; }
.stl-board-title small {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: .84rem;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255,255,255,.68);
}
.stl-board-count {
  flex: none;
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.stl-board-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.stl-chip {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; padding: 9px 11px; display: flex; align-items: center; gap: 10px; font-size: .85rem;
}
.stl-chip .nr { font-family: "DM Mono", ui-monospace, monospace; color: #d9c9a8; }
.stl-chip .who { line-height: 1.15; }
.stl-chip .who small { color: rgba(255,255,255,.6); }
.stl-chip .dot { width: 9px; height: 9px; border-radius: 50%; background: #7bb08a; margin-left: auto; }
.stl-chip.frei { opacity: .8; }
.stl-chip.frei .dot { background: #cbb487; }


.stl-board-legend {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  margin-top: 14px;
  font-size: .76rem;
  color: rgba(255,255,255,.62);
}
.stl-board-legend span { display: inline-flex; align-items: center; gap: 7px; }
.stl-board-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.stl-board-legend i.belegt { background: #7bb08a; }
.stl-board-legend i.frei { background: #cbb487; }

@media (max-width: 900px) {
  .stl-board-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .stl-board-head { flex-direction: column; gap: 10px; }
  .stl-board-count { white-space: normal; }
  .stl-board-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stl-board-legend { justify-content: flex-start; }
}

/* -------------------------------------------------------------------------
 * 1.6.2 – Produktdarstellung, robuste Breiten und Gutenberg-Arbeitsansicht
 * ---------------------------------------------------------------------- */
.stl-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}
.stl-header > .wp-block-group,
.stl-header > .stl-header-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 18px;
  width: auto !important;
  max-width: none !important;
  margin-left: auto !important;
}
.stl-header > .wp-block-group > *,
.stl-header > .stl-header-nav > * { margin-block: 0; }

/* Die Funktionskarten sollen die tatsächlich vorhandene Abschnittsbreite nutzen. */
.stl-section > .wp-block-columns {
  width: 100% !important;
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Editor: Abschnitte dürfen von Theme-/Animations-CSS niemals verschwinden. */
.editor-styles-wrapper .stl-header,
.editor-styles-wrapper .stl-hero,
.editor-styles-wrapper .stl-section,
.editor-styles-wrapper .stl-footer {
  display: block;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}
.editor-styles-wrapper .stl-header {
  display: flex !important;
}

/* Visuelle Vorschau für die drei dekorativen Landing-Shortcodes. */
.stl-shortcode-editor {
  position: relative;
  margin: 1.5rem 0;
  border: 1px dashed rgba(28,58,44,.28);
  border-radius: 12px;
  padding: 12px;
  background: rgba(251,248,241,.75);
}
.stl-shortcode-editor-label {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: .68rem;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--stl-brass);
  margin: 0 0 8px;
}
.stl-shortcode-editor-preview > :first-child { margin-top: 0; }
.stl-shortcode-editor-preview > :last-child { margin-bottom: 0; }
.stl-shortcode-editor-source {
  margin-top: 10px;
  border-top: 1px solid var(--stl-line);
  padding-top: 8px;
}
.stl-shortcode-editor-source summary {
  cursor: pointer;
  color: var(--stl-mut);
  font-size: .8rem;
  font-weight: 600;
}

@media (max-width: 700px) {
  .stl-header { flex-wrap: wrap !important; gap: 10px 16px; }
  .stl-header > .wp-block-group,
  .stl-header > .stl-header-nav {
    width: 100% !important;
    margin-left: 0 !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }
}


/* -------------------------------------------------------------------------
 * 1.6.3 – korrekte Produktlogik, Kartenausrichtung, Jahresdiagramm, Module
 * ---------------------------------------------------------------------- */

/* Gutenberg-Layout darf die Inhalte innerhalb der Produktkarten nicht an den
 * Kartenrand ziehen. Alle Texte beginnen sauber auf derselben Innenkante. */
.stl-card {
  box-sizing: border-box;
  padding: 28px 30px 32px 34px !important;
}
.stl-card > * {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
}
.stl-card::before { margin-left: 0; }
.stl-card h3 {
  margin: 0 0 12px !important;
  padding: 0 !important;
  font-size: 1.22rem;
}
.stl-card p {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1.03rem;
  line-height: 1.55;
}

/* Die Preisfläche nutzt die verfügbare Breite und erhält ausreichend Luft. */
.stl-price-card {
  width: min(100%, 720px);
  max-width: 720px;
  box-sizing: border-box;
  padding: clamp(30px, 4vw, 44px) !important;
  overflow: visible;
}
.stl-price-card > * {
  max-width: none !important;
  box-sizing: border-box;
}
.stl-price-card ul { margin: 1.5rem 0 1.7rem; }
.stl-price-card li { line-height: 1.45; }

/* Zusatzmodule: bewusst 2 x 2 statt vier zu schmaler Prospektstreifen. */
.stl-module-intro {
  margin: 52px auto 24px !important;
  max-width: 720px !important;
}
.stl-module-intro h3 {
  color: var(--stl-green);
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  margin: 0 0 10px;
}
.stl-module-intro > p:last-child {
  color: var(--stl-mut);
  margin: 0;
}
.stl-module-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  width: 100% !important;
  max-width: 1040px !important;
  margin: 0 auto !important;
}
.stl-module-card {
  display: flex;
  flex-direction: column;
  min-height: 220px;
  padding: 26px 28px !important;
  border: 1px solid rgba(28,58,44,.16);
  border-radius: 16px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 14px 30px -26px rgba(20,35,28,.65);
  box-sizing: border-box;
}
.stl-module-card > * {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.stl-module-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 20px;
  margin: 0 0 18px !important;
}
.stl-module-head h4 {
  color: var(--stl-green);
  font-size: 1.12rem;
  line-height: 1.25;
  margin: 0;
}
.stl-module-price {
  flex: none;
  margin: 0 !important;
  color: var(--stl-green);
  font-weight: 800;
  white-space: nowrap;
}
.stl-module-price small {
  display: block;
  color: var(--stl-mut);
  font-size: .72rem;
  font-weight: 500;
  text-align: right;
}
.stl-module-card > p:not(.stl-module-meta):not(.stl-module-price) {
  color: var(--stl-mut);
  line-height: 1.55;
  margin: 0 0 20px !important;
}
.stl-module-meta {
  margin: auto 0 0 !important;
  padding-top: 14px;
  border-top: 1px solid var(--stl-line);
  color: var(--stl-brass);
  font-size: .82rem;
  line-height: 1.4;
}

/* Jahresdiagramm: gestapelte Monatsbalken. Grün bleibt stabil, Messing zeigt
 * den saisonalen Reitunterricht, Blau die punktuellen Zusatzleistungen. */
.stl-year-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--stl-line);
}
.stl-year-head strong {
  color: var(--stl-green);
  font-size: .98rem;
}
.stl-year-head span {
  color: var(--stl-mut);
  font-size: .78rem;
}
.stl-year-chart {
  width: 100%;
  overflow-x: auto;
  padding: 14px 0 4px;
}
.stl-year-bars {
  display: grid;
  grid-template-columns: repeat(12, minmax(24px, 1fr));
  gap: 8px;
  min-width: 560px;
  height: 172px;
  align-items: end;
}
.stl-year-col {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 7px;
  height: 100%;
  min-width: 0;
}
.stl-year-stack {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  align-self: end;
  width: 100%;
  height: 145px;
  border-radius: 7px 7px 3px 3px;
  overflow: hidden;
  background: #f2eee5;
}
.stl-year-stack .stl-seg {
  display: block;
  width: 100%;
  min-height: 2px;
}
.stl-seg-box { background: #2C5642; }
.stl-seg-reit { background: #A8763C; }
.stl-seg-extra { background: #40668A; }
.stl-year-col small {
  text-align: center;
  color: var(--stl-mut);
  font-size: .68rem;
}
.stl-year-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 12px;
  color: var(--stl-mut);
  font-size: .78rem;
}
.stl-year-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.stl-year-legend i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}

@media (max-width: 760px) {
  .stl-module-grid { grid-template-columns: 1fr; }
  .stl-module-card { min-height: 0; }
  .stl-year-head { align-items: flex-start; flex-direction: column; gap: 4px; }
}


/* Dynamische Preis-Shortcodes (Werte aus ST Abo → Module & Preise). */
.stl-price-card > .wp-block-shortcode,
.stl-section > .wp-block-shortcode {
  width: 100%;
  max-width: none !important;
  margin-left: auto;
  margin-right: auto;
}
.stl-price-dynamic {
  margin: 0 !important;
  text-align: center;
}
.stl-module-grid-dynamic {
  width: 100% !important;
  max-width: 1040px !important;
}
.stl-module-empty {
  max-width: 720px;
  margin: 0 auto;
  padding: 18px 22px;
  border: 1px solid var(--stl-line);
  border-radius: 14px;
  text-align: center;
  color: var(--stl-mut);
  background: rgba(255,255,255,.72);
}

/* -------------------------------------------------------------------------
 * 1.6.5 – dynamische Pakete + kompakte Einzelmodule aus ST Abo 0.17+
 * ---------------------------------------------------------------------- */
.stl-price-explainer {
  max-width: 850px !important;
  margin: -6px auto 34px !important;
  color: var(--stl-mut);
  font-size: .96rem;
  line-height: 1.55;
}

.stl-package-layout {
  /* Drei gleich große Karten nebeneinander (Desktop + Tablet). Auf schmalen
     Handys wird gestapelt (siehe Media-Query). !important wie bei
     .stl-module-grid – sonst überschreibt auf der Live-Seite eine Theme-/
     WordPress-Regel die Breite und die Karten werden schmal (im Editor
     fällt das nicht auf). */
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(16px, 1.8vw, 24px);
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  align-items: stretch;
}

/* Drei gleich große Paketkarten */
.stl-package-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
  padding: 30px 28px 26px;
  border: 1px solid rgba(28,58,44,.17);
  border-radius: 20px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 22px 44px -36px rgba(20,35,28,.72);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

/* Hover: Karte hebt sich, Rahmen wird grün, Schatten kräftiger */
.stl-package-card:hover {
  transform: translateY(-4px);
  border-color: var(--stl-green);
  box-shadow: 0 30px 54px -28px rgba(20,35,28,.58);
}

.stl-package-card.is-recommended {
  border-color: rgba(168,118,60,.55);
  box-shadow: 0 26px 48px -32px rgba(120,80,35,.5);
  background:
    linear-gradient(180deg, rgba(168,118,60,.06), rgba(255,255,255,0) 120px),
    rgba(255,255,255,.98);
}
.stl-package-card.is-recommended:hover {
  border-color: var(--stl-brass);
}

.stl-package-card > * {
  width: 100%;
  max-width: none !important;
  min-width: 0;
  box-sizing: border-box;
}

/* Badge über dem Titel (verhindert Abschneiden auf schmalen Karten) */
.stl-package-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 12px;
}

.stl-package-top h3 {
  margin: 0;
  color: var(--stl-green);
  font-size: 1.5rem;
  line-height: 1.12;
}

.stl-package-badge {
  align-self: flex-start;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(28,58,44,.09);
  color: var(--stl-green);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.is-recommended .stl-package-badge {
  background: rgba(168,118,60,.16);
  color: #7a5228;
}

.stl-package-tagline {
  margin: 0 0 18px !important;
  color: var(--stl-mut);
  font-size: .95rem;
  line-height: 1.5;
  min-height: 5.6em; /* hält die Preise annähernd auf gleicher Höhe (Flex-Layout) */
  hyphens: auto;
  overflow-wrap: break-word;
}

.stl-package-price {
  display: grid;
  gap: 3px;
  margin: 0 0 20px;
  padding: 16px 0;
  border-top: 1px solid var(--stl-line);
  border-bottom: 1px solid var(--stl-line);
}

.stl-package-price > div {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: nowrap;
}

.stl-package-price strong {
  color: var(--stl-green);
  font-size: clamp(1.9rem, 4.4vw, 2.3rem);
  line-height: 1;
  letter-spacing: -.03em;
  white-space: nowrap;
}

.stl-package-price small {
  color: var(--stl-mut);
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
}

.stl-package-action-label {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--stl-green);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
}

.stl-package-regular {
  color: var(--stl-mut);
  font-size: .82rem;
}

.stl-package-features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.stl-package-features li {
  position: relative;
  padding: 6px 0 6px 25px;
  color: var(--stl-ink);
  font-size: .93rem;
  line-height: 1.42;
  hyphens: auto;
  overflow-wrap: break-word;
  word-break: break-word;
}

.stl-package-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 6px;
  color: var(--stl-green2);
  font-weight: 800;
}

.stl-package-bottom {
  margin-top: auto;
  padding-top: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;   /* Button zentriert in der Kachel */
  text-align: center;
  min-width: 0;
}

/* Button „Kostenlos testen" – zentriert, Eigenbreite (läuft nie über den Rand),
   eine Zeile, Hover-Farbwechsel (grün → messing) */
.stl-package-cta {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 12px 34px;
  border-radius: 999px;
  background: var(--stl-green);
  color: #fff !important;
  font-weight: 700;
  font-size: .95rem;
  white-space: nowrap;
  text-decoration: none !important;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.stl-package-cta:hover,
.stl-package-card:hover .stl-package-cta {
  background: var(--stl-brass);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -12px rgba(168,118,60,.7);
}

.stl-package-meta {
  margin: 11px 0 0 !important;
  color: var(--stl-mut);
  font-size: .74rem;
  line-height: 1.4;
}

/* Hinweis: Die frühere Subgrid-Zeilenausrichtung wurde entfernt, weil sie in
   manchen Seiten-Containern das Paket-Raster schrumpfen ließ. Die Karten nutzen
   wieder das robuste Flex-Layout; die Preise werden über eine feste Mindesthöhe
   der Beschreibung annähernd auf gleicher Höhe gehalten. */

.stl-module-intro {
  margin-top: 62px !important;
}

.stl-module-card--compact {
  min-height: 0;
  padding: 24px 26px !important;
}

.stl-module-head--compact {
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 15px;
  margin-bottom: 16px !important;
}

.stl-module-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: rgba(28,58,44,.09);
  color: var(--stl-green);
}

.stl-module-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stl-module-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  min-width: 0;
}

.stl-module-title h4 {
  margin: 0;
  color: var(--stl-green);
  font-size: 1.08rem;
  line-height: 1.25;
}

.stl-module-card--compact .stl-module-price {
  margin: 0 !important;
  padding: 0;
  border: 0;
  text-align: right;
}

.stl-module-description {
  margin: 0 0 16px !important;
  color: var(--stl-mut);
  line-height: 1.5;
}

.stl-module-features {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}

.stl-module-features li {
  position: relative;
  padding: 4px 0 4px 21px;
  color: var(--stl-ink);
  font-size: .88rem;
  line-height: 1.38;
}

.stl-module-features li::before {
  content: "·";
  position: absolute;
  left: 5px;
  color: var(--stl-brass);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: .9;
}

.stl-module-included {
  margin: auto 0 10px !important;
  padding: 9px 11px;
  border-radius: 9px;
  background: rgba(239,231,215,.62);
  color: #6f583d;
  font-size: .79rem;
  font-weight: 650;
  line-height: 1.35;
}

.stl-module-card--compact .stl-module-meta {
  margin-top: 0 !important;
  padding-top: 10px;
}

.stl-price-final-cta {
  margin-top: 30px !important;
}

/* Tablet-/Zwischenbreiten: drei Karten bleiben nebeneinander, nur etwas kompakter. */
@media (max-width: 1000px) {
  .stl-package-card {
    padding: 24px 18px 22px;
  }
  .stl-package-features li {
    font-size: .88rem;
    padding-left: 22px;
  }
  .stl-package-tagline {
    font-size: .9rem;
    min-height: 5.4em;
  }
}

/* Smartphone: Karten gestapelt (eine Spalte), kein 2+1-Muster. */
@media (max-width: 760px) {
  .stl-package-layout {
    grid-template-columns: 1fr !important;
    max-width: 460px !important;
  }
  .stl-package-tagline {
    min-height: 0;
  }
  .stl-package-card {
    padding: 26px 22px !important;
  }
  .stl-package-features li {
    font-size: .95rem;
  }
  .stl-module-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  .stl-module-card--compact .stl-module-price {
    text-align: left;
  }
  .stl-module-price small {
    text-align: left;
  }
}

/* -----------------------------------------------------------------------
 * Bild-Band (volle Breite) – ein Standard-Bild-Block (core/image) mit der
 * Klasse „stl-imageband". Das Bild bleibt frei im Gutenberg-Editor wählbar
 * bzw. austauschbar; nur die Darstellung (Höhe, Zuschnitt) wird gesetzt.
 * -------------------------------------------------------------------- */
.wp-block-image.stl-imageband {
  margin: 0;
}
.wp-block-image.stl-imageband img {
  display: block;
  width: 100%;
  height: clamp(220px, 34vw, 440px);
  object-fit: cover;
  object-position: center;
}
/* Optionaler weicher Verlauf: die Bildränder werden sanft durchsichtig, sodass
   der Hintergrund des angrenzenden Abschnitts durchscheint (funktioniert mit
   jeder Abschnittsfarbe). Per Zusatzklasse steuerbar:
     .fade-both  – oben und unten
     .fade-top   – nur oben
     .fade-bottom– nur unten
   Ohne Zusatzklasse: kein Verlauf (harte Kanten). */
.wp-block-image.stl-imageband.fade-both img {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.wp-block-image.stl-imageband.fade-top img {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 100%);
}
.wp-block-image.stl-imageband.fade-bottom img {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 88%, transparent 100%);
}
/* Sanftere, „ruhige" Variante mit Rundung und Rand (statt randlos) */
.wp-block-image.stl-imageband.is-soft img {
  border-radius: 22px;
}
.wp-block-image.stl-imageband.is-soft {
  max-width: 1120px;
  margin: 8px auto;
  padding: 0 20px;
}
/* Optionaler kleiner Bildtitel/Untertitel unter dem Band */
.stl-imageband + .stl-imageband-caption {
  text-align: center;
  color: var(--stl-mut);
  font-size: .82rem;
  margin: 8px 0 0;
}

/* Preis-Fußnote: kleines Sternchen in der Farbe des USt-Hinweises (1.6.17) */
.stl-preis-stern{ color: var(--stl-mut); font-weight: 700; font-size: .62em; vertical-align: super; line-height: 0; margin-left: 1px; }

/* Stufe 4: zentrale Preis-Fußnote unter dem Paketblock (1.6.18) */
.stl-package-allnote{
  text-align: center;
  color: var(--stl-mut);
  font-size: .82rem;
  margin: 14px auto 0;
  max-width: 1180px;
}

/* -------------------------------------------------------------------------
 * 1.6.20 – Landing-Kopfzeile minimal + Jahresdiagramm mobil ohne Scrollen.
 * Kopfzeile (ALLE Groessen): die Sprungmarken (Funktionen/Preise) und der
 * Kopf-Button ("Kostenlos testen") werden ausgeblendet – der Test-CTA steht im
 * Hero direkt darunter. Uebrig bleibt nur der Login-Link (Text via
 * render_block-Filter "Anmelden" -> "Login"). Desktop-Farben/Struktur sonst
 * unveraendert.
 * ---------------------------------------------------------------------- */
.stl-header .stl-navlinks a[href^="#"] { display: none !important; }
.stl-header .wp-block-buttons { display: none !important; }
.stl-header { padding: 10px 20px !important; }
.stl-header .stl-navlinks { gap: 0; }
.stl-header .stl-navlinks a { font-size: .95rem; }

@media (max-width: 640px) {
  /* Jahresdiagramm: alle 12 Monate passen ohne Seitwaerts-Scrollen,
     schlankere Balken, kleinere Monatsbeschriftung. */
  .stl-year-chart { overflow-x: visible; padding: 12px 0 2px; }
  .stl-year-bars { min-width: 0; grid-template-columns: repeat(12, 1fr); gap: 3px; height: 150px; }
  .stl-year-stack { height: 116px; border-radius: 4px 4px 2px 2px; }
  .stl-year-col { gap: 5px; }
  .stl-year-col small { font-size: .58rem; }
}

/* Nettohinweis unter dem Bruttopreis (brutto-führend, inkl. USt) */
.stl-package-net { color: var(--stl-mut); font-size: .78rem; font-weight: 500; }
.stl-module-net { display: block; color: var(--stl-mut); font-size: .74rem; font-weight: 500; margin-top: 2px; }

/* Kachel-Bilder aus dem Backend „Pakete & Module" (Paket-Banner + Modul-Bild) */
.stl-package-media { margin: 2px 0 16px; border-radius: 14px; overflow: hidden; line-height: 0; }
.stl-package-media img { width: 100%; height: 132px; object-fit: cover; display: block; }

/* Modul-Bild ersetzt das Symbol: Höhe = Titel- bis Nettopreis-Zeile, Titel vertikal zentriert */
.stl-module-head--img { align-items: stretch !important; }
.stl-module-head--img .stl-module-title { align-items: center; }
.stl-module-media { flex: none; width: 82px; align-self: stretch; border-radius: 12px; overflow: hidden; line-height: 0; }
.stl-module-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* „* inkl. USt · monatlich kündbar" mit Trennstrich immer ganz unten in der Kachel */
.stl-module-included { margin-top: auto !important; }
.stl-module-card--compact .stl-module-meta { margin-top: 0 !important; border-top: 1px solid var(--stl-line); padding-top: 12px !important; }

/* ------------------------------------------------------------------ */
/*  Aktionsdarstellung Paketkarten (oberer Kartenbereich, oberhalb    */
/*  des Trennstrichs). Alles unterhalb (Feature-/Bullet-Liste) bleibt */
/*  unverändert. Nutzt bestehende Markenfarben/Rundungen/Abstände.    */
/* ------------------------------------------------------------------ */
.stl-package-media.is-action { position: relative; }
.stl-package-actionbanner {
  display: flex; align-items: center; gap: 6px;
  background: var(--stl-green); color: #fff;
  font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 7px 12px; line-height: 1.15; box-sizing: border-box;
}
.stl-package-actionbanner-ic { font-size: .95rem; }
.stl-package-media.is-action .stl-package-actionbanner {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  border-radius: 14px 14px 0 0;
}
.stl-package-rabatt {
  display: inline-block;
  background: linear-gradient(180deg, #D8B25E 0%, #C39B4E 55%, #B08636 100%);
  color: #241a05;
  font-size: .92rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase;
  padding: 8px 15px; border-radius: 999px;
  border: 2px solid #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,.30), 0 0 0 1px rgba(176,134,54,.55);
  white-space: nowrap; line-height: 1.05;
}
.stl-package-media.is-action .stl-package-rabatt {
  position: absolute; right: 12px; bottom: 12px; z-index: 3;
}
/* Ohne hinterlegtes Paketbild: Bannerstreifen + Badge nebeneinander. */
.stl-package-actionstrip {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin: 2px 0 16px;
}
.stl-package-actionstrip .stl-package-actionbanner { border-radius: 10px; flex: 1 1 auto; }
/* Preisbox bei aktiver Aktion dezent hervorheben (untere Border = Trennstrich bleibt). */
.stl-package-price.is-action {
  background: rgba(44, 86, 66, .05);
  padding: 16px 12px;
}
.stl-package-price.is-action .stl-package-regular { text-decoration: line-through; }
.stl-package-save { color: var(--stl-green2); font-weight: 800; font-size: .9rem; }
.stl-package-frist { color: var(--stl-mut); font-size: .82rem; display: flex; align-items: center; gap: 4px; }
.stl-package-actionnote { display: block; font-size: .78rem; color: var(--stl-mut); margin-top: 3px; }

/* ------------------------------------------------------------------ */
/*  Kapazität je Paket (§6): Grundkontingent + S/M/L-Erweiterungen.    */
/* ------------------------------------------------------------------ */
/* Sekundäre Tarifinformation direkt unter dem CTA – bewusst dezent/kompakt
   (ggü. 1.6.27 rund 20–25 % kleiner: weniger Padding, kleinere Schrift, engerer
   Zeilenabstand). Hintergrund/Rundung bleiben; grüner Akzent bei „Erweiterbar". */
.stl-package-capacity {
  margin: 8px 0 0; padding: 7px 10px;
  background: rgba(44, 86, 66, .05); border: 1px solid var(--stl-line);
  border-radius: 10px; font-size: .68rem; line-height: 1.25; color: var(--stl-mut);
}
.stl-capacity-base { font-weight: 700; color: var(--stl-ink); }
.stl-capacity-ext { margin-top: 1px; color: var(--stl-green2); font-weight: 600; }
.stl-capacity-hint { margin-top: 1px; color: var(--stl-mut); }