/* ============================================================================
 * Webspace-Mieten.de — SVG-Icon-Bibliothek
 * Inline-SVGs als data:URL, gefaerbt per CSS-Mask. So koennen Icons in jeder
 * Farbe per background-color genutzt werden, ohne dass mehrere SVG-Dateien
 * erforderlich sind.
 * ============================================================================
 */

.wm-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: -3px;
    background-color: currentColor;
    -webkit-mask: var(--wm-icon-url) no-repeat center / contain;
            mask: var(--wm-icon-url) no-repeat center / contain;
    flex-shrink: 0;
}

/* Groessen-Modifier */
.wm-icon-xs { width: 12px; height: 12px; vertical-align: -1px; }
.wm-icon-sm { width: 14px; height: 14px; vertical-align: -2px; }
.wm-icon-md { width: 18px; height: 18px; vertical-align: -3px; }
.wm-icon-lg { width: 24px; height: 24px; vertical-align: -5px; }
.wm-icon-xl { width: 40px; height: 40px; vertical-align: middle; }
.wm-icon-2x { width: 64px; height: 64px; vertical-align: middle; }

/* Farben-Modifier */
.wm-icon-blue   { background-color: #1f4e8a; }
.wm-icon-green  { background-color: #1d7a1d; }
.wm-icon-orange { background-color: #b05000; }
.wm-icon-red    { background-color: #b30000; }
.wm-icon-muted  { background-color: #777; }
.wm-icon-white  { background-color: #fff; }

/* ----------------------------------------------------------------------------
 * Symbol-Definitionen — jede Klasse setzt --wm-icon-url
 * Stil: 24x24 ViewBox, stroke-width 1.7, round caps/joins, outline only
 * ----------------------------------------------------------------------------
 */
.wm-icon-shield { --wm-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-12V5l-8-3-8 3v5c0 8 8 12 8 12z'/%3E%3C/svg%3E"); }
.wm-icon-shield-check { --wm-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-12V5l-8-3-8 3v5c0 8 8 12 8 12z'/%3E%3Cpath d='M8.5 12 L11 14.5 L15.5 10'/%3E%3C/svg%3E"); }
.wm-icon-check { --wm-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12 L10 18 L20 6'/%3E%3C/svg%3E"); }
.wm-icon-check-circle { --wm-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M7.5 12 L11 15.5 L16.5 9'/%3E%3C/svg%3E"); }
.wm-icon-cross-circle { --wm-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 8.5 L15.5 15.5 M15.5 8.5 L8.5 15.5'/%3E%3C/svg%3E"); }
.wm-icon-info { --wm-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11 L12 17'/%3E%3Ccircle cx='12' cy='8' r='0.6' fill='black' stroke='none'/%3E%3C/svg%3E"); }
.wm-icon-warning { --wm-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 L22 20 L2 20 Z'/%3E%3Cpath d='M12 10 L12 15'/%3E%3Ccircle cx='12' cy='17.5' r='0.6' fill='black' stroke='none'/%3E%3C/svg%3E"); }
.wm-icon-lightbulb { --wm-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18 h6 M10 21 h4 M12 3 a6 6 0 0 1 4 10.4 c-0.8 0.7-1 1.6-1 2.6 h-6 c0-1-0.2-1.9-1-2.6 A6 6 0 0 1 12 3 z'/%3E%3C/svg%3E"); }
.wm-icon-question { --wm-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9 a2.5 2.5 0 1 1 3.5 2.3 c-0.7 0.4-1 1-1 1.7 v0.5'/%3E%3Ccircle cx='12' cy='16.5' r='0.6' fill='black' stroke='none'/%3E%3C/svg%3E"); }
.wm-icon-mail { --wm-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7 L12 13 L21 7'/%3E%3C/svg%3E"); }
.wm-icon-mail-check { --wm-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11 V7 a2 2 0 0 0-2-2 H5 a2 2 0 0 0-2 2 v10 a2 2 0 0 0 2 2 h8'/%3E%3Cpath d='M3 7 L12 13 L21 7'/%3E%3Cpath d='M15 18 L17.5 20.5 L22 16'/%3E%3C/svg%3E"); }
.wm-icon-database { --wm-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='8' ry='2.5'/%3E%3Cpath d='M4 5 v6 a8 2.5 0 0 0 16 0 V5'/%3E%3Cpath d='M4 11 v6 a8 2.5 0 0 0 16 0 V11'/%3E%3C/svg%3E"); }
.wm-icon-server { --wm-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='6' rx='1.5'/%3E%3Crect x='3' y='14' width='18' height='6' rx='1.5'/%3E%3Ccircle cx='7' cy='7' r='0.6' fill='black' stroke='none'/%3E%3Ccircle cx='7' cy='17' r='0.6' fill='black' stroke='none'/%3E%3C/svg%3E"); }
.wm-icon-globe { --wm-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12 h18 M12 3 a13 13 0 0 1 0 18 M12 3 a13 13 0 0 0 0 18'/%3E%3C/svg%3E"); }
.wm-icon-globe-de { --wm-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12 h18 M12 3 a13 13 0 0 1 0 18 M12 3 a13 13 0 0 0 0 18'/%3E%3Cpath d='M16.5 15.5 L18 17 L21 13.5' stroke-width='2'/%3E%3C/svg%3E"); }
.wm-icon-lock { --wm-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11 V7 a4 4 0 0 1 8 0 V11'/%3E%3C/svg%3E"); }
.wm-icon-key { --wm-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='M11 12 L21 2 L21 6 L18 6 L18 9'/%3E%3C/svg%3E"); }
.wm-icon-clock { --wm-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7 V12 L15.5 14.5'/%3E%3C/svg%3E"); }
.wm-icon-calendar { --wm-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10 H21 M8 3 V7 M16 3 V7'/%3E%3C/svg%3E"); }
.wm-icon-support { --wm-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14 v-2 a8 8 0 0 1 16 0 v2'/%3E%3Crect x='3' y='14' width='4' height='6' rx='1.5'/%3E%3Crect x='17' y='14' width='4' height='6' rx='1.5'/%3E%3Cpath d='M19 20 v0.5 a2.5 2.5 0 0 1-2.5 2.5 H13'/%3E%3C/svg%3E"); }
.wm-icon-credit-card { --wm-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10 H22 M6 15 H10'/%3E%3C/svg%3E"); }
.wm-icon-file-text { --wm-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2 H6 a2 2 0 0 0-2 2 v16 a2 2 0 0 0 2 2 h12 a2 2 0 0 0 2-2 V8 Z'/%3E%3Cpath d='M14 2 V8 H20 M8 13 H16 M8 17 H14'/%3E%3C/svg%3E"); }
.wm-icon-search { --wm-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.5 16.5 L21 21'/%3E%3C/svg%3E"); }
.wm-icon-map-pin { --wm-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22 s7-7 7-12 a7 7 0 0 0-14 0 c0 5 7 12 7 12 z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
.wm-icon-star { --wm-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 L14.6 9 L21 9.6 L16 14 L17.5 20.5 L12 17 L6.5 20.5 L8 14 L3 9.6 L9.4 9 Z'/%3E%3C/svg%3E"); }
.wm-icon-heart { --wm-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20 s-7-4.5-7-10 a4 4 0 0 1 7-2.5 a4 4 0 0 1 7 2.5 c0 5.5-7 10-7 10 z'/%3E%3C/svg%3E"); }
.wm-icon-cog { --wm-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.5 12 a7.5 7.5 0 0 0-0.15-1.5 l2-1.6 l-2-3.4 l-2.3 1 a7.5 7.5 0 0 0-2.6-1.5 l-0.4-2.5 h-4 l-0.4 2.5 a7.5 7.5 0 0 0-2.6 1.5 l-2.3-1 l-2 3.4 l2 1.6 a7.5 7.5 0 0 0 0 3 l-2 1.6 l2 3.4 l2.3-1 a7.5 7.5 0 0 0 2.6 1.5 l0.4 2.5 h4 l0.4-2.5 a7.5 7.5 0 0 0 2.6-1.5 l2.3 1 l2-3.4 l-2-1.6 a7.5 7.5 0 0 0 0.15-1.5 z'/%3E%3C/svg%3E"); }
.wm-icon-wordpress { --wm-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M5 9 L9 19 L12 11 L15 19 L19 9 M5 12 H19'/%3E%3C/svg%3E"); }
.wm-icon-backup { --wm-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 a4 4 0 1 1 0.5-7.95 a6 6 0 0 1 11.4 1.5 a3.5 3.5 0 0 1-1 6.95 z'/%3E%3Cpath d='M12 12 V20 M9 17 L12 20 L15 17'/%3E%3C/svg%3E"); }
.wm-icon-migration { --wm-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9 H15 L12 6 M15 9 L12 12 M21 15 H9 L12 12 M9 15 L12 18'/%3E%3C/svg%3E"); }
.wm-icon-euro { --wm-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 a8 8 0 0 0-13 4 M18 18 a8 8 0 0 1-13-4 M3 10 H14 M3 14 H14'/%3E%3C/svg%3E"); }
.wm-icon-arrow-right { --wm-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12 H19 M13 6 L19 12 L13 18'/%3E%3C/svg%3E"); }

/* ----------------------------------------------------------------------------
 * Callout-Komponenten für FAQ-Artikel und Content-Seiten
 * ----------------------------------------------------------------------------
 */
.wm-callout {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 10px;
    padding: 10px 14px;
    margin: 12px 0;
    border-radius: 3px;
    border: 1px solid;
    font-size: 12px;
    line-height: 1.5;
    align-items: start;
}
.wm-callout > .wm-icon { width: 20px; height: 20px; margin-top: 1px; }
.wm-callout p:first-child { padding-top: 0; }
.wm-callout p:last-child  { padding-bottom: 0; }
.wm-callout strong { color: inherit; }

.wm-callout-info { background: #eef5fb; border-color: #b5d0e8; color: #1f4e8a; }
.wm-callout-info > .wm-icon { background-color: #1f4e8a; }

.wm-callout-tip  { background: #eef9ee; border-color: #b4dab4; color: #1d5a1d; }
.wm-callout-tip > .wm-icon { background-color: #1d7a1d; }

.wm-callout-warn { background: #fff4e6; border-color: #e0bf90; color: #8a4500; }
.wm-callout-warn > .wm-icon { background-color: #b05000; }

/* ----------------------------------------------------------------------------
 * Feature-Listen mit Check-Bullets (statt klassischer Aufzaehlungspunkte)
 * Auch direkt in DB-Content per <ul class="wm-features"> nutzbar.
 * ----------------------------------------------------------------------------
 */
.legacy-content ul.wm-features,
ul.wm-features {
    list-style: none;
    padding: 0;
    margin: 6px 0 12px 0;
}
.legacy-content ul.wm-features li,
ul.wm-features li {
    position: relative;
    padding: 3px 0 3px 26px;
    line-height: 1.55;
}
.legacy-content ul.wm-features li::before,
ul.wm-features li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 7px;
    width: 18px;
    height: 18px;
    background-color: #1d7a1d;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12 L10 18 L20 6'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12 L10 18 L20 6'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ----------------------------------------------------------------------------
 * Trust-Strip mit Icons (renderTrustStrip nutzt das)
 * ----------------------------------------------------------------------------
 */
.wm-trust-strip-icons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    background: #f4f7fb;
    border: 1px solid #cdd9ea;
    padding: 12px 14px;
    margin: 14px 0;
    text-align: center;
    font-size: 11px;
}
.wm-trust-strip-icons .wm-trust-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.wm-trust-strip-icons .wm-icon { width: 28px; height: 28px; }
.wm-trust-strip-icons strong { font-size: 12px; }

@media (max-width: 767px) {
    .wm-trust-strip-icons { grid-template-columns: repeat(2, 1fr); }
}

/* ----------------------------------------------------------------------------
 * USP-Block-Karten mit Icon
 * ----------------------------------------------------------------------------
 */
.wm-usp-block-icons { margin: 18px 0; }
.wm-usp-block-icons > h2 { color: #1f4e8a; margin: 0 0 10px 0; border: 0; float: none; width: auto; font-size: 16px; }
.wm-usp-block-icons .wm-usp-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.wm-usp-block-icons .wm-usp-card {
    background: #fff;
    border: 1px solid #cdd9ea;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 10px;
    align-items: start;
}
.wm-usp-block-icons .wm-usp-card .wm-icon { width: 24px; height: 24px; margin-top: 2px; }
.wm-usp-block-icons .wm-usp-card-title {
    color: #1f4e8a;
    font-weight: bold;
    font-size: 12px;
    margin-bottom: 4px;
}
.wm-usp-block-icons .wm-usp-card-text { font-size: 11px; color: #444; line-height: 1.5; }

@media (max-width: 767px) {
    .wm-usp-block-icons .wm-usp-grid { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------------------
 * Nummerierte Schritt-Liste mit Icon ("So geht es jetzt weiter")
 * Mit .legacy-content-Präfix, damit das globale .legacy-content li-Padding
 * aus layout.tpl nicht den Selector schlägt.
 * ----------------------------------------------------------------------------
 */
.legacy-content .wm-next-steps,
.wm-next-steps { list-style: none; padding: 0; margin: 8px 0 0 0; counter-reset: step; }
.legacy-content .wm-next-steps > li,
.wm-next-steps > li {
    position: relative;
    padding: 12px 14px 12px 58px;
    margin: 0 0 8px 0;
    border: 1px solid #cdd9ea;
    background: #fff;
    counter-increment: step;
    list-style: none;
}
.legacy-content .wm-next-steps > li::before,
.wm-next-steps > li::before {
    content: counter(step);
    position: absolute; left: 12px; top: 12px;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: #1f4e8a; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 13px;
    font-family: Verdana, Arial, sans-serif;
}
.legacy-content .wm-next-steps > li.wm-next-attention,
.wm-next-steps > li.wm-next-attention { background: #fff8e8; border-color: #c4a040; }
.legacy-content .wm-next-steps > li.wm-next-attention::before,
.wm-next-steps > li.wm-next-attention::before { background: #b05000; }
.wm-next-icon { position: absolute; right: 14px; top: 12px; }
.wm-next-icon .wm-icon { width: 28px; height: 28px; }
.wm-next-body { padding-right: 40px; }
.wm-next-body strong { color: #1f4e8a; font-size: 13px; display: block; padding-bottom: 4px; }
.wm-next-body p { padding: 0 0 4px 0; font-size: 12px; color: #444; line-height: 1.5; }
.wm-next-body p:last-child { padding-bottom: 0; }
.wm-next-attention .wm-next-body strong { color: #8a4500; }

@media (max-width: 767px) {
    .legacy-content .wm-next-steps > li,
    .wm-next-steps > li { padding: 14px 14px 14px 56px; }
    .wm-next-icon { display: none; }
    .wm-next-body { padding-right: 0; }
}

/* ----------------------------------------------------------------------------
 * Hilfe-Karten-Grid: Icon (Geschwister) plus klickbarer Text-Link
 * Icon liegt NICHT im <a>, damit es keinen Hover-Underline-Effekt bekommt.
 * ----------------------------------------------------------------------------
 */
.wm-help-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 8px; }
.wm-help-card {
    display: grid;
    grid-template-columns: 24px 1fr;
    column-gap: 8px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #cdd9ea;
    align-items: center;
}
.wm-help-card:hover { background: #eef5fb; }
.wm-help-link { display: block; text-decoration: none; }
.wm-help-link strong { display: block; color: #1f4e8a; font-size: 12px; padding-bottom: 2px; }
.wm-help-link span    { display: block; font-size: 11px; color: #555; }
.wm-help-link:hover { background: transparent; color: inherit; }
.wm-help-link:hover strong { text-decoration: underline; }

/* ----------------------------------------------------------------------------
 * Bestell-Beleg
 * ----------------------------------------------------------------------------
 */
.wm-order-receipt {
    background: #f4f7fb;
    border: 1px solid #cdd9ea;
    padding: 10px 14px;
    margin: 14px auto;
    max-width: 340px;
    text-align: center;
}
.wm-order-receipt-label { font-size: 11px; color: #555; text-transform: uppercase; letter-spacing: .5px; }
.wm-order-receipt-num   { font-size: 18px; font-weight: bold; color: #1f4e8a; padding: 2px 0; font-family: 'Courier New', monospace; letter-spacing: 1px; }
.wm-order-receipt-total { font-size: 12px; color: #555; padding-top: 4px; }

@media (max-width: 767px) {
    .wm-help-grid { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------------------
 * CTA-Karte am Ende der Tarif-Detail-Seiten ("Bereit für den Start?")
 * Eigene Klassen statt Inline-Styles, damit der Hover-Override sauber
 * über die globale a:hover-Regel aus layout.tpl greift.
 * ----------------------------------------------------------------------------
 */
.wm-cta-card {
    background: linear-gradient(135deg, #1d7a1d, #145614);
    color: #fff;
    padding: 14px 18px;
    margin: 18px 0;
    text-align: center;
    border-radius: 3px;
}
.wm-cta-card-title { font-size: 18px; font-weight: bold; margin-bottom: 6px; color: #fff; }
.wm-cta-card-sub   { font-size: 13px; margin-bottom: 10px; color: #fff; }
/* Variante A: in .wm-cta-card (z. B. Tarif-Detail mit grünem Hintergrund)
   → weißer Button, grüner Text; Hover invertiert. */
.wm-cta-card .wm-cta-btn,
.legacy-content .wm-cta-card .wm-cta-btn {
    background: #fff;
    color: #145614 !important;
    padding: 10px 22px;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    border-radius: 3px;
    border: 1px solid #fff;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.wm-cta-card .wm-cta-btn:hover,
.legacy-content .wm-cta-card .wm-cta-btn:hover {
    background: #145614;
    color: #fff !important;
    border-color: #fff;
}

/* Variante B: Standalone (z. B. Service-Seite, Impressum, Kontakt-Hinweis)
   → grüner Button, weißer Text; Hover dunkler. Specificity hoch genug, um
   die globale a:hover-Regel aus layout.tpl zu schlagen. */
a.wm-cta-btn,
.legacy-content a.wm-cta-btn {
    background: #1d7a1d;
    color: #fff !important;
    padding: 10px 22px;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    border-radius: 3px;
    border: 1px solid #145614;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
a.wm-cta-btn:hover,
.legacy-content a.wm-cta-btn:hover {
    background: #145614;
    color: #fff !important;
    border-color: #145614;
}