/*
 * Preis-Konfigurator für epicwork.de/preise — Stil.
 *
 * Läuft eingebettet in WordPress/Elementor, also in fremdem CSS. Zwei
 * Vorkehrungen dagegen:
 *
 *   1. `all: revert` auf der Wurzel setzt geerbte Theme-Regeln zurück.
 *   2. Jede Klasse trägt das Präfix `ewk-`. Ohne Präfix kollidiert früher oder
 *      später etwas mit dem Theme, und zwar an einer Stelle, die niemand
 *      vermutet.
 *
 * **Bewusst KEIN Shadow DOM**, obwohl es sauberer abschirmen würde: das
 * Turnstile-Skript von Cloudflare rendert in den DOM, und in einem Shadow Root
 * ist das erfahrungsgemäß eine Fehlerquelle. Die Bot-Prüfung ist wichtiger als
 * die letzte Stufe der Stil-Isolierung.
 *
 * Farben aus dem Marken-Kanon (siehe docs/styling-manual.md).
 * Plan: docs/plans/preiskonfigurator-epicwork-de.md §4.1
 */

#ew-preise {
  all: revert;
  --ewk-brand: #c52f25;
  --ewk-dark: #243247;
  --ewk-bg: #e5e9ef;
  --ewk-ink: #0f172a;
  --ewk-muted: #64748b;
  --ewk-line: #e2e8f0;
  --ewk-soft: #f8fafc;
  display: block;
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ewk-ink);
  box-sizing: border-box;
}

#ew-preise *,
#ew-preise *::before,
#ew-preise *::after {
  box-sizing: border-box;
}

.ewk-card {
  background: #fff;
  border: 1px solid var(--ewk-line);
  border-radius: 12px;
  padding: 24px;
  margin: 0 0 20px;
}

.ewk-step-title {
  font-family: Montserrat, "Open Sans", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--ewk-dark);
}

.ewk-step-hint {
  font-size: 14px;
  color: var(--ewk-muted);
  margin: 0 0 16px;
}

/* --- Produktkarten (Schritt 1) ---
   Nachbau der Paketauswahl aus der Anwendung: zwei Karten nebeneinander,
   gestapelt auf schmalen Bildschirmen. Die ganze Karte ist das Label des
   Radios, damit auf dem Handy nicht ein 20-Pixel-Punkt getroffen werden muss. */

.ewk-plan-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  margin: 16px 0 0;
  align-items: stretch;
}

.ewk-plan-card {
  display: block;
  padding: 18px;
  border: 1px solid var(--ewk-line);
  border-radius: 12px;
  cursor: pointer;
  background: #fff;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

/* Der Auswahlknopf ist unsichtbar, die ganze Karte ist die Schaltflaeche —
   dieselbe Loesung wie bei den Abrechnungs-Kacheln (.ewk-choice input). Er
   bleibt im Markup, weil er die Tastaturbedienung traegt. */
.ewk-plan-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* ⚠️ Muss sein, sobald der Knopf unsichtbar ist: Vorher zeigte der Browser den
   Fokusring am Radio selbst. Ohne Ersatz waere per Tastatur nicht mehr zu
   erkennen, auf welcher Karte man gerade steht. Gilt fuer beide Auswahlen. */
.ewk-plan-card:has(input:focus-visible),
.ewk-choice:has(input:focus-visible) {
  outline: 2px solid var(--ewk-brand);
  outline-offset: 2px;
}

.ewk-plan-card:hover {
  border-color: var(--ewk-brand);
}

/* Dieselbe Bildsprache wie die Abrechnungs-Kacheln weiter unten: Rahmen UND
   leichte Einfaerbung. Der Rahmen allein reicht nicht, um eine grosse Karte als
   ausgewaehlt zu lesen. */
.ewk-plan-card-on {
  border-color: var(--ewk-brand);
  border-width: 2px;
  padding: 17px;
  background: #fdf5f4;
  box-shadow: 0 0 0 3px rgba(197, 47, 37, 0.08);
}

.ewk-plan-body {
  display: block;
  min-width: 0;
}

.ewk-plan-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ewk-brand);
}

.ewk-plan-headline {
  display: block;
  margin: 4px 0 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.ewk-plan-sub {
  display: block;
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--ewk-muted);
}

.ewk-plan-price {
  display: block;
  margin: 10px 0 0;
  font-size: 14px;
}

/* „Enthält:" plus Häkchenliste — derselbe Aufbau wie in der Bestellkarte der
   Anwendung. Kein Listenpunkt, sondern ein Haken in Markenfarbe. */
.ewk-plan-enthaelt {
  display: block;
  margin: 14px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ewk-dark);
}

.ewk-plan-bullets {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.55;
}

.ewk-plan-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 5px;
}

.ewk-plan-check {
  flex: 0 0 auto;
  color: var(--ewk-brand);
  font-weight: 700;
}

/* Der rechnerische Einzelwert. Dezent, weil er nur den Vergleich stützt und
   nicht Teil des Preises ist. */
.ewk-plan-note {
  color: var(--ewk-muted);
}

/* Die Mehrwertrechnung des Business-Pakets. */
.ewk-plan-value {
  display: block;
  margin: 14px 0 0;
  padding: 10px 12px;
  background: var(--ewk-bg);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
}

/* Aufforderung unter den Produktkarten, solange nichts gewählt ist. Steht
   außerhalb des gesperrten Bereichs, sonst wäre ausgerechnet die Anweisung
   ausgegraut. */
/* Steht seit v3.48.8 ÜBER den Karten, deshalb Abstand nach unten statt oben. */
.ewk-choose-hint {
  margin: 12px 0 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ewk-brand);
}

/* Schritte, die erst nach der Produktwahl bedienbar werden. `inert` im Markup
   übernimmt Tastatur und Screenreader; das hier ist die sichtbare Seite. */
.ewk-locked {
  opacity: 0.45;
  filter: grayscale(0.6);
  pointer-events: none;
  user-select: none;
  transition:
    opacity 0.2s ease,
    filter 0.2s ease;
}

/* --- Auswahlkacheln (Zahlweise) --- */

.ewk-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.ewk-choice {
  display: block;
  border: 2px solid var(--ewk-line);
  border-radius: 10px;
  padding: 16px;
  cursor: pointer;
  background: #fff;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.ewk-choice:hover {
  border-color: #cbd5e1;
}

.ewk-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ewk-choice.ewk-is-selected {
  border-color: var(--ewk-brand);
  background: #fdf5f4;
}

.ewk-choice-label {
  font-weight: 700;
  display: block;
  margin: 0 0 2px;
}

.ewk-choice-text {
  font-size: 14px;
  color: var(--ewk-muted);
}

.ewk-badge {
  display: inline-block;
  background: var(--ewk-brand);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-radius: 999px;
  padding: 2px 9px;
  margin-left: 8px;
  vertical-align: 1px;
}

/* --- Mengen --- */

.ewk-field {
  margin: 0 0 18px;
}

.ewk-field:last-child {
  margin-bottom: 0;
}

.ewk-label {
  display: block;
  font-weight: 600;
  margin: 0 0 6px;
}

.ewk-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

/*
 * ⚠️ Diese beiden Regeln MÜSSEN mit `#ew-preise` qualifiziert sein.
 *
 * Weiter unten steht `#ew-preise input[type="number"] { width: 100% }` für die
 * Formularfelder. Eine ID schlägt jede Klasse, egal in welcher Reihenfolge sie
 * notiert ist: `.ewk-row input[type="number"]` hätte dagegen keine Chance, das
 * Zahlenfeld nähme die ganze Zeile ein und quetschte den Regler daneben auf
 * Breite 0 — sichtbar bliebe nur sein Griff, ziehen ließe er sich nicht mehr.
 * Genau das war der Zustand bis v3.46.1.
 */
#ew-preise .ewk-row input[type="range"] {
  /* Das Theme der Einbettung stylt `input` teils pauschal (Rahmen, Höhe,
   * Hintergrund). Für einen Regler ergibt das Unsinn, deshalb hier zurück auf
   * die Browser-Darstellung. */
  appearance: auto;
  -webkit-appearance: auto;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
  height: auto;
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  accent-color: var(--ewk-brand);
  cursor: pointer;
}

#ew-preise .ewk-row input[type="number"] {
  width: 96px;
  min-width: 0;
  flex: 0 0 auto;
}

#ew-preise input[type="text"],
#ew-preise input[type="email"],
#ew-preise input[type="number"],
#ew-preise select {
  font: inherit;
  color: inherit;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 9px 11px;
  width: 100%;
  max-width: 100%;
}

#ew-preise input:focus-visible,
#ew-preise select:focus-visible,
#ew-preise button:focus-visible {
  outline: 2px solid var(--ewk-brand);
  outline-offset: 2px;
}

.ewk-note {
  font-size: 14px;
  color: var(--ewk-muted);
  margin: 8px 0 0;
}

/* --- Summe --- */

/* Die Zusammenstellung ist eine Karte wie die anderen, nur mit kräftigerem
   Rahmen: Sie trug bis v3.47.7 die Hintergrundfarbe der Seite und keinen
   Rahmen und wirkte dadurch, als schwebte sie zwischen den Schritten statt sie
   abzuschließen. */
.ewk-summary {
  background: #fff;
  border: 2px solid var(--ewk-line);
}

.ewk-lines {
  margin: 0 0 14px;
}

.ewk-line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid #d3dae4;
}

.ewk-line-label {
  min-width: 0;
}

.ewk-line-detail {
  display: block;
  font-size: 13px;
  color: var(--ewk-muted);
}

/* Preisvorteil je Position. In Markenrot statt Grau, weil es ein Argument ist
   und keine Fussnote - dieselbe Entscheidung wie im Angebots-PDF. */
.ewk-line-savings {
  display: block;
  font-size: 13px;
  color: var(--ewk-brand);
}

.ewk-line-value {
  white-space: nowrap;
  font-weight: 600;
}

.ewk-total {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
  padding: 10px 0 0;
}

.ewk-total-label {
  font-family: Montserrat, "Open Sans", system-ui, sans-serif;
  font-weight: 700;
}

.ewk-total-value {
  font-family: Montserrat, "Open Sans", system-ui, sans-serif;
  font-size: 26px;
  font-weight: 700;
  white-space: nowrap;
}

.ewk-total-sub {
  font-size: 14px;
  color: var(--ewk-muted);
  margin: 4px 0 0;
  text-align: right;
}

/* Der Preisvorteil hebt sich jetzt gegen die weiße Karte ab, nicht mehr als
   weißer Kasten auf grauem Grund. */
.ewk-saving {
  margin: 12px 0 0;
  padding: 10px 12px;
  background: var(--ewk-bg);
  border-radius: 8px;
  font-size: 14px;
}

/* Rechtlicher Hinweis unter dem Ergebnis. Kleiner als der Rest, aber bewusst
   nicht ausgegraut: Er sagt, dass sich das Angebot an gewerbliche Kunden
   richtet, und muss lesbar bleiben. */
.ewk-legal-note {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ewk-muted);
}

/* --- Formular --- */

.ewk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.ewk-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  margin: 16px 0 0;
}

.ewk-check input {
  margin-top: 3px;
  accent-color: var(--ewk-brand);
  flex: none;
}

#ew-preise a {
  color: var(--ewk-brand);
}

/* Optionale Angebotsfelder. Werden nur ein- und ausgeblendet, nie neu gebaut:
   ein Neuaufbau verwürfe, was bereits eingetippt wurde.
   Mit `#ew-preise` qualifiziert, weil hier nicht bloss die Optik hängt: ein
   Theme-Selektor mit ID käme sonst durch und der Block stünde dauerhaft offen. */
#ew-preise .ewk-hidden {
  display: none;
}

/* `.ewk-extras` ist mit v3.50.1 entfallen: Anschrift und Kontaktdaten liegen
   jetzt gemeinsam im Aufklapper „Angebot personalisieren". */

/* --- Angebot personalisieren (Aufklapper) --- */

/* Vollständige Angabe statt nur `font: inherit`: Ein <button> erbt in fremden
   WordPress-Themes gern Großbuchstaben, Sperrung, Schatten und eine eigene
   Farbe. */
#ew-preise .ewk-personalize-head {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 16px 0 0;
  padding: 13px 16px;
  font: inherit;
  font-weight: 700;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ewk-ink);
  background: var(--ewk-soft);
  border: 1px solid var(--ewk-line);
  border-radius: 10px;
  box-shadow: none;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

#ew-preise .ewk-personalize-head:hover {
  border-color: #cbd5e1;
}

#ew-preise .ewk-personalize-head.ewk-is-open {
  border-color: var(--ewk-brand);
}

.ewk-personalize-title {
  font-size: 16px;
}

/* Der Pfeil wird gezeichnet, nicht getippt: Ein Zeichen wie „▾" trifft in
   fremden Themes auf eine andere Schrift und sitzt dann schief. */
.ewk-personalize-caret {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--ewk-brand);
  border-bottom: 2px solid var(--ewk-brand);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s ease;
}

.ewk-personalize-head.ewk-is-open .ewk-personalize-caret {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.ewk-personalize {
  margin: 12px 0 0;
  padding: 16px;
  background: var(--ewk-soft);
  border: 1px solid var(--ewk-line);
  border-radius: 10px;
}

/* Begründung, warum der Knopf gesperrt ist. Steht direkt darunter, damit die
   Sperre nicht ohne Erklärung dasteht. */
.ewk-block-hint {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--ewk-brand);
}

/* Honeypot: für Menschen unsichtbar, für Bots ein ausfüllbares Feld.
   Kein `display:none` — manche Bots überspringen das gezielt. */
.ewk-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.ewk-submit {
  font: inherit;
  font-weight: 700;
  background: var(--ewk-brand);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 13px 26px;
  cursor: pointer;
  margin: 18px 0 0;
}

.ewk-submit:hover:not(:disabled) {
  background: #a82820;
}

.ewk-submit:disabled {
  opacity: 0.6;
  cursor: default;
}

.ewk-msg {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 15px;
}

.ewk-msg-error {
  background: #fdecea;
  border: 1px solid #f5c6c2;
}

.ewk-msg-ok {
  background: #ecfdf5;
  border: 1px solid #b6e6d1;
}

.ewk-loading {
  padding: 28px;
  text-align: center;
  color: var(--ewk-muted);
}

@media (max-width: 560px) {
  .ewk-card {
    padding: 18px;
  }
  .ewk-total-value {
    font-size: 22px;
  }
}

/* ---------------------------------------------------------- Leistungen
 *
 * Drei Positionen mit drei Abrechnungsarten, frei kombinierbar. Sie stehen als
 * Reihe schmaler Kacheln nebeneinander, darunter erscheint genau ein Detail.
 *
 * Vorher lagen sie als volle Blöcke untereinander, weshalb der ganze Abschnitt
 * selbst in einem Aufklapper steckte. Die Kacheln lösen dasselbe Platzproblem,
 * ohne die Auswahl hinter einen Klick zu legen.
 */

/* „optional" steht direkt hinter der Ueberschrift und nicht am rechten Rand:
   Ueber die volle Breite geschoben wirkte es wie eine eigene Angabe statt wie
   ein Zusatz zum Wort „Beratung". */
.ewk-services-head {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 8px;
}

.ewk-services-head .ewk-step-title {
  margin: 0;
}

.ewk-services-note {
  flex: 0 0 auto;
  font-size: 14px;
  color: var(--ewk-muted);
}

/* Drei annähernd quadratische Kacheln, mittig, mit Luft an den Seiten.
   Feste Spaltenbreite statt `1fr`: Über die volle Breite gezogen wurden daraus
   drei flache Bänder, in denen Titel und Preis verloren wirkten. */
.ewk-service-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 210px));
  justify-content: center;
  gap: 14px;
  margin: 16px 0 0;
}

/* Untereinander, sobald drei Spalten zu eng würden. Eine einzelne Kachel bleibt
   dabei mittig und wird nicht über die ganze Breite gezogen. */
@media (max-width: 700px) {
  .ewk-service-tiles {
    grid-template-columns: minmax(0, 280px);
  }
}

/* Die Kachel ist seit v3.49.9 ein Container, kein Button: Sie enthält die
   Auswahlfläche (`.ewk-tile-main`) UND das Häkchen „im Angebot enthalten".
   Ein <input> in einem <button> wäre ungültig und weder klickbar noch mit der
   Tastatur erreichbar. Der Rahmen und die Fläche liegen deshalb hier, der
   Innenabstand bei den beiden Kindern. */
#ew-preise .ewk-service-tile {
  display: flex;
  flex-direction: column;
  /* `min-height` statt `aspect-ratio`: Der Preishinweis des Workshops ist
     zweizeilig und würde aus einem starr quadratischen Kasten herauslaufen. */
  min-height: 152px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* Leicht hinterlegt wie der Detail-Kasten darunter, damit die Reihe als
     zusammengehöriger Auswahlbereich lesbar ist und nicht als drei Karten. */
  background: var(--ewk-soft);
  border: 2px solid var(--ewk-line);
  border-radius: 10px;
  box-shadow: none;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

#ew-preise .ewk-service-tile:hover {
  border-color: #cbd5e1;
}

/* Vollständige Angabe statt nur `font: inherit`: Ein <button> erbt in fremden
   WordPress-Themes gern Großbuchstaben, Sperrung, Schatten und eine eigene
   Farbe — bei einer Kachel mit Produktnamen fiele das sofort auf. */
#ew-preise .ewk-tile-main {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Oben ausgerichtet statt mittig: Die Titel sollen ueber alle drei Kacheln
     auf einer Linie liegen. Bei zentriertem Inhalt schob ein zweizeiliger
     Preis den Titel der dritten Kachel nach oben. */
  justify-content: flex-start;
  gap: 6px;
  /* Füllt die Kachel, damit die ganze obere Fläche die Auswahl auslöst und
     nicht nur der Text. */
  flex: 1;
  width: 100%;
  margin: 0;
  padding: 18px 14px 12px;
  font: inherit;
  text-align: center;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ewk-ink);
  background: none;
  border: 0;
  box-shadow: none;
  cursor: pointer;
}

/* Das Häkchen sitzt am Fuß der Kachel, abgesetzt durch eine feine Linie.
   `[hidden]` mit `!important`, weil ein fremdes Theme `display` auf Labels
   setzen und das Attribut damit aushebeln kann. */
#ew-preise .ewk-tile-check {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  margin: 0;
  padding: 9px 12px 11px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--ewk-ink);
  text-align: left;
  border-top: 1px solid var(--ewk-line);
  cursor: pointer;
}

#ew-preise .ewk-tile-check[hidden] {
  display: none !important;
}

#ew-preise .ewk-tile-check input {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--ewk-brand);
  cursor: pointer;
}

/* Gewählt: dieselbe Bildsprache wie die Paket- und Abrechnungs-Kacheln oben. */
#ew-preise .ewk-service-tile.ewk-is-chosen {
  background: #fdf5f4;
}

/* Offen: Rahmen und Einfaerbung, wie ueberall sonst im Widget. „Gewaehlt" und
   „offen" bleiben unterscheidbar, aber nicht ueber die Flaeche: Das uebernimmt
   seit v3.49.9 das Haekchen am Fuss der Kachel. Ein blosser Rahmen las sich
   nicht als Auswahl. */
#ew-preise .ewk-service-tile.ewk-is-active {
  border-color: var(--ewk-brand);
  background: #fdf5f4;
}

/* Titel und Preis stehen zeilenweise. Der Umbruch wird im Skript gesetzt, nicht
   dem Zufall der Spaltenbreite überlassen. */
.ewk-tile-line {
  display: block;
}

/* Der Titel führt, der Preis ordnet sich unter. Beide waren zuvor fast gleich
   groß, wodurch die Kachel keine erkennbare erste Zeile hatte.
   Zwei Zeilen Mindesthöhe, damit ein einwortiger Titel die Kachel nicht
   niedriger macht als die Nachbarn. */
.ewk-tile-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  min-height: 2.5em;
}

.ewk-tile-price {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ewk-brand);
}

/* Alles nach der ersten Zeile ist Zusatz, nicht der Preis selbst.
   `balance` verteilt den Umbruch auf gleich lange Zeilen, statt eine volle und
   eine kurze zu erzeugen — und hält den Text damit vom Kachelrand weg. */
.ewk-tile-price .ewk-tile-line + .ewk-tile-line {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
}

/* Bleibt leer, solange nichts gewählt ist. Für gleiche Kachelhöhen sorgt das
   Grid, dafür braucht es keinen Platzhaltertext. */
.ewk-tile-state {
  font-size: 13px;
  color: var(--ewk-muted);
}

/* Das Detail des offenen Reiters. Abgesetzt, damit erkennbar bleibt, dass es
   zur Kachelreihe darüber gehört und nicht zum nächsten Schritt. */
.ewk-service-detail:not(:empty) {
  margin: 12px 0 0;
  padding: 16px;
  background: var(--ewk-soft);
  border: 1px solid var(--ewk-line);
  border-radius: 10px;
}

.ewk-detail-sub {
  margin: 0;
  font-size: 15px;
  color: var(--ewk-muted);
}

/* `.ewk-detail-check` ist mit v3.49.9 entfallen: Die Checkbox „In das Angebot
   aufnehmen" sitzt jetzt in der Kachel. */
.ewk-detail-field {
  margin: 12px 0 0;
}

.ewk-detail-list-title {
  margin: 16px 0 0;
  font-size: 14px;
  font-weight: 700;
}

.ewk-service-list {
  margin: 6px 0 0;
  padding: 0 0 0 18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ewk-muted);
}

.ewk-service-list li {
  margin: 0 0 4px;
}

/* Getrennte Summe fuer einmalig berechnete Positionen. Abgesetzt, damit sie
   nicht mit der Periodensumme darueber verwechselt wird. */
.ewk-extra-block {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--ewk-line);
}

.ewk-extra-title {
  font-weight: 700;
  margin: 0 0 8px;
}

/* Bestellweg unter der Zusammenstellung (seit Content-API 1.9.0).
   Eigene Nummerierung über ein Counter-Element statt der Browser-Marker: Ein
   fremdes WordPress-Theme setzt `ol` gern auf `list-style: none` oder gibt den
   Markern eine eigene Farbe, und dann stünde der Weg ohne Schritte da. */
.ewk-order-steps {
  list-style: none;
  counter-reset: ewk-step;
  margin: 0;
  padding: 0;
}

.ewk-order-steps li {
  counter-increment: ewk-step;
  position: relative;
  padding-left: 30px;
  margin: 0 0 10px;
}

.ewk-order-steps li:last-child {
  margin-bottom: 0;
}

.ewk-order-steps li::before {
  content: counter(ewk-step) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--ewk-brand);
}

.ewk-order-step-title {
  display: block;
  font-weight: 600;
}

.ewk-order-step-text {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ewk-muted);
}

/* Zusatz unter einem Schritt (heute: der Bestellcode-Hinweis). Gleiche Farbe
   und Groesse wie der Schritt-Text: Beides zusammen ist die Auskunft zu diesem
   Schritt, und ein dunklerer Nachsatz las sich wie ein Einschub von anderer
   Hand. Getrennt bleibt er nur technisch — im Angebots-PDF steht an derselben
   Stelle der konkrete Code statt dieses Satzes. */
.ewk-order-step-note {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ewk-muted);
}

/* Enterprise-Hinweis bei den Erweiterungen. Erscheint erst oberhalb des
   Enterprise-Kontingents; die frühere Fußnote stand bei jedem und kam deshalb
   bei niemandem an. */
.ewk-big-hint {
  margin: 12px 0 0;
  padding: 10px 12px;
  background: var(--ewk-bg);
  border-radius: 8px;
}

.ewk-big-hint[hidden] {
  display: none;
}


/* --- Stufenskala der Begleitung ---
 *
 * Nativer Regler wie bei den Lizenzen (gleiche Linienstärke, gleiche
 * `accent-color`), darüber die zwölf Zahlen an ihren Rasterpositionen.
 */

.ewk-steps-label {
  margin-top: 14px;
}

.ewk-steps-row {
  display: flex;
  align-items: flex-end;
  gap: 20px;
}

.ewk-steps {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  /* Platz für Zahlenreihe und die Pill darüber. */
  padding-top: 44px;
  /* Breite des Reglergriffs. Die Zahlen richten sich danach aus: Der Griff
     bewegt sich nur zwischen seinen halben Breiten, nicht über die volle
     Spur. Ein zu kleiner Wert schöbe die Zahlen nach außen. */
  --ewk-thumb: 16px;
}

/* Ausgegraut, solange die Leistung nicht im Angebot ist. Der Regler ist dann
   zusätzlich `disabled` — das hier ist nur die sichtbare Seite. */
.ewk-steps-off {
  opacity: 0.45;
}

#ew-preise .ewk-steps input[type="range"] {
  appearance: auto;
  -webkit-appearance: auto;
  display: block;
  width: 100%;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
  height: auto;
  max-width: none;
  accent-color: var(--ewk-brand);
  cursor: pointer;
}

#ew-preise .ewk-steps input[type="range"]:disabled {
  cursor: default;
}

.ewk-steps-marks {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  margin-bottom: -38px;
  height: 0;
}

.ewk-steps-mark {
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
  display: block;
  white-space: nowrap;
}

.ewk-steps-mark:nth-child(1) { left: calc(var(--ewk-thumb) / 2 + (100% - var(--ewk-thumb)) * 0.0); }
.ewk-steps-mark:nth-child(2) { left: calc(var(--ewk-thumb) / 2 + (100% - var(--ewk-thumb)) * 0.09091); }
.ewk-steps-mark:nth-child(3) { left: calc(var(--ewk-thumb) / 2 + (100% - var(--ewk-thumb)) * 0.18182); }
.ewk-steps-mark:nth-child(4) { left: calc(var(--ewk-thumb) / 2 + (100% - var(--ewk-thumb)) * 0.27273); }
.ewk-steps-mark:nth-child(5) { left: calc(var(--ewk-thumb) / 2 + (100% - var(--ewk-thumb)) * 0.36364); }
.ewk-steps-mark:nth-child(6) { left: calc(var(--ewk-thumb) / 2 + (100% - var(--ewk-thumb)) * 0.45455); }
.ewk-steps-mark:nth-child(7) { left: calc(var(--ewk-thumb) / 2 + (100% - var(--ewk-thumb)) * 0.54545); }
.ewk-steps-mark:nth-child(8) { left: calc(var(--ewk-thumb) / 2 + (100% - var(--ewk-thumb)) * 0.63636); }
.ewk-steps-mark:nth-child(9) { left: calc(var(--ewk-thumb) / 2 + (100% - var(--ewk-thumb)) * 0.72727); }
.ewk-steps-mark:nth-child(10) { left: calc(var(--ewk-thumb) / 2 + (100% - var(--ewk-thumb)) * 0.81818); }
.ewk-steps-mark:nth-child(11) { left: calc(var(--ewk-thumb) / 2 + (100% - var(--ewk-thumb)) * 0.90909); }
.ewk-steps-mark:nth-child(12) { left: calc(var(--ewk-thumb) / 2 + (100% - var(--ewk-thumb)) * 1.0); }

/* Deutlich kräftiger als zuvor: Die Zahlen sind die Beschriftung des Rasters
   und standen vorher als graue Kleinschrift kaum lesbar über der Linie. */
.ewk-steps-n {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: var(--ewk-muted);
}

.ewk-steps-mark-on .ewk-steps-n {
  color: var(--ewk-brand);
  font-size: 16px;
}

/* „oft gewählt" sitzt eine Zeile ÜBER der Zahl, nicht auf ihr: In v3.49.1 hat
   die Pill die 4 verdeckt, die Stufe hatte damit keine sichtbare Beschriftung. */
.ewk-steps-pill {
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--ewk-brand);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 999px;
}

.ewk-steps-own {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 0 0 auto;
}

.ewk-steps-own-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ewk-muted);
}

#ew-preise .ewk-steps-own input[type="number"] {
  width: 84px;
  flex: 0 0 auto;
}

.ewk-scale-note {
  margin: 14px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ewk-dark);
}

@media (max-width: 560px) {
  .ewk-steps-row {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .ewk-steps-n {
    font-size: 12px;
  }
}