/* Live-Head-Kaskade der Blogposts · Variante 0 (487 Posts) · generiert, nicht editieren */
/* ── Block 0 ── */
img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px}
/*# sourceURL=wp-img-auto-sizes-contain-inline-css */
/* ── Block 1 ── */
img.wp-smiley, img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 0.07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
/*# sourceURL=wp-emoji-styles-inline-css */
/* ── Block 2 ── */
/*! This file is auto-generated */
.wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none}
/*# sourceURL=/wp-includes/css/classic-themes.min.css */
/* ── Block 3 ── */
:root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--color--surecart: var(--sc-color-primary-500);--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);--wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);}:where(body) { margin: 0; }:where(.wp-site-blocks) > * { margin-block-start: 24px; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: 24px; }:root :where(.is-layout-flow) > :first-child{margin-block-start: 0;}:root :where(.is-layout-flow) > :last-child{margin-block-end: 0;}:root :where(.is-layout-flow) > *{margin-block-start: 24px;margin-block-end: 0;}:root :where(.is-layout-constrained) > :first-child{margin-block-start: 0;}:root :where(.is-layout-constrained) > :last-child{margin-block-end: 0;}:root :where(.is-layout-constrained) > *{margin-block-start: 24px;margin-block-end: 0;}:root :where(.is-layout-flex){gap: 24px;}:root :where(.is-layout-grid){gap: 24px;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}body{padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;}:root :where(.wp-element-button, .wp-block-button__link){background-color: #32373c;border-width: 0;color: #fff;font-family: inherit;font-size: inherit;font-style: inherit;font-weight: inherit;letter-spacing: inherit;line-height: inherit;padding-top: calc(0.667em + 2px);padding-right: calc(1.333em + 2px);padding-bottom: calc(0.667em + 2px);padding-left: calc(1.333em + 2px);text-decoration: none;text-transform: inherit;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-surecart-color{color: var(--wp--preset--color--surecart) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-surecart-background-color{background-color: var(--wp--preset--color--surecart) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-surecart-border-color{border-color: var(--wp--preset--color--surecart) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.sp-blog-small{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}
/*# sourceURL=global-styles-inline-css */
/* ── Block 4 ── */
/* ==================================================================
SUMMARY BOX - CYBER GRID BLACK EDITION (ANIMATED)
================================================================== */
/* 1. DEFINE THE ANIMATION (Soft Entry) */
@keyframes slideUpFade {
0% {
opacity: 0;
transform: translateY(30px); /* Starts further down */
}
100% {
opacity: 1;
transform: translateY(0); /* Ends at normal position */
}
}
/* 2. MAIN CONTAINER */
.sp-blog-summary {
/* --- BACKGROUND (Cyber Grid) --- */
background-color: #003349 !important; /* Base color dark blue */
background-image:
/* Layer 1: Vignette */
radial-gradient(ellipse at center, rgba(0, 51, 73, 0) 10%, rgba(0, 51, 73, 1) 90%),
/* Layer 2: Vertical grid lines */
linear-gradient(to right, rgba(64, 224, 208, 0.15) 1px, transparent 1px),
/* Layer 3: Horizontal grid lines */
linear-gradient(to bottom, rgba(64, 224, 208, 0.15) 1px, transparent 1px) !important;
background-size: 100% 100%, 30px 30px, 30px 30px !important;
background-position: center center;
background-repeat: no-repeat, repeat, repeat;
/* ----------------------------------------- */
/* Border: Tech grey, but TOP IS PURE BLACK */
border: 1px solid #4a6b7c !important;
border-top: 4px solid #000000 !important;
border-radius: 12px !important;
padding: 3rem !important;
margin: 4em 0 !important;
position: relative !important;
overflow: hidden !important;
/* Shadow for depth */
box-shadow: 0 15px 40px -10px rgba(0,0,0,0.8) !important;
transition: transform 0.3s ease, box-shadow 0.3s ease;
/* HERE IS THE NEW ANIMATION */
animation: slideUpFade 0.8s ease-out forwards;
/* Font fallback */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
color: #e5e5e5 !important;
}
/* Hover Effect */
.sp-blog-summary:hover {
transform: translateY(-3px);
/* Shadow becomes deep black on hover */
box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 1) !important;
/* Border becomes completely black on hover */
border-color: #000000 !important;
}
/* 3. RADICAL RESET (Adjusted for Dark Mode) */
.sp-blog-summary * {
background: transparent !important;
box-shadow: none !important;
border: none !important;
max-width: 100% !important;
}
/* 4. TEXT COLORS (Light grey instead of black) */
.sp-blog-summary p,
.sp-blog-summary li,
.sp-blog-summary span,
.sp-blog-summary div {
color: #e5e5e5 !important;
line-height: 1.7 !important;
font-size: 1.1rem !important;
}
/* 5. HEADINGS (White & Large) - HERE IS THE UPDATE FOR H2 & H3 */
.sp-blog-summary h2,
.sp-blog-summary h3 {
color: #ffffff !important;
font-weight: 900 !important;
text-transform: uppercase !important;
font-size: 1.8rem !important;
line-height: 1.2 !important;
margin-top: 0 !important;
margin-bottom: 25px !important;
letter-spacing: -0.5px !important;
border-bottom: none !important;
padding-bottom: 0 !important;
}
/* 6. THE INTRODUCTORY TEXT */
.sp-blog-summary > p {
margin-bottom: 30px !important;
padding-bottom: 10px !important;
border-bottom: 1px solid #4a6b7c !important; /* Fine grey line for separation */
}
/* 7. LABEL "KEY TAKEAWAYS" (The Badge) */
.sp-blog-summary .sp-blog-summary-inner strong:first-child {
display: block !important;
/* Black background and white text */
background-color: #000000 !important;
color: #ffffff !important;
border: 1px solid #333333 !important;
padding: 8px 16px !important;
border-radius: 4px !important;
width: fit-content !important;
font-family: monospace !important;
font-size: 0.85rem !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 2px !important;
margin-top: 0 !important;
margin-bottom: 25px !important;
box-shadow: 0 4px 10px rgba(0,0,0,0.5) !important;
}
/* 8. THE LIST */
.sp-blog-checkmark-list {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.sp-blog-checkmark-list li {
display: block !important;
position: relative !important;
padding-left: 45px !important;
margin-bottom: 20px !important;
width: 100% !important;
}
/* The Icon (Black checkmark) */
.sp-blog-checkmark-list li::before {
content: '✓' !important;
position: absolute !important;
top: -2px !important;
left: 0 !important;
width: 30px !important;
height: 30px !important;
background-color: transparent !important;
color: #000000 !important; /* Pure black */
text-align: center !important;
line-height: 30px !important;
font-weight: 900 !important;
font-size: 24px !important;
text-shadow: none !important;
}
/* 9. BOLD WORDS */
.sp-blog-summary strong,
.sp-blog-summary b {
color: #ffffff !important; /* Text becomes white */
font-weight: 800 !important;
background-color: transparent !important;
padding: 0 !important;
}
/* Exception for the label above */
.sp-blog-summary .sp-blog-summary-inner strong:first-child {
color: #ffffff !important;
background-color: #000000 !important;
}
/* Small watermark in the background */
.sp-blog-summary::after {
content: 'KEY';
position: absolute;
bottom: -20px;
right: -10px;
font-size: 8rem;
font-weight: 900;
color: #ffffff;
opacity: 0.03;
pointer-events: none;
z-index: 0;
}
/* ==================================================================
VERSUS TABLE - GODMODE EDITION
================================================================== */
.sp-blog-vs {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 20px;
padding: 0;
margin: 40px 0;
overflow: hidden;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.05);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.sp-blog-vs-header {
padding: 28px 30px 20px;
border-bottom: 1px solid #e2e8f0;
}
.sp-blog-vs-title {
font-size: 1.35rem;
font-weight: 800;
color: #0f172a;
margin: 0;
line-height: 1.3;
}
.sp-blog-vs-table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.sp-blog-vs-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
min-width: 500px;
}
.sp-blog-vs-th-criteria,
.sp-blog-vs-th-competitor {
background-color: #0f172a;
color: #ffffff;
padding: 16px 24px;
text-transform: uppercase;
font-size: 0.72rem;
letter-spacing: 0.1em;
font-weight: 700;
text-align: left;
border: none;
white-space: nowrap;
}
.sp-blog-vs-td-criteria {
padding: 18px 24px;
background-color: #ffffff;
color: #0f172a;
font-weight: 700;
font-size: 0.95rem;
border-bottom: 1px solid #e2e8f0;
border-right: 1px solid #e2e8f0;
white-space: nowrap;
}
.sp-blog-vs-td-content {
padding: 18px 24px;
background-color: #ffffff;
color: #334155;
font-size: 0.95rem;
line-height: 1.6;
border-bottom: 1px solid #e2e8f0;
}
.sp-blog-vs-table tbody tr:last-child .sp-blog-vs-td-criteria,
.sp-blog-vs-table tbody tr:last-child .sp-blog-vs-td-content {
border-bottom: none;
}
.sp-blog-vs-table tbody tr {
transition: background-color 0.2s ease;
}
.sp-blog-vs-table tbody tr:hover .sp-blog-vs-td-criteria,
.sp-blog-vs-table tbody tr:hover .sp-blog-vs-td-content {
background-color: #f8fafc;
}
.sp-blog-rec {
border-top: 1px solid #e2e8f0;
padding: 22px 30px;
background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
}
.sp-blog-rec-header {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #059669;
white-space: nowrap;
}
.sp-blog-rec-body {
font-size: 0.95rem;
font-weight: 600;
color: #065f46;
line-height: 1.5;
}
@media (max-width: 640px) {
.sp-blog-vs { border-radius: 14px; margin: 24px 0; }
.sp-blog-vs-header { padding: 20px 20px 16px; }
.sp-blog-vs-title { font-size: 1.15rem; }
.sp-blog-rec { padding: 16px 20px; flex-direction: column; gap: 4px; }
}
/* ==================================================================
COMPARISON TABLE - MODERN SAAS EDITION
================================================================== */
.sp-blog-comparison-table,
.sp-blog-table-container {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
margin: 3em 0 !important;
overflow: hidden !important;
overflow-x: auto !important;
overflow-y: hidden !important;
position: relative !important;
}
.sp-blog-comparison-table table,
.sp-blog-table-container table {
width: 100% !important;
border-collapse: separate !important;
border-spacing: 0 !important;
min-width: 600px !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
background-color: #ffffff !important;
}
.sp-blog-comparison-table thead,
.sp-blog-table-container thead {
background-color: #0f172a !important;
}
.sp-blog-comparison-table th,
.sp-blog-table-container th {
background-color: #0f172a !important;
color: #ffffff !important;
padding: 20px 24px !important;
text-transform: uppercase !important;
font-size: 0.75rem !important;
letter-spacing: 0.1em !important;
font-weight: 700 !important;
text-align: left !important;
border: none !important;
white-space: nowrap !important;
position: sticky !important;
top: 0 !important;
z-index: 10 !important;
}
.sp-blog-comparison-table td,
.sp-blog-table-container td {
padding: 20px 24px !important;
background-color: #ffffff !important;
color: #334155 !important;
font-size: 0.95rem !important;
line-height: 1.6 !important;
border-bottom: 1px solid #e2e8f0 !important;
vertical-align: top !important;
}
.sp-blog-comparison-table tr:last-child td,
.sp-blog-table-container tr:last-child td {
border-bottom: none !important;
}
.sp-blog-comparison-table td *,
.sp-blog-table-container td * {
color: #334155 !important;
}
.sp-blog-comparison-table tbody tr,
.sp-blog-table-container tbody tr {
transition: background-color 0.2s ease !important;
}
.sp-blog-comparison-table tbody tr:hover td,
.sp-blog-table-container tbody tr:hover td {
background-color: #f8fafc !important;
}
.sp-blog-comparison-table td:first-child,
.sp-blog-table-container td:first-child {
background-color: #ffffff !important;
color: #0f172a !important;
font-weight: 700 !important;
font-size: 1rem !important;
border-right: 1px solid #e2e8f0 !important;
position: sticky !important;
left: 0 !important;
z-index: 5 !important;
box-shadow: 2px 0 5px -2px rgba(0,0,0,0.1) !important;
}
.sp-blog-comparison-table tbody tr:hover td:first-child,
.sp-blog-table-container tbody tr:hover td:first-child {
background-color: #f8fafc !important;
}
.sp-blog-comparison-table td:first-child *,
.sp-blog-table-container td:first-child * {
color: #0f172a !important;
}
/* ==================================================================
PROS & CONS - CYBER GRID EDITION
================================================================== */
.sp-blog-pros-cons {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin: 3em 0;
width: 100%;
box-sizing: border-box;
}
.sp-blog-pros-cons > br,
.sp-blog-pros-cons > p:empty {
display: none !important;
}
.sp-blog-pros, .sp-blog-cons {
background-color: #003349 !important;
background-image:
radial-gradient(ellipse at center, rgba(0, 51, 73, 0) 20%, rgba(0, 51, 73, 1) 100%),
linear-gradient(to right, rgba(64, 224, 208, 0.15) 1px, transparent 1px),
linear-gradient(to bottom, rgba(64, 224, 208, 0.15) 1px, transparent 1px) !important;
background-size: 100% 100%, 30px 30px, 30px 30px !important;
background-position: center center;
background-repeat: no-repeat, repeat, repeat;
border: 1px solid #4a6b7c !important;
border-radius: 8px;
padding: 2rem !important;
box-shadow: 0 8px 16px -2px rgba(0, 0, 0, 0.6) !important;
transition: all 0.3s ease;
position: relative;
margin: 0 !important;
box-sizing: border-box !important;
width: 100% !important;
}
.sp-blog-pros {
border-left: 4px solid #00ffbb !important;
}
.sp-blog-pros h3 {
color: #fff !important;
border-bottom: 1px solid rgba(0, 255, 187, 0.3);
padding-bottom: 10px;
margin-top: 0 !important;
margin-bottom: 1rem !important;
}
.sp-blog-cons {
border-left: 4px solid #ff5757 !important;
}
.sp-blog-cons h3 {
color: #fff !important;
border-bottom: 1px solid rgba(255, 87, 87, 0.3);
padding-bottom: 10px;
margin-top: 0 !important;
margin-bottom: 1rem !important;
}
.sp-blog-pros ul, .sp-blog-cons ul {
list-style-type: none !important;
padding-left: 0 !important;
margin: 0 !important;
}
.sp-blog-pros li, .sp-blog-cons li {
position: relative !important;
padding-left: 2.2rem !important;
margin-bottom: 1rem !important;
color: #e5e5e5 !important;
line-height: 1.6 !important;
margin-left: 0 !important;
background: none !important;
}
.sp-blog-pros li::before {
content: '✓';
position: absolute;
left: 0;
top: 0;
color: #00ffbb;
font-weight: 900;
font-size: 1.2rem;
width: 1.5rem;
text-align: center;
text-shadow: 0 0 10px rgba(0, 255, 187, 0.4);
}
.sp-blog-cons li::before {
content: '✕';
position: absolute;
left: 0;
top: 1px;
color: #ff5757;
font-weight: 900;
font-size: 1.1rem;
width: 1.5rem;
text-align: center;
text-shadow: 0 0 10px rgba(255, 87, 87, 0.4);
}
.sp-blog-pros:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px -5px rgba(0, 255, 187, 0.3), inset 0 0 20px rgba(0, 255, 187, 0.1) !important;
border-color: #00ffbb !important;
}
.sp-blog-cons:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px -5px rgba(255, 87, 87, 0.3), inset 0 0 20px rgba(255, 87, 87, 0.1) !important;
border-color: #ff5757 !important;
}
/* ==================================================================
DATA INSIGHT - CYBER GRID EDITION
================================================================== */
.sp-blog-data-insight {
background-color: #003349 !important;
background-image:
radial-gradient(ellipse at center, rgba(0, 51, 73, 0) 20%, rgba(0, 51, 73, 1) 100%),
linear-gradient(to right, rgba(64, 224, 208, 0.15) 1px, transparent 1px),
linear-gradient(to bottom, rgba(64, 224, 208, 0.15) 1px, transparent 1px) !important;
background-size: 100% 100%, 30px 30px, 30px 30px !important;
background-position: center center;
background-repeat: no-repeat, repeat, repeat;
border: 1px solid #4a6b7c !important;
border-bottom: 3px solid #3b82f6 !important;
padding: 30px;
border-radius: 12px;
margin: 3em 0;
box-shadow: 0 12px 24px -5px rgba(0,0,0,0.6) !important;
position: relative;
overflow: hidden;
}
.sp-blog-data-insight > span {
position: absolute;
top: -15px;
right: -10px;
font-size: 100px;
font-weight: 900;
font-family: sans-serif;
color: #ffffff;
opacity: 0.05;
pointer-events: none;
z-index: 0;
line-height: 1;
}
.sp-blog-data-insight h3 {
margin-top: 0;
color: #3b82f6 !important;
display: flex;
align-items: center;
letter-spacing: 0.05em;
font-size: 1.1rem;
text-transform: uppercase;
font-weight: 800;
position: relative;
z-index: 1;
}
.sp-blog-data-insight h3 span {
margin-right: 15px;
font-size: 1.3em;
filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.6));
}
.sp-blog-data-insight p {
margin-bottom: 0;
font-size: 1.1em;
line-height: 1.6;
font-weight: 400;
color: #e5e5e5 !important;
position: relative;
z-index: 1;
}
/* ==================================================================
CASE STUDY - CYBER GRID EDITION (BLACK ACCENT)
================================================================== */
.sp-blog-case-study {
background-color: #003349 !important;
background-image:
radial-gradient(ellipse at center, rgba(0, 51, 73, 0) 10%, rgba(0, 51, 73, 1) 90%),
linear-gradient(to right, rgba(64, 224, 208, 0.15) 1px, transparent 1px),
linear-gradient(to bottom, rgba(64, 224, 208, 0.15) 1px, transparent 1px) !important;
background-size: 100% 100%, 30px 30px, 30px 30px !important;
background-position: center center;
background-repeat: no-repeat, repeat, repeat;
border: 1px solid #4a6b7c !important;
border-top: 4px solid #000000 !important;
border-radius: 12px;
padding: 90px 2.5rem 3rem 2.5rem !important;
margin: 4em 0;
position: relative;
overflow: hidden;
box-shadow: 0 15px 40px -10px rgba(0,0,0,0.8) !important;
transition: transform 0.3s ease, box-shadow 0.3s ease;
color: #e5e5e5 !important;
}
.sp-blog-case-study:hover {
transform: translateY(-3px);
box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 1) !important;
border-color: #000000 !important;
}
.sp-blog-case-study * {
color: #e5e5e5 !important;
background-color: transparent !important;
}
.sp-blog-case-study::after {
content: 'CASE STUDY';
position: absolute;
top: 30px;
right: 25px;
font-family: monospace;
font-size: 0.75rem;
letter-spacing: 2px;
z-index: 10;
color: #a3a3a3 !important;
background: #000000 !important;
border: 1px solid #333333;
padding: 6px 12px;
border-radius: 4px;
box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}
.sp-blog-case-study h3 {
color: #ffffff !important;
font-size: 1.3rem !important;
text-transform: uppercase;
font-weight: 800;
margin-top: 0 !important;
margin-bottom: 2.5rem !important;
letter-spacing: 0.05em;
position: relative;
z-index: 2;
padding-bottom: 20px;
border-bottom: 1px solid #4a6b7c;
}
.sp-blog-case-study div {
position: relative;
z-index: 2;
}
.sp-blog-case-study p > strong:first-child {
display: block;
width: fit-content;
font-family: monospace;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
margin-bottom: 12px;
margin-top: 20px;
padding: 6px 12px;
border-radius: 4px;
color: #ffffff !important;
}
.sp-blog-case-study p:nth-of-type(1) > strong:first-child {
background-color: rgba(239, 68, 68, 0.2) !important;
border: 1px solid rgba(239, 68, 68, 0.5) !important;
box-shadow: 0 0 15px rgba(239, 68, 68, 0.15) !important;
}
.sp-blog-case-study p:nth-of-type(2) > strong:first-child {
background-color: rgba(16, 185, 129, 0.2) !important;
border: 1px solid rgba(16, 185, 129, 0.5) !important;
box-shadow: 0 0 15px rgba(16, 185, 129, 0.15) !important;
margin-top: 35px;
}
.sp-blog-case-study p {
line-height: 1.7;
margin-top: 0;
margin-bottom: 0;
font-size: 1.05rem;
max-width: 70%;
}
@media (max-width: 600px) {
.sp-blog-case-study {
padding-top: 80px !important;
}
.sp-blog-case-study p { max-width: 100%; }
.sp-blog-case-study::after {
right: auto;
left: 25px;
}
}
/* ==================================================================
MYTH BUSTER - CYBER GRID EDITION
================================================================== */
.sp-blog-myth-buster {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin: 3em 0;
width: 100%;
box-sizing: border-box;
}
.sp-blog-myth-buster > br,
.sp-blog-myth-buster > p:empty {
display: none !important;
}
.sp-blog-myth, .sp-blog-fact {
background-color: #003349 !important;
background-image:
radial-gradient(ellipse at center, rgba(0, 51, 73, 0) 20%, rgba(0, 51, 73, 1) 100%),
linear-gradient(to right, rgba(64, 224, 208, 0.15) 1px, transparent 1px),
linear-gradient(to bottom, rgba(64, 224, 208, 0.15) 1px, transparent 1px) !important;
background-size: 100% 100%, 30px 30px, 30px 30px !important;
background-position: center center;
background-repeat: no-repeat, repeat, repeat;
border: 1px solid #4a6b7c !important;
border-radius: 12px;
padding: 2.5rem 2rem;
box-shadow: 0 8px 16px -2px rgba(0, 0, 0, 0.6) !important;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
z-index: 1;
margin: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
.sp-blog-myth {
border-left: 4px solid #ff5757 !important;
}
.sp-blog-myth::after {
content: '✖';
position: absolute;
bottom: -10px;
right: 10px;
font-size: 8rem;
color: #ff5757;
opacity: 0.05;
line-height: 1;
pointer-events: none;
font-weight: 900;
z-index: 0;
}
.sp-blog-myth:hover {
transform: translateY(-2px);
border-color: #ff5757 !important;
box-shadow: 0 10px 30px -5px rgba(255, 87, 87, 0.2) !important;
}
.sp-blog-myth h3 {
color: #ff5757 !important;
font-size: 0.95rem !important;
text-transform: uppercase;
letter-spacing: 0.15em;
margin-top: 0;
margin-bottom: 1rem !important;
font-weight: 800;
position: relative;
z-index: 2;
}
.sp-blog-myth p {
color: #a3a3a3 !important;
font-style: italic;
font-size: 1.1rem;
line-height: 1.6;
margin-bottom: 0;
position: relative;
z-index: 2;
}
.sp-blog-fact {
border-left: 4px solid #00ffbb !important;
display: flex;
flex-direction: column;
justify-content: center;
}
.sp-blog-fact::after {
content: '✔';
position: absolute;
top: -20px;
right: -10px;
font-size: 8rem;
color: #00ffbb;
opacity: 0.05;
line-height: 1;
pointer-events: none;
font-weight: 900;
z-index: 0;
}
.sp-blog-fact:hover {
transform: translateY(-2px);
border-color: #00ffbb !important;
box-shadow: 0 10px 30px -5px rgba(0, 255, 187, 0.2) !important;
}
.sp-blog-fact h3 {
color: #00ffbb !important;
font-size: 0.95rem !important;
text-transform: uppercase;
letter-spacing: 0.15em;
margin-top: 0;
margin-bottom: 1rem !important;
font-weight: 800;
position: relative;
z-index: 2;
}
.sp-blog-fact p {
color: #ffffff !important;
font-weight: 500;
font-size: 1.1rem;
line-height: 1.6;
margin-bottom: 0;
position: relative;
z-index: 2;
text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}
/* ==================================================================
PREMIUM INSIDER TIP BOX - CYBER GRID EDITION
================================================================== */
.sp-blog-tip {
background-color: #003349 !important;
background-image:
radial-gradient(ellipse at center, rgba(0, 51, 73, 0) 20%, rgba(0, 51, 73, 1) 100%),
linear-gradient(to right, rgba(64, 224, 208, 0.15) 1px, transparent 1px),
linear-gradient(to bottom, rgba(64, 224, 208, 0.15) 1px, transparent 1px) !important;
background-size: 100% 100%, 30px 30px, 30px 30px !important;
background-position: center center;
background-repeat: no-repeat, repeat, repeat;
border: 1px solid #4a6b7c !important;
border-left: 4px solid #3b82f6 !important;
box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.15),
0 8px 20px -2px rgba(0, 0, 0, 0.6) !important;
border-radius: 8px;
padding: 25px 25px 25px 80px !important;
position: relative;
overflow: hidden;
margin: 3em 0 !important;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sp-blog-tip:hover {
transform: translateY(-3px);
box-shadow: 0 20px 30px -5px rgba(59, 130, 246, 0.3),
0 8px 15px -2px rgba(0, 0, 0, 0.5) !important;
border-color: #3b82f6 !important;
}
@keyframes pulse-bulb-tech {
0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(59, 130, 246, 0)); }
50% { transform: scale(1.15); filter: drop-shadow(0 0 15px rgba(59, 130, 246, 1)); }
100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(59, 130, 246, 0)); }
}
.sp-blog-tip::before {
content: '\1F4A1';
position: absolute;
top: 25px;
left: 25px;
font-size: 35px;
line-height: 1;
animation: pulse-bulb-tech 3s infinite ease-in-out !important;
transform-origin: center center;
z-index: 10;
}
.sp-blog-tip span {
display: none !important;
}
.sp-blog-tip h3 {
color: #ffffff !important;
font-weight: 800 !important;
letter-spacing: 0.02em;
text-transform: uppercase;
font-size: 0.9rem !important;
margin-top: 0;
margin-bottom: 8px !important;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.sp-blog-tip p {
color: #e5e5e5 !important;
font-weight: 400 !important;
line-height: 1.7 !important;
font-size: 1rem;
margin-bottom: 0;
}
/* ==================================================================
TOOL LIST (DARK MODE / FULL-WIDTH)
================================================================== */
.sp-blog-tools {
background: #000000 !important;
background-color: #000000 !important;
border: 1px solid #333333 !important;
border-top: 4px solid #22c55e !important;
border-radius: 12px;
padding: 80px 2.5rem 3rem 2.5rem !important;
margin: 4em 0;
position: relative;
overflow: hidden;
box-shadow: 0 10px 40px -10px rgba(0,0,0,0.8) !important;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
color: rgba(255,255,255,0.55) !important;
}
.sp-blog-tools:hover {
transform: translateY(-3px);
box-shadow: 0 20px 50px -10px rgba(34, 197, 94, 0.18) !important;
border-color: #22c55e !important;
}
.sp-blog-tools * {
background-color: transparent !important;
}
.sp-blog-tools::before {
content: '';
position: absolute;
top: -120px;
left: -120px;
width: 340px;
height: 340px;
background: radial-gradient(circle, rgba(34, 197, 94, 0.18), rgba(34, 197, 94, 0));
pointer-events: none;
z-index: 0;
filter: blur(0.2px);
}
.sp-blog-tools::after {
content: 'TOOLS';
position: absolute;
top: 28px;
right: 25px;
font-family: monospace;
font-size: 0.75rem;
letter-spacing: 2px;
z-index: 10;
color: #a3a3a3 !important;
background: #171717 !important;
border: 1px solid #333333;
padding: 6px 12px;
border-radius: 4px;
box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}
.sp-blog-tools .sp-blog-tool-avatar {
position: absolute;
left: 2.5rem;
top: 28px;
width: 56px;
height: 56px;
border-radius: 50%;
background-image: url('https://affililabs.ai/wp-content/uploads/2026/01/Philipp-Bolender-von-affililabs.ai_.png');
background-size: cover;
background-position: center;
border: 2px solid rgba(34, 197, 94, 0.7);
box-shadow:
0 0 0 4px rgba(34, 197, 94, 0.15),
0 8px 25px rgba(0,0,0,0.8);
z-index: 12;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.sp-blog-tools:hover .sp-blog-tool-avatar {
transform: scale(1.05);
box-shadow:
0 0 0 4px rgba(34, 197, 94, 0.25),
0 12px 30px rgba(0,0,0,0.9);
}
.sp-blog-tools h3 {
color: #ffffff !important;
font-size: 1.3rem !important;
text-transform: uppercase;
font-weight: 800;
letter-spacing: 0.05em;
position: relative;
z-index: 2;
padding-left: 0 !important;
margin-top: 24px !important;
margin-bottom: 2.5rem !important;
padding-bottom: 18px;
border-bottom: 1px solid #333333;
}
.sp-blog-tools p {
line-height: 1.7;
margin-top: 0;
margin-bottom: 1.1rem;
font-size: 1.05rem;
position: relative;
z-index: 2;
width: 100%;
max-width: 100%;
color: rgba(255,255,255,0.55) !important;
}
.sp-blog-tools p > strong:first-child {
display: block;
width: fit-content;
font-family: monospace;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
padding: 6px 10px;
border-radius: 4px;
color: #ffffff !important;
margin-right: 0;
margin-bottom: 12px;
border: 1px solid rgba(34, 197, 94, 0.35);
background: rgba(34, 197, 94, 0.12) !important;
box-shadow: 0 0 10px rgba(34, 197, 94, 0.08);
}
.sp-blog-tools ul.sp-blog-safe-list {
position: relative;
z-index: 2;
margin: 1.4rem 0 1.6rem !important;
padding: 0 !important;
list-style: none !important;
width: 100%;
max-width: 100%;
}
.sp-blog-tools ul.sp-blog-safe-list li {
position: relative;
padding: 14px 14px 14px 44px !important;
margin: 12px 0 !important;
border: 1px solid rgba(255,255,255,0.10) !important;
border-radius: 10px;
background: rgba(255,255,255,0.03) !important;
box-shadow: 0 10px 25px -18px rgba(0,0,0,0.9);
line-height: 1.6;
font-size: 1.03rem;
width: 100%;
color: rgba(255,255,255,0.55) !important;
}
.sp-blog-tools ul.sp-blog-safe-list li::before {
content: '';
position: absolute;
left: 16px;
top: 18px;
width: 14px;
height: 14px;
border-radius: 4px;
background: rgba(34, 197, 94, 0.25);
border: 1px solid rgba(34, 197, 94, 0.55);
box-shadow: 0 0 12px rgba(34, 197, 94, 0.15);
}
.sp-blog-tools ul.sp-blog-safe-list li strong {
color: #ffffff !important;
font-weight: 800;
}
.sp-blog-tools a {
color: #86efac !important;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: rgba(134, 239, 172, 0.35);
}
.sp-blog-tools a:hover {
text-decoration-color: rgba(134, 239, 172, 0.9);
}
@media (max-width: 600px) {
.sp-blog-tools {
padding: 74px 1.4rem 2.2rem 1.4rem !important;
}
.sp-blog-tools::after {
right: auto;
left: 1.4rem;
top: 24px;
}
.sp-blog-tools .sp-blog-tool-avatar {
left: auto !important;
right: 1.4rem !important;
top: 20px;
width: 46px;
height: 46px;
}
.sp-blog-tools h3 {
margin-top: 16px !important;
margin-bottom: 2.2rem !important;
}
}
/* ==================================================================
CHECKLIST - CYBER GRID EDITION
================================================================== */
.Blog-Content .sp-blog-checklist-box,
.sp-blog-checklist-box {
background-color: #003349 !important;
background-image:
radial-gradient(ellipse at center, rgba(0, 51, 73, 0) 10%, rgba(0, 51, 73, 1) 90%),
linear-gradient(to right, rgba(64, 224, 208, 0.15) 1px, transparent 1px),
linear-gradient(to bottom, rgba(64, 224, 208, 0.15) 1px, transparent 1px) !important;
background-size: 100% 100%, 30px 30px, 30px 30px !important;
background-position: center center;
background-repeat: no-repeat, repeat, repeat;
border: 1px solid #4a6b7c !important;
border-top: 4px solid #3b82f6 !important;
border-radius: 12px;
padding: 2.5rem;
margin: 3em 0;
position: relative;
overflow: hidden;
box-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.7) !important;
transition: transform 0.3s ease;
color: #e5e5e5 !important;
z-index: 1;
}
.sp-blog-checklist-box > br,
.sp-blog-checklist-box > p:empty {
display: none !important;
}
.Blog-Content .sp-blog-checklist-box:hover,
.sp-blog-checklist-box:hover {
transform: translateY(-2px);
box-shadow: 0 20px 50px -10px rgba(59, 130, 246, 0.25) !important;
border-color: #3b82f6 !important;
}
.sp-blog-checklist-box::after {
content: '\1F4CB';
position: absolute;
top: -20px;
right: -20px;
font-size: 10rem;
opacity: 0.05;
filter: grayscale(100%);
pointer-events: none;
transform: rotate(15deg);
z-index: 0;
}
.Blog-Content .sp-blog-checklist-box h3,
.sp-blog-checklist-box h3 {
color: #ffffff !important;
font-size: 1.6rem !important;
line-height: 1.3 !important;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-top: 0;
margin-bottom: 2rem !important;
display: flex;
align-items: center;
border-bottom: 1px solid #4a6b7c;
padding-bottom: 15px;
position: relative;
z-index: 2;
}
.Blog-Content .sp-blog-checklist-box h3::before,
.sp-blog-checklist-box h3::before {
content: '';
display: inline-block;
width: 10px;
height: 10px;
background-color: #3b82f6;
border-radius: 50%;
margin-right: 15px;
box-shadow: 0 0 10px #3b82f6;
flex-shrink: 0;
}
.Blog-Content .sp-blog-checklist-box ul,
.sp-blog-checklist-box ul {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
position: relative;
z-index: 2;
}
.Blog-Content .sp-blog-checklist-box li,
.sp-blog-checklist-box li {
color: #e5e5e5 !important;
margin-bottom: 1.5rem !important;
position: relative !important;
padding-left: 3.5rem !important;
display: block !important;
line-height: 1.6 !important;
font-size: 1.05rem;
}
.Blog-Content .sp-blog-checklist-box li::before,
.sp-blog-checklist-box li::before {
content: '✓';
position: absolute;
left: 0;
top: 0;
width: 24px;
height: 24px;
background-color: rgba(59, 130, 246, 0.15);
border: 1px solid #3b82f6;
border-radius: 6px;
color: #3b82f6 !important;
-webkit-text-fill-color: #3b82f6 !important;
font-size: 14px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.Blog-Content .sp-blog-checklist-box li:hover::before,
.sp-blog-checklist-box li:hover::before {
background-color: #3b82f6;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
box-shadow: 0 0 15px rgba(59, 130, 246, 0.8);
}
.Blog-Content .sp-blog-checklist-box li > span:first-child,
.sp-blog-checklist-box li > span:first-child {
display: none !important;
}
.Blog-Content .sp-blog-checklist-box li strong,
.Blog-Content .sp-blog-checklist-box li b,
.sp-blog-checklist-box li strong {
color: #ffffff !important;
font-weight: 700;
white-space: normal !important;
display: inline !important;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
@media (max-width: 600px) {
.sp-blog-checklist-box {
padding: 1.5rem !important;
}
.Blog-Content .sp-blog-checklist-box li,
.sp-blog-checklist-box li {
padding-left: 2.5rem !important;
font-size: 1rem !important;
}
.Blog-Content .sp-blog-checklist-box li::before,
.sp-blog-checklist-box li::before {
width: 20px;
height: 20px;
font-size: 12px;
top: 2px;
}
}
/* ==================================================================
CLEAN MONOCHROME FAQ CARDS
================================================================== */
.sp-blog-faq-card {
background-color: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 20px !important;
padding: 35px !important;
margin-bottom: 25px !important;
box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.06) !important;
position: relative !important;
overflow: hidden;
transition: all 0.3s ease;
z-index: 1;
}
.sp-blog-faq-card::before {
display: none !important;
}
.sp-blog-faq-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.1) !important;
border-color: #cbd5e0 !important;
background-color: #fafbfc !important;
}
.sp-blog-faq-card p:first-child {
margin-bottom: 20px !important;
position: relative !important;
}
.sp-blog-faq-card p:first-child strong {
display: flex !important;
flex-direction: column;
justify-content: center;
position: relative !important;
padding-left: 57px !important;
min-height: 42px;
font-size: 1.2rem;
font-weight: 700;
color: #1a202c;
line-height: 1.4;
transition: color 0.3s ease;
}
.sp-blog-faq-card p strong a,
.sp-blog-faq-card p a {
display: inline !important;
position: static !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
}
.sp-blog-faq-card p:last-child {
color: #4a5568;
font-size: 1.05rem;
line-height: 1.7;
margin: 0;
padding-left: 57px;
}
.sp-blog-faq-card p:first-child strong::before {
content: 'Q';
position: absolute !important;
left: 0 !important;
top: 50% !important;
transform: translateY(-50%) !important;
display: flex;
justify-content: center;
align-items: center;
width: 42px;
height: 42px;
background: transparent;
border: 2px solid #1a202c;
color: #1a202c;
border-radius: 50%;
font-weight: 800;
font-size: 1.2rem;
transition: all 0.3s ease;
box-shadow: none !important;
}
.sp-blog-faq-card:hover p:first-child strong::before {
background: #1a202c;
color: #ffffff;
}
@media (max-width: 600px) {
.sp-blog-faq-card {
padding: 25px !important;
border-radius: 16px !important;
}
.sp-blog-faq-card p:first-child strong {
font-size: 1.1rem;
padding-left: 48px !important;
min-height: 36px;
}
.sp-blog-faq-card p:first-child strong::before {
width: 36px;
height: 36px;
font-size: 1rem;
border-width: 2px;
}
.sp-blog-faq-card p:last-child {
padding-left: 48px !important;
}
}
/* ==================================================================
WARNING BOX - CYBER GRID EDITION (RED VARIANT)
================================================================== */
.sp-blog-warning {
background-color: #003349 !important;
background-image:
radial-gradient(ellipse at center, rgba(0, 51, 73, 0) 20%, rgba(0, 51, 73, 1) 100%),
linear-gradient(to right, rgba(64, 224, 208, 0.15) 1px, transparent 1px),
linear-gradient(to bottom, rgba(64, 224, 208, 0.15) 1px, transparent 1px) !important;
background-size: 100% 100%, 30px 30px, 30px 30px !important;
background-position: center center;
background-repeat: no-repeat, repeat, repeat;
border: 1px solid #4a6b7c !important;
border-left: 4px solid #ff4d4d !important;
box-shadow: 0 10px 25px -5px rgba(255, 77, 77, 0.15),
0 8px 20px -2px rgba(0, 0, 0, 0.6) !important;
border-radius: 8px;
padding: 25px 25px 25px 80px !important;
position: relative;
overflow: hidden;
margin: 3em 0 !important;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sp-blog-warning:hover {
transform: translateY(-3px);
box-shadow: 0 20px 30px -5px rgba(255, 77, 77, 0.3),
0 8px 15px -2px rgba(0, 0, 0, 0.5) !important;
border-color: #ff4d4d !important;
}
@keyframes pulse-warning-tech {
0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255, 77, 77, 0)); }
50% { transform: scale(1.15); filter: drop-shadow(0 0 15px rgba(255, 77, 77, 1)); }
100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255, 77, 77, 0)); }
}
.sp-blog-warning::before {
content: '\26A0\FE0F';
position: absolute;
top: 25px;
left: 25px;
font-size: 35px;
line-height: 1;
animation: pulse-warning-tech 2s infinite ease-in-out !important;
transform-origin: center center;
z-index: 10;
}
.sp-blog-warning span {
display: none !important;
}
.sp-blog-warning h3 {
color: #ffffff !important;
font-family: sans-serif;
font-weight: 800 !important;
letter-spacing: 0.02em;
text-transform: uppercase;
font-size: 0.9rem !important;
margin-top: 0;
margin-bottom: 8px !important;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.sp-blog-warning p {
color: #e5e5e5 !important;
font-weight: 400 !important;
line-height: 1.7 !important;
font-size: 1rem;
margin-bottom: 0;
}
/* ==================================================================
DEFINITION BOX - CYBER GRID EDITION (GREEN VARIANT)
================================================================== */
.sp-blog-definition {
background-color: #003349 !important;
background-image:
radial-gradient(ellipse at center, rgba(0, 51, 73, 0) 20%, rgba(0, 51, 73, 1) 100%),
linear-gradient(to right, rgba(64, 224, 208, 0.15) 1px, transparent 1px),
linear-gradient(to bottom, rgba(64, 224, 208, 0.15) 1px, transparent 1px) !important;
background-size: 100% 100%, 30px 30px, 30px 30px !important;
background-position: center center;
background-repeat: no-repeat, repeat, repeat;
border: 1px solid #4a6b7c !important;
border-left: 4px solid #10b981 !important;
box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.15),
0 8px 20px -2px rgba(0, 0, 0, 0.6) !important;
border-radius: 8px;
padding: 25px 25px 25px 80px !important;
position: relative;
overflow: hidden;
margin: 3em 0 !important;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sp-blog-definition:hover {
transform: translateY(-3px);
box-shadow: 0 20px 30px -5px rgba(16, 185, 129, 0.3),
0 8px 15px -2px rgba(0, 0, 0, 0.5) !important;
border-color: #10b981 !important;
}
@keyframes pulse-book-tech {
0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(16, 185, 129, 0)); }
50% { transform: scale(1.15); filter: drop-shadow(0 0 15px rgba(16, 185, 129, 1)); }
100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(16, 185, 129, 0)); }
}
.sp-blog-definition::before {
content: '\1F4D6';
position: absolute;
top: 25px;
left: 25px;
font-size: 35px;
line-height: 1;
animation: pulse-book-tech 3s infinite ease-in-out !important;
transform-origin: center center;
z-index: 10;
}
.sp-blog-definition span {
display: none !important;
}
.sp-blog-definition h3 {
color: #ffffff !important;
font-family: sans-serif;
font-weight: 800 !important;
letter-spacing: 0.02em;
text-transform: uppercase;
font-size: 0.9rem !important;
margin-top: 0;
margin-bottom: 8px !important;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.sp-blog-definition p {
color: #e5e5e5 !important;
font-weight: 400 !important;
line-height: 1.7 !important;
font-size: 1rem;
margin-bottom: 0;
}
/* ==================================================================
EXPERT QUOTE - CYBER GRID EDITION (CYAN VARIANT)
================================================================== */
.sp-blog-quote {
background-color: #003349 !important;
background-image:
radial-gradient(ellipse at center, rgba(0, 51, 73, 0) 20%, rgba(0, 51, 73, 1) 100%),
linear-gradient(to right, rgba(64, 224, 208, 0.15) 1px, transparent 1px),
linear-gradient(to bottom, rgba(64, 224, 208, 0.15) 1px, transparent 1px) !important;
background-size: 100% 100%, 30px 30px, 30px 30px !important;
background-position: center center;
background-repeat: no-repeat, repeat, repeat;
border: 1px solid #4a6b7c !important;
border-left: 4px solid #40e0d0 !important;
box-shadow: 0 10px 25px -5px rgba(64, 224, 208, 0.15),
0 8px 20px -2px rgba(0, 0, 0, 0.6) !important;
border-radius: 8px;
padding: 25px 25px 25px 80px !important;
position: relative;
overflow: hidden;
margin: 3em 0 !important;
transition: transform 0.3s ease, box-shadow 0.3s ease;
color: #ffffff !important;
}
.sp-blog-quote:hover {
transform: translateY(-3px);
box-shadow: 0 20px 30px -5px rgba(64, 224, 208, 0.3),
0 8px 15px -2px rgba(0, 0, 0, 0.5) !important;
border-color: #40e0d0 !important;
}
@keyframes pulse-quote-tech {
0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(64, 224, 208, 0)); }
50% { transform: scale(1.15); filter: drop-shadow(0 0 15px rgba(64, 224, 208, 1)); }
100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(64, 224, 208, 0)); }
}
.sp-blog-quote::before {
content: '❝';
position: absolute;
top: 15px;
left: 20px;
font-size: 50px;
line-height: 1;
font-family: serif;
color: #40e0d0;
animation: pulse-quote-tech 4s infinite ease-in-out !important;
transform-origin: center center;
z-index: 10;
}
.sp-blog-quote span {
display: none !important;
}
.sp-blog-quote blockquote,
.sp-blog-quote blockquote p,
.sp-blog-quote p {
color: #ffffff !important;
font-weight: 400 !important;
font-style: italic;
line-height: 1.6 !important;
font-size: 1.05rem;
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
}
.sp-blog-quote cite {
display: block;
margin-top: 15px !important;
color: #ffffff !important;
font-family: sans-serif;
font-weight: 700 !important;
letter-spacing: 0.05em;
text-transform: uppercase;
font-size: 0.85rem !important;
font-style: normal !important;
border-left: 2px solid #40e0d0;
padding-left: 10px;
}
/* =========================================
THE "ULTIMATE" PROMPT BOX
========================================= */
.sp-blog-prompt {
background-color: #09090b !important;
background-image:
radial-gradient(circle at top right, rgba(59, 130, 246, 0.15), transparent 40%),
radial-gradient(circle at bottom left, rgba(139, 92, 246, 0.1), transparent 40%) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
border-radius: 16px !important;
margin: 40px 0 !important;
box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5) !important;
overflow: hidden !important;
position: relative !important;
font-family: 'JetBrains Mono', monospace !important;
max-width: 100% !important;
}
.sp-blog-prompt-header {
background: rgba(255, 255, 255, 0.03) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
padding: 14px 24px !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
position: relative !important;
}
.sp-blog-prompt-header::after {
content: '➔';
position: absolute;
right: 140px;
top: 50%;
transform: translateY(-50%);
color: #3b82f6 !important;
font-size: 20px !important;
font-weight: bold !important;
line-height: 1 !important;
text-shadow: 0 0 10px rgba(59, 130, 246, 0.8);
pointer-events: none;
animation: arrow-bounce 1s infinite alternate cubic-bezier(0.5, 0, 0.5, 1);
}
@keyframes arrow-bounce {
0% { right: 145px; opacity: 0.5; }
100% { right: 135px; opacity: 1; }
}
@media (max-width: 600px) {
.sp-blog-prompt-header::after {
right: 100px !important;
font-size: 16px !important;
}
}
.sp-blog-copy-btn {
position: relative !important;
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
color: white !important;
border: none !important;
padding: 8px 18px !important;
border-radius: 8px !important;
font-size: 11px !important;
font-weight: 700 !important;
cursor: pointer !important;
overflow: hidden !important;
z-index: 2 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
line-height: normal !important;
}
.sp-blog-prompt-label {
font-size: 11px !important;
font-weight: 800 !important;
color: #94a3b8 !important;
text-transform: uppercase !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
.sp-blog-prompt-label::before {
content: '';
display: block !important;
width: 8px !important;
height: 8px !important;
background-color: #3b82f6 !important;
border-radius: 50% !important;
box-shadow: 0 0 10px #3b82f6 !important;
animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(59, 130, 246, 0); }
}
.sp-blog-prompt-content,
.sp-blog-prompt-content p,
.sp-blog-prompt-content ul,
.sp-blog-prompt-content li,
.sp-blog-prompt-content span {
background: transparent !important;
padding: 0 !important;
color: #e2e8f0 !important;
font-family: 'JetBrains Mono', monospace !important;
font-size: 15px !important;
line-height: 1.7 !important;
white-space: pre-wrap !important;
}
div.sp-blog-prompt-content {
padding: 24px !important;
}
.sp-blog-prompt-content a {
color: #3b82f6 !important;
text-decoration: underline;
}
/* ==================================================================
INTERNAL DATA TABLE - CYBER GRID EDITION
================================================================== */
.sp-blog-data-table-wrapper {
background-color: #003349 !important;
background-image:
radial-gradient(ellipse at center, rgba(0, 51, 73, 0) 10%, rgba(0, 51, 73, 1) 90%),
linear-gradient(to right, rgba(64, 224, 208, 0.15) 1px, transparent 1px),
linear-gradient(to bottom, rgba(64, 224, 208, 0.15) 1px, transparent 1px) !important;
background-size: 100% 100%, 30px 30px, 30px 30px !important;
background-position: center center;
background-repeat: no-repeat, repeat, repeat;
border: 1px solid #4a6b7c !important;
border-top: 4px solid #000000 !important;
border-radius: 12px;
padding: 3rem 2rem !important;
margin: 4em 0;
position: relative;
overflow: hidden;
box-shadow: 0 15px 40px -10px rgba(0,0,0,0.8) !important;
transition: transform 0.3s ease, box-shadow 0.3s ease;
color: #e5e5e5 !important;
}
.sp-blog-data-table-wrapper:hover {
transform: translateY(-3px);
box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 1) !important;
border-color: #000000 !important;
}
.sp-blog-data-table-wrapper::after {
content: 'INTERNAL DATA';
position: absolute;
top: 0;
right: 0;
font-family: monospace;
font-size: 0.7rem;
letter-spacing: 2px;
z-index: 10;
color: #a3a3a3 !important;
background: #000000 !important;
border-bottom: 1px solid #333333;
border-left: 1px solid #333333;
padding: 6px 15px;
border-bottom-left-radius: 8px;
}
.sp-blog-data-table-title {
color: #ffffff !important;
font-size: 1.2rem !important;
text-transform: uppercase;
font-weight: 800;
margin-top: 0 !important;
margin-bottom: 1.5rem !important;
letter-spacing: 0.05em;
border-bottom: 1px solid #4a6b7c;
padding-bottom: 15px;
display: inline-block;
padding-right: 20px;
}
.sp-blog-table-scroll {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.sp-blog-data-table {
width: 100%;
border-collapse: collapse;
font-family: 'Courier New', Courier, monospace;
font-size: 0.95rem;
min-width: 600px;
}
.sp-blog-data-th {
text-align: left;
padding: 12px 15px;
color: #40e0d0 !important;
text-transform: uppercase;
font-weight: 700;
font-size: 0.8rem;
border-bottom: 2px solid #4a6b7c;
letter-spacing: 1px;
}
.sp-blog-data-td, .sp-blog-data-td-label {
padding: 12px 15px;
border-bottom: 1px solid rgba(74, 107, 124, 0.3);
color: #e5e5e5 !important;
vertical-align: top;
}
.sp-blog-data-td-label {
font-weight: 700;
color: #ffffff !important;
background-color: rgba(0, 0, 0, 0.2);
white-space: nowrap;
}
.sp-blog-data-table tbody tr:hover {
background-color: rgba(64, 224, 208, 0.05) !important;
}
.sp-blog-data-table tbody tr:last-child td {
border-bottom: none;
}
@media (max-width: 600px) {
.sp-blog-data-table-wrapper {
padding: 2rem 1rem !important;
}
.sp-blog-data-table-title {
font-size: 1rem !important;
}
}
/* ==========================================================================
VIRAL CHART STYLES (TREND, RADAR, FUNNEL)
========================================================================== */
.sp-blog-chart-audit {
background: linear-gradient(135deg, #0f172a 0%, #020617 100%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 24px;
padding: 40px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255,255,255,0.05);
backdrop-filter: blur(12px);
margin: 60px 0;
color: #ffffff !important;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
overflow: hidden;
}
.sp-blog-chart-header {
text-align: center;
margin-bottom: 30px;
}
.sp-blog-chart-title {
margin: 0 !important;
font-size: 2.2rem !important;
font-weight: 800 !important;
line-height: 1.2 !important;
background: -webkit-linear-gradient(45deg, #10b981, #3b82f6) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
.sp-blog-chart-subtitle {
color: #cbd5e1 !important;
font-size: 1.1rem !important;
margin-top: 10px !important;
margin-bottom: 0 !important;
font-weight: 500 !important;
line-height: 1.5 !important;
}
.sp-blog-chart-canvas {
min-height: 500px;
width: 100%;
}
.sp-blog-chart-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 25px;
padding-top: 15px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
font-size: 0.85rem;
}
.sp-blog-chart-source {
color: #94a3b8 !important;
font-style: italic !important;
}
.sp-blog-chart-branding {
font-weight: 800 !important;
color: #ffffff !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
}
@media (max-width: 768px) {
.sp-blog-chart-audit { padding: 25px 15px; margin: 40px 0; }
.sp-blog-chart-title { font-size: 1.6rem !important; }
.sp-blog-chart-canvas { min-height: 400px; }
.sp-blog-chart-footer { flex-direction: column; gap: 12px; text-align: center; }
}
/* ==========================================================================
DYNAMIC WIDGET - GODMODE CSS (Stealth SaaS Edition - FULLWIDTH)
========================================================================== */
.sp-blog-calc br,
.sp-blog-calc > p:empty,
.sp-blog-calc-inputs p:empty,
.sp-blog-calc-results p:empty {
display: none !important;
margin: 0 !important;
padding: 0 !important;
height: 0 !important;
}
.sp-blog-calc {
position: relative !important;
background: linear-gradient(145deg, rgba(20, 25, 40, 0.90) 0%, rgba(5, 5, 10, 0.98) 100%) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 24px !important;
padding: clamp(32px, 5vw, 48px) !important;
margin: 48px 0 !important;
width: 100% !important;
max-width: 100% !important;
box-shadow:
0 20px 40px -10px rgba(0, 0, 0, 0.8),
0 0 30px rgba(0, 87, 255, 0.08) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
font-family: inherit !important;
overflow: hidden !important;
transition: box-shadow 0.3s ease !important;
}
.sp-blog-calc::before {
content: '' !important;
position: absolute !important;
top: 0 !important; left: 0 !important; right: 0 !important;
height: 4px !important;
background: linear-gradient(90deg, #0057ff, #00d8ff, #7c3aed, #0057ff) !important;
background-size: 200% auto !important;
animation: pl-gradient-flow-godmode 3s linear infinite !important;
z-index: 10 !important;
}
@keyframes pl-gradient-flow-godmode {
0% { background-position: 0% center; }
100% { background-position: 200% center; }
}
.sp-blog-calc-header {
margin-bottom: 32px !important;
text-align: center !important;
position: relative !important;
z-index: 2 !important;
}
.sp-blog-calc-title {
font-size: clamp(1.6rem, 4vw, 2rem) !important;
font-weight: 900 !important;
color: #ffffff !important;
margin: 0 0 12px 0 !important;
letter-spacing: -0.02em !important;
text-wrap: balance !important;
}
.sp-blog-calc-desc {
font-size: 1.05rem !important;
color: rgba(255, 255, 255, 0.7) !important;
line-height: 1.6 !important;
margin: 0 !important;
}
.sp-blog-calc-inputs {
position: relative !important;
z-index: 10 !important;
display: flex !important;
flex-direction: column !important;
gap: 24px !important;
margin-bottom: 32px !important;
}
.sp-blog-input-group {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
text-align: left !important;
}
.sp-blog-label {
font-size: 0.85rem !important;
font-weight: 700 !important;
color: rgba(255, 255, 255, 0.85) !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
}
.sp-blog-calc input,
.sp-blog-calc textarea,
.sp-blog-calc select {
width: 100% !important;
padding: 16px 20px !important;
font-size: 1.1rem !important;
color: #ffffff !important;
background-color: #0b1120 !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
border-radius: 12px !important;
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8) !important;
pointer-events: auto !important;
position: relative !important;
z-index: 50 !important;
-webkit-appearance: none !important;
box-sizing: border-box !important;
font-family: inherit !important;
}
.sp-blog-calc input::placeholder {
color: rgba(255, 255, 255, 0.3) !important;
}
.sp-blog-calc input:hover {
border-color: rgba(0, 87, 255, 0.5) !important;
}
.sp-blog-calc input:focus {
outline: none !important;
background-color: #050a14 !important;
border-color: #0057ff !important;
box-shadow: 0 0 0 4px rgba(0, 87, 255, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}
.sp-blog-btn-primary,
.sp-blog-calc button#sp-blog-calc-btn,
.sp-blog-calc a#sp-blog-calc-btn {
position: relative !important;
z-index: 50 !important;
pointer-events: auto !important;
width: 100% !important;
padding: 18px 24px !important;
font-size: 1.1rem !important;
font-weight: 800 !important;
color: #ffffff !important;
background: linear-gradient(135deg, #0057ff 0%, #003ac7 100%) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
border-radius: 12px !important;
cursor: pointer !important;
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1) !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
box-shadow:
inset 0 1px 1px rgba(255, 255, 255, 0.3),
0 10px 20px -5px rgba(0, 87, 255, 0.5),
0 0 20px rgba(0, 87, 255, 0.3) !important;
}
.sp-blog-btn-primary:hover:not(:disabled),
.sp-blog-calc #sp-blog-calc-btn:hover:not(:disabled) {
transform: translateY(-2px) !important;
background: linear-gradient(135deg, #1a6aff 0%, #0044eb 100%) !important;
box-shadow:
inset 0 1px 1px rgba(255, 255, 255, 0.4),
0 15px 25px -5px rgba(0, 87, 255, 0.6),
0 0 35px rgba(0, 87, 255, 0.5) !important;
}
.sp-blog-btn-primary:active:not(:disabled),
.sp-blog-calc #sp-blog-calc-btn:active:not(:disabled) {
transform: translateY(1px) !important;
}
.sp-blog-btn-primary:disabled,
.sp-blog-calc #sp-blog-calc-btn:disabled {
opacity: 0.6 !important;
cursor: not-allowed !important;
transform: none !important;
box-shadow: none !important;
}
.sp-blog-calc-results,
#pl-result-box {
display: none;
position: relative !important;
z-index: 2 !important;
background: rgba(0, 87, 255, 0.05) !important;
border-radius: 16px !important;
padding: 32px 24px !important;
margin-top: 32px !important;
text-align: center !important;
border: 1px dashed rgba(0, 87, 255, 0.3) !important;
animation: pl-slide-down-godmode 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards !important;
}
@keyframes pl-slide-down-godmode {
0% { opacity: 0; transform: translateY(-15px) scale(0.98); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
.sp-blog-result-headline {
font-size: 0.85rem !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
color: #0057ff !important;
font-weight: 800 !important;
margin: 0 0 12px 0 !important;
}
.sp-blog-result-value {
font-size: clamp(2.5rem, 6vw, 4rem) !important;
font-weight: 900 !important;
line-height: 1.1 !important;
margin: 0 0 12px 0 !important;
letter-spacing: -0.02em !important;
color: #ffffff !important;
text-shadow: 0 0 25px rgba(0, 87, 255, 0.6) !important;
}
.sp-blog-result-value.text-mode {
font-size: 1.5rem !important;
font-weight: 700 !important;
white-space: pre-wrap !important;
color: #ffffff !important;
text-shadow: none !important;
background: none !important;
-webkit-text-fill-color: #ffffff !important;
}
.sp-blog-result-text {
font-size: 1.05rem !important;
color: rgba(255, 255, 255, 0.7) !important;
margin: 0 !important;
}
@media (max-width: 640px) {
.sp-blog-calc {
padding: 24px 20px !important;
margin: 32px 0 !important;
border-radius: 20px !important;
}
.sp-blog-calc-title { font-size: 1.6rem !important; }
.sp-blog-calc-desc { font-size: 0.95rem !important; }
.sp-blog-calc input { padding: 14px 16px !important; font-size: 1rem !important; }
.sp-blog-btn-primary, .sp-blog-calc #sp-blog-calc-btn { padding: 16px 20px !important; font-size: 1rem !important; }
.sp-blog-calc-results, #pl-result-box { padding: 24px 16px !important; margin-top: 24px !important; }
.sp-blog-result-value.text-mode { font-size: 1.25rem !important; }
}
/* ==========================================================================
MICRO-QUIZ - GODMODE CSS
========================================================================== */
.sp-blog-quiz br,
.sp-blog-quiz-header br,
.sp-blog-quiz-options br,
.sp-blog-quiz-header p,
.sp-blog-quiz-options p,
.sp-blog-quiz > p {
display: none !important;
margin: 0 !important;
padding: 0 !important;
height: 0 !important;
}
.sp-blog-quiz {
position: relative !important;
background: linear-gradient(145deg, rgba(20, 25, 40, 0.90) 0%, rgba(5, 5, 10, 0.98) 100%) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-top: 3px solid #0057ff !important;
border-radius: 24px !important;
padding: clamp(32px, 5vw, 40px) !important;
margin: 48px 0 !important;
box-shadow:
0 20px 40px -10px rgba(0, 0, 0, 0.8),
0 0 30px rgba(0, 87, 255, 0.10) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
overflow: hidden !important;
font-family: inherit !important;
}
.sp-blog-quiz::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
background: radial-gradient(circle at top center, rgba(0, 87, 255, 0.15) 0%, transparent 60%) !important;
pointer-events: none !important;
z-index: 0 !important;
}
.sp-blog-quiz-header {
position: relative !important;
z-index: 2 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
margin: 0 0 32px 0 !important;
padding: 0 !important;
}
.sp-blog-quiz-badge {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: #0d1b3e !important;
border: 1px solid #1a56db !important;
box-shadow: inset 0 0 10px rgba(0, 87, 255, 0.2) !important;
color: #ffffff !important;
text-shadow: none !important;
font-size: 0.75rem !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 0.12em !important;
padding: 8px 20px !important;
border-radius: 999px !important;
margin: 0 0 16px 0 !important;
}
.sp-blog-quiz-question,
.sp-blog-quiz-header h3 {
margin: 0 !important;
padding: 0 !important;
font-size: clamp(1.4rem, 3.5vw, 1.8rem) !important;
font-weight: 900 !important;
color: #ffffff !important;
line-height: 1.25 !important;
letter-spacing: -0.02em !important;
max-width: 700px !important;
text-wrap: balance !important;
}
.sp-blog-quiz-options {
position: relative !important;
z-index: 2 !important;
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
width: 100% !important;
max-width: 650px !important;
margin: 0 auto !important;
padding: 0 !important;
}
.sp-blog-quiz-btn {
width: 100% !important;
margin: 0 !important;
text-align: left !important;
padding: 16px 24px !important;
font-size: 1rem !important;
font-weight: 600 !important;
line-height: 1.4 !important;
background: rgba(255, 255, 255, 0.03) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
color: rgba(255, 255, 255, 0.85) !important;
border-radius: 14px !important;
outline: none !important;
cursor: pointer !important;
position: relative !important;
overflow: hidden !important;
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1) !important;
}
.sp-blog-quiz-btn:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.08) !important;
border-color: rgba(0, 87, 255, 0.4) !important;
color: #ffffff !important;
transform: translateX(4px) !important;
box-shadow: 0 0 20px rgba(0, 87, 255, 0.1) !important;
}
.sp-blog-quiz-btn:disabled {
cursor: default !important;
opacity: 0.5 !important;
}
.sp-blog-quiz-btn.sp-is-correct {
background: rgba(16, 185, 129, 0.15) !important;
border-color: #10b981 !important;
color: #10b981 !important;
text-shadow: 0 0 10px rgba(16, 185, 129, 0.4) !important;
opacity: 1 !important;
transform: scale(1.02) !important;
box-shadow:
0 0 20px rgba(16, 185, 129, 0.2),
inset 0 0 10px rgba(16, 185, 129, 0.1) !important;
}
.sp-blog-quiz-btn.sp-is-wrong {
background: rgba(239, 68, 68, 0.15) !important;
border-color: #ef4444 !important;
color: #ef4444 !important;
text-shadow: 0 0 10px rgba(239, 68, 68, 0.4) !important;
opacity: 1 !important;
}
.sp-blog-quiz-explanation {
display: none;
position: relative !important;
z-index: 2 !important;
margin: 24px auto 0 !important;
max-width: 650px !important;
padding: 24px !important;
background: linear-gradient(145deg, rgba(0, 87, 255, 0.08) 0%, rgba(5, 15, 30, 0.6) 100%) !important;
border: 1px solid rgba(0, 87, 255, 0.3) !important;
border-top: 2px solid #0057ff !important;
border-radius: 16px !important;
box-shadow:
0 15px 30px -5px rgba(0, 0, 0, 0.5),
0 0 30px rgba(0, 87, 255, 0.15),
inset 0 0 15px rgba(0, 87, 255, 0.05) !important;
animation: pl-fade-in-down 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards !important;
}
.sp-blog-quiz-msg-correct,
.sp-blog-quiz-msg-wrong {
display: none;
font-weight: 800 !important;
margin-right: 6px !important;
font-size: 1.05rem !important;
}
.sp-blog-quiz-msg-correct { color: #10b981 !important; text-shadow: 0 0 8px rgba(16, 185, 129, 0.4) !important; }
.sp-blog-quiz-msg-wrong { color: #ef4444 !important; text-shadow: 0 0 8px rgba(239, 68, 68, 0.4) !important; }
.sp-blog-quiz-explanation-text,
.sp-blog-quiz-explanation-text p {
margin: 0 !important;
padding: 0 !important;
font-size: 1.05rem !important;
color: rgba(255, 255, 255, 0.9) !important;
line-height: 1.6 !important;
}
@keyframes pl-fade-in-down {
0% { opacity: 0; transform: translateY(-15px); }
100% { opacity: 1; transform: translateY(0); }
}
@media (max-width: 640px) {
.sp-blog-quiz {
padding: 24px 16px !important;
border-radius: 20px !important;
margin: 32px 0 !important;
}
.sp-blog-quiz-header {
margin: 0 0 24px 0 !important;
}
.sp-blog-quiz-question,
.sp-blog-quiz-header h3 {
font-size: clamp(1.3rem, 6vw, 1.5rem) !important;
text-wrap: normal !important;
}
.sp-blog-quiz-btn {
padding: 16px !important;
font-size: 0.95rem !important;
}
.sp-blog-quiz-explanation {
padding: 20px !important;
margin-top: 20px !important;
}
}
/* ==========================================================================
UNCENSORED TRUTH BOX (BLUR REVEAL)
========================================================================== */
.sp-blog-truth {
background: #ffffff;
border: 1px solid #e2e8f0;
border-left: 4px solid #dc2626;
border-radius: 16px;
padding: 25px 30px;
margin: 40px 0;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
font-family: 'Inter', sans-serif;
}
.sp-blog-truth-header {
margin-bottom: 15px;
}
.sp-blog-truth-title {
display: flex;
align-items: center;
gap: 10px;
font-size: 1.125rem;
font-weight: 800;
color: #0f172a;
margin: 0;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.sp-blog-truth-title::before {
content: "\1F441\FE0F";
font-size: 1.25rem;
}
.sp-blog-truth-body {
position: relative;
border-radius: 8px;
overflow: hidden;
}
.sp-blog-truth-content {
font-size: 1rem;
color: #334155;
line-height: 1.6;
margin: 0;
transition: filter 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
}
.sp-blog-truth-content p {
margin: 0;
}
.sp-blog-truth-content.sp-is-blurred {
filter: blur(6px);
user-select: none;
pointer-events: none;
opacity: 0.6;
}
.sp-blog-truth-overlay {
position: absolute;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
background: rgba(255, 255, 255, 0.3);
z-index: 10;
transition: opacity 0.4s ease, visibility 0.4s ease;
}
.sp-blog-truth-overlay.sp-is-hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.sp-blog-truth-btn {
background: #dc2626;
color: #ffffff;
border: none;
padding: 12px 24px;
font-size: 0.95rem;
font-weight: 700;
border-radius: 30px;
cursor: pointer;
box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
animation: pl-pulse-red 2s infinite;
transition: transform 0.2s ease, background 0.2s ease;
}
.sp-blog-truth-btn:hover {
background: #b91c1c;
transform: scale(1.05);
animation: none;
}
@keyframes pl-pulse-red {
0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
70% { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); }
100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}
/* ==========================================================================
E-E-A-T METHODOLOGY BOX (SEO AUTHORITY)
========================================================================== */
.sp-blog-eeat {
background: #0f172a;
color: #f8fafc;
border-radius: 12px;
padding: 30px;
margin: 40px 0;
font-family: 'Inter', -apple-system, sans-serif;
box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.4);
border: 1px solid #334155;
}
.sp-blog-eeat-header {
margin-bottom: 25px;
border-bottom: 1px solid #334155;
padding-bottom: 15px;
}
.sp-blog-eeat-badge {
display: inline-block;
background: #3b82f6;
color: #ffffff;
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 4px 10px;
border-radius: 4px;
margin-bottom: 10px;
}
.sp-blog-eeat-title {
font-size: 1.25rem;
font-weight: 700;
color: #ffffff !important;
margin: 0;
}
.sp-blog-eeat-title::before {
content: "\1F52C";
margin-right: 10px;
}
.sp-blog-eeat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 20px;
margin-bottom: 25px;
}
.sp-blog-eeat-stat {
display: flex;
flex-direction: column;
background: #1e293b;
padding: 15px;
border-radius: 8px;
text-align: center;
border: 1px solid #334155;
}
.sp-blog-eeat-number {
font-size: 1.75rem;
font-weight: 900;
color: #60a5fa;
margin-bottom: 5px;
}
.sp-blog-eeat-label {
font-size: 0.8rem;
color: #94a3b8;
font-weight: 500;
text-transform: uppercase;
}
.sp-blog-eeat-promise {
background: rgba(59, 130, 246, 0.1);
border-left: 3px solid #3b82f6;
padding: 15px 20px;
border-radius: 0 8px 8px 0;
}
.sp-blog-eeat-promise p {
margin: 0;
font-size: 0.9rem;
line-height: 1.5;
color: #e2e8f0 !important;
}
.sp-blog-eeat-promise strong {
color: #ffffff !important;
}
/* ── Block 5 ── */
[bt_hidden=true] {
display: none !important;
visibility: hidden !important;
height: 0 !important;
}
/* Hide all variations by default - prevents flicker */
[bt-variation]:not(.bt-show-variation),
[data-bt-variation]:not(.bt-show-variation),
[class*='ab-var-']:not(.bt-show-variation) {
opacity: 0 !important;
pointer-events: none !important;
}
/* Show the first variation of each experiment - prevents CLS */
[bt-variation].bt-first-variation:not(.bt-show-variation),
[data-bt-variation].bt-first-variation:not(.bt-show-variation),
[class*='ab-var-'].bt-first-variation {
opacity: 1 !important;
pointer-events: auto !important;
}
/* After test setup complete, fully remove non-selected variations from DOM */
body.ab-test-setup-complete [bt-variation]:not(.bt-show-variation),
body.ab-test-setup-complete [data-bt-variation]:not(.bt-show-variation),
body.ab-test-setup-complete [class*='ab-var-']:not(.bt-show-variation) {
display: none !important;
}
/* Show selected variation */
.bt-show-variation {
opacity: 1 !important;
pointer-events: auto !important;
}
/* ── Block 6 ── */
sc-button::part(base) {
border-radius:0px;
font-family: geomanist;
box-shadow: 0px 10px 50px -10px rgba(0, 87, 255, 0.3);
}
sc-button::part(base):hover {
background: #0057ff;
}
/* ── Block 7 ── */
.total-price scratch-price hydrated {
display:none !important;
}
/* ── Block 8 ── */
/* ==================================================================
RANK MATH FAQ - MASTER DARK EDITION (Final: Symmetrical & Clean)
================================================================== */
/* 1. RESET & CONTAINER SETUP */
#rank-math-faq {
margin: 4em 0;
}
#rank-math-faq .rank-math-list-item {
background: var(--sp-blog-card-bg) !important;
border: 1px solid var(--sp-blog-border) !important;
border-top: 1px solid rgba(255,255,255,0.15) !important;
border-left: 3px solid var(--sp-blog-blue) !important;
border-bottom: 1px solid var(--sp-blog-border) !important;
border-radius: 12px !important;
margin-bottom: 18px !important;
margin-top: 0 !important;
box-shadow: var(--glow-blue) !important;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
position: relative;
overflow: hidden;
z-index: 1;
}
/* Noise Texture Overlay */
#rank-math-faq .rank-math-list-item::before {
content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.12;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
background-size: 260px 260px; mix-blend-mode: overlay; z-index: 0;
}
/* Hover Effect */
#rank-math-faq .rank-math-list-item:hover {
transform: translateY(-3px);
box-shadow: var(--glow-blue-strong) !important;
border-color: rgba(0, 87, 255, 0.35) !important;
}
/* 2. THE QUESTION (Header) */
#rank-math-faq .rank-math-list-item h3.rank-math-question {
cursor: pointer;
position: relative;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
text-align: left !important;
/* 18px Top Padding ist der Referenzwert für Symmetrie */
padding: 18px 24px !important;
/* WICHTIG: Überschreibt Theme-Margins */
margin: 0 !important;
font-weight: 700 !important;
font-size: 1.1rem !important;
color: var(--sp-blog-text) !important;
line-height: 1.4 !important;
z-index: 2;
transition: padding-bottom 0.2s ease;
}
/* Wenn offen: Abstand nach unten verringern, damit Text näher dran ist */
#rank-math-faq .rank-math-list-item h3.rank-math-question.collapse {
padding-bottom: 8px !important;
}
/* --- 'Q' ICON --- */
#rank-math-faq .rank-math-list-item h3.rank-math-question::before {
content: 'Q';
display: flex; justify-content: center; align-items: center;
flex-shrink: 0 !important;
width: 38px; height: 38px;
margin-right: 18px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 50%;
color: #fff !important;
font-weight: 800;
font-size: 0.95rem;
box-shadow: 0 0 15px rgba(0,0,0,0.5);
transition: all 0.3s ease;
}
#rank-math-faq .rank-math-list-item h3.rank-math-question:hover::before,
#rank-math-faq .rank-math-list-item h3.rank-math-question.collapse::before {
background: var(--sp-blog-blue);
box-shadow: 0 0 20px rgba(0, 87, 255, 0.5);
border-color: var(--sp-blog-blue);
}
/* --- PFEIL --- */
#rank-math-faq .rank-math-list-item h3.rank-math-question::after {
content: '';
display: block;
width: 8px; height: 8px;
margin-left: auto !important;
flex-shrink: 0 !important;
border-right: 2px solid rgba(255,255,255,0.5);
border-bottom: 2px solid rgba(255,255,255,0.5);
transform: rotate(45deg);
transition: transform 0.3s ease, border-color 0.3s ease;
}
#rank-math-faq .rank-math-list-item h3.rank-math-question.collapse::after {
transform: rotate(225deg) !important;
border-color: var(--sp-blog-blue);
margin-top: 4px;
}
/* 3. THE ANSWER (Body Text) - Symmetrie Fix */
#rank-math-faq .rank-math-answer {
/* Bottom Padding = 18px (Gleich wie Header Top) */
padding: 0 24px 18px 80px !important;
text-align: left !important;
color: var(--sp-blog-body) !important;
font-size: 1rem !important;
line-height: 1.6 !important;
position: relative; z-index: 2;
}
/* Standard Margin für Absätze im Text */
#rank-math-faq .rank-math-answer p {
margin-bottom: 1em !important;
margin-top: 0 !important;
}
/* 🔥 SYMMETRIE-FIX: Der allerletzte Absatz darf keinen Margin haben */
/* Sonst entsteht unten ein doppelter Abstand (Padding + Margin) */
#rank-math-faq .rank-math-answer > :last-child,
#rank-math-faq .rank-math-answer p:last-child {
margin-bottom: 0 !important;
}
/* Mobile Anpassung */
@media (max-width: 600px) {
#rank-math-faq .rank-math-list-item h3.rank-math-question {
padding: 16px !important;
}
#rank-math-faq .rank-math-list-item h3.rank-math-question.collapse {
padding-bottom: 6px !important;
}
#rank-math-faq .rank-math-list-item h3.rank-math-question::before {
width: 32px; height: 32px;
margin-right: 12px;
font-size: 0.85rem;
}
#rank-math-faq .rank-math-answer {
/* Mobile Symmetrie: 16px Top (Header) = 16px Bottom (Answer) */
padding: 0 16px 16px 16px !important;
}
}
/* ── Block 9 ── */
.grecaptcha-badge {
display: none !important;
}
/* ── Block 10 ── */
/* CTA BUTTON PULSE START */
.elButton, .GoalButton{
animation: glow 1800ms infinite;
border-radius: 8px; /* Abgerundete Ecken */
}
@keyframes glow {
0% {
box-shadow: #0057ff 0 0 0 0;
}
75% {
box-shadow: #0057ff00 0 0 0 10px;
}
}
/* CTA BUTTON PULSE END */
/* ── Block 11 ── */
/* ==================================================================
YOUTUBE EMBED - FINAL MIX (Hero Clean / Body Glow & Cinematic Breakout)
================================================================== */
/* 1. SHARED BASE STYLES (Gilt für BEIDE) */
.sp-blog-yt-wrap,
.hero-yt-embed-wrapper {
position: relative;
width: 100%;
max-width: 100%;
aspect-ratio: 16 / 9;
z-index: 1;
/* HINTERGRUND & RAHMEN */
background: #000;
border-radius: 16px !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
transform: translateZ(0);
}
/* 2. NUR CONTENT-VIDEOS (Unten im Text) */
.sp-blog-yt-wrap {
/* Der schöne 60px Glow */
box-shadow: 0 0 60px rgba(0, 87, 255, 0.25) !important;
overflow: visible !important;
/* Abstand nach oben und unten für "Luft" (wie bei den Bildern) */
margin: 2rem 0 !important;
}
/* 🔥 NEU: CINEMATIC BREAKOUT FÜR CONTENT-VIDEOS (Desktop Only) 🔥 */
/* Das macht das Video im Text breiter als den Text selbst */
@media (min-width: 1024px) {
.sp-blog-yt-wrap {
/* Das Video wird 10% breiter als der Textblock */
width: 110% !important;
max-width: 110% !important;
/* Zieht das Video nach links, damit es wieder mittig ist */
margin-left: -5% !important;
}
}
/* 3. NUR HERO-VIDEO (Oben) */
.hero-yt-embed-wrapper {
/* Clean Look: Kein Glow, kein Overflow, kein extra Margin */
box-shadow: none !important;
overflow: hidden !important;
margin-bottom: 0 !important;
/* WICHTIG: Das Hero-Video bleibt auf 100% Breite, kein Breakout! */
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
}
/* 4. DAS VIDEO (Iframe Inhalt für BEIDE) */
.sp-blog-yt,
.hero-yt-embed-wrapper iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
/* RUNDUNG */
border-radius: 15px !important;
clip-path: inset(0 round 15px);
}
/* ── Block 12 ── */
/* ==================================================================
SAM PROMPTBOX - MASTER DARK TERMINAL STYLE (Text Wrap Version)
================================================================== */
/* 1. Der Container (Terminal Window) */
.sp-blog-promptbox-v2 {
background: linear-gradient(135deg, #080808 0%, #121212 100%) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 16px !important;
margin: 32px 0 !important;
box-shadow: 0 0 20px rgba(0, 87, 255, 0.05) !important;
position: relative !important;
overflow: hidden !important;
z-index: 1;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Noise Texture Overlay */
.sp-blog-promptbox-v2::before {
content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.12;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
background-size: 260px 260px; mix-blend-mode: overlay; z-index: 0;
}
/* Hover Lift */
.sp-blog-promptbox-v2:hover {
transform: translateY(-2px);
box-shadow: 0 10px 40px rgba(0, 87, 255, 0.12) !important;
border-color: rgba(0, 87, 255, 0.35) !important;
}
/* 2. Header Bar (Top Leiste) */
.sp-blog-promptbox-v2__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 12px 20px !important;
background: rgba(255, 255, 255, 0.02) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
position: relative; z-index: 2;
}
/* Label "PROMPT" */
.sp-blog-promptbox-v2__label {
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.15em !important;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5) !important;
display: flex; align-items: center;
}
/* Kleiner blauer Punkt vor "PROMPT" */
.sp-blog-promptbox-v2__label::before {
content: ''; display: inline-block; width: 6px; height: 6px;
background: #0057ff; border-radius: 50%; margin-right: 8px;
box-shadow: 0 0 8px #0057ff;
}
/* 3. Copy Button (Interactive) */
.sp-blog-promptbox-v2__copy {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 14px !important;
border-radius: 8px !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
background: transparent !important;
color: rgba(255, 255, 255, 0.8) !important;
font-size: 12px !important;
font-weight: 600 !important;
text-transform: uppercase;
letter-spacing: 0.05em;
cursor: pointer;
user-select: none;
transition: all 0.2s ease;
}
.sp-blog-promptbox-v2__copy:hover {
background: #0057ff !important;
border-color: #0057ff !important;
color: #fff !important;
box-shadow: 0 0 15px rgba(0, 87, 255, 0.4);
transform: translateY(-1px);
}
.sp-blog-promptbox-v2__copy.is-copied {
background: #10b981 !important;
border-color: #10b981 !important;
color: #fff !important;
box-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
}
.sp-blog-promptbox-v2__icon {
font-size: 14px !important;
line-height: 1;
}
/* 4. The Code Content area (FIXED: No Horizontal Scroll) */
.sp-blog-promptbox-v2__code {
margin: 0 !important;
padding: 24px 24px !important;
/* 🔥 FIX: Scrollbalken weg, Box passt sich an */
overflow-x: hidden !important;
font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace !important;
font-size: 14px !important;
line-height: 1.7 !important;
color: #e0e0e0 !important;
position: relative; z-index: 2;
}
/* Clean up internal code tags */
.sp-blog-promptbox-v2__code code {
font-family: inherit !important;
background: none !important;
padding: 0 !important;
color: inherit !important;
/* 🔥 FIX: Text bricht jetzt um statt zu scrollen */
white-space: pre-wrap !important;
word-break: break-word !important; /* Lange Wörter brechen auch um */
}
/* =========================================================
SURECART ORDER CONFIRMATION – remove product image + qty
========================================================= */
/* Produktbild / Placeholder killen */
sc-product-line-item::part(placeholder__image),
sc-product-line-item::part(image),
sc-line-item::part(image) {
display: none !important;
}
/* Qty killen */
sc-product-line-item::part(static-quantity),
sc-product-line-item::part(quantity),
sc-line-item::part(quantity) {
display: none !important;
}
/* ── Block 13 ── */
/* ==========================================================================
VIRAL CHART STYLES (TREND, RADAR, FUNNEL)
========================================================================== */
.sp-blog-chart-audit {
background: linear-gradient(135deg, #0f172a 0%, #020617 100%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 24px;
padding: 40px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255,255,255,0.05);
backdrop-filter: blur(12px);
margin: 60px 0;
color: #fff;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
overflow: hidden;
}
.sp-blog-chart-header {
text-align: center;
margin-bottom: 30px;
}
.sp-blog-chart-title {
margin: 0;
font-size: 2.2rem;
font-weight: 800;
line-height: 1.2;
background: -webkit-linear-gradient(45deg, #10b981, #3b82f6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.sp-blog-chart-subtitle {
color: #94a3b8;
font-size: 1.1rem;
margin-top: 10px;
font-weight: 400;
}
.sp-blog-chart-canvas {
min-height: 500px;
width: 100%;
}
.sp-blog-chart-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 25px;
padding-top: 15px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
font-size: 0.85rem;
}
.sp-blog-chart-source {
color: #64748b;
font-style: italic;
}
.sp-blog-chart-branding {
font-weight: 800;
color: #e2e8f0;
text-transform: uppercase;
letter-spacing: 1.5px;
}
/* Mobile Optimierung */
@media (max-width: 768px) {
.sp-blog-chart-audit { padding: 25px 15px; margin: 40px 0; }
.sp-blog-chart-title { font-size: 1.6rem; }
.sp-blog-chart-canvas { min-height: 400px; }
.sp-blog-chart-footer { flex-direction: column; gap: 12px; text-align: center; }
}
/* ── Block 14 ── */
section.sp-blog-cta {
position: relative !important;
width: 100% !important;
max-width: 100% !important;
margin: 40px 0 !important;
z-index: 1 !important;
overflow: visible !important;
/* ⚡️ FIX: Transition entfernt, damit JS die volle Kontrolle beim Scrollen hat! */
will-change: width, max-width, margin-left !important;
}
section.sp-blog-cta .sp-blog-cta__inner {
position: relative !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
gap: 10px !important;
padding: 34px 34px 36px !important;
border-radius: 24px !important;
background: linear-gradient(145deg, rgba(20, 25, 40, 0.90) 0%, rgba(5, 5, 10, 0.98) 100%) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
box-shadow:
0 20px 40px -10px rgba(0, 0, 0, 0.8),
0 0 30px rgba(0, 87, 255, 0.10) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
overflow: hidden !important;
/* ⚡️ FIX: Transition für Box-Shadow und Border entfernt */
}
section.sp-blog-cta .sp-blog-cta__inner::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
background: radial-gradient(circle at top center, rgba(0, 87, 255, 0.15) 0%, transparent 60%) !important;
pointer-events: none !important;
z-index: 0 !important;
}
section.sp-blog-cta .sp-blog-cta__content {
position: relative !important;
z-index: 2 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
max-width: 760px !important;
margin: 0 auto !important;
gap: 0 !important;
flex: 0 0 auto !important;
}
section.sp-blog-cta .sp-blog-cta__actions {
position: relative !important;
z-index: 2 !important;
width: 100% !important;
max-width: 760px !important;
margin: 6px auto 0 !important;
padding: 0 !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
flex: 0 0 auto !important;
}
section.sp-blog-cta .sp-blog-cta__badge {
display: inline-block !important;
margin: 0 0 8px 0 !important;
padding: 0 !important;
font-size: 12px !important;
line-height: 1.1 !important;
font-weight: 800 !important;
letter-spacing: 0.10em !important;
text-transform: uppercase !important;
color: #0057ff !important;
text-shadow: 0 0 10px rgba(0, 87, 255, 0.3) !important;
}
section.sp-blog-cta .sp-blog-cta__headline,
section.sp-blog-cta h3.sp-blog-cta__headline,
section.sp-blog-cta .sp-blog-cta__content .sp-blog-cta__headline {
display: block !important;
width: 100% !important;
max-width: 850px !important;
margin: 0 0 10px 0 !important;
padding: 0 !important;
font-size: 1.8rem !important;
line-height: 1.06 !important;
font-weight: 900 !important;
letter-spacing: -0.04em !important;
color: #ffffff !important;
text-align: center !important;
text-wrap: balance !important;
}
section.sp-blog-cta .sp-blog-cta__headline *,
section.sp-blog-cta h3.sp-blog-cta__headline *,
section.sp-blog-cta .sp-blog-cta__content .sp-blog-cta__headline * {
font-size: inherit !important;
line-height: inherit !important;
font-weight: inherit !important;
letter-spacing: inherit !important;
color: inherit !important;
margin: 0 !important;
padding: 0 !important;
}
section.sp-blog-cta .sp-blog-cta__text,
section.sp-blog-cta .sp-blog-cta__content .sp-blog-cta__text,
section.sp-blog-cta .sp-blog-cta__text p {
width: 100% !important;
max-width: 640px !important;
margin: 0 auto !important;
padding: 0 !important;
font-size: clamp(1rem, 1.3vw, 1.12rem) !important;
line-height: 1.42 !important;
font-weight: 400 !important;
color: rgba(255, 255, 255, 0.76) !important;
text-align: center !important;
text-wrap: pretty !important;
}
section.sp-blog-cta .sp-blog-cta__button,
section.sp-blog-cta .sp-blog-cta__button:link,
section.sp-blog-cta .sp-blog-cta__button:visited,
section.sp-blog-cta .sp-blog-cta__button *,
section.sp-blog-cta .sp-blog-cta__button span {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
text-decoration: none !important;
}
section.sp-blog-cta .sp-blog-cta__button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 60px !important;
padding: 18px 42px !important;
border-radius: 14px !important;
background: linear-gradient(180deg, #1b6cff 0%, #0c4fe9 100%) !important;
border: 1px solid #3a82ff !important;
box-shadow:
inset 0 1px 1px rgba(255, 255, 255, 0.40),
0 10px 20px -5px rgba(0, 87, 255, 0.50),
0 0 20px rgba(0, 87, 255, 0.20) !important;
font-size: 15px !important;
line-height: 1 !important;
font-weight: 800 !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
white-space: nowrap !important;
/* Transition auf dem Button bleibt, weil die vom Hover kommt, nicht vom Scrollen! */
transition:
transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1),
background 0.3s cubic-bezier(0.23, 1, 0.32, 1) !important;
}
section.sp-blog-cta .sp-blog-cta__button:hover {
transform: translateY(-3px) !important;
background: linear-gradient(180deg, #2875ff 0%, #0d54f5 100%) !important;
box-shadow:
inset 0 1px 1px rgba(255, 255, 255, 0.50),
0 15px 25px -5px rgba(0, 87, 255, 0.60),
0 0 35px rgba(0, 87, 255, 0.50) !important;
}
section.sp-blog-cta .sp-blog-cta__button:focus,
section.sp-blog-cta .sp-blog-cta__button:active {
color: #ffffff !important;
text-decoration: none !important;
outline: none !important;
}
@media (min-width: 1024px) {
section.sp-blog-cta {
width: calc(100% + (10% * var(--cta-grow-progress, 0))) !important;
max-width: calc(100% + (10% * var(--cta-grow-progress, 0))) !important;
margin-left: calc(-5% * var(--cta-grow-progress, 0)) !important;
}
section.sp-blog-cta .sp-blog-cta__inner {
box-shadow:
0 calc(20px + (6px * var(--cta-grow-progress, 0))) calc(40px + (14px * var(--cta-grow-progress, 0))) -12px rgba(0, 0, 0, 0.84),
0 0 calc(30px + (14px * var(--cta-grow-progress, 0))) rgba(0, 87, 255, calc(0.10 + (0.06 * var(--cta-grow-progress, 0)))) !important;
border-color: rgba(255, 255, 255, calc(0.08 + (0.03 * var(--cta-grow-progress, 0)))) !important;
}
}
@media (max-width: 899px) {
section.sp-blog-cta {
margin: 32px 0 !important;
}
section.sp-blog-cta .sp-blog-cta__inner {
padding: 28px 22px 30px !important;
border-radius: 20px !important;
gap: 10px !important;
}
section.sp-blog-cta .sp-blog-cta__content,
section.sp-blog-cta .sp-blog-cta__actions,
section.sp-blog-cta .sp-blog-cta__headline {
max-width: 100% !important;
}
section.sp-blog-cta .sp-blog-cta__headline,
section.sp-blog-cta h3.sp-blog-cta__headline,
section.sp-blog-cta .sp-blog-cta__content .sp-blog-cta__headline {
font-size: clamp(1.7rem, 5.8vw, 2.2rem) !important;
line-height: 1.08 !important;
margin-bottom: 8px !important;
}
section.sp-blog-cta .sp-blog-cta__text,
section.sp-blog-cta .sp-blog-cta__content .sp-blog-cta__text,
section.sp-blog-cta .sp-blog-cta__text p {
max-width: 100% !important;
font-size: 1rem !important;
line-height: 1.42 !important;
}
section.sp-blog-cta .sp-blog-cta__button {
width: 100% !important;
min-height: 56px !important;
padding: 18px 20px !important;
}
}
@media (max-width: 640px) {
section.sp-blog-cta .sp-blog-cta__inner {
padding: 24px 16px 26px !important;
}
section.sp-blog-cta .sp-blog-cta__headline,
section.sp-blog-cta h3.sp-blog-cta__headline,
section.sp-blog-cta .sp-blog-cta__content .sp-blog-cta__headline {
font-size: clamp(1.35rem, 6vw, 1.7rem) !important;
line-height: 1.15 !important;
text-wrap: normal !important;
letter-spacing: -0.02em !important;
}
section.sp-blog-cta .sp-blog-cta__text,
section.sp-blog-cta .sp-blog-cta__content .sp-blog-cta__text,
section.sp-blog-cta .sp-blog-cta__text p {
font-size: 0.97rem !important;
line-height: 1.4 !important;
}
section.sp-blog-cta .sp-blog-cta__button {
min-height: 54px !important;
font-size: 14px !important;
padding: 16px 18px !important;
}
}
/* ── Block 15 ── */
/* ==========================================================================
MICRO-QUIZ - GODMODE CSS (Perfect Spacing & Glowing Answer)
========================================================================== */
/* ⚡️ ANTI-WP-AUTOP HACK: Tötet alle heimlichen
und leeren Tags von WordPress */
.sp-blog-quiz br,
.sp-blog-quiz-header br,
.sp-blog-quiz-options br,
.sp-blog-quiz-header p,
.sp-blog-quiz-options p,
.sp-blog-quiz > p {
display: none !important;
margin: 0 !important;
padding: 0 !important;
height: 0 !important;
}
/* --- 1. Der Haupt-Container --- */
.sp-blog-quiz {
position: relative !important;
background: linear-gradient(145deg, rgba(20, 25, 40, 0.90) 0%, rgba(5, 5, 10, 0.98) 100%) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-top: 3px solid #0057ff !important;
border-radius: 24px !important;
padding: clamp(32px, 5vw, 40px) !important;
margin: 48px 0 !important;
box-shadow:
0 20px 40px -10px rgba(0, 0, 0, 0.8),
0 0 30px rgba(0, 87, 255, 0.10) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
overflow: hidden !important;
font-family: inherit !important;
}
.sp-blog-quiz::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
background: radial-gradient(circle at top center, rgba(0, 87, 255, 0.15) 0%, transparent 60%) !important;
pointer-events: none !important;
z-index: 0 !important;
}
/* --- 2. Header & Frage (Mit perfektem Breathing Room) --- */
.sp-blog-quiz-header {
position: relative !important;
z-index: 2 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
/* ⚡️ FIX: Perfekter Abstand zwischen Frage und Buttons (32px) */
margin: 0 0 32px 0 !important;
padding: 0 !important;
}
.sp-blog-quiz-badge {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: #0d1b3e !important;
border: 1px solid #1a56db !important;
box-shadow: inset 0 0 10px rgba(0, 87, 255, 0.2) !important;
color: #ffffff !important;
text-shadow: none !important;
font-size: 0.75rem !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 0.12em !important;
padding: 8px 20px !important;
border-radius: 999px !important;
margin: 0 0 16px 0 !important;
}
.sp-blog-quiz-question,
.sp-blog-quiz-header h3 {
margin: 0 !important;
padding: 0 !important;
font-size: clamp(1.4rem, 3.5vw, 1.8rem) !important;
font-weight: 900 !important;
color: #ffffff !important;
line-height: 1.25 !important;
letter-spacing: -0.02em !important;
max-width: 700px !important;
text-wrap: balance !important;
}
/* --- 3. Die Antwort-Buttons --- */
.sp-blog-quiz-options {
position: relative !important;
z-index: 2 !important;
display: flex !important;
flex-direction: column !important;
/* ⚡️ FIX: Knackige 14px Lücke zwischen den Buttons */
gap: 14px !important;
width: 100% !important;
max-width: 650px !important;
margin: 0 auto !important;
padding: 0 !important;
}
.sp-blog-quiz-btn {
width: 100% !important;
margin: 0 !important;
text-align: left !important;
padding: 16px 24px !important;
font-size: 1rem !important;
font-weight: 600 !important;
line-height: 1.4 !important;
background: rgba(255, 255, 255, 0.03) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
color: rgba(255, 255, 255, 0.85) !important;
border-radius: 14px !important;
outline: none !important;
cursor: pointer !important;
position: relative !important;
overflow: hidden !important;
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1) !important;
}
.sp-blog-quiz-btn:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.08) !important;
border-color: rgba(0, 87, 255, 0.4) !important;
color: #ffffff !important;
transform: translateX(4px) !important;
box-shadow: 0 0 20px rgba(0, 87, 255, 0.1) !important;
}
.sp-blog-quiz-btn:disabled {
cursor: default !important;
opacity: 0.5 !important;
}
.sp-blog-quiz-btn.sp-is-correct {
background: rgba(16, 185, 129, 0.15) !important;
border-color: #10b981 !important;
color: #10b981 !important;
text-shadow: 0 0 10px rgba(16, 185, 129, 0.4) !important;
opacity: 1 !important;
transform: scale(1.02) !important;
box-shadow:
0 0 20px rgba(16, 185, 129, 0.2),
inset 0 0 10px rgba(16, 185, 129, 0.1) !important;
}
.sp-blog-quiz-btn.sp-is-wrong {
background: rgba(239, 68, 68, 0.15) !important;
border-color: #ef4444 !important;
color: #ef4444 !important;
text-shadow: 0 0 10px rgba(239, 68, 68, 0.4) !important;
opacity: 1 !important;
}
/* --- 4. Erklärungs-Box (Das God-Mode Upgrade) --- */
.sp-blog-quiz-explanation {
display: none;
position: relative !important;
z-index: 2 !important;
margin: 24px auto 0 !important; /* Etwas mehr Abstand zu den Buttons */
max-width: 650px !important;
padding: 24px !important;
/* ⚡️ NEUES DESIGN: Volle Rundung, edler Glow, keine harte Kante links mehr */
background: linear-gradient(145deg, rgba(0, 87, 255, 0.08) 0%, rgba(5, 15, 30, 0.6) 100%) !important;
border: 1px solid rgba(0, 87, 255, 0.3) !important;
border-top: 2px solid #0057ff !important; /* Leuchtende Kante oben */
border-radius: 16px !important; /* Alles weich abgerundet! */
box-shadow:
0 15px 30px -5px rgba(0, 0, 0, 0.5),
0 0 30px rgba(0, 87, 255, 0.15),
inset 0 0 15px rgba(0, 87, 255, 0.05) !important;
animation: pl-fade-in-down 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards !important;
}
.sp-blog-quiz-msg-correct,
.sp-blog-quiz-msg-wrong {
display: none;
font-weight: 800 !important;
margin-right: 6px !important;
font-size: 1.05rem !important;
}
.sp-blog-quiz-msg-correct { color: #10b981 !important; text-shadow: 0 0 8px rgba(16, 185, 129, 0.4) !important; }
.sp-blog-quiz-msg-wrong { color: #ef4444 !important; text-shadow: 0 0 8px rgba(239, 68, 68, 0.4) !important; }
.sp-blog-quiz-explanation-text,
.sp-blog-quiz-explanation-text p {
margin: 0 !important;
padding: 0 !important;
font-size: 1.05rem !important;
color: rgba(255, 255, 255, 0.9) !important; /* Minimal heller für Kontrast */
line-height: 1.6 !important;
}
@keyframes pl-fade-in-down {
0% { opacity: 0; transform: translateY(-15px); }
100% { opacity: 1; transform: translateY(0); }
}
/* --- 5. MOBILE FEINSCHLIFF --- */
@media (max-width: 640px) {
.sp-blog-quiz {
padding: 24px 16px !important;
border-radius: 20px !important;
margin: 32px 0 !important;
}
.sp-blog-quiz-header {
margin: 0 0 24px 0 !important; /* Mobile etwas weniger Abstand */
}
.sp-blog-quiz-question,
.sp-blog-quiz-header h3 {
font-size: clamp(1.3rem, 6vw, 1.5rem) !important;
text-wrap: normal !important;
}
.sp-blog-quiz-btn {
padding: 16px !important;
font-size: 0.95rem !important;
}
.sp-blog-quiz-explanation {
padding: 20px !important;
margin-top: 20px !important;
}
}
/* ── Block 16 ── */
/* ==================================================================
11. INTERNAL DATA TABLE - GODMODE EDITION (Cyber Grid replaced)
Fixed Borders, Solid Sticky Column, Hover Lift & Premium Badge
================================================================== */
/* 1. WRAPPER (Mit Animation & Premium Glow) */
.sp-blog-data-table-wrapper {
background: #050505 !important; /* Solid Black */
border: 1px solid rgba(255,255,255,0.16) !important;
border-top: 4px solid #0057ff !important;
border-radius: 16px !important;
margin: 3em 0 !important;
padding: 0 !important; /* WICHTIG: 0 Padding, damit Tabelle die Ecken füllt */
/* Basis Glow */
box-shadow: 0 0 50px rgba(0, 87, 255, 0.10) !important;
position: relative !important;
overflow: hidden !important;
/* Animation aktivieren */
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
}
/* 1.1 DER HOVER LIFT EFFEKT */
.sp-blog-data-table-wrapper:hover {
transform: translateY(-5px) !important;
box-shadow: 0 0 80px rgba(0, 87, 255, 0.22) !important;
border-color: rgba(0, 87, 255, 0.55) !important;
}
/* 1.2 DAS PREMIUM BADGE OBEN RECHTS */
.sp-blog-data-table-wrapper::after {
content: 'INTERNAL DATA' !important;
position: absolute !important;
top: 0 !important;
right: 0 !important;
z-index: 20 !important;
/* God-Mode Badge Styling */
background: rgba(255, 255, 255, 0.05) !important;
border-bottom: 1px solid rgba(255,255,255,0.15) !important;
border-left: 1px solid rgba(255,255,255,0.15) !important;
border-bottom-left-radius: 12px !important;
color: #0057ff !important;
font-size: 0.7rem !important;
font-weight: 800 !important;
letter-spacing: 0.1em !important;
padding: 8px 16px !important;
}
/* 2. TITEL BEREICH */
.sp-blog-data-table-title {
display: block !important;
/* ⚡️ FIX: 48px Top-Padding, damit der Text das Badge nicht berührt */
padding: 48px 24px 20px 24px !important;
margin: 0 !important;
color: #ffffff !important;
font-size: 1.4rem !important;
font-weight: 900 !important;
letter-spacing: -0.02em !important;
text-transform: none !important;
border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
/* 3. SCROLL CONTAINER */
.sp-blog-table-scroll {
width: 100% !important;
overflow-x: auto !important;
scrollbar-color: #333 #050505;
scrollbar-width: thin;
}
/* 4. TABELLE RESET */
.sp-blog-data-table {
width: 100% !important;
border-collapse: separate !important;
border-spacing: 0 !important;
min-width: 600px !important;
font-family: inherit !important; /* Tötet die alte Monospace-Schrift */
}
/* 5. HEADER (TH) */
.sp-blog-data-th {
background: #111111 !important;
color: #ffffff !important;
padding: 20px 24px !important;
text-transform: uppercase !important;
font-size: 0.8rem !important;
font-weight: 800 !important;
text-align: left !important;
letter-spacing: normal !important;
/* Border Fix per Shadow */
border: none !important;
box-shadow: inset 0 -1px 0 rgba(255,255,255,0.15) !important;
/* STICKY OBEN */
position: sticky !important;
top: 0 !important;
z-index: 10 !important;
}
/* 5.1 ECKE OBEN LINKS (Sticky Oben + Links) */
.sp-blog-data-th:first-child {
position: sticky !important;
left: 0 !important;
z-index: 20 !important;
background: #111111 !important;
box-shadow: inset -1px -1px 0 rgba(255,255,255,0.15) !important;
}
/* 6. NORMALE ZELLEN (TD) */
.sp-blog-data-td,
.sp-blog-data-td-label {
padding: 22px 24px !important;
color: #cccccc !important;
font-size: 1rem !important;
line-height: 1.65 !important;
vertical-align: top !important;
/* Border Fix per Shadow */
border: none !important;
box-shadow: inset 0 -1px 0 rgba(255,255,255,0.1) !important;
background: transparent !important;
}
/* 7. DIE LINKE SPALTE (Sticky Links) */
.sp-blog-data-td-label,
.sp-blog-data-table td:first-child {
position: sticky !important;
left: 0 !important;
z-index: 5 !important;
color: #ffffff !important;
font-weight: 800 !important;
white-space: normal !important; /* Erlaubt weiche Umbrüche */
/* Solider Hintergrund gegen Ghosting */
background: #050505 !important;
/* Border Rechts per Shadow */
box-shadow: inset -1px -1px 0 rgba(255,255,255,0.1) !important;
}
/* 8. ZEBRA STRIPING */
.sp-blog-data-table tbody tr:nth-child(even) .sp-blog-data-td,
.sp-blog-data-table tbody tr:nth-child(even) td {
background-color: rgba(255,255,255,0.03) !important;
}
/* Zebra für Sticky Spalte (Muss solide sein) */
.sp-blog-data-table tbody tr:nth-child(even) .sp-blog-data-td-label,
.sp-blog-data-table tbody tr:nth-child(even) td:first-child {
background-color: #0f0f0f !important;
}
/* 9. ROW HOVER (Innerhalb der Tabelle) */
.sp-blog-data-table tbody tr:hover .sp-blog-data-td,
.sp-blog-data-table tbody tr:hover td {
background-color: rgba(0, 87, 255, 0.1) !important;
color: #fff !important;
}
/* Row Hover für Sticky Spalte */
.sp-blog-data-table tbody tr:hover .sp-blog-data-td-label,
.sp-blog-data-table tbody tr:hover td:first-child {
background-color: #001533 !important;
}
/* 10. LETZTE ZEILE FIX (Verhindert doppelte Ränder unten) */
.sp-blog-data-table tbody tr:last-child .sp-blog-data-td,
.sp-blog-data-table tbody tr:last-child td {
box-shadow: inset 0 0 0 transparent !important;
}
.sp-blog-data-table tbody tr:last-child .sp-blog-data-td-label,
.sp-blog-data-table tbody tr:last-child td:first-child {
box-shadow: inset -1px 0 0 rgba(255,255,255,0.1) !important;
}
/* 11. SCROLLBARS */
.sp-blog-table-scroll::-webkit-scrollbar {
height: 8px;
background: #050505;
}
.sp-blog-table-scroll::-webkit-scrollbar-thumb {
background: #333;
border-radius: 4px;
border: 1px solid #050505;
}
/* 12. MOBILE FEINSCHLIFF */
@media (max-width: 600px) {
.sp-blog-data-table-title {
/* ⚡️ FIX: Auch auf Mobile erzwingen wir 48px Top-Padding als Schutzschild */
padding: 48px 20px 16px 20px !important;
font-size: 1.2rem !important;
}
.sp-blog-data-th,
.sp-blog-data-td,
.sp-blog-data-td-label {
padding: 16px 20px !important;
}
}
/* ── Block 17 ── */
/* ==================================================================
DEFINITION BOX - GODMODE EDITION (Neon Green Accent)
================================================================== */
/* --- 1. Container (Deep Glassmorphism) --- */
.sp-blog-definition {
position: relative !important;
background: linear-gradient(145deg, rgba(20, 25, 40, 0.90) 0%, rgba(5, 5, 10, 0.98) 100%) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
/* ⚡️ Der edle Neon-Grün Akzent links */
border-left: 4px solid #10b981 !important;
border-radius: 16px !important;
/* Perfekte Spacings - Platz links für das Icon */
padding: 32px 32px 32px 80px !important;
margin: 48px 0 !important;
/* Stealth Shadow mit minimalem grünen Leuchten */
box-shadow:
0 20px 40px -10px rgba(0, 0, 0, 0.8),
0 0 30px rgba(16, 185, 129, 0.08) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
overflow: hidden !important;
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease !important;
}
/* Subtiler Glow von links (Unterstützt den Accent) */
.sp-blog-definition::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
background: radial-gradient(circle at left center, rgba(16, 185, 129, 0.08) 0%, transparent 60%) !important;
pointer-events: none !important;
z-index: 0 !important;
}
/* --- 2. Hover Lift Effekt --- */
.sp-blog-definition:hover {
transform: translateY(-4px) !important;
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.9),
0 0 40px rgba(16, 185, 129, 0.15) !important;
}
/* --- 3. Das pulsierende Icon --- */
@keyframes pulse-godmode-icon {
0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(16, 185, 129, 0)); }
50% { transform: scale(1.1); filter: drop-shadow(0 0 15px rgba(16, 185, 129, 0.5)); }
100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(16, 185, 129, 0)); }
}
.sp-blog-definition::before {
content: '📖' !important;
position: absolute !important;
top: 32px !important;
left: 24px !important;
font-size: 32px !important;
line-height: 1 !important;
/* Langsamere, teurere Animation (4s statt 3s) */
animation: pulse-godmode-icon 4s infinite ease-in-out !important;
transform-origin: center center !important;
z-index: 2 !important;
}
/* --- 4. Verstecktes Span --- */
.sp-blog-definition span {
display: none !important;
}
/* --- 5. Typografie (Titel & Text) --- */
.sp-blog-definition h3 {
position: relative !important;
z-index: 2 !important;
/* Wir machen die Headline zum schicken Neon-Badge */
color: #10b981 !important;
font-family: inherit !important;
font-weight: 800 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
font-size: 0.8rem !important;
margin: 0 0 10px 0 !important;
padding: 0 !important;
}
.sp-blog-definition p {
position: relative !important;
z-index: 2 !important;
color: rgba(255, 255, 255, 0.85) !important;
font-weight: 400 !important;
line-height: 1.65 !important;
font-size: 1.05rem !important;
margin: 0 !important;
padding: 0 !important;
}
/* ⚡️ Anti-WordPress-Spacing Hack für die Definition Box */
.sp-blog-definition br,
.sp-blog-definition > p:empty {
display: none !important;
}
/* --- 6. Mobile Feinschliff --- */
@media (max-width: 640px) {
.sp-blog-definition {
padding: 24px 24px 24px 64px !important; /* Weniger links, da Icon kleiner wird */
margin: 32px 0 !important;
border-radius: 20px !important;
}
.sp-blog-definition::before {
top: 24px !important;
left: 18px !important;
font-size: 26px !important; /* Icon kleiner auf Mobile */
}
.sp-blog-definition h3 {
font-size: 0.75rem !important;
}
.sp-blog-definition p {
font-size: 0.95rem !important;
line-height: 1.5 !important;
}
}
/* ── Block 18 ── */
/* ==================================================================
WARNING BOX - GODMODE EDITION (Neon Red Accent)
================================================================== */
/* --- 1. Container (Deep Glassmorphism) --- */
.sp-blog-warning {
position: relative !important;
background: linear-gradient(145deg, rgba(20, 25, 40, 0.90) 0%, rgba(5, 5, 10, 0.98) 100%) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
/* ⚡️ Der edle Neon-Rot Akzent links */
border-left: 4px solid #ff4d4d !important;
border-radius: 16px !important;
/* Perfekte Spacings - Platz links für das Icon */
padding: 32px 32px 32px 80px !important;
margin: 48px 0 !important;
/* Stealth Shadow mit minimalem roten Leuchten */
box-shadow:
0 20px 40px -10px rgba(0, 0, 0, 0.8),
0 0 30px rgba(255, 77, 77, 0.08) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
overflow: hidden !important;
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease !important;
}
/* Subtiler roter Glow von links (Unterstützt den Alert-Charakter) */
.sp-blog-warning::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
background: radial-gradient(circle at left center, rgba(255, 77, 77, 0.08) 0%, transparent 60%) !important;
pointer-events: none !important;
z-index: 0 !important;
}
/* --- 2. Hover Lift Effekt --- */
.sp-blog-warning:hover {
transform: translateY(-4px) !important;
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.9),
0 0 40px rgba(255, 77, 77, 0.15) !important;
}
/* --- 3. Das pulsierende Warning-Icon --- */
@keyframes pulse-godmode-warning {
0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255, 77, 77, 0)); }
50% { transform: scale(1.1); filter: drop-shadow(0 0 15px rgba(255, 77, 77, 0.6)); }
100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255, 77, 77, 0)); }
}
.sp-blog-warning::before {
content: '⚠️' !important;
position: absolute !important;
top: 32px !important;
left: 24px !important;
font-size: 32px !important;
line-height: 1 !important;
/* Etwas schneller als das Buch, um "Achtung" zu signalisieren */
animation: pulse-godmode-warning 3s infinite ease-in-out !important;
transform-origin: center center !important;
z-index: 2 !important;
}
/* --- 4. Verstecktes Span --- */
.sp-blog-warning span {
display: none !important;
}
/* --- 5. Typografie (Titel & Text) --- */
.sp-blog-warning h3 {
position: relative !important;
z-index: 2 !important;
/* Rotes Premium-Badge Styling für die Überschrift */
color: #ff4d4d !important;
font-family: inherit !important;
font-weight: 800 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
font-size: 0.8rem !important;
margin: 0 0 10px 0 !important;
padding: 0 !important;
}
.sp-blog-warning p {
position: relative !important;
z-index: 2 !important;
color: rgba(255, 255, 255, 0.85) !important;
font-weight: 400 !important;
line-height: 1.65 !important;
font-size: 1.05rem !important;
margin: 0 !important;
padding: 0 !important;
}
/* ⚡️ Anti-WordPress-Spacing Hack für die Warning Box */
.sp-blog-warning br,
.sp-blog-warning > p:empty {
display: none !important;
}
/* --- 6. Mobile Feinschliff --- */
@media (max-width: 640px) {
.sp-blog-warning {
padding: 24px 24px 24px 64px !important;
margin: 32px 0 !important;
border-radius: 20px !important;
}
.sp-blog-warning::before {
top: 24px !important;
left: 18px !important;
font-size: 26px !important;
}
.sp-blog-warning h3 {
font-size: 0.75rem !important;
}
.sp-blog-warning p {
font-size: 0.95rem !important;
line-height: 1.5 !important;
}
}
/* ── Block 19 ── */
/* ==================================================================
EXPERT QUOTE - GODMODE EDITION (Neon Cyan Variant)
================================================================== */
/* --- 1. Container (Deep Glassmorphism) --- */
.sp-blog-quote {
position: relative !important;
background: linear-gradient(145deg, rgba(20, 25, 40, 0.90) 0%, rgba(5, 5, 10, 0.98) 100%) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
/* ⚡️ Der leuchtende Neon-Cyan Akzent */
border-left: 4px solid #00d8ff !important;
border-radius: 16px !important;
/* Perfekte Spacings - Platz links für die fetten Quote-Marks */
padding: 32px 32px 32px 80px !important;
margin: 48px 0 !important;
/* Stealth Shadow mit Cyan-Glow */
box-shadow:
0 20px 40px -10px rgba(0, 0, 0, 0.8),
0 0 30px rgba(0, 216, 255, 0.08) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
overflow: hidden !important;
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease !important;
}
/* Subtiler Glow von links */
.sp-blog-quote::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
background: radial-gradient(circle at left center, rgba(0, 216, 255, 0.08) 0%, transparent 60%) !important;
pointer-events: none !important;
z-index: 0 !important;
}
/* --- 2. Hover Lift Effekt --- */
.sp-blog-quote:hover {
transform: translateY(-4px) !important;
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.9),
0 0 40px rgba(0, 216, 255, 0.15) !important;
}
/* --- 3. Die pulsierenden Anführungszeichen --- */
@keyframes pulse-godmode-quote {
0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(0, 216, 255, 0)); }
50% { transform: scale(1.1); filter: drop-shadow(0 0 15px rgba(0, 216, 255, 0.5)); }
100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(0, 216, 255, 0)); }
}
.sp-blog-quote::before {
content: '❝' !important;
position: absolute !important;
top: 24px !important;
left: 20px !important;
font-size: 48px !important;
line-height: 1 !important;
font-family: Georgia, serif !important; /* Beste Font für edle Quotes */
color: #00d8ff !important;
animation: pulse-godmode-quote 4s infinite ease-in-out !important;
transform-origin: center center !important;
z-index: 2 !important;
}
/* --- 4. Verstecktes Span --- */
.sp-blog-quote span {
display: none !important;
}
/* --- 5. Typografie (Zitat & Autor) --- */
.sp-blog-quote blockquote,
.sp-blog-quote blockquote p,
.sp-blog-quote p {
position: relative !important;
z-index: 2 !important;
color: rgba(255, 255, 255, 0.9) !important;
font-weight: 400 !important;
font-style: italic !important;
line-height: 1.7 !important;
font-size: 1.1rem !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
}
.sp-blog-quote cite {
position: relative !important;
z-index: 2 !important;
display: block !important;
margin-top: 20px !important;
color: #ffffff !important;
font-family: inherit !important;
font-weight: 800 !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
font-size: 0.85rem !important;
font-style: normal !important;
border-left: 2px solid #00d8ff !important;
padding-left: 12px !important;
}
/* ⚡️ Anti-WordPress-Spacing Hack */
.sp-blog-quote br,
.sp-blog-quote > p:empty {
display: none !important;
}
/* --- 6. Mobile Feinschliff --- */
@media (max-width: 640px) {
.sp-blog-quote {
padding: 24px 24px 24px 64px !important;
margin: 32px 0 !important;
border-radius: 20px !important;
}
.sp-blog-quote::before {
top: 18px !important;
left: 16px !important;
font-size: 38px !important;
}
.sp-blog-quote blockquote,
.sp-blog-quote blockquote p,
.sp-blog-quote p {
font-size: 1rem !important;
line-height: 1.6 !important;
}
.sp-blog-quote cite {
margin-top: 16px !important;
}
}
/* ── Block 20 ── */
/* ==========================================================================
E-E-A-T METHODOLOGY BOX - GODMODE EDITION (Fullwidth & Clean)
========================================================================== */
/* ⚡️ DIE SCHROTFLINTE: Tötet ALLE heimlichen WP-Spacings zwischen den Elementen */
.sp-blog-eeat br,
.sp-blog-eeat > p,
.sp-blog-eeat-header p,
.sp-blog-eeat-grid p {
display: none !important;
margin: 0 !important;
padding: 0 !important;
height: 0 !important;
}
/* --- 1. Der Haupt-Container (Fullwidth) --- */
.sp-blog-eeat {
position: relative !important;
background: linear-gradient(145deg, rgba(20, 25, 40, 0.90) 0%, rgba(5, 5, 10, 0.98) 100%) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-top: 3px solid #0057ff !important;
border-radius: 24px !important;
padding: clamp(32px, 5vw, 40px) !important;
/* ⚡️ FIX: Volle Breite, zentriert in der Spalte */
margin: 48px 0 !important;
width: 100% !important;
max-width: 100% !important;
box-shadow:
0 20px 40px -10px rgba(0, 0, 0, 0.8),
0 0 30px rgba(0, 87, 255, 0.10) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
font-family: inherit !important;
overflow: hidden !important;
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease !important;
}
.sp-blog-eeat:hover {
transform: translateY(-4px) !important;
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.9),
0 0 40px rgba(0, 87, 255, 0.15) !important;
}
/* Subtiles Spotlight von oben links */
.sp-blog-eeat::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
background: radial-gradient(circle at top left, rgba(0, 87, 255, 0.15) 0%, transparent 60%) !important;
pointer-events: none !important;
z-index: 0 !important;
}
/* --- 2. Header Bereich --- */
.sp-blog-eeat-header {
position: relative !important;
z-index: 2 !important;
margin-bottom: 28px !important; /* Knackigerer Abstand */
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
padding-bottom: 20px !important;
}
.sp-blog-eeat-badge {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: #0d1b3e !important;
border: 1px solid #1a56db !important;
box-shadow: inset 0 0 10px rgba(0, 87, 255, 0.2) !important;
color: #ffffff !important;
font-size: 0.75rem !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 0.12em !important;
padding: 6px 16px !important;
border-radius: 999px !important;
margin: 0 0 16px 0 !important;
}
.sp-blog-eeat-title {
margin: 0 !important;
font-size: clamp(1.4rem, 3.5vw, 1.8rem) !important;
font-weight: 900 !important;
color: #ffffff !important;
line-height: 1.3 !important;
letter-spacing: -0.02em !important;
text-wrap: balance !important;
}
/* --- 3. Das Stats-Grid --- */
.sp-blog-eeat-grid {
position: relative !important;
z-index: 2 !important;
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
gap: 16px !important;
margin-bottom: 32px !important; /* Etwas Luft zur Box unten, aber sauber! */
}
/* Kleine Glassmorphism-Karten für jede Zahl */
.sp-blog-eeat-stat {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
background: rgba(255, 255, 255, 0.03) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
padding: 24px 16px !important;
border-radius: 16px !important;
text-align: center !important;
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1) !important;
}
.sp-blog-eeat-stat:hover {
background: rgba(255, 255, 255, 0.06) !important;
border-color: rgba(0, 87, 255, 0.4) !important;
transform: translateY(-3px) !important;
box-shadow:
0 10px 20px -5px rgba(0, 0, 0, 0.5),
0 0 15px rgba(0, 87, 255, 0.1) !important;
}
.sp-blog-eeat-number {
font-size: 2.2rem !important;
font-weight: 900 !important;
color: #0057ff !important;
text-shadow: 0 0 15px rgba(0, 87, 255, 0.4) !important;
margin: 0 0 8px 0 !important;
line-height: 1 !important;
}
.sp-blog-eeat-label {
font-size: 0.75rem !important;
color: rgba(255, 255, 255, 0.6) !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
margin: 0 !important;
}
/* --- 4. Die Promise-Box unten (Das God-Mode Upgrade) --- */
.sp-blog-eeat-promise {
position: relative !important;
z-index: 2 !important;
/* ⚡️ FIX: Gleicher edler 3D-Look wie die anderen Premium-Boxen! */
background: linear-gradient(145deg, rgba(0, 87, 255, 0.08) 0%, rgba(5, 15, 30, 0.6) 100%) !important;
border: 1px solid rgba(0, 87, 255, 0.3) !important;
border-top: 2px solid #0057ff !important; /* Leuchtende Kante oben! */
border-radius: 16px !important; /* ⚡️ FIX: Überall weich abgerundet! */
padding: 24px !important;
box-shadow:
0 15px 30px -5px rgba(0, 0, 0, 0.5),
0 0 30px rgba(0, 87, 255, 0.15),
inset 0 0 15px rgba(0, 87, 255, 0.05) !important;
}
.sp-blog-eeat-promise p {
margin: 0 !important;
font-size: 1.05rem !important;
line-height: 1.6 !important;
color: rgba(255, 255, 255, 0.85) !important;
}
.sp-blog-eeat-promise strong {
color: #ffffff !important;
font-weight: 800 !important;
}
/* --- 5. MOBILE FEINSCHLIFF --- */
@media (max-width: 640px) {
.sp-blog-eeat {
padding: 24px 20px !important;
border-radius: 20px !important;
margin: 32px 0 !important;
}
.sp-blog-eeat-header {
margin-bottom: 24px !important;
padding-bottom: 20px !important;
}
.sp-blog-eeat-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
margin-bottom: 24px !important;
}
.sp-blog-eeat-stat {
padding: 16px 12px !important;
border-radius: 12px !important;
}
.sp-blog-eeat-number {
font-size: 1.6rem !important;
}
.sp-blog-eeat-promise {
padding: 20px !important;
}
.sp-blog-eeat-promise p {
font-size: 0.95rem !important;
}
}
/* ── Block 21 ── */
/* ==========================================================================
UNCENSORED TRUTH BOX - GODMODE EDITION (Neon Red Reveal)
========================================================================== */
/* ⚡️ ANTI-WP-AUTOP HACK */
.sp-blog-truth br,
.sp-blog-truth > p:empty,
.sp-blog-truth-content > p:empty {
display: none !important;
margin: 0 !important;
padding: 0 !important;
height: 0 !important;
}
/* --- 1. Der Haupt-Container --- */
.sp-blog-truth {
position: relative !important;
background: linear-gradient(145deg, rgba(20, 25, 40, 0.90) 0%, rgba(5, 5, 10, 0.98) 100%) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
/* Neon Red Accent */
border-left: 4px solid #ff4d4d !important;
border-radius: 16px !important;
padding: clamp(32px, 5vw, 40px) !important;
margin: 48px 0 !important;
box-shadow:
0 20px 40px -10px rgba(0, 0, 0, 0.8),
0 0 30px rgba(255, 77, 77, 0.08) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
font-family: inherit !important;
overflow: hidden !important;
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease !important;
}
.sp-blog-truth:hover {
transform: translateY(-4px) !important;
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.9),
0 0 40px rgba(255, 77, 77, 0.15) !important;
}
/* --- 2. Header & Titel --- */
.sp-blog-truth-header {
margin-bottom: 24px !important;
}
.sp-blog-truth-title {
display: flex !important;
align-items: center !important;
gap: 12px !important;
font-size: 1.1rem !important;
font-weight: 800 !important;
color: #ff4d4d !important;
margin: 0 !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
}
.sp-blog-truth-title::before {
content: "👁️" !important;
font-size: 1.4rem !important;
}
/* --- 3. Body & Content (Der Blur-Bereich) --- */
.sp-blog-truth-body {
position: relative !important;
border-radius: 8px !important;
}
.sp-blog-truth-content {
font-size: 1.05rem !important;
color: rgba(255, 255, 255, 0.85) !important;
line-height: 1.65 !important;
margin: 0 !important;
/* Smoothe Aufdeck-Animation */
transition: filter 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease !important;
}
.sp-blog-truth-content p {
margin: 0 !important;
padding: 0 !important;
}
/* ⚡️ Der versteckte Zustand */
.sp-blog-truth-content.sp-is-blurred {
filter: blur(8px) !important; /* Stärkerer Blur für den Dark Mode */
user-select: none !important;
pointer-events: none !important;
opacity: 0.3 !important; /* Dunkelt den Text stark ab */
}
/* --- 4. Das Overlay & Der Button --- */
.sp-blog-truth-overlay {
position: absolute !important;
inset: 0 !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
/* Ein hauchdünner, dunkler Schleier (kein ekliges Weiß) */
background: rgba(5, 5, 10, 0.2) !important;
z-index: 10 !important;
transition: opacity 0.4s ease, visibility 0.4s ease !important;
}
.sp-blog-truth-overlay.sp-is-hidden {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* ⚡️ Der Neon-Pulsierende Button */
.sp-blog-truth-btn {
background: linear-gradient(135deg, #ff4d4d 0%, #dc2626 100%) !important;
color: #ffffff !important;
border: 1px solid rgba(255, 77, 77, 0.5) !important;
padding: 14px 32px !important;
font-size: 0.95rem !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
border-radius: 999px !important;
cursor: pointer !important;
box-shadow:
0 10px 20px -5px rgba(255, 77, 77, 0.5),
0 0 15px rgba(255, 77, 77, 0.2) !important;
animation: pl-pulse-red-godmode 2.5s infinite !important;
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1) !important;
}
.sp-blog-truth-btn:hover {
transform: scale(1.05) translateY(-2px) !important;
background: linear-gradient(135deg, #ff6666 0%, #e60000 100%) !important;
box-shadow:
0 15px 25px -5px rgba(255, 77, 77, 0.6),
0 0 25px rgba(255, 77, 77, 0.4) !important;
animation: none !important; /* Stoppt das Pulsieren beim Draufhalten */
}
@keyframes pl-pulse-red-godmode {
0% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.6); }
70% { box-shadow: 0 0 0 15px rgba(255, 77, 77, 0); }
100% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0); }
}
/* --- 5. MOBILE FEINSCHLIFF --- */
@media (max-width: 640px) {
.sp-blog-truth {
padding: 24px 20px !important;
margin: 32px 0 !important;
border-radius: 20px !important;
}
.sp-blog-truth-header {
margin-bottom: 20px !important;
}
.sp-blog-truth-title {
font-size: 1rem !important;
}
.sp-blog-truth-content {
font-size: 0.95rem !important;
line-height: 1.5 !important;
}
.sp-blog-truth-btn {
padding: 12px 24px !important;
font-size: 0.85rem !important;
}
}
/* ── Block 22 ── */
/* ==========================================================================
DYNAMIC WIDGET - GODMODE CSS (Stealth SaaS Edition - FULLWIDTH)
========================================================================== */
/* ⚡️ ANTI-WP-AUTOP HACK */
.sp-blog-calc br,
.sp-blog-calc > p:empty,
.sp-blog-calc-inputs p:empty,
.sp-blog-calc-results p:empty {
display: none !important;
margin: 0 !important;
padding: 0 !important;
height: 0 !important;
}
/* --- 1. Haupt-Container (Stealth Glassmorphism) --- */
.sp-blog-calc {
position: relative !important;
background: linear-gradient(145deg, rgba(20, 25, 40, 0.90) 0%, rgba(5, 5, 10, 0.98) 100%) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 24px !important;
padding: clamp(32px, 5vw, 48px) !important;
/* ⚡️ FIX: Volle Breite, keine Ränder mehr! */
margin: 48px 0 !important;
width: 100% !important;
max-width: 100% !important;
box-shadow:
0 20px 40px -10px rgba(0, 0, 0, 0.8),
0 0 30px rgba(0, 87, 255, 0.08) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
font-family: inherit !important;
overflow: hidden !important;
transition: box-shadow 0.3s ease !important;
}
/* Animierter Neon-Verlauf an der Oberkante */
.sp-blog-calc::before {
content: '' !important;
position: absolute !important;
top: 0 !important; left: 0 !important; right: 0 !important;
height: 4px !important;
background: linear-gradient(90deg, #0057ff, #00d8ff, #7c3aed, #0057ff) !important;
background-size: 200% auto !important;
animation: pl-gradient-flow-godmode 3s linear infinite !important;
z-index: 10 !important;
}
@keyframes pl-gradient-flow-godmode {
0% { background-position: 0% center; }
100% { background-position: 200% center; }
}
/* --- 2. Header Bereich --- */
.sp-blog-calc-header {
margin-bottom: 32px !important;
text-align: center !important;
position: relative !important;
z-index: 2 !important;
}
.sp-blog-calc-title {
font-size: clamp(1.6rem, 4vw, 2rem) !important;
font-weight: 900 !important;
color: #ffffff !important;
margin: 0 0 12px 0 !important;
letter-spacing: -0.02em !important;
text-wrap: balance !important;
}
.sp-blog-calc-desc {
font-size: 1.05rem !important;
color: rgba(255, 255, 255, 0.7) !important;
line-height: 1.6 !important;
margin: 0 !important;
}
/* --- 3. Inputs & Formular --- */
.sp-blog-calc-inputs {
position: relative !important;
z-index: 10 !important;
display: flex !important;
flex-direction: column !important;
gap: 24px !important;
margin-bottom: 32px !important;
}
.sp-blog-input-group {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
text-align: left !important;
}
.sp-blog-label {
font-size: 0.85rem !important;
font-weight: 700 !important;
color: rgba(255, 255, 255, 0.85) !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
}
/* ⚡️ DIE BRECHSTANGE: Überschreibt WP/OP3-Felder komplett */
.sp-blog-calc input,
.sp-blog-calc textarea,
.sp-blog-calc select {
width: 100% !important;
padding: 16px 20px !important;
font-size: 1.1rem !important;
color: #ffffff !important;
background-color: #0b1120 !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
border-radius: 12px !important;
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8) !important;
pointer-events: auto !important;
position: relative !important;
z-index: 50 !important;
-webkit-appearance: none !important;
box-sizing: border-box !important;
font-family: inherit !important;
}
.sp-blog-calc input::placeholder {
color: rgba(255, 255, 255, 0.3) !important;
}
.sp-blog-calc input:hover {
border-color: rgba(0, 87, 255, 0.5) !important;
}
.sp-blog-calc input:focus {
outline: none !important;
background-color: #050a14 !important;
border-color: #0057ff !important;
box-shadow: 0 0 0 4px rgba(0, 87, 255, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}
/* --- 4. Der Action Button --- */
.sp-blog-btn-primary,
.sp-blog-calc button#sp-blog-calc-btn,
.sp-blog-calc a#sp-blog-calc-btn {
position: relative !important;
z-index: 50 !important;
pointer-events: auto !important;
width: 100% !important;
padding: 18px 24px !important;
font-size: 1.1rem !important;
font-weight: 800 !important;
color: #ffffff !important;
background: linear-gradient(135deg, #0057ff 0%, #003ac7 100%) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
border-radius: 12px !important;
cursor: pointer !important;
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1) !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
box-shadow:
inset 0 1px 1px rgba(255, 255, 255, 0.3),
0 10px 20px -5px rgba(0, 87, 255, 0.5),
0 0 20px rgba(0, 87, 255, 0.3) !important;
}
.sp-blog-btn-primary:hover:not(:disabled),
.sp-blog-calc #sp-blog-calc-btn:hover:not(:disabled) {
transform: translateY(-2px) !important;
background: linear-gradient(135deg, #1a6aff 0%, #0044eb 100%) !important;
box-shadow:
inset 0 1px 1px rgba(255, 255, 255, 0.4),
0 15px 25px -5px rgba(0, 87, 255, 0.6),
0 0 35px rgba(0, 87, 255, 0.5) !important;
}
.sp-blog-btn-primary:active:not(:disabled),
.sp-blog-calc #sp-blog-calc-btn:active:not(:disabled) {
transform: translateY(1px) !important;
}
.sp-blog-btn-primary:disabled,
.sp-blog-calc #sp-blog-calc-btn:disabled {
opacity: 0.6 !important;
cursor: not-allowed !important;
transform: none !important;
box-shadow: none !important;
}
/* --- 5. Die Ergebnis-Box --- */
.sp-blog-calc-results,
#pl-result-box {
display: none;
position: relative !important;
z-index: 2 !important;
background: rgba(0, 87, 255, 0.05) !important;
border-radius: 16px !important;
padding: 32px 24px !important;
margin-top: 32px !important;
text-align: center !important;
border: 1px dashed rgba(0, 87, 255, 0.3) !important;
animation: pl-slide-down-godmode 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards !important;
}
@keyframes pl-slide-down-godmode {
0% { opacity: 0; transform: translateY(-15px) scale(0.98); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
.sp-blog-result-headline {
font-size: 0.85rem !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
color: #0057ff !important;
font-weight: 800 !important;
margin: 0 0 12px 0 !important;
}
.sp-blog-result-value {
font-size: clamp(2.5rem, 6vw, 4rem) !important;
font-weight: 900 !important;
line-height: 1.1 !important;
margin: 0 0 12px 0 !important;
letter-spacing: -0.02em !important;
color: #ffffff !important;
text-shadow: 0 0 25px rgba(0, 87, 255, 0.6) !important;
}
.sp-blog-result-value.text-mode {
font-size: 1.5rem !important;
font-weight: 700 !important;
white-space: pre-wrap !important;
color: #ffffff !important;
text-shadow: none !important;
background: none !important;
-webkit-text-fill-color: #ffffff !important;
}
.sp-blog-result-text {
font-size: 1.05rem !important;
color: rgba(255, 255, 255, 0.7) !important;
margin: 0 !important;
}
/* --- 6. Mobile Feinschliff --- */
@media (max-width: 640px) {
.sp-blog-calc {
padding: 24px 20px !important;
margin: 32px 0 !important;
border-radius: 20px !important;
}
.sp-blog-calc-title { font-size: 1.6rem !important; }
.sp-blog-calc-desc { font-size: 0.95rem !important; }
.sp-blog-calc input { padding: 14px 16px !important; font-size: 1rem !important; }
.sp-blog-btn-primary, .sp-blog-calc #sp-blog-calc-btn { padding: 16px 20px !important; font-size: 1rem !important; }
.sp-blog-calc-results, #pl-result-box { padding: 24px 16px !important; margin-top: 24px !important; }
.sp-blog-result-value.text-mode { font-size: 1.25rem !important; }
}
/* ── Block 23 ── */
/* ==================================================================
SILO FEATURED SECTION — COMPLETE CSS (FINAL POLISH)
- Hover-Zoom beim Thumbnail: NUR beim Hover (sonst kein Zoom)
- Pills (Badges): deutlich stärkerer Radius + transparenter (~30%)
- Thumbnail bleibt im Original Aspect Ratio (kein Crop/kein Verzerren)
- Responsive Grid (3 / 2 / 1)
- Dark glass gradient + noise + glow (wie deine unteren Boxen)
================================================================== */
/* ---------- Tokens ---------- */
:root{
--silo-blue:#0057ff;
/* Background (wie deine unteren Boxen) */
--silo-card-bg: linear-gradient(145deg, rgba(20, 25, 40, 0.80) 0%, rgba(0, 0, 0, 0.95) 100%);
--silo-border: rgba(255,255,255,0.08);
/* Glows */
--silo-glow-base: 0 4px 20px rgba(0, 87, 255, 0.05);
--silo-glow-hover: 0 15px 40px rgba(0, 87, 255, 0.30), 0 0 20px rgba(0, 87, 255, 0.10) inset;
/* Typography */
--silo-title-size: 16px;
--silo-title-weight: 700;
--silo-title-line: 1.35;
/* Radii */
--silo-radius: 18px;
/* Layout / spacing */
--silo-gap: clamp(16px, 2vw, 28px);
--silo-pad-x: 20px;
--silo-pad-x-mobile: 16px;
/* Badge */
--silo-badge-mb: 14px; /* Abstand Badge -> Title */
}
/* ==================================================================
1) SECTION WRAPPER
================================================================== */
.silo-featured-section{
padding: clamp(34px, 5vw, 70px) 0 !important;
background: transparent !important;
overflow: visible !important;
}
/* ==================================================================
2) HEADLINE + LINE
================================================================== */
.silo-featured-headline{
color:#fff !important;
font-size: clamp(28px, 3vw, 40px) !important;
font-weight: 900 !important;
letter-spacing: -0.035em !important;
margin: 0 0 clamp(22px, 3vw, 40px) 0 !important;
padding-bottom: 16px !important;
position: relative;
}
.silo-featured-headline::after{
content:"";
position:absolute;
left:0; bottom:0;
height:1px;
width:min(520px, 72%);
background: linear-gradient(90deg, var(--silo-blue) 0%, rgba(0,87,255,0.15) 55%, transparent 100%);
opacity: .95;
}
/* ==================================================================
3) GRID (3/2/1)
================================================================== */
.silo-featured-grid{
display:grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: var(--silo-gap) !important;
width: 100% !important;
align-items: stretch;
}
@media (max-width: 1024px){
.silo-featured-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px){
.silo-featured-grid{ grid-template-columns: 1fr !important; }
}
/* ==================================================================
4) CARD
================================================================== */
.silo-featured-item{
position: relative !important;
overflow: hidden !important;
z-index: 1 !important;
border-radius: var(--silo-radius) !important;
border: 1px solid var(--silo-border) !important;
background: var(--silo-card-bg) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: var(--silo-glow-base) !important;
display:flex;
flex-direction: column;
min-height: 100%;
transition:
transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
box-shadow 0.3s ease,
border-color 0.3s ease !important;
}
/* Noise */
.silo-featured-item::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
opacity: 0.15;
z-index: 0;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
background-size:260px 260px;
mix-blend-mode: overlay;
}
/* Layering */
.silo-featured-item > *{ position: relative; z-index: 2; }
@media (hover:hover){
.silo-featured-item:hover{
transform: translateY(-7px) !important;
box-shadow: var(--silo-glow-hover) !important;
border-color: rgba(0, 87, 255, 0.5) !important;
}
}
/* ==================================================================
5) LINK
================================================================== */
.silo-featured-link{
color: inherit;
text-decoration: none;
display: block;
height: 100%;
}
.silo-featured-link:focus-visible{
outline: 2px solid rgba(0,87,255,0.75);
outline-offset: 4px;
border-radius: 16px;
}
/* ==================================================================
6) IMAGE — ORIGINAL ASPECT RATIO (no crop) + Hover Zoom only
================================================================== */
.silo-featured-image{
width: 100%;
height: auto !important; /* keine fixe Höhe => kein Crop */
overflow: hidden;
position: relative;
border-top-left-radius: var(--silo-radius);
border-top-right-radius: var(--silo-radius);
}
/* Subtiler Overlay Verlauf */
.silo-featured-image::after{
content:"";
position:absolute; inset:0;
background: linear-gradient(180deg, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.18) 70%, rgba(0,0,0,0.30) 100%);
pointer-events:none;
}
/* Bild: aspect ratio bleibt, kein crop */
.silo-featured-image img{
display:block;
width: 100% !important;
height: auto !important;
object-fit: contain !important;
/* default: kein zoom */
transform: scale(1) !important;
/* smooth hover */
transition: transform 0.65s cubic-bezier(.2,.8,.2,1) !important;
}
/* Hover-Zoom NUR beim hovern */
@media (hover:hover){
.silo-featured-item:hover .silo-featured-image img{
transform: scale(1.06) !important;
}
}
/* ==================================================================
7) CONTENT AREA (Badge sitzt hier, NICHT im Thumbnail)
================================================================== */
.silo-featured-content{
position: relative;
padding: 18px var(--silo-pad-x) 22px !important;
}
/* ==================================================================
8) BADGE (PILL) — stärkerer Radius + transparenter (~30%)
================================================================== */
.silo-featured-badge{
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
/* viel stärkerer radius (Pill) */
border-radius: 999px !important;
/* kompakt */
padding: 7px 12px !important;
font-size: 11px !important;
line-height: 1 !important;
font-weight: 800 !important;
letter-spacing: 0.10em !important;
text-transform: uppercase !important;
/* transparenter look: ~30% */
background: rgba(0, 87, 255, 0.30) !important;
color: rgba(255,255,255,0.92) !important;
/* glass border */
border: 1px solid rgba(0, 87, 255, 0.35) !important;
/* subtler glow */
box-shadow: 0 0 24px rgba(0,87,255,0.14) !important;
/* Abstand zum Title */
margin: 0 0 var(--silo-badge-mb) 0 !important;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/* optional: leichter blur für “glassy pill” */
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* ==================================================================
9) TITLE
================================================================== */
.silo-featured-title{
margin: 0 !important;
padding: 0 !important;
color: rgba(255,255,255,0.90) !important;
font-size: var(--silo-title-size) !important;
font-weight: var(--silo-title-weight) !important;
line-height: var(--silo-title-line) !important;
letter-spacing: -0.01em !important;
display:block;
}
/* Optional excerpt support */
.silo-featured-excerpt{
margin: 12px 0 0 0 !important;
color: rgba(255,255,255,0.72) !important;
font-size: 14px !important;
line-height: 1.55 !important;
}
/* ==================================================================
10) MOBILE POLISH
================================================================== */
@media (max-width: 640px){
.silo-featured-item{ border-radius: 16px !important; }
.silo-featured-image{
border-top-left-radius: 16px;
border-top-right-radius: 16px;
}
.silo-featured-content{
padding: 16px var(--silo-pad-x-mobile) 18px !important;
}
.silo-featured-badge{
padding: 7px 11px !important;
font-size: 10.5px !important;
margin-bottom: 12px !important;
}
.silo-featured-title{
font-size: 16px !important;
}
}
/* ── Block 24 ── */
.sp-social-proof {
width: 100%;
display: flex;
justify-content: center;
padding: 0 25px;
box-sizing: border-box;
}
.sp-social-proof__inner {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 14px;
width: auto;
max-width: min(100%, 980px);
padding: 14px 18px;
border-radius: 18px;
background: linear-gradient(145deg, rgba(10, 17, 34, 0.96) 0%, rgba(4, 8, 20, 0.98) 100%);
border: 1px solid rgba(255,255,255,0.08);
box-shadow:
0 0 0 1px rgba(255,255,255,0.02) inset,
0 0 28px rgba(0, 87, 255, 0.10),
0 16px 42px rgba(0,0,0,0.32);
box-sizing: border-box;
}
.sp-social-proof__icons {
display: flex;
align-items: center;
flex: 0 0 auto;
position: relative;
margin-right: 2px;
}
.sp-social-proof__icon-link {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none !important;
line-height: 1;
position: relative;
transition:
transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
filter 0.32s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.sp-social-proof__icon-link:hover {
transform: translateY(-1px) scale(1.06);
filter: brightness(1.08);
}
.sp-social-proof__icon-link:focus {
outline: none;
}
.sp-social-proof__icon-link--youtube {
z-index: 2;
}
.sp-social-proof__icon-link--instagram {
z-index: 1;
margin-left: -8px;
}
.sp-social-proof__icon-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 999px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
box-shadow:
0 8px 20px rgba(0,0,0,0.26),
0 0 0 1px rgba(255,255,255,0.02) inset;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.sp-social-proof__icon-link:hover .sp-social-proof__icon-badge {
box-shadow:
0 10px 24px rgba(0,0,0,0.32),
0 0 18px rgba(0, 87, 255, 0.16),
0 0 0 1px rgba(255,255,255,0.03) inset;
}
.sp-social-proof__avatar {
flex: 0 0 auto;
width: 40px;
height: 40px;
border-radius: 999px;
overflow: hidden;
border: 2px solid rgba(255,255,255,0.12);
box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.sp-social-proof__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.sp-social-proof__content {
min-width: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
text-align: left;
}
.sp-social-proof__name-row {
display: inline-flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
}
.sp-social-proof__name {
color: #ffffff;
font-size: 18px;
line-height: 1.1;
font-weight: 800;
white-space: nowrap;
}
.sp-social-proof__verified {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
transform: translateY(1px);
}
.sp-social-proof__meta {
color: rgba(255,255,255,0.84);
font-size: 18px;
line-height: 1.25;
font-weight: 400;
white-space: nowrap;
}
.sp-social-proof__meta strong {
color: #ffffff;
font-weight: 800;
}
@media (max-width: 991px) {
.sp-social-proof {
padding: 0 20px;
}
.sp-social-proof__inner {
width: 100%;
max-width: 100%;
justify-content: flex-start;
padding: 13px 16px;
gap: 12px;
}
.sp-social-proof__name,
.sp-social-proof__meta {
font-size: 16px;
}
.sp-social-proof__avatar {
width: 38px;
height: 38px;
}
}
@media (max-width: 767px) {
.sp-social-proof {
padding: 0 !important;
}
.sp-social-proof__inner {
padding: 12px 14px;
gap: 10px;
border-radius: 15px;
width: 100% !important;
max-width: 100% !important;
}
.sp-social-proof__icon-link--instagram {
margin-left: -7px;
}
.sp-social-proof__icon-badge {
width: 30px;
height: 30px;
}
.sp-social-proof__avatar {
width: 34px;
height: 34px;
}
.sp-social-proof__content {
gap: 6px;
}
.sp-social-proof__name,
.sp-social-proof__meta {
font-size: 14px;
line-height: 1.3;
}
}
@media (max-width: 560px) {
.sp-social-proof__inner {
align-items: center;
}
.sp-social-proof__content {
display: block;
}
.sp-social-proof__name-row {
margin-bottom: 2px;
}
.sp-social-proof__meta {
display: block;
white-space: normal;
}
}
/* ── Block 25 ── */
/*
==================================================================
BLOG-POST CSS · Site-wide
v1.4 · 2026-05-14
==================================================================
INSTALL: Custom Code Plugin, conditional auf is_singular('post').
Greift alle .sp-blog-post-page Wrapper auf Single-Post-Pages.
Page-Identifier: .sp-blog-post-page (auf )
Hero-Variants: .sp-blog-hero--has-video / .sp-blog-hero--no-video
/ .sp-blog-hero--text-only
Mesh-Background: position:fixed Layer hinter ganzer Page (kein
sticky · Theme-Wrapper brechen oft sticky)
Navigation: position:fixed (zuverlässig, ignoriert Wrappers)
TOC: sticky bottom pill, H3 per H2 togglebar (Desktop)
Author-Box: Vertikales Rechteck-Foto edge-to-edge links
==================================================================
*/
/* ============================================================
FONT-FAMILY FORCE — DS-Schrift erzwingen, Theme-Defaults killen
============================================================
DS-Token --sp-font wird normalerweise nur per Inheritance vom
geerbt. WP-Themes injecten oft Georgia / Times / Times New Roman /
theme-custom font, was hier durchschlägt. Daher !important Force
auf der Page + allen Children. */
.sp-blog-post-page,
.sp-blog-post-page *,
.sp-blog-post-page *::before,
.sp-blog-post-page *::after,
.sp-blog-toc,
.sp-blog-toc *{
font-family:var(--sp-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif) !important;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
}
/* Ausnahmen: Code-Blöcke behalten Monospace */
.sp-blog-content code,
.sp-blog-content pre,
.sp-blog-content pre code{
font-family:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace !important;
}
/* ============================================================
BODY-BG-FORCE + ANTI-CLIPPING — Theme-Wrapper synchronisieren
============================================================
Defensive Pattern (siehe Memory feedback_body_bg_in_ds + OP3
Anti-Clipping): Force BG-Color + erlaube Floating-Nav + Mesh-BG
durch Theme-Wrappers durchzustechen. */
html:has(.sp-blog-post-page),
html:has(.sp-blog-post-page) body,
html:has(.sp-blog-post-page) #page,
html:has(.sp-blog-post-page) .site,
html:has(.sp-blog-post-page) #content,
html:has(.sp-blog-post-page) .site-content,
html:has(.sp-blog-post-page) .site-main,
html:has(.sp-blog-post-page) .op3-page,
html:has(.sp-blog-post-page) .op3-content,
html:has(.sp-blog-post-page) .op3-content-wrap{
background:var(--sp-bg) !important;
}
html:has(.sp-blog-post-page) body,
html:has(.sp-blog-post-page) #page,
html:has(.sp-blog-post-page) .site,
html:has(.sp-blog-post-page) #content,
html:has(.sp-blog-post-page) .site-content,
html:has(.sp-blog-post-page) .site-main,
html:has(.sp-blog-post-page) article,
html:has(.sp-blog-post-page) .entry-content,
html:has(.sp-blog-post-page) .op3-page,
html:has(.sp-blog-post-page) .op3-content,
html:has(.sp-blog-post-page) .op3-content-wrap,
html:has(.sp-blog-post-page) .op3-element,
html:has(.sp-blog-post-page) .op3-row,
html:has(.sp-blog-post-page) .op3-column,
html:has(.sp-blog-post-page) [class*="elementor-"],
html:has(.sp-blog-post-page) [class*="brxe-"],
html:has(.sp-blog-post-page) [class*="breakdance"],
html:has(.sp-blog-post-page) [class*="wp-block-"]{
overflow:visible !important;
contain:none !important;
}
/* OP3-postcontent .75em-Trap (siehe Memory): margin von Wrappern killen */
html:has(.sp-blog-post-page) .op3-postcontent,
html:has(.sp-blog-post-page) .op3-postcontent > *{
margin:0 !important;
}
/* ============================================================
FLOATING-NAV · position:fixed für Blog-Pages (HARD OVERRIDE)
============================================================
Cascade-Problem v1.3/1.4: sp-nav.html-Snippet hat
body:has(.sp-hero-with-nav) .sp-nav { position:absolute }
Mein Override hatte identische Specificity (0,2,1) → Source-Order
entschied. Da sp-nav.html oft NACH blog-post.css geladen wird,
gewann absolute → Nav resolved im Theme-Builder zum falschen Anker
und war unsichtbar.
v1.5 Fix: ID `#sp-site-nav` ins Selector → Specificity (1,3,2),
schlägt das Snippet uneinholbar. Plus z-index:10001 (über Progress
Bar) + display/visibility/opacity Defensive falls Theme was hidet.
KSS bleibt unverändert (absolute), nur Blog-Pages → fixed. */
html:has(.sp-blog-post-page) body:has(.sp-hero-with-nav) #sp-site-nav.sp-nav,
html:has(.sp-blog-post-page) #sp-site-nav.sp-nav{
position:fixed !important;
top:0 !important;
left:0 !important;
right:0 !important;
width:100% !important;
z-index:10001 !important;
display:block !important;
visibility:visible !important;
opacity:1 !important;
pointer-events:auto !important;
transform:translateY(0) !important;
background:transparent !important;
padding-top:env(safe-area-inset-top, 0) !important;
transition:transform .35s ease, opacity .25s ease !important;
}
/* NAV NICHT STICKY ON SCROLL · slide-up wenn weggescrollt vom Top
JS in blog-post.js toggled body.sp-nav-scrolled (siehe initNavScrollHide).
Beim Re-Scroll nach oben kommt sie zurück (gleiches Verhalten wie KSS,
wo absolute natürlich aus dem Viewport scrolled). */
html:has(.sp-blog-post-page) body.sp-nav-scrolled #sp-site-nav.sp-nav{
transform:translateY(-100%) !important;
opacity:0 !important;
pointer-events:none !important;
}
/* ============================================================
MESH-BACKGROUND · position:fixed hinter ganzer Page
============================================================
v1.4: Sticky-Pattern aus DS funktioniert nicht zuverlässig
wenn Theme-Wrapper overflow:hidden / contain:layout setzen.
Stattdessen: fixed Layer hinter allem, gilt für gesamte Page.
Hero hat seinen eigenen sp-hero-mesh-solo, der drüber malt. */
.sp-blog-post-page{
position:relative;
}
.sp-blog-post-page .sp-mesh-bg-sticky{
position:fixed !important;
top:0 !important;
left:0 !important;
right:0 !important;
width:100% !important;
height:100vh !important;
margin-bottom:0 !important;
z-index:-1 !important;
}
/* ============================================================
1 · READING-PROGRESS-BAR (top fixed)
============================================================
Plain top:0. Damit die Bar auf iPhone wirklich OBEN am
Screen-Rand sitzt (über Dynamic Island / Notch), muss im WP-
Theme-Header die viewport-meta haben:
Ohne den fängt die Bar am Top-Safe-Area an (also unter Notch).
z-index 10000 (Nav ist bei 10001, Nav scheint mit transparentem
BG drüber, Bar bleibt visuell sichtbar). */
.sp-blog-progress{
position:fixed;
top:0; left:0; right:0;
height:3px;
z-index:10000;
background:transparent;
pointer-events:none;
}
.sp-blog-progress-fill{
height:100%;
width:0;
background:linear-gradient(90deg,
var(--sp-primary) 0%,
var(--sp-primary-bright, var(--sp-primary)) 100%);
box-shadow:0 0 12px color-mix(in srgb, var(--sp-primary), transparent 50%);
transition:width .1s linear;
will-change:width;
}
/* ============================================================
2 · HERO · 2 Varianten
============================================================ */
.sp-blog-hero{
position:relative;
}
/* ----- BREADCRUMB ----- */
.sp-blog-breadcrumb{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:8px;
font-size:13px;
color:var(--sp-text-muted);
margin:0 0 18px;
}
.sp-blog-breadcrumb a{
color:var(--sp-text-muted);
text-decoration:none;
transition:color .2s ease;
}
.sp-blog-breadcrumb a:hover{
color:var(--sp-text);
}
.sp-blog-breadcrumb-sep{
color:color-mix(in srgb, var(--sp-text-muted), transparent 50%);
}
.sp-blog-breadcrumb-current{
color:var(--sp-text);
font-weight:500;
max-width:340px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* ----- CATEGORIES (Pills · eigene Zeile direkt vor H1) ----- */
.sp-blog-categories{
display:flex;
flex-wrap:wrap;
gap:8px;
margin:0 0 14px;
}
.sp-blog-category-pill{
display:inline-flex;
align-items:center;
padding:6px 14px;
background:color-mix(in srgb, var(--sp-primary), transparent 88%);
border:1px solid color-mix(in srgb, var(--sp-primary), transparent 65%);
border-radius:999px;
font-size:12.5px;
font-weight:600;
/* Text WEISS · konsistent Desktop+Mobile · vorher var(--sp-primary-bright)
was auf Mobile als "Link-Farbe" rüberkam. !important damit WP-Theme-a-Defaults
die Pille nicht überschreiben können. */
color:#fff !important;
text-decoration:none;
transition:all .2s ease;
white-space:nowrap;
}
/* Category-Pill Hover · KEINE blaue Border (User-Wunsch v1.4) · Text bleibt weiß */
.sp-blog-category-pill:hover{
background:color-mix(in srgb, var(--sp-primary), transparent 80%);
border-color:var(--sp-border);
color:#fff !important;
}
.sp-blog-category-pill--mini{
padding:4px 10px;
font-size:11px;
}
/* ----- META (Date · Reading-Time) ----- */
.sp-blog-meta{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:14px;
font-size:14px;
color:var(--sp-text-muted);
margin-top:8px;
}
.sp-blog-meta-item{
display:inline-flex;
align-items:center;
gap:6px;
}
/* ----- EXCERPT (Subhead) ----- */
.sp-blog-excerpt{
font-size:18px !important;
line-height:1.55 !important;
color:var(--sp-text-muted) !important;
text-wrap:pretty;
margin:0 !important;
}
/* ----- AUTHOR-BYLINE im Hero (Mini-Avatar + "von Samuel Peiffer") ----- */
.sp-blog-author-byline{
display:inline-flex;
align-items:center;
gap:8px;
font-size:14px;
color:var(--sp-text-muted);
margin-top:16px;
}
.sp-blog-author-byline-avatar{
/* width/height + aspect-ratio mit !important damit WP/Theme die natürliche
Image-Ratio nicht zurücksetzt (sonst wird's oval bei 4:5 Portraits). */
width:28px !important;
height:28px !important;
min-width:28px;
min-height:28px;
aspect-ratio:1 / 1 !important;
border-radius:50%;
object-fit:cover;
object-position:50% 25%; /* Gesicht im Crop bei Lifestyle-Portrait */
border:1px solid var(--sp-border);
flex-shrink:0;
display:inline-block;
}
/* Link ORGANISCH · nicht farbig (für SEO sichtbar, visuell unauffällig) */
.sp-blog-author-byline-link{
color:inherit;
text-decoration:none;
transition:color .2s ease;
}
.sp-blog-author-byline-link:hover{
color:var(--sp-text);
text-decoration:underline;
text-underline-offset:3px;
}
/* --- Hero-Variante MIT Video: Single-Column-Stack --- */
.sp-blog-hero--has-video .sp-blog-hero-stack{
max-width:1140px;
margin:0 auto;
text-align:center;
}
.sp-blog-hero--has-video .sp-blog-breadcrumb{
justify-content:center;
}
.sp-blog-hero--has-video .sp-blog-categories{
justify-content:center;
margin-bottom:14px;
}
.sp-blog-hero--has-video .sp-title{
text-align:center !important;
max-width:1040px;
margin:0 auto 16px !important;
font-size:clamp(32px, 4.4vw, 52px) !important;
line-height:1.08 !important;
letter-spacing:-.025em !important;
text-wrap:pretty;
}
.sp-blog-hero--has-video .sp-blog-excerpt{
text-align:center;
max-width:680px;
margin:0 auto !important;
}
.sp-blog-hero--has-video .sp-blog-meta{
justify-content:center;
margin-top:18px;
}
.sp-blog-hero--has-video .sp-blog-author-byline{
justify-content:center;
margin-bottom:40px;
}
.sp-blog-hero--no-video .sp-blog-author-byline{
margin-bottom:0;
}
/* --- Hero-Variante TEXT-ONLY (kein Video, kein Featured Image) --- */
.sp-blog-hero--text-only .sp-blog-hero-stack{
max-width:880px;
margin:0 auto;
text-align:center;
}
.sp-blog-hero--text-only .sp-blog-breadcrumb{
justify-content:center;
}
.sp-blog-hero--text-only .sp-blog-categories{
justify-content:center;
margin-bottom:14px;
}
.sp-blog-hero--text-only .sp-title{
text-align:center !important;
margin:0 auto 16px !important;
font-size:clamp(30px, 4vw, 46px) !important;
line-height:1.1 !important;
letter-spacing:-.025em !important;
text-wrap:pretty;
}
.sp-blog-hero--text-only .sp-blog-excerpt{
text-align:center;
max-width:640px;
margin:0 auto !important;
}
.sp-blog-hero--text-only .sp-blog-meta{
justify-content:center;
margin-top:18px;
}
.sp-blog-hero--text-only .sp-blog-author-byline{
justify-content:center;
margin-bottom:0;
}
.sp-blog-hero--has-video .sp-blog-hero-video{
max-width:1140px;
margin:0 auto;
border-radius:var(--sp-radius);
overflow:hidden;
aspect-ratio:16/9;
background:#000;
box-shadow:
0 30px 80px -20px rgba(0,0,0,.85),
0 0 80px color-mix(in srgb, var(--sp-primary-soft, var(--sp-primary)), transparent 70%);
position:relative;
}
.sp-blog-hero--has-video .sp-blog-hero-video iframe{
position:absolute;
inset:0;
width:100%;
height:100%;
border:0;
display:block;
}
/* ----- YouTube-Subscribe-Button (unter Video) ----- */
.sp-blog-subscribe-row{
display:flex;
justify-content:center;
margin-top:22px;
position:relative;
z-index:5; /* über dem Video-Box-Shadow */
}
.sp-blog-subscribe-btn{
display:inline-flex;
align-items:center;
gap:10px;
padding:12px 24px;
background:#ff0000;
color:#fff !important;
-webkit-text-fill-color:#fff !important;
border:none;
border-radius:999px;
font-size:14px;
font-weight:700;
letter-spacing:.02em;
text-decoration:none;
box-shadow:
0 10px 24px -8px rgba(255,0,0,.5),
0 0 20px rgba(255,0,0,.25);
transition:all .25s ease;
}
.sp-blog-subscribe-btn:hover{
transform:translateY(-2px);
background:#e60000;
box-shadow:
0 14px 32px -8px rgba(255,0,0,.6),
0 0 28px rgba(255,0,0,.4);
}
.sp-blog-subscribe-icon{
width:22px;
height:22px;
flex-shrink:0;
}
/* --- Hero-Variante OHNE Video: 2-Col mit Featured Image 16:9 --- */
.sp-blog-hero--no-video .sp-blog-hero-grid{
display:grid;
grid-template-columns:1.05fr .95fr;
gap:64px;
align-items:center;
max-width:1280px;
margin:0 auto;
}
.sp-blog-hero--no-video .sp-blog-hero-content{
text-align:left;
}
.sp-blog-hero--no-video .sp-blog-breadcrumb,
.sp-blog-hero--no-video .sp-blog-categories{
justify-content:flex-start;
}
.sp-blog-hero--no-video .sp-title{
text-align:left !important;
font-size:clamp(30px, 3.6vw, 46px) !important;
line-height:1.1 !important;
letter-spacing:-.025em !important;
margin:0 0 16px !important;
text-wrap:pretty;
}
/* --- Subtle Title-Gradient: weiß bis primary-bright im letzten Drittel --- */
.sp-blog-hero .sp-title{
background-image:linear-gradient(125deg,
var(--sp-text) 0%,
var(--sp-text) 55%,
var(--sp-primary-bright, var(--sp-primary)) 100%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}
.sp-blog-hero--no-video .sp-blog-excerpt{
text-align:left;
margin:0 !important;
}
.sp-blog-hero--no-video .sp-blog-hero-image{
position:relative;
border-radius:var(--sp-radius);
overflow:hidden;
aspect-ratio:16/9;
background:var(--sp-card-bg, rgba(20,25,40,.5));
box-shadow:
0 30px 80px -20px rgba(0,0,0,.85),
0 0 80px color-mix(in srgb, var(--sp-primary-soft, var(--sp-primary)), transparent 75%);
}
.sp-blog-hero--no-video .sp-blog-hero-image img{
width:100%; height:100%;
object-fit:cover;
display:block;
}
/* ============================================================
3 · BODY-CONTENT · Single-Column, schmal, Bilder expandiert
============================================================ */
/* Tight handoff Hero → Body · Hero hat schon sp-py-hero padding-bottom (72px)
als Breathing, das DS-Default sp-py-section top (60px) stapelt sich darauf →
132px Riesen-Gap. Body bekommt nur minimales Top-Padding für Leseluft. */
.sp-blog-body-section{
padding-top:8px !important;
}
.sp-blog-body-container{
max-width:760px !important;
}
/* Rendering Engine für maximal scharfen Text auf Dark Mode */
.sp-blog-content{
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
color:color-mix(in srgb, var(--sp-text), transparent 18%); /* Edel-Look: leicht transparent statt voll-weiss */
font-size:18px;
line-height:1.75;
}
.sp-blog-content > * + *{margin-top:1.2em}
/* Überschriften: tight & crisp */
.sp-blog-content h1,
.sp-blog-content h2,
.sp-blog-content h3,
.sp-blog-content h4,
.sp-blog-content h5,
.sp-blog-content h6{
color:var(--sp-text) !important;
font-weight:800 !important;
letter-spacing:-.025em !important;
}
.sp-blog-content h2{
font-size:clamp(26px, 2.6vw, 36px);
line-height:1.2;
margin:3.5rem 0 1.5rem !important;
scroll-margin-top:80px;
}
.sp-blog-content h3{
font-size:clamp(20px, 1.9vw, 26px);
line-height:1.3;
font-weight:700 !important;
margin:2.5rem 0 1rem !important;
scroll-margin-top:80px;
}
.sp-blog-content h4{
font-size:14px !important;
line-height:1.4;
text-transform:uppercase;
letter-spacing:.08em !important;
color:var(--sp-primary-bright, var(--sp-primary)) !important;
margin:2rem 0 1rem !important;
}
.sp-blog-content p{
font-size:18px;
line-height:1.75;
color:color-mix(in srgb, var(--sp-text), transparent 18%);
margin-bottom:1.5rem;
}
.sp-blog-content p strong,
.sp-blog-content h2 strong,
.sp-blog-content h3 strong{
color:var(--sp-text);
font-weight:700;
}
/* Links: brand-blau, dezenter Underline (KEINE Border) */
.sp-blog-content a{
color:var(--sp-primary-bright, var(--sp-primary));
text-decoration:underline;
text-underline-offset:3px;
text-decoration-thickness:1.5px;
transition:color .2s ease;
}
.sp-blog-content a:hover{
color:var(--sp-primary);
}
/* --- UL: Brand-blaue Glow-Dots --- */
.sp-blog-content ul{
list-style:none !important;
padding-left:0 !important;
margin:1.5rem 0 !important;
}
.sp-blog-content ul li{
position:relative;
padding-left:24px;
line-height:1.65;
margin-bottom:12px;
}
.sp-blog-content ul li::before{
content:'';
position:absolute;
left:2px;
top:.65em;
width:10px;
height:10px;
border-radius:50%;
background-color:var(--sp-primary);
box-shadow:0 0 12px color-mix(in srgb, var(--sp-primary), transparent 30%);
}
/* --- OL: Nummerierte Brand-blaue Bubbles mit Hover-Bounce --- */
.sp-blog-content ol{
counter-reset:blog-list-counter;
list-style:none !important;
padding-left:0 !important;
margin:2rem 0 !important;
}
.sp-blog-content ol li{
position:relative;
padding-left:48px;
margin-bottom:20px;
line-height:1.65;
cursor:default;
}
.sp-blog-content ol li::before{
counter-increment:blog-list-counter;
content:counter(blog-list-counter);
position:absolute;
left:0;
top:-3px;
width:32px;
height:32px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background-color:var(--sp-primary);
color:#fff;
font-weight:800;
font-size:14px;
box-shadow:0 0 12px color-mix(in srgb, var(--sp-primary), transparent 50%);
transition:transform .3s cubic-bezier(.175,.885,.32,1.275),
background .3s ease,
box-shadow .3s ease;
}
.sp-blog-content ol li:hover::before{
transform:scale(1.12);
background-color:var(--sp-primary-bright, var(--sp-primary));
box-shadow:0 0 24px var(--sp-primary), 0 0 6px #fff;
}
/* Blockquote: Brand-Border + subtiler Gradient-BG */
.sp-blog-content blockquote{
margin:2em 0;
padding:24px 28px;
border-left:3px solid var(--sp-primary);
background:linear-gradient(
90deg,
color-mix(in srgb, var(--sp-primary), transparent 92%) 0%,
transparent 100%
);
border-radius:0 var(--sp-radius-md) var(--sp-radius-md) 0;
font-size:19px;
font-style:italic;
color:var(--sp-text);
}
.sp-blog-content code{
padding:2px 8px;
background:color-mix(in srgb, var(--sp-text), transparent 92%);
border-radius:6px;
font-family:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
font-size:.92em;
color:var(--sp-primary-bright, var(--sp-primary));
}
.sp-blog-content pre{
margin:2em 0;
padding:20px 24px;
background:color-mix(in srgb, var(--sp-text), transparent 95%);
border-radius:var(--sp-radius-md);
overflow-x:auto;
font-family:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
font-size:14px;
line-height:1.6;
}
.sp-blog-content pre code{
padding:0;
background:none;
color:var(--sp-text);
}
/* --- Images: können BREITER als Text (out-of-flow expanded) --- */
.sp-blog-content img,
.sp-blog-content figure,
.sp-blog-content .wp-block-image{
margin-left:auto;
margin-right:auto;
margin-top:2em;
margin-bottom:2em;
max-width:none;
width:100%;
}
/* Inline-Images (kein figure-wrap): direkt mit Card-Look */
.sp-blog-content > p > img,
.sp-blog-content > img{
height:auto;
display:block;
border-radius:var(--sp-radius-md);
border:1px solid var(--sp-border);
box-shadow:var(--sp-shadow-card, 0 10px 30px rgba(0,0,0,.4));
transition:transform .4s cubic-bezier(.25,.8,.25,1), box-shadow .4s ease;
}
.sp-blog-content figure img,
.sp-blog-content .wp-block-image img{
width:100%;
height:auto;
display:block;
border-radius:var(--sp-radius-md);
border:1px solid var(--sp-border);
box-shadow:var(--sp-shadow-card, 0 10px 30px rgba(0,0,0,.4));
transition:transform .4s cubic-bezier(.25,.8,.25,1), box-shadow .4s ease;
}
/* Hover: Lift + stärkerer Shadow · KEINE blaue Border (User-Wunsch v1.4) */
.sp-blog-content > p > img:hover,
.sp-blog-content > img:hover,
.sp-blog-content figure img:hover,
.sp-blog-content .wp-block-image img:hover{
transform:translateY(-5px);
box-shadow:var(--sp-shadow-card-hover, 0 22px 48px rgba(0,0,0,.5));
}
.sp-blog-content figure figcaption,
.sp-blog-content .wp-block-image figcaption{
margin-top:12px;
font-size:14px;
color:var(--sp-text-muted);
text-align:center;
font-style:italic;
}
/* Bilder gehen breiter raus als der Container (760px max) → bis zu 1040px */
@media (min-width:961px){
.sp-blog-content figure.alignwide,
.sp-blog-content .wp-block-image.alignwide,
.sp-blog-content figure[class*="size-large"],
.sp-blog-content figure[class*="size-full"]{
width:calc(100% + 280px);
max-width:calc(100% + 280px);
margin-left:-140px;
margin-right:-140px;
}
}
/* Full-Bleed Images: durchgängig bis zum Viewport-Rand */
.sp-blog-content figure.alignfull,
.sp-blog-content .wp-block-image.alignfull{
margin-left:calc(50% - 50vw);
margin-right:calc(50% - 50vw);
width:100vw;
max-width:100vw;
border-radius:0;
}
.sp-blog-content figure.alignfull img{
border-radius:0;
width:100%;
}
/* ============================================================
4 · MEHR-ARTIKEL SLIDER (Same Category)
============================================================ */
.sp-blog-more-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:24px;
margin-bottom:24px;
flex-wrap:wrap;
}
.sp-blog-more-head h2{
font-size:clamp(24px, 2.6vw, 32px) !important;
line-height:1.2 !important;
font-weight:800 !important;
color:var(--sp-text) !important;
margin:0 !important;
letter-spacing:-.015em;
}
.sp-blog-more-controls{
display:flex;
align-items:center;
gap:12px;
}
.sp-blog-more-link{
display:inline-flex;
align-items:center;
gap:6px;
font-size:14px;
font-weight:600;
color:var(--sp-text-muted);
text-decoration:none;
margin-right:8px;
transition:color .2s ease;
}
.sp-blog-more-link:hover{
color:var(--sp-text);
}
.sp-blog-more-link svg{width:14px;height:14px}
.sp-blog-more-arrow{
display:inline-flex;
align-items:center;
justify-content:center;
width:42px; height:42px;
border-radius:50%;
background:color-mix(in srgb, var(--sp-text), transparent 92%);
border:1px solid var(--sp-border);
color:var(--sp-text);
cursor:pointer;
transition:all .2s ease;
}
.sp-blog-more-arrow:hover{
background:color-mix(in srgb, var(--sp-text), transparent 85%);
border-color:color-mix(in srgb, var(--sp-text), transparent 70%);
}
.sp-blog-more-arrow:disabled{
opacity:.35;
cursor:not-allowed;
}
.sp-blog-more-arrow svg{width:16px;height:16px}
.sp-blog-more-track{
display:flex;
gap:18px;
overflow-x:auto;
overflow-y:hidden; /* explicit · sonst kann Hover vertikal scrollen */
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
/* GROSSZÜGIGES Padding für Hover-Lift + Card-Shadow-Bleed · vorher 14/24px
war zu knapp, der Glow ragte über die Scrollbox-Grenze und wurde geclippt.
Negative Margins kompensieren das Padding visuell, Layout bleibt gleich. */
padding:36px 24px 56px 24px;
margin:-36px -24px -56px -24px;
scroll-padding-left:24px;
scroll-padding-right:24px;
align-items:stretch;
/* hide scrollbar */
scrollbar-width:none;
-ms-overflow-style:none;
}
.sp-blog-more-track::-webkit-scrollbar{display:none}
.sp-blog-more-card{
flex:0 0 calc(25% - 14px);
min-width:240px;
scroll-snap-align:start;
border-radius:var(--sp-radius);
background:var(--sp-card-bg, rgba(20,25,40,.5));
border:1px solid var(--sp-border);
text-decoration:none;
color:var(--sp-text);
transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
display:flex;
flex-direction:column;
/* overflow:visible explizit · sonst können Theme/Browser-Defaults clippen */
overflow:visible;
position:relative;
}
.sp-blog-more-card:hover{
transform:translateY(-4px);
/* KEINE blaue Border auf Hover (User-Wunsch v1.4) · nur Lift + Shadow */
border-color:var(--sp-border);
box-shadow:var(--sp-shadow-card-hover, 0 20px 40px -10px rgba(0,0,0,.6));
}
/* Image-Border-Radius statt Card-overflow:hidden */
.sp-blog-more-card-image{
border-top-left-radius:var(--sp-radius);
border-top-right-radius:var(--sp-radius);
}
.sp-blog-more-card-image{
aspect-ratio:16/9;
background:var(--sp-bg) center/cover no-repeat;
background-color:color-mix(in srgb, var(--sp-primary), transparent 85%);
flex-shrink:0;
}
/* Modifier · Card OHNE Featured-Image (kein Placeholder gerendert).
Content kriegt mehr vertikales Padding damit die Karte nicht kopflastig
wirkt + Min-Height, damit sie im Slider neben Image-Cards visuell
konsistent bleibt. */
.sp-blog-more-card--no-image .sp-blog-more-card-content{
padding:28px 22px 26px;
min-height:180px;
justify-content:space-between;
}
.sp-blog-more-card-content{
padding:18px 20px 22px;
display:flex;
flex-direction:column;
gap:12px;
flex:1 1 auto; /* fills card to enable margin-top:auto on cats */
}
.sp-blog-more-card-content h3{
font-size:16px !important;
line-height:1.35 !important;
font-weight:700 !important;
color:var(--sp-text) !important;
margin:0 !important;
text-wrap:balance;
}
.sp-blog-more-card-cats{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-top:auto; /* immer am Card-Boden, egal wie lang der Titel */
padding-top:8px;
}
/* ============================================================
5 · AUTHOR-BOX (Über den Autor)
============================================================ */
.sp-blog-author-section{
/* Container hat keine eigene Constraint, ist Section-Wrapper */
}
.sp-blog-author-box{
max-width:880px;
margin:0 auto;
padding:0; /* Foto-Spalte geht edge-to-edge */
display:grid;
grid-template-columns:260px 1fr;
gap:0;
align-items:stretch;
/* DS-Card-Style · konsistent mit allen anderen Cards auf der Site */
background:var(--sp-card-bg, rgba(20,25,40,.5));
border:1px solid var(--sp-border);
border-radius:var(--sp-radius);
box-shadow:var(--sp-shadow-card, 0 20px 50px -15px rgba(0,0,0,.6));
overflow:hidden; /* Foto respektiert die rounded Corners */
}
.sp-blog-author-box:not(:has(.sp-blog-author-photo)){
grid-template-columns:1fr;
}
/* Vertikales Rechteck-Foto, FULL-HEIGHT der Card, edge-to-edge links.
Kein Margin/Padding · der Card-Border-Radius beschneidet das Bild. */
.sp-blog-author-photo{
position:relative;
width:100%;
min-height:420px;
align-self:stretch;
background:color-mix(in srgb, var(--sp-text), transparent 92%);
}
.sp-blog-author-photo img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:50% 25%; /* Gesicht im oberen Drittel */
display:block;
}
.sp-blog-author-content{
padding:44px 44px 44px 40px;
/* min-width:0 ist KRITISCH bei CSS-Grid: ohne das default min-width:auto =
Content-Min-Width. Der Button "MEHR ÜBER SAMUEL PEIFFER ERFAHREN" ist
lang + nowrap aus DS → Grid-Spalte wächst übers Viewport. */
min-width:0;
}
.sp-blog-author-content > .sp-section-eyebrow{
margin-bottom:10px;
}
.sp-blog-author-name{
font-size:26px !important;
line-height:1.2 !important;
font-weight:800 !important;
color:var(--sp-text) !important;
margin:0 0 8px !important;
letter-spacing:-.015em;
}
.sp-blog-author-tagline{
font-size:15px !important;
line-height:1.4 !important;
color:var(--sp-primary-bright, var(--sp-primary)) !important;
font-weight:600 !important;
margin:0 0 16px !important;
letter-spacing:.01em;
}
.sp-blog-author-quote{
font-size:15.5px !important;
line-height:1.6 !important;
color:var(--sp-text-muted) !important;
font-style:italic;
margin:0 0 16px !important;
}
.sp-blog-author-bio{
font-size:15px !important;
line-height:1.6 !important;
color:var(--sp-text-muted) !important;
margin:0 0 22px !important;
}
.sp-blog-author-actions{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:14px;
}
.sp-blog-author-socials{
display:inline-flex;
align-items:center;
gap:8px;
}
.sp-blog-author-social{
display:inline-flex;
align-items:center;
justify-content:center;
width:38px; height:38px;
border-radius:50%;
background:color-mix(in srgb, var(--sp-text), transparent 92%);
border:1px solid var(--sp-border);
/* color WEISS · WP-Theme injecte sonst a{color:blue} auf Mobile/Desktop
SVGs nutzen currentColor → !important damit Theme nicht überschreiben kann */
color:#fff !important;
text-decoration:none;
transition:all .25s ease;
}
.sp-blog-author-social:hover{
background:color-mix(in srgb, var(--sp-primary), transparent 80%);
border-color:var(--sp-border); /* KEINE blaue Border (User-Wunsch v1.4) */
color:var(--sp-primary-bright, var(--sp-primary)) !important;
}
.sp-blog-author-social svg{width:18px;height:18px}
/* Color-Force auf den Anchor (oben) reicht · SVGs nutzen inline
fill="currentColor" (YT) bzw. stroke="currentColor" (IG) und
erben automatisch. KEINE explizite fill/stroke-Regel auf svg/path,
sonst wird IG-Outline aus Versehen ausgefüllt. */
/* ============================================================
6 · STICKY-BOTTOM-TOC (Floating Pill)
============================================================ */
.sp-blog-toc{
position:fixed;
bottom:24px;
left:50%;
transform:translateX(-50%);
z-index:9990;
display:flex;
flex-direction:column;
align-items:center;
pointer-events:none;
opacity:0;
transition:opacity .35s ease;
}
.sp-blog-toc.is-visible{
opacity:1;
pointer-events:auto;
}
.sp-blog-toc-trigger{
display:inline-flex;
align-items:center;
gap:10px;
padding:12px 18px 12px 14px;
background:color-mix(in srgb, var(--sp-card-bg, #14192899), transparent 0%);
backdrop-filter:blur(16px) saturate(1.4);
-webkit-backdrop-filter:blur(16px) saturate(1.4);
border:1px solid color-mix(in srgb, var(--sp-primary), transparent 65%);
border-radius:999px;
color:var(--sp-text);
font-size:14px;
font-weight:600;
cursor:pointer;
box-shadow:
0 20px 40px -10px rgba(0,0,0,.5),
0 0 30px color-mix(in srgb, var(--sp-primary), transparent 75%);
transition:all .25s ease;
max-width:calc(100vw - 32px);
}
.sp-blog-toc-trigger:hover{
/* KEINE stärkere blaue Border auf Hover (User-Wunsch v1.4),
nur stärkerer Shadow für Lift-Feeling */
box-shadow:
0 24px 48px -10px rgba(0,0,0,.6),
0 0 40px color-mix(in srgb, var(--sp-primary), transparent 60%);
}
.sp-blog-toc-icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:28px; height:28px;
border-radius:50%;
background:color-mix(in srgb, var(--sp-primary), transparent 80%);
color:var(--sp-primary-bright, var(--sp-primary));
}
.sp-blog-toc-icon svg{width:14px;height:14px}
.sp-blog-toc-label{
font-weight:600;
}
.sp-blog-toc-current{
color:var(--sp-text-muted);
font-weight:500;
max-width:200px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
border-left:1px solid var(--sp-border);
padding-left:10px;
margin-left:4px;
}
.sp-blog-toc-current:empty{display:none}
.sp-blog-toc-chevron{
display:inline-flex;
transition:transform .3s ease;
}
.sp-blog-toc-chevron svg{width:14px;height:14px}
.sp-blog-toc.is-open .sp-blog-toc-chevron{
transform:rotate(180deg);
}
.sp-blog-toc-panel{
position:absolute;
bottom:calc(100% + 12px);
left:50%;
transform:translateX(-50%) translateY(8px);
width:380px;
max-width:calc(100vw - 32px);
max-height:60vh;
background:var(--sp-card-bg, rgba(20,25,40,.95));
backdrop-filter:blur(20px) saturate(1.5);
-webkit-backdrop-filter:blur(20px) saturate(1.5);
border:1px solid color-mix(in srgb, var(--sp-primary), transparent 70%);
border-radius:var(--sp-radius);
box-shadow:
0 30px 60px -15px rgba(0,0,0,.7),
0 0 50px color-mix(in srgb, var(--sp-primary), transparent 80%);
padding:18px 20px;
overflow-x:hidden;
overflow-y:auto;
/* Scrollbar VISIBLE · gestylt mit DS-Brand-Farbe · schmal, rund, mit Padding
zu Top/Bottom-Edge ("küsst" die Seite mit etwas Abstand) */
scrollbar-width:thin; /* Firefox */
scrollbar-color:color-mix(in srgb, var(--sp-primary), transparent 55%) transparent; /* Firefox: thumb · track */
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
/* Webkit-Scrollbar Custom-Style (Chrome/Safari/iOS) */
.sp-blog-toc-panel::-webkit-scrollbar{
width:6px; /* schmal · kein fetter Block */
}
.sp-blog-toc-panel::-webkit-scrollbar-track{
background:transparent;
margin:10px 0; /* Abstand zu Top + Bottom-Edge des Panels */
}
.sp-blog-toc-panel::-webkit-scrollbar-thumb{
background:color-mix(in srgb, var(--sp-primary), transparent 55%);
border-radius:999px; /* voll rund oben + unten */
}
.sp-blog-toc-panel::-webkit-scrollbar-thumb:hover{
background:color-mix(in srgb, var(--sp-primary), transparent 30%);
}
.sp-blog-toc.is-open .sp-blog-toc-panel{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateX(-50%) translateY(0);
transition:opacity .25s ease, transform .25s ease, visibility 0s linear 0s;
}
.sp-blog-toc-list{
list-style:none;
padding:0;
margin:0;
}
.sp-blog-toc-list li{
border-bottom:1px solid color-mix(in srgb, var(--sp-text), transparent 92%);
}
.sp-blog-toc-list li:last-child{border-bottom:0}
.sp-blog-toc-list a{
display:block;
padding:10px 12px;
font-size:14px;
line-height:1.4;
color:var(--sp-text-muted);
text-decoration:none;
border-radius:8px;
transition:all .2s ease;
}
.sp-blog-toc-list a:hover,
.sp-blog-toc-list a.is-active{
background:color-mix(in srgb, var(--sp-primary), transparent 90%);
color:var(--sp-text);
}
.sp-blog-toc-list a.is-active{
color:var(--sp-primary-bright, var(--sp-primary));
font-weight:600;
}
/* --- H3-Submenu · Per H2 togglebar via Chevron-Button ---
v1.4: User-Feedback war "always-inline ist overwhelming".
Lösung: H3s kollabiert by default, kleiner Chevron-Button neben H2
öffnet die Subsection. Click auf den H2-Link selbst scrollt nach
wie vor. Mobile: nur H2s, kein Toggle. */
.sp-blog-toc-row{
display:flex;
align-items:stretch;
gap:2px;
}
.sp-blog-toc-row > a{
flex:1 1 auto;
min-width:0;
}
.sp-blog-toc-expand{
display:none; /* Mobile: H3-Toggle ausgeblendet */
flex:0 0 auto;
background:transparent;
border:none;
border-radius:6px;
cursor:pointer;
padding:0 8px;
color:color-mix(in srgb, var(--sp-text-muted), transparent 25%);
transition:transform .2s ease, background .2s ease, color .2s ease;
}
.sp-blog-toc-expand svg{width:14px;height:14px;display:block}
.sp-blog-toc-expand:hover{
background:color-mix(in srgb, var(--sp-text), transparent 92%);
color:var(--sp-text);
}
.sp-blog-toc-list li.is-expanded > .sp-blog-toc-row > .sp-blog-toc-expand{
transform:rotate(90deg);
}
.sp-blog-toc-submenu{
display:none; /* Kollabiert by default */
list-style:none;
margin:0;
padding:0;
}
.sp-blog-toc-list li.is-expanded > .sp-blog-toc-submenu{
display:block;
padding:2px 0 6px 14px;
margin:2px 0 6px 10px;
border-left:2px solid color-mix(in srgb, var(--sp-primary), transparent 78%);
}
.sp-blog-toc-submenu li{border-bottom:none !important}
.sp-blog-toc-submenu a{
padding:6px 10px !important;
font-size:13px !important;
line-height:1.35 !important;
color:color-mix(in srgb, var(--sp-text-muted), transparent 15%) !important;
}
.sp-blog-toc-submenu a:hover,
.sp-blog-toc-submenu a.is-active{
color:var(--sp-primary-bright, var(--sp-primary)) !important;
background:color-mix(in srgb, var(--sp-primary), transparent 92%) !important;
}
/* Desktop: Chevron-Toggle sichtbar */
@media (min-width:961px){
.sp-blog-toc-list li.has-submenu .sp-blog-toc-expand{display:inline-flex;align-items:center;justify-content:center}
}
/* ============================================================
7 · RESPONSIVE
============================================================ */
@media (max-width:960px){
.sp-blog-hero--no-video .sp-blog-hero-grid{
grid-template-columns:1fr;
gap:36px;
}
.sp-blog-hero--no-video .sp-blog-hero-image{
max-width:680px;
margin:0 auto;
}
.sp-blog-body-container{max-width:660px !important}
.sp-blog-content{font-size:17px}
.sp-blog-content p{font-size:17px}
.sp-blog-more-card{flex:0 0 calc(50% - 9px)}
.sp-blog-toc-current{display:none}
.sp-blog-author-box{
grid-template-columns:1fr;
grid-template-rows:auto 1fr;
gap:0;
padding:0;
text-align:left;
}
.sp-blog-author-photo{
min-height:240px;
max-height:320px;
aspect-ratio:16/10;
}
.sp-blog-author-content{
padding:28px 24px;
min-width:0; /* siehe Desktop · gleicher Grid-Shrink-Fix */
}
.sp-blog-author-actions{justify-content:flex-start}
/* Button & Socials Mobile-Responsive · Button mit langem Text
"MEHR ÜBER SAMUEL PEIFFER ERFAHREN" muss wrappen, nicht überlaufen.
white-space:normal überschreibt das nowrap aus DS sp-btn. */
.sp-blog-author-actions .sp-btn{
width:100%;
max-width:100%;
white-space:normal !important;
text-align:center;
padding-left:14px;
padding-right:14px;
font-size:14px !important; /* etwas kleiner = mehr Text pro Zeile = passt evtl. komplett auf 1 Zeile */
line-height:1.3;
/* text-wrap:balance verhindert Orphan-Wörter ("ERFAHREN" allein
auf Zeile 2). Browser balanciert Zeilenlängen automatisch.
iOS Safari 17.4+, Chrome 114+, Firefox 121+. Bei älteren Browsern
bleibt der Orphan, aber Layout bricht nicht. */
text-wrap:balance;
}
.sp-blog-author-socials{
width:100%;
justify-content:flex-start;
margin-top:4px;
}
}
@media (max-width:560px){
.sp-blog-body-container{max-width:none !important}
.sp-blog-content{font-size:16.5px}
.sp-blog-content p{font-size:16.5px}
.sp-blog-content h2{font-size:22px}
.sp-blog-content h3{font-size:19px}
.sp-blog-more-card{flex:0 0 calc(85% - 14px); min-width:0}
.sp-blog-toc{bottom:16px}
/* TOC-Trigger: Label "Inhaltsverzeichnis" sichtbar lassen (User-Feedback:
Mobile geht das sonst unter), aber kompakter Padding. */
.sp-blog-toc-trigger{padding:10px 16px 10px 12px; font-size:13px}
.sp-blog-toc-label{display:inline; max-width:none}
.sp-blog-toc-current{display:none} /* das wird zu viel auf Mobile */
.sp-blog-toc-panel{width:calc(100vw - 24px); max-height:55vh}
.sp-blog-breadcrumb-current{max-width:200px}
/* Author-Box: KEIN padding hier · Foto bleibt edge-to-edge,
Content-Padding kommt aus .sp-blog-author-content selbst. */
.sp-blog-author-photo{min-height:220px; max-height:280px}
.sp-blog-author-content{padding:24px 20px}
.sp-blog-author-name{font-size:21px !important}
.sp-blog-subscribe-btn{padding:11px 20px;font-size:13px}
}
/* ============================================================
8 · WHITE LINKS · Alle Text-Links weiß ausser im Post-Content
============================================================
Greift breadcrumb, TOC, related cards, "Alle Artikel", author-byline.
AUSGENOMMEN:
- .sp-blog-content a (Post-Body behält Brand-Blau)
- .sp-btn* (Buttons haben eigene Color-Logik)
- .sp-blog-subscribe-btn (rot)
- .sp-blog-category-pill (eigene Brand-Färbung)
Mobile + Desktop identisch. */
.sp-blog-post-page .sp-blog-breadcrumb a,
.sp-blog-post-page .sp-blog-breadcrumb-current,
.sp-blog-author-byline,
.sp-blog-author-byline-link,
.sp-blog-more-link,
.sp-blog-more-card,
.sp-blog-more-card h3,
.sp-blog-toc-list .sp-blog-toc-row > a,
.sp-blog-toc-submenu a{
color:#fff !important;
}
/* Hover-States: weiß bleiben, aber subtiler Underline + Hintergrund-Akzent */
.sp-blog-post-page .sp-blog-breadcrumb a:hover,
.sp-blog-author-byline-link:hover,
.sp-blog-more-link:hover{
color:#fff !important;
text-decoration:underline;
text-underline-offset:3px;
}
/* TOC-Links: aktiver State + Hover bekommen leichten Brand-BG, Text bleibt weiß */
.sp-blog-toc-list .sp-blog-toc-row > a:hover,
.sp-blog-toc-list .sp-blog-toc-row > a.is-active,
.sp-blog-toc-submenu a:hover,
.sp-blog-toc-submenu a.is-active{
color:#fff !important;
background:color-mix(in srgb, var(--sp-primary), transparent 86%) !important;
}
/* ── Block 26 ── */
:root { --op-magic-overlay-image: url("/assets/plugins/op-builder/public/assets/img/elements/video/sound-on.webp"); }
/* ── Block 27 ── */
/* BetterLinks Auto-Link Keywords - Inherit Theme Styling */
a.sp-blog-autolink {
/* All styles will inherit from theme by default */
}
/* ── Block 28 ── */
/* ==================================================================
GLOBAL DESIGN TOKENS (Final Polished System v6)
================================================================== */
:root {
/* Core Backgrounds */
--sp-blog-bg: #050505;
--sp-blog-card-bg: linear-gradient(135deg, #080808 0%, #121212 100%);
/* Borders */
--sp-blog-border: rgba(255,255,255,0.08);
--sp-blog-border-hover: rgba(255,255,255,0.25);
/* Typography */
--sp-blog-text: #ffffff;
--sp-blog-body: rgba(255,255,255,0.75);
--sp-blog-muted: rgba(255,255,255,0.55);
/* Brand Colors */
--sp-blog-blue: #0057ff;
--sp-blog-purple: #8b5cf6;
--sp-blog-green: #10b981;
--sp-blog-red: #ef4444;
--sp-blog-azure: #3b82f6;
/* GLOW PRESETS */
--glow-blue: 0 0 50px rgba(0, 87, 255, 0.10);
--glow-blue-strong: 0 0 80px rgba(0, 87, 255, 0.22);
--glow-purple: 0 0 50px rgba(139, 92, 246, 0.10);
--glow-purple-strong: 0 0 80px rgba(139, 92, 246, 0.22);
--glow-green: 0 0 50px rgba(16, 185, 129, 0.10);
--glow-green-strong: 0 0 80px rgba(16, 185, 129, 0.22);
--glow-red: 0 0 50px rgba(239, 68, 68, 0.10);
--glow-red-strong: 0 0 80px rgba(239, 68, 68, 0.22);
--glow-azure: 0 0 50px rgba(59, 130, 246, 0.10);
--glow-azure-strong: 0 0 80px rgba(59, 130, 246, 0.22);
}
/* GLOBAL SHARED: PREMIUM NOISE TEXTURE */
.sp-blog-faq-card::before,
.sp-blog-checklist-box::before,
.sp-blog-summary::before,
.sp-blog-tools::before,
.sp-blog-myth::before,
.sp-blog-fact::before,
.sp-blog-vs::before { /* Added VS Wrapper here for texture */
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.12;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
background-size: 260px 260px;
mix-blend-mode: overlay;
z-index: 0;
}
/* GLOBAL: STANDARD HIGHLIGHT (Subtle Glass) */
:is(.sp-blog-summary, .sp-blog-summary-inner, .sp-blog-summary-label, .sp-blog-summary-title, .sp-blog-summary-answer, .sp-blog-section-summary, .sp-blog-faq-card, .sp-blog-faq-headline, .sp-blog-faq-section-title, .sp-blog-checklist-title, .sp-blog-tip, .sp-blog-checklist-box, .sp-blog-checklist, .sp-blog-checkmark-list, .sp-blog-safe-list, .sp-blog-fact, .sp-blog-myth, .sp-blog-myth-buster, .sp-blog-data-insight, .sp-blog-case-study, .sp-blog-case-study-body, .sp-blog-definition, .sp-blog-warning, .sp-blog-quote, .sp-blog-tools, .sp-blog-tool-avatar, .sp-blog-pros-cons, .sp-blog-pros, .sp-blog-cons, .sp-blog-comparison-table, .sp-blog-data-table, .sp-blog-data-table-title, .sp-blog-data-table-wrapper, .sp-blog-data-td, .sp-blog-data-td-label, .sp-blog-data-th, .sp-blog-table-container, .sp-blog-table-scroll, .sp-blog-vs, .sp-blog-vs-header, .sp-blog-vs-title, .sp-blog-vs-table, .sp-blog-vs-table-container, .sp-blog-vs-td-content, .sp-blog-vs-td-criteria, .sp-blog-vs-th-competitor, .sp-blog-vs-th-criteria, .sp-blog-rec, .sp-blog-rec-header, .sp-blog-rec-body, .sp-blog-h1, .sp-blog-h1-title, .sp-blog-h2, .sp-blog-h2-title, .sp-blog-main-headline, .sp-blog-main-title, .sp-blog-sub-headline, .sp-blog-icon-bulb, .sp-blog-icon-chart, .sp-blog-watermark, .sp-blog-prompt, .sp-blog-prompt-header, .sp-blog-prompt-label, .sp-blog-prompt-content, .sp-blog-copy-btn) p strong, :is(.sp-blog-summary, .sp-blog-summary-inner, .sp-blog-summary-label, .sp-blog-summary-title, .sp-blog-summary-answer, .sp-blog-section-summary, .sp-blog-faq-card, .sp-blog-faq-headline, .sp-blog-faq-section-title, .sp-blog-checklist-title, .sp-blog-tip, .sp-blog-checklist-box, .sp-blog-checklist, .sp-blog-checkmark-list, .sp-blog-safe-list, .sp-blog-fact, .sp-blog-myth, .sp-blog-myth-buster, .sp-blog-data-insight, .sp-blog-case-study, .sp-blog-case-study-body, .sp-blog-definition, .sp-blog-warning, .sp-blog-quote, .sp-blog-tools, .sp-blog-tool-avatar, .sp-blog-pros-cons, .sp-blog-pros, .sp-blog-cons, .sp-blog-comparison-table, .sp-blog-data-table, .sp-blog-data-table-title, .sp-blog-data-table-wrapper, .sp-blog-data-td, .sp-blog-data-td-label, .sp-blog-data-th, .sp-blog-table-container, .sp-blog-table-scroll, .sp-blog-vs, .sp-blog-vs-header, .sp-blog-vs-title, .sp-blog-vs-table, .sp-blog-vs-table-container, .sp-blog-vs-td-content, .sp-blog-vs-td-criteria, .sp-blog-vs-th-competitor, .sp-blog-vs-th-criteria, .sp-blog-rec, .sp-blog-rec-header, .sp-blog-rec-body, .sp-blog-h1, .sp-blog-h1-title, .sp-blog-h2, .sp-blog-h2-title, .sp-blog-main-headline, .sp-blog-main-title, .sp-blog-sub-headline, .sp-blog-icon-bulb, .sp-blog-icon-chart, .sp-blog-watermark, .sp-blog-prompt, .sp-blog-prompt-header, .sp-blog-prompt-label, .sp-blog-prompt-content, .sp-blog-copy-btn) p b,
:is(.sp-blog-summary, .sp-blog-summary-inner, .sp-blog-summary-label, .sp-blog-summary-title, .sp-blog-summary-answer, .sp-blog-section-summary, .sp-blog-faq-card, .sp-blog-faq-headline, .sp-blog-faq-section-title, .sp-blog-checklist-title, .sp-blog-tip, .sp-blog-checklist-box, .sp-blog-checklist, .sp-blog-checkmark-list, .sp-blog-safe-list, .sp-blog-fact, .sp-blog-myth, .sp-blog-myth-buster, .sp-blog-data-insight, .sp-blog-case-study, .sp-blog-case-study-body, .sp-blog-definition, .sp-blog-warning, .sp-blog-quote, .sp-blog-tools, .sp-blog-tool-avatar, .sp-blog-pros-cons, .sp-blog-pros, .sp-blog-cons, .sp-blog-comparison-table, .sp-blog-data-table, .sp-blog-data-table-title, .sp-blog-data-table-wrapper, .sp-blog-data-td, .sp-blog-data-td-label, .sp-blog-data-th, .sp-blog-table-container, .sp-blog-table-scroll, .sp-blog-vs, .sp-blog-vs-header, .sp-blog-vs-title, .sp-blog-vs-table, .sp-blog-vs-table-container, .sp-blog-vs-td-content, .sp-blog-vs-td-criteria, .sp-blog-vs-th-competitor, .sp-blog-vs-th-criteria, .sp-blog-rec, .sp-blog-rec-header, .sp-blog-rec-body, .sp-blog-h1, .sp-blog-h1-title, .sp-blog-h2, .sp-blog-h2-title, .sp-blog-main-headline, .sp-blog-main-title, .sp-blog-sub-headline, .sp-blog-icon-bulb, .sp-blog-icon-chart, .sp-blog-watermark, .sp-blog-prompt, .sp-blog-prompt-header, .sp-blog-prompt-label, .sp-blog-prompt-content, .sp-blog-copy-btn) li strong, :is(.sp-blog-summary, .sp-blog-summary-inner, .sp-blog-summary-label, .sp-blog-summary-title, .sp-blog-summary-answer, .sp-blog-section-summary, .sp-blog-faq-card, .sp-blog-faq-headline, .sp-blog-faq-section-title, .sp-blog-checklist-title, .sp-blog-tip, .sp-blog-checklist-box, .sp-blog-checklist, .sp-blog-checkmark-list, .sp-blog-safe-list, .sp-blog-fact, .sp-blog-myth, .sp-blog-myth-buster, .sp-blog-data-insight, .sp-blog-case-study, .sp-blog-case-study-body, .sp-blog-definition, .sp-blog-warning, .sp-blog-quote, .sp-blog-tools, .sp-blog-tool-avatar, .sp-blog-pros-cons, .sp-blog-pros, .sp-blog-cons, .sp-blog-comparison-table, .sp-blog-data-table, .sp-blog-data-table-title, .sp-blog-data-table-wrapper, .sp-blog-data-td, .sp-blog-data-td-label, .sp-blog-data-th, .sp-blog-table-container, .sp-blog-table-scroll, .sp-blog-vs, .sp-blog-vs-header, .sp-blog-vs-title, .sp-blog-vs-table, .sp-blog-vs-table-container, .sp-blog-vs-td-content, .sp-blog-vs-td-criteria, .sp-blog-vs-th-competitor, .sp-blog-vs-th-criteria, .sp-blog-rec, .sp-blog-rec-header, .sp-blog-rec-body, .sp-blog-h1, .sp-blog-h1-title, .sp-blog-h2, .sp-blog-h2-title, .sp-blog-main-headline, .sp-blog-main-title, .sp-blog-sub-headline, .sp-blog-icon-bulb, .sp-blog-icon-chart, .sp-blog-watermark, .sp-blog-prompt, .sp-blog-prompt-header, .sp-blog-prompt-label, .sp-blog-prompt-content, .sp-blog-copy-btn) li b {
color: #fff;
background: rgba(255,255,255,0.12);
padding: 1px 6px;
border-radius: 4px;
font-weight: 700;
}
/* ==================================================================
1. CLEAN FAQ CARDS
================================================================== */
.sp-blog-faq-card {
background: var(--sp-blog-card-bg) !important;
border: 1px solid var(--sp-blog-border) !important;
border-top: 1px solid rgba(255,255,255,0.15) !important;
border-left: 3px solid var(--sp-blog-blue) !important;
border-radius: 16px !important;
padding: 32px !important;
margin-bottom: 22px !important;
box-shadow: var(--glow-blue) !important;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
position: relative; overflow: hidden; z-index: 1;
}
.sp-blog-faq-card:hover {
transform: translateY(-5px) !important;
box-shadow: var(--glow-blue-strong) !important;
border-color: rgba(0, 87, 255, 0.35) !important;
}
.sp-blog-faq-card * { position: relative; z-index: 2; }
/* Reset Highlight for Question Title */
.sp-blog-faq-card p:first-child strong {
display: flex; align-items: center;
font-size: 1.15rem; font-weight: 800; color: var(--sp-blog-text) !important;
background: none !important; padding: 0 !important;
}
.sp-blog-faq-card p:last-child {
color: var(--sp-blog-body) !important; font-size: 1.05rem; padding-left: 58px;
}
.sp-blog-faq-card p:first-child strong::before {
content: 'Q'; display: flex; justify-content: center; align-items: center;
min-width: 42px; height: 42px;
background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
color: #fff !important; border-radius: 50%; margin-right: 16px;
font-weight: 900; font-size: 1.1rem;
box-shadow: 0 0 15px rgba(0,0,0,0.5); transition: all 0.3s ease;
}
.sp-blog-faq-card:hover p:first-child strong::before {
background: var(--sp-blog-blue); box-shadow: 0 0 25px rgba(0, 87, 255, 0.5); border-color: var(--sp-blog-blue);
}
/* ==================================================================
2. CHECKLIST
================================================================== */
.Blog-Content .sp-blog-checklist-box, .sp-blog-checklist-box {
background: var(--sp-blog-card-bg) !important;
border: 1px solid var(--sp-blog-border) !important;
border-top: 3px solid var(--sp-blog-azure) !important;
border-radius: 14px; padding: 2.5rem; margin: 3em 0 !important;
position: relative; overflow: hidden !important;
box-shadow: var(--glow-azure) !important;
transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.sp-blog-checklist-box:hover {
transform: translateY(-5px) !important;
box-shadow: var(--glow-azure-strong) !important;
border-color: rgba(59, 130, 246, 0.4) !important;
}
.sp-blog-checklist-box * { position: relative; z-index: 2; }
.sp-blog-checklist-box::after {
content: '📋'; position: absolute; top: -20px; right: -20px !important;
font-size: 10rem; opacity: 0.04; filter: grayscale(100%) !important;
pointer-events: none; transform: rotate(15deg); z-index: 1 !important;
}
/* Headline with Azure Line */
.sp-blog-checklist-box h3 {
color: #ffffff !important; font-size: 1.5rem !important; text-transform: uppercase;
letter-spacing: 0.05em; display: flex; align-items: center;
border-bottom: 1px solid transparent !important;
border-image: linear-gradient(90deg, var(--sp-blog-azure) 0%, transparent 100%) !important;
border-image-slice: 1 !important;
padding-bottom: 15px; margin-bottom: 2rem !important;
}
.sp-blog-checklist-box h3::before {
content: ''; display: inline-block; width: 10px; height: 10px;
background-color: var(--sp-blog-azure); border-radius: 50%; margin-right: 15px;
box-shadow: 0 0 15px var(--sp-blog-azure); flex-shrink: 0;
}
.Blog-Content .sp-blog-checklist-box ul, .sp-blog-checklist-box ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.sp-blog-checklist-box li {
list-style: none !important; padding-left: 3.5rem !important; position: relative;
line-height: 1.6; font-size: 1.05rem; margin-bottom: 1.2rem !important; color: var(--sp-blog-body) !important;
}
.sp-blog-checklist-box li::before {
content: '✓'!important; position: absolute!important; left: 0!important; top: 2px!important; width: 24px!important; height: 24px!important;
background-color: rgba(255,255,255,0.03)!important; border: 1px solid rgba(59, 130, 246, 0.4)!important;
border-radius: 6px!important; color: var(--sp-blog-azure) !important; display: flex!important; align-items: center!important; justify-content: center!important;
font-size: 14px!important; font-weight: bold!important; box-shadow: 0 0 10px rgba(0,0,0,0.3)!important; transition: all 0.2s ease!important;
}
.sp-blog-checklist-box li:hover::before {
background-color: var(--sp-blog-azure); color: #fff !important; box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}
/* Reset Label Highlight: Labels in checklist should be clean */
.sp-blog-checklist-box li strong { color: #fff !important; font-weight: 700; background: none !important; padding: 0 !important; border: none !important; }
/* ==================================================================
3. INSIDER TIP BOX (Fixed Spacing & Vertical Alignment)
================================================================== */
.sp-blog-tip {
background: var(--sp-blog-card-bg) !important;
border: 1px solid var(--sp-blog-border) !important;
border-left: 4px solid var(--sp-blog-azure) !important;
margin: 40px 0 !important;
border-radius: 12px;
/* Layout Fix: Flexbox sorgt für vertikale Zentrierung */
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
/* Padding definiert den Abstand zur Außenkante */
padding: 28px 30px 28px 85px !important;
min-height: 110px; /* Mindesthöhe damit Icon Platz hat */
position: relative;
overflow: hidden;
box-shadow: var(--glow-azure) !important;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Master Noise Texture hinzufügen */
.sp-blog-tip::before {
content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.12;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
background-size: 260px 260px; mix-blend-mode: overlay; z-index: 0;
}
.sp-blog-tip:hover {
transform: translateY(-5px) !important;
box-shadow: var(--glow-azure-strong) !important;
}
.sp-blog-tip * { position: relative; z-index: 2; }
/* Icon Position */
.sp-blog-tip::after {
content: '💡';
position: absolute;
top: 32px; /* Angepasst an neues Padding */
left: 28px;
font-size: 32px;
line-height: 1;
animation: pulse-bulb-glow 3s infinite ease-in-out;
z-index: 2;
}
@keyframes pulse-bulb-glow {
0% { text-shadow: 0 0 0 rgba(255, 255, 0, 0); transform: scale(1); }
50% { text-shadow: 0 0 20px rgba(255, 255, 0, 0.6); transform: scale(1.1); }
100% { text-shadow: 0 0 0 rgba(255, 255, 0, 0); transform: scale(1); }
}
/* Headline - Reset Global Margins */
.sp-blog-tip h3 {
color: #fff !important;
font-weight: 800 !important;
text-transform: uppercase;
font-size: 1.15rem !important;
/* WICHTIG: Abstand nach oben killen und unten klein halten */
margin-top: 0 !important;
margin-bottom: 8px !important;
padding: 0 !important;
border: none !important;
line-height: 1.2 !important;
}
/* Paragraph - Reset Global Margins */
.sp-blog-tip p {
color: var(--sp-blog-body) !important;
margin: 0 !important; /* WICHTIG: Killt den globalen 1.5rem Abstand */
padding: 0 !important;
font-size: 1.05rem !important;
}
/* ==================================================================
4. SUMMARY BOX
================================================================== */
.sp-blog-summary {
background: var(--sp-blog-card-bg) !important;
border: 1px solid var(--sp-blog-border) !important;
border-top: 3px solid var(--sp-blog-blue) !important;
border-radius: 16px !important;
padding: 40px !important;
margin-bottom: 60px;
position: relative !important;
overflow: hidden !important;
box-shadow: var(--glow-blue) !important;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Lift Effect */
.sp-blog-summary:hover {
transform: translateY(-5px) !important;
box-shadow: var(--glow-blue-strong) !important;
border-color: rgba(0, 87, 255, 0.35) !important;
}
.sp-blog-summary * { position: relative; z-index: 2; }
/* Top Highlight (Subtle) */
.sp-blog-summary::after {
content: "";
position: absolute; left: 0; right: 0; top: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--sp-blog-blue), transparent);
opacity: 0.8;
z-index: 3;
}
/* Headline with Blue Gradient Line */
.sp-blog-summary h3 {
color: #fff !important; font-weight: 900 !important;
font-size: 1.8rem !important; margin: 0 0 20px 0 !important;
letter-spacing: -0.5px !important;
/* 🔥 THE GRADIENT LINE 🔥 */
border-bottom: 1px solid transparent !important;
border-image: linear-gradient(90deg, var(--sp-blog-blue) 0%, transparent 100%) !important;
border-image-slice: 1 !important;
padding-bottom: 20px;
}
/* Intro Paragraph Highlights: BLUE BUBBLES */
.sp-blog-summary > p strong,
.sp-blog-summary > p b {
color: #ffffff !important;
font-weight: 800 !important;
background-color: rgba(0,87,255,0.22) !important;
padding: 0 6px !important;
border-radius: 6px !important;
border: 1px solid rgba(0,87,255,0.38) !important;
}
/* --- THE LABEL CLASS (sp-blog-summary-label) --- */
.sp-blog-summary-label {
display: block !important; width: fit-content !important;
background-color: rgba(255,255,255,0.06) !important;
color: rgba(255,255,255,0.88) !important;
border: 1px solid rgba(255,255,255,0.12) !important;
/* 🔥 INCREASED PADDING (Breathing Room) 🔥 */
padding: 12px 16px !important;
border-radius: 8px !important;
font-family: monospace !important; font-size: 0.85rem !important;
font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 1px !important;
margin-top: 0 !important; margin-bottom: 15px !important;
box-shadow: none !important;
}
.sp-blog-summary-label::before {
content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 12px;
border-radius: 999px; background: var(--sp-blog-blue);
box-shadow: 0 0 0 4px rgba(0,87,255,0.18); vertical-align: middle;
}
/* --- THE LIST CLASS (sp-blog-checkmark-list) --- */
/* Targeting only the specific list for this box */
.sp-blog-summary ul, .sp-blog-checkmark-list {
list-style: none !important; padding: 0 !important; margin: 0 !important;
}
.sp-blog-checkmark-list li {
display: block !important; position: relative !important;
/* Padding adjusted for smaller checkmarks */
padding-left: 40px !important;
margin-bottom: 20px !important; margin-top: 15px !important;
width: 100% !important; color: var(--sp-blog-body) !important; font-size: 1.1rem !important;
}
/* The Blue Bullet Point (SMALLER & REFINED) */
.sp-blog-checkmark-list li::before {
content: '✓' !important; position: absolute !important; top: 0 !important; left: 0 !important;
/* 🔥 SMALLER SIZE (24px) 🔥 */
width: 24px !important;
height: 24px !important;
line-height: 24px !important;
font-size: 13px !important;
background-color: var(--sp-blog-blue) !important; color: #ffffff !important;
border-radius: 50% !important; text-align: center !important;
font-weight: 900 !important;
box-shadow: 0 0 15px rgba(0,87,255,0.28) !important;
}
/* 🔥 REMOVE HIGHLIGHTS INSIDE LIST (Clean Text) 🔥 */
.sp-blog-checkmark-list li strong,
.sp-blog-checkmark-list li b {
background: none !important;
border: none !important;
padding: 0 !important;
color: #fff !important;
font-weight: 700 !important;
}
/* --- THE LIST CLASS --- */
.sp-blog-summary ul {
list-style: none !important; padding: 0 !important; margin: 0 !important;
}
.sp-blog-summary li {
display: block !important; position: relative !important;
/* Adjusted padding for smaller checkmarks */
padding-left: 40px !important;
margin-bottom: 20px !important; margin-top: 35px !important;
width: 100% !important; color: var(--sp-blog-body) !important; font-size: 1.1rem !important;
}
/* The Blue Bullet Point (SMALLER) */
.sp-blog-summary li::before {
content: '✓' !important; position: absolute !important; top: 0 !important; left: 0 !important;
/* 🔥 SMALLER SIZE 🔥 */
width: 24px !important;
height: 24px !important;
line-height: 24px !important;
font-size: 13px !important;
background-color: var(--sp-blog-blue) !important; color: #ffffff !important;
border-radius: 50% !important; text-align: center !important;
font-weight: 900 !important;
box-shadow: 0 0 15px rgba(0,87,255,0.28) !important;
}
/* 🔥 REMOVE HIGHLIGHTS INSIDE LIST (Clean Text) 🔥 */
.sp-blog-summary li strong,
.sp-blog-summary li b {
background: none !important;
border: none !important;
padding: 0 !important;
color: #fff !important;
font-weight: 700 !important;
}
/* ==================================================================
5. CASE STUDY BOX (Lift Effect)
================================================================== */
.sp-blog-case-study {
background: var(--sp-blog-bg) !important;
border: 1px solid rgba(255,255,255,0.16) !important;
border-top: 4px solid var(--sp-blog-purple) !important;
border-radius: 12px;
padding: 80px 2.5rem 3rem 2.5rem !important;
margin: 4em 0;
position: relative;
overflow: hidden;
box-shadow: var(--glow-purple) !important;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
/* Lift Effect */
.sp-blog-case-study:hover {
transform: translateY(-5px) !important;
box-shadow: var(--glow-purple-strong) !important;
border-color: rgba(139,92,246,0.55) !important;
}
/* Label Restored */
.sp-blog-case-study::after {
content: 'CASE STUDY';
position: absolute; top: 30px; right: 25px;
font-family: monospace; font-size: 0.75rem; letter-spacing: 2px;
z-index: 10; color: rgba(255,255,255,0.70);
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10);
padding: 6px 12px; border-radius: 6px;
box-shadow: 0 0 22px rgba(139,92,246,0.18) !important;
}
.sp-blog-case-study::before {
content: '';
background-image: url("/assets/uploads/2025/08/Samuel-Peiffer.webp");
background-size: cover; background-repeat: no-repeat; background-position: top center;
position: absolute; bottom: -20px; right: -20px;
width: 280px; height: 280px; opacity: 0.25; z-index: 0;
mask-image: radial-gradient(circle at bottom right, black 40%, transparent 80%);
-webkit-mask-image: radial-gradient(circle at bottom right, black 40%, transparent 80%);
pointer-events: none; filter: grayscale(100%) contrast(1.2);
}
/* Headline with Purple Gradient Line */
.sp-blog-case-study h3 {
color: #ffffff !important;
font-size: 1.3rem !important;
text-transform: uppercase;
font-weight: 800;
margin-top: 0 !important;
border-bottom: 1px solid transparent !important;
border-image: linear-gradient(90deg, var(--sp-blog-purple) 0%, transparent 100%) !important;
border-image-slice: 1 !important;
padding-bottom: 20px;
margin-bottom: 2.5rem !important;
position: relative; z-index: 2;
}
.sp-blog-case-study div { position: relative; z-index: 2; }
/* Restored Badge Logic */
.sp-blog-case-study strong {
display: block; width: fit-content;
font-family: monospace; font-size: 0.8rem;
text-transform: uppercase; letter-spacing: 1px; font-weight: 700;
margin-bottom: 12px; margin-top: 20px;
padding: 6px 12px; border-radius: 6px;
color: #fff !important; background: transparent;
}
/* RED BADGE */
.sp-blog-case-study p:first-of-type strong {
background: rgba(239, 68, 68, 0.15) !important; color: #ffffff !important;
border: 1px solid rgba(239, 68, 68, 0.4) !important;
box-shadow: 0 0 18px rgba(239, 68, 68, 0.18) !important;
}
/* GREEN BADGE */
.sp-blog-case-study p:last-of-type strong {
background: rgba(16, 185, 129, 0.15) !important; color: #ffffff !important;
border: 1px solid rgba(16, 185, 129, 0.4) !important;
box-shadow: 0 0 18px rgba(16, 185, 129, 0.18) !important;
margin-top: 35px;
}
.sp-blog-case-study p {
color: rgba(255,255,255,0.78) !important; line-height: 1.7;
margin-top: 0 !important; margin-bottom: 0; font-size: 1.05rem; max-width: 70%;
}
@media (max-width: 600px) {
.sp-blog-case-study { padding-top: 80px !important; }
.sp-blog-case-study p { max-width: 100%; }
}
/* ==================================================================
6. MYTH BUSTER (FIXED: Color Consistency)
================================================================== */
.sp-blog-myth-buster {
display: flex; flex-direction: column; gap: 2rem; margin: 3em 0;
}
.sp-blog-myth, .sp-blog-fact {
width: 100%;
background: var(--sp-blog-card-bg) !important;
border: 1px solid var(--sp-blog-border) !important;
border-radius: 12px;
/* Layout: Kompakt & Zentriert */
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
gap: 10px !important;
padding: 2.5rem !important;
min-height: 180px;
position: relative; overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
/* Master Noise Texture */
.sp-blog-myth::before, .sp-blog-fact::before {
content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.12;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
background-size: 260px 260px; mix-blend-mode: overlay; z-index: 0;
}
.sp-blog-myth * , .sp-blog-fact * { position: relative; z-index: 2; }
/* --- MYTH (Red) --- */
.sp-blog-myth {
border-left: 4px solid var(--sp-blog-red) !important;
box-shadow: var(--glow-red) !important;
}
.sp-blog-myth:hover {
transform: translateY(-5px) !important;
box-shadow: var(--glow-red-strong) !important;
border-color: rgba(239, 68, 68, 0.35) !important;
}
.sp-blog-myth h3 {
color: var(--sp-blog-red) !important;
text-transform: uppercase; font-weight: 800;
font-size: 1.1rem !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
line-height: 1.2 !important;
}
.sp-blog-myth p {
/* Einheitliche Farbe für beide Boxen */
color: rgba(255,255,255,0.75) !important;
font-style: italic;
margin: 0 !important;
line-height: 1.6;
}
/* --- FACT (Green) --- */
.sp-blog-fact {
border-left: 4px solid var(--sp-blog-green) !important;
box-shadow: var(--glow-green) !important;
}
.sp-blog-fact:hover {
transform: translateY(-5px) !important;
box-shadow: var(--glow-green-strong) !important;
border-color: rgba(16, 185, 129, 0.35) !important;
}
.sp-blog-fact h3 {
color: var(--sp-blog-green) !important;
text-transform: uppercase; font-weight: 800;
font-size: 1.1rem !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
line-height: 1.2 !important;
}
.sp-blog-fact p {
/* 🔥 FIX: Jetzt exakt die gleiche Farbe wie oben */
color: rgba(255,255,255,0.75) !important;
font-size: 1.1rem;
margin: 0 !important;
line-height: 1.6;
width: 70%;
}
/* Background Image Overlay */
.sp-blog-fact::after {
content: '';
background-image: url("/assets/uploads/2025/08/Samuel-Peiffer.webp");
background-size: cover; background-position: center 20%;
position: absolute; top: 0; right: 0; bottom: 0;
width: 50%; opacity: 0.15;
mask-image: linear-gradient(to right, transparent, black);
-webkit-mask-image: linear-gradient(to right, transparent, black);
z-index: 1;
}
/* Mobile Fix for Image */
@media (max-width: 600px) {
.sp-blog-fact p { width: 100% !important; }
.sp-blog-fact::after { width: 100%; opacity: 0.08; }
}
/* ==================================================================
7. TOOL LIST (FIXED: Spacing for Avatar)
================================================================== */
.sp-blog-tools {
background: var(--sp-blog-card-bg) !important;
border: 1px solid var(--sp-blog-border) !important;
border-top: 3px solid var(--sp-blog-green) !important;
border-radius: 14px;
padding: 80px 2.5rem 3rem 2.5rem !important;
margin: 4em 0;
position: relative;
overflow: hidden;
box-shadow: var(--glow-green) !important;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sp-blog-tools:hover {
transform: translateY(-4px);
box-shadow: var(--glow-green-strong) !important;
border-color: rgba(16, 185, 129, 0.35) !important;
}
/* Restored "TOOLS" Label */
.sp-blog-tools::after {
content: 'TOOLS';
position: absolute; top: 28px; right: 25px;
font-family: monospace; font-size: 0.75rem; letter-spacing: 2px;
z-index: 10;
color: rgba(255,255,255,0.70) !important; background: rgba(255,255,255,0.06) !important;
border: 1px solid rgba(255,255,255,0.10); padding: 6px 12px; border-radius: 6px;
box-shadow: 0 0 18px rgba(34,197,94,0.18) !important;
}
.sp-blog-tools * { position: relative; z-index: 2; }
/* Avatar */
.sp-blog-tools .sp-blog-tool-avatar {
position: absolute; left: 2.5rem; top: 28px;
width: 60px; height: 60px;
border-radius: 50%;
background-image: url("/assets/uploads/2025/08/Samuel-Peiffer.webp");
background-size: cover;
border: 2px solid var(--sp-blog-green);
box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
transition: transform 0.3s ease;
z-index: 10;
}
.sp-blog-tools:hover .sp-blog-tool-avatar {
transform: scale(1.1);
box-shadow: 0 0 30px rgba(16, 185, 129, 0.6);
}
/* Headline with Green Gradient Line - FIXED SPACING FOR AVATAR */
.sp-blog-tools h3 {
color: #fff !important; text-transform: uppercase;
margin-top: 30px !important; /* Increased top margin for spacing below avatar */
border-bottom: 1px solid transparent !important;
border-image: linear-gradient(90deg, var(--sp-blog-green) 0%, transparent 100%) !important;
border-image-slice: 1 !important;
padding-bottom: 20px;
margin-bottom: 2rem !important;
}
/* Full Width Fix for List */
.sp-blog-tools ul.sp-blog-safe-list {
width: 100% !important;
margin: 0 !important; padding: 0 !important;
}
.sp-blog-tools ul.sp-blog-safe-list li {
width: 100% !important; /* Forces full width */
box-sizing: border-box !important;
background: rgba(255,255,255,0.02) !important;
border: 1px solid rgba(255,255,255,0.05) !important;
border-radius: 8px;
padding: 15px 15px 15px 45px !important;
margin-bottom: 10px !important;
position: relative;
color: var(--sp-blog-body) !important;
list-style: none !important;
}
/* Green Points for Tools */
.sp-blog-tools ul.sp-blog-safe-list li::before {
content: '';
position: absolute; left: 15px; top: 18px;
width: 12px; height: 12px;
background: var(--sp-blog-green) !important;
border-radius: 2px;
box-shadow: 0 0 10px var(--sp-blog-green);
}
/* Label Override for Tool List: Standard Highlight */
.sp-blog-tools li strong {
/* Uses global standard highlight defined at top */
}
@media (max-width: 600px) {
.sp-blog-tools { padding: 74px 1.4rem 2.2rem 1.4rem !important; }
.sp-blog-tools::after { right: auto; left: 1.4rem; top: 24px; }
.sp-blog-tools .sp-blog-tool-avatar { left: auto !important; right: 1.4rem !important; top: 20px; width: 46px; height: 46px; }
.sp-blog-tools h3 { margin-top: 10px !important; /* Reset margin on mobile as avatar moves */ }
}
/* ==================================================================
8. AI VS TABLE (FIXED: Lift Effect & Noise)
================================================================== */
.sp-blog-vs {
margin: 4rem 0;
background: var(--sp-blog-bg);
border-radius: 16px;
border: 1px solid rgba(255,255,255,0.16);
border-top: 4px solid var(--sp-blog-purple);
box-shadow: var(--glow-purple) !important;
overflow: hidden;
position: relative;
/* Added standard transitions for lift effect */
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
/* FIXED: Lift effect for the VS Wrapper */
.sp-blog-vs:hover {
transform: translateY(-5px) !important;
box-shadow: var(--glow-purple-strong) !important;
border-color: rgba(139,92,246,0.55) !important;
}
.sp-blog-vs-header {
background: linear-gradient(135deg, #050505 0%, #171717 100%);
padding: 1.9rem 2rem;
text-align: left;
border-bottom: 1px solid rgba(255,255,255,0.10);
position: relative; z-index: 2; /* Ensure above noise */
}
.sp-blog-vs-header h3.sp-blog-vs-title, h3.sp-blog-vs-title {
margin: 0 !important; color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important; opacity: 1 !important;
font-size: 1.75rem; font-weight: 900;
letter-spacing: -0.02em; line-height: 1.15;
}
.sp-blog-vs-table-container { width: 100%; overflow-x: auto; background: var(--sp-blog-bg); position: relative; z-index: 2; }
.sp-blog-vs-table { width: 100%; border-collapse: collapse; min-width: 650px; margin: 0 !important; border: none !important; }
.sp-blog-vs-table thead th {
position: sticky; top: 0; z-index: 5;
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
background: rgba(23, 23, 23, 0.92) !important;
color: #ffffff !important; padding: 20px 24px !important;
text-align: left; font-weight: 800; text-transform: uppercase;
font-size: 0.85rem; letter-spacing: 1.5px;
border: none !important; border-bottom: 1px solid rgba(255,255,255,0.10) !important;
}
.sp-blog-vs-table td {
padding: 22px 24px !important; line-height: 1.65;
border: none !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important;
vertical-align: top; font-size: 1rem;
background: var(--sp-blog-bg);
transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.sp-blog-vs-table tbody tr:nth-child(even) td { background: rgba(255,255,255,0.018); }
.sp-blog-vs-td-criteria {
width: 25%; font-weight: 900;
color: rgba(255,255,255,0.92) !important;
background: rgba(255,255,255,0.02) !important;
border-right: 1px solid rgba(255,255,255,0.08) !important;
}
.sp-blog-vs-td-content { color: rgba(255, 255, 255, 0.50) !important; }
.sp-blog-vs-table tbody td:nth-child(2), .sp-blog-vs-table thead th:nth-child(2) { border-right: 1px solid rgba(255,255,255,0.08) !important; }
.sp-blog-vs-table tbody tr:hover td {
background: rgba(139, 92, 246, 0.06) !important;
border-bottom-color: rgba(139,92,246,0.22) !important;
}
.sp-blog-vs-table tbody tr:hover .sp-blog-vs-td-content { color: rgba(255,255,255,0.70) !important; }
/* Recommendation Footer */
.sp-blog-rec {
position: relative; padding: 0; z-index: 2;
border-top: 1px solid rgba(255,255,255,0.12);
background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(0,0,0,0.0) 100%);
box-shadow: 0 0 80px rgba(139,92,246,0.10) !important;
}
/* Noise texture is handled by global wrapper now */
.sp-blog-rec::after {
content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
background: linear-gradient(90deg, rgba(139,92,246,0) 0%, rgba(139,92,246,0.95) 50%, rgba(139,92,246,0) 100%);
opacity: 0.95; pointer-events: none;
}
.sp-blog-rec-header {
position: relative; z-index: 2; display: flex; align-items: center; gap: 10px;
background: rgba(255,255,255,0.03); color: var(--sp-blog-purple); padding: 15px 30px !important;
font-size: 0.85rem; font-weight: 900; text-transform: uppercase; letter-spacing: 2px;
border-bottom: 1px solid rgba(255,255,255,0.10);
}
.sp-blog-rec-header::before { content: '🏆'; font-size: 1.15rem; filter: drop-shadow(0 0 10px rgba(139,92,246,0.25)); }
.sp-blog-rec-header::after {
content: 'URTEIL'; margin-left: auto; font-family: monospace; font-size: 0.75rem; letter-spacing: 2px;
color: rgba(255,255,255,0.70); background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10); padding: 6px 10px; border-radius: 6px;
box-shadow: 0 0 22px rgba(139,92,246,0.18) !important;
}
.sp-blog-rec-body {
position: relative; z-index: 2; margin: 18px 18px 20px 18px; padding: 22px 22px !important;
background: linear-gradient(135deg, rgba(255,255,255,0.055) 0%, rgba(139,92,246,0.08) 55%, rgba(0,0,0,0) 100%);
border: 1px solid rgba(255,255,255,0.10); border-radius: 14px;
box-shadow: 0 0 60px rgba(139,92,246,0.10) !important;
color: var(--sp-blog-body); font-size: 1.05rem; line-height: 1.85; font-weight: 500;
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.sp-blog-vs:hover .sp-blog-rec-body {
transform: translateY(-1px); border-color: rgba(139,92,246,0.22);
box-shadow: 0 0 85px rgba(139,92,246,0.16) !important;
}
.sp-blog-rec-body strong {
color: #ffffff !important; font-weight: 900; background: rgba(139, 92, 246, 0.22);
padding: 0 6px; border-radius: 6px; border: 1px solid rgba(139, 92, 246, 0.40);
}
.sp-blog-rec-body ul, .sp-blog-rec-body ol { margin: 15px 0 0 0 !important; padding: 0 !important; list-style: none !important; }
.sp-blog-rec-body li { position: relative; padding-left: 32px !important; margin-bottom: 12px !important; }
.sp-blog-rec-body li::before {
content: ''; position: absolute; left: 0; top: 6px; width: 20px; height: 20px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%238b5cf6' stroke-width='3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7' /%3E%3C/svg%3E");
background-size: contain; background-repeat: no-repeat;
}
.sp-blog-vs p:empty, .sp-blog-rec-body p:empty { display: none !important; }
@media screen and (max-width: 768px) {
.sp-blog-vs { margin: 2rem 0; border-radius: 10px; }
.sp-blog-vs-header { padding: 1.5rem 1.25rem; text-align: center; }
.sp-blog-vs-header h3.sp-blog-vs-title, h3.sp-blog-vs-title { font-size: 1.35rem; }
.sp-blog-vs-td-criteria { width: 30%; font-size: 0.9rem; }
.sp-blog-rec-body { margin: 14px 12px 16px 12px; padding: 18px !important; }
.sp-blog-vs-table thead th { position: static; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
/* ==================================================================
9. PROS & CONS (MASTER STYLE: Glow, Noise, Gradient Lines)
================================================================== */
/* Container */
.sp-blog-pros-cons {
display: flex;
flex-wrap: wrap;
gap: 2rem;
margin: 3em 0;
}
/* Base Box Style (Pros & Cons Shared) */
.sp-blog-pros, .sp-blog-cons {
flex: 1 1 300px;
background: var(--sp-blog-card-bg) !important; /* Master Gradient */
border: 1px solid var(--sp-blog-border) !important;
border-radius: 12px; /* Soft Corners */
padding: 2rem;
position: relative;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
z-index: 1;
}
/* Add Master Noise Texture locally */
.sp-blog-pros::before, .sp-blog-cons::before {
content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.12;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
background-size: 260px 260px; mix-blend-mode: overlay; z-index: 0;
}
.sp-blog-pros *, .sp-blog-cons * { position: relative; z-index: 2; }
/* --- PROS (Green) --- */
.sp-blog-pros {
border-left: 4px solid var(--sp-blog-green) !important;
box-shadow: var(--glow-green) !important;
}
.sp-blog-pros:hover {
transform: translateY(-5px) !important; /* Lift Effect */
box-shadow: var(--glow-green-strong) !important;
border-color: rgba(16, 185, 129, 0.35) !important;
}
/* Headline with Green Gradient Line */
.sp-blog-pros h3 {
color: #fff !important; margin-top: 0;
padding-bottom: 15px; margin-bottom: 1.5rem !important;
border-bottom: 1px solid transparent !important;
border-image: linear-gradient(90deg, var(--sp-blog-green) 0%, transparent 100%) !important;
border-image-slice: 1 !important;
}
/* --- CONS (Red) --- */
.sp-blog-cons {
border-left: 4px solid var(--sp-blog-red) !important;
box-shadow: var(--glow-red) !important;
}
.sp-blog-cons:hover {
transform: translateY(-5px) !important; /* Lift Effect */
box-shadow: var(--glow-red-strong) !important;
border-color: rgba(239, 68, 68, 0.35) !important;
}
/* Headline with Red Gradient Line */
.sp-blog-cons h3 {
color: #fff !important; margin-top: 0;
padding-bottom: 15px; margin-bottom: 1.5rem !important;
border-bottom: 1px solid transparent !important;
border-image: linear-gradient(90deg, var(--sp-blog-red) 0%, transparent 100%) !important;
border-image-slice: 1 !important;
}
/* --- LIST STYLES --- */
.sp-blog-pros ul, .sp-blog-cons ul {
list-style-type: none !important;
padding-left: 0 !important; margin: 0 !important;
}
.sp-blog-pros li, .sp-blog-cons li {
position: relative !important;
padding-left: 2.2rem !important;
margin-bottom: 1rem !important;
color: var(--sp-blog-body) !important;
line-height: 1.6 !important;
}
/* 🔥 CRITICAL RESET: Kill the global Blue Dot/Shadow 🔥 */
.sp-blog-pros li::before, .sp-blog-cons li::before {
background: transparent !important; /* Remove blue background */
box-shadow: none !important; /* Remove blue box-shadow glow */
border-radius: 0 !important; /* Reset shape */
width: auto !important;
height: auto !important;
}
/* Green Check */
.sp-blog-pros li::before {
content: '✓' !important;
position: absolute !important; left: 0 !important; top: 0px !important;
color: var(--sp-blog-green) !important;
font-weight: 900 !important; font-size: 1.2rem !important;
width: 1.5rem !important; text-align: center !important;
/* Use TEXT-shadow for the icon, not box-shadow */
text-shadow: 0 0 12px rgba(16, 185, 129, 0.6) !important;
}
/* Red Cross */
.sp-blog-cons li::before {
content: '✕' !important;
position: absolute !important; left: 0 !important; top: 1px !important;
color: var(--sp-blog-red) !important;
font-weight: 900 !important; font-size: 1.1rem !important;
width: 1.5rem !important; text-align: center !important;
/* Use TEXT-shadow for the icon */
text-shadow: 0 0 12px rgba(239, 68, 68, 0.6) !important;
}
/* ==================================================================
10. STANDARD TABLE - "NO GHOSTING" + "SEXY HOVER"
Fixed Borders & Solid Sticky Column & Lift Effect restored
================================================================== */
/* 1. CONTAINER (Mit Animation) */
.sp-blog-comparison-table,
.sp-blog-table-container {
background: #050505 !important; /* Solid Black Background */
border: 1px solid rgba(255,255,255,0.16) !important;
border-top: 4px solid #0057ff !important;
border-radius: 16px !important;
margin: 3em 0 !important;
/* Basis Glow */
box-shadow: 0 0 50px rgba(0, 87, 255, 0.10) !important;
/* Layout */
overflow: hidden !important;
overflow-x: auto !important;
position: relative !important;
/* WICHTIG: Animation aktivieren */
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
/* Scrollbar Styling */
scrollbar-color: #333 #050505;
scrollbar-width: thin;
}
/* 1.1 DER HOVER EFFEKT (Das war weg!) */
.sp-blog-comparison-table:hover,
.sp-blog-table-container:hover {
transform: translateY(-5px) !important; /* Der "Lift" */
box-shadow: 0 0 80px rgba(0, 87, 255, 0.22) !important; /* Der "Krasse Glow" */
border-color: rgba(0, 87, 255, 0.55) !important;
}
/* 2. TABELLE RESET */
.sp-blog-comparison-table table,
.sp-blog-table-container table {
width: 100% !important;
border-collapse: separate !important;
border-spacing: 0 !important;
min-width: 600px !important;
}
/* 3. HEADER (TH) */
.sp-blog-comparison-table th,
.sp-blog-table-container th {
background: #111111 !important;
color: #ffffff !important;
padding: 20px 24px !important;
text-transform: uppercase;
font-size: 0.8rem !important;
font-weight: 800 !important;
text-align: left !important;
/* Border Fix per Shadow */
box-shadow: inset 0 -1px 0 rgba(255,255,255,0.15) !important;
/* STICKY OBEN */
position: sticky !important;
top: 0 !important;
z-index: 10 !important;
}
/* 4. ECKE OBEN LINKS (Sticky Oben + Links) */
.sp-blog-comparison-table th:first-child,
.sp-blog-table-container th:first-child {
position: sticky !important;
left: 0 !important;
z-index: 20 !important;
background: #111111 !important;
box-shadow: inset -1px -1px 0 rgba(255,255,255,0.15) !important;
}
/* 5. NORMALE ZELLEN (TD) */
.sp-blog-comparison-table td,
.sp-blog-table-container td {
padding: 22px 24px !important;
color: #cccccc !important;
font-size: 1rem !important;
line-height: 1.65 !important;
vertical-align: top !important;
/* Border Fix per Shadow */
box-shadow: inset 0 -1px 0 rgba(255,255,255,0.1) !important;
background: transparent !important;
}
/* 6. DIE LINKE SPALTE (Sticky Links) */
.sp-blog-comparison-table td:first-child,
.sp-blog-table-container td:first-child {
position: sticky !important;
left: 0 !important;
z-index: 5 !important;
color: #ffffff !important;
font-weight: 800 !important;
/* Solider Hintergrund gegen Ghosting */
background: #050505 !important;
/* Border Rechts per Shadow */
box-shadow: inset -1px -1px 0 rgba(255,255,255,0.1) !important;
}
/* 7. ZEBRA STRIPING */
.sp-blog-comparison-table tbody tr:nth-child(even) td,
.sp-blog-table-container tbody tr:nth-child(even) td {
background-color: rgba(255,255,255,0.03) !important;
}
/* Zebra für Sticky Spalte (Muss solide sein) */
.sp-blog-comparison-table tbody tr:nth-child(even) td:first-child,
.sp-blog-table-container tbody tr:nth-child(even) td:first-child {
background-color: #0f0f0f !important;
}
/* 8. ROW HOVER (Innerhalb der Tabelle) */
.sp-blog-comparison-table tbody tr:hover td,
.sp-blog-table-container tbody tr:hover td {
background-color: rgba(0, 87, 255, 0.1) !important;
color: #fff !important;
}
/* Row Hover für Sticky Spalte */
.sp-blog-comparison-table tbody tr:hover td:first-child,
.sp-blog-table-container tbody tr:hover td:first-child {
background-color: #001533 !important;
}
/* 9. LETZTE ZEILE FIX */
.sp-blog-comparison-table tr:last-child td,
.sp-blog-table-container tr:last-child td {
box-shadow: inset 0 0 0 transparent !important;
}
.sp-blog-comparison-table tr:last-child td:first-child,
.sp-blog-table-container tr:last-child td:first-child {
box-shadow: inset -1px 0 0 rgba(255,255,255,0.1) !important;
}
/* 10. SCROLLBAR */
.sp-blog-comparison-table::-webkit-scrollbar, .sp-blog-table-container::-webkit-scrollbar {
height: 8px; background: #050505;
}
.sp-blog-comparison-table::-webkit-scrollbar-thumb, .sp-blog-table-container::-webkit-scrollbar-thumb {
background: #333; border-radius: 4px; border: 1px solid #050505;
}
/* ==================================================================
11. DATA INSIGHT BOX (MASTER STYLE: Deep Void & Azure Glow)
================================================================== */
.sp-blog-data-insight {
/* 1. Master Background & Reset */
background: var(--sp-blog-card-bg) !important;
/* 2. Border System (Top Accent statt Bottom) */
border: 1px solid var(--sp-blog-border) !important;
border-top: 3px solid var(--sp-blog-azure) !important; /* Azure Blue für "Data" */
border-bottom: 1px solid var(--sp-blog-border) !important; /* Reset der alten Bottom-Border */
border-radius: 16px !important;
padding: 30px 40px !important; /* Etwas mehr Luft an den Seiten */
margin: 3em 0 !important;
/* 3. Glow & Ambience */
box-shadow: var(--glow-azure) !important;
/* 4. Animation & Layout */
position: relative;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
z-index: 1;
}
/* Master Noise Texture */
.sp-blog-data-insight::before {
content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.12;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
background-size: 260px 260px; mix-blend-mode: overlay; z-index: 0;
}
/* Lift Effect on Hover */
.sp-blog-data-insight:hover {
transform: translateY(-5px) !important;
box-shadow: var(--glow-azure-strong) !important;
border-color: rgba(59, 130, 246, 0.55) !important;
}
/* Das riesige "DATA" Wasserzeichen */
.sp-blog-data-insight > span {
position: absolute;
top: -10px;
right: 10px;
font-size: 110px;
font-weight: 900;
font-family: sans-serif;
/* Angepasst an den Dark Mode: */
color: #ffffff;
opacity: 0.03; /* Ganz subtil */
pointer-events: none;
z-index: 1; /* Über Noise, unter Text */
line-height: 1;
}
/* Headline "The Hard Proof" */
.sp-blog-data-insight h3 {
margin-top: 0 !important;
color: #ffffff !important; /* Weißer Text für besseren Kontrast */
display: flex; align-items: center;
letter-spacing: 0.05em;
font-size: 1.2rem !important;
text-transform: uppercase;
font-weight: 800;
position: relative; z-index: 2;
/* Master Style: Gradient Line underneath */
padding-bottom: 15px; margin-bottom: 20px !important;
border-bottom: 1px solid transparent !important;
border-image: linear-gradient(90deg, var(--sp-blog-azure) 0%, transparent 100%) !important;
border-image-slice: 1 !important;
}
/* Das Icon vor der Headline */
.sp-blog-data-insight h3 span {
margin-right: 15px;
font-size: 1.4em;
color: var(--sp-blog-azure) !important; /* Das Icon trägt die Farbe */
filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.6)); /* Starker Glow */
}
/* Der Text */
.sp-blog-data-insight p {
margin-bottom: 0 !important;
color: var(--sp-blog-body) !important; /* Soft White */
font-size: 1.1em !important;
line-height: 1.7 !important;
font-weight: 400;
position: relative; z-index: 2;
}
/* Mobile Fixes */
@media (max-width: 600px) {
.sp-blog-data-insight > span { font-size: 80px; top: 0; right: 0; }
}
/* =========================================
12. THE "ULTIMATE" PROMPT BOX (BULLETPROOF VERSION)
========================================= */
/* 1. Die Box selbst (Container) */
.sp-blog-prompt {
background-color: #09090b !important; /* Erzwingt Dunkelheit */
background-image:
radial-gradient(circle at top right, rgba(59, 130, 246, 0.15), transparent 40%),
radial-gradient(circle at bottom left, rgba(139, 92, 246, 0.1), transparent 40%) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
border-radius: 16px !important;
margin: 40px 0 !important;
box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5) !important;
overflow: hidden !important;
position: relative !important;
font-family: 'JetBrains Mono', monospace !important;
max-width: 100% !important; /* Verhindert Überbreite auf Mobile */
}
/* 2. Der Header */
.sp-blog-prompt-header {
background: rgba(255, 255, 255, 0.03) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
padding: 14px 24px !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
position: relative !important;
}
/* 3. Der PFEIL (Animation) */
.sp-blog-prompt-header::after {
content: '➔';
position: absolute;
right: 140px;
top: 50%;
transform: translateY(-50%);
color: #3b82f6 !important;
font-size: 20px !important;
font-weight: bold !important;
line-height: 1 !important;
text-shadow: 0 0 10px rgba(59, 130, 246, 0.8);
pointer-events: none;
animation: arrow-bounce 1s infinite alternate cubic-bezier(0.5, 0, 0.5, 1);
}
@keyframes arrow-bounce {
0% { right: 145px; opacity: 0.5; }
100% { right: 135px; opacity: 1; }
}
/* Mobile Fix für den Pfeil */
@media (max-width: 600px) {
.sp-blog-prompt-header::after {
right: 100px !important;
font-size: 16px !important;
}
}
/* 4. Der Copy Button */
.sp-blog-copy-btn {
position: relative !important;
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
color: white !important;
border: none !important;
padding: 8px 18px !important;
border-radius: 8px !important;
font-size: 11px !important;
font-weight: 700 !important;
cursor: pointer !important;
overflow: hidden !important;
z-index: 2 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
line-height: normal !important;
}
/* 5. Label (Links oben) */
.sp-blog-prompt-label {
font-size: 11px !important;
font-weight: 800 !important;
color: #94a3b8 !important;
text-transform: uppercase !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
/* Der leuchtende Punkt */
.sp-blog-prompt-label::before {
content: '';
display: block !important;
width: 8px !important;
height: 8px !important;
background-color: #3b82f6 !important;
border-radius: 50% !important;
box-shadow: 0 0 10px #3b82f6 !important;
animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(59, 130, 246, 0); }
}
/* 6. Der Inhalt (Text Fix) */
.sp-blog-prompt-content,
.sp-blog-prompt-content p,
.sp-blog-prompt-content ul,
.sp-blog-prompt-content li,
.sp-blog-prompt-content span {
background: transparent !important; /* Theme Background überschreiben */
padding: 0 !important; /* Container hat schon Padding */
color: #e2e8f0 !important; /* Dein gewünschter heller Text */
font-family: 'JetBrains Mono', monospace !important; /* Code Font erzwingen */
font-size: 15px !important;
line-height: 1.7 !important;
white-space: pre-wrap !important;
}
/* Den Container für den Inhalt nochmal separat stylen */
div.sp-blog-prompt-content {
padding: 24px !important;
}
/* Links im Prompt hellblau machen */
.sp-blog-prompt-content a {
color: #3b82f6 !important;
text-decoration: underline;
}
/* ── Block 29 ── */
:root {
/* --- BACKGROUNDS --- */
/* Der Background für die Seite (Fallback, falls Image nicht lädt) */
--sp-blog-bg: #020408;
/* Der Background für ALLE Boxen (Summary, FAQ, etc.) */
/* Wir nutzen hier einen fast schwarzen Verlauf, der sich vom Body abhebt */
--sp-blog-card-bg: linear-gradient(
145deg,
rgba(20, 25, 40, 0.7) 0%, /* Oben links: Hauch von Blau-Grau */
rgba(5, 5, 10, 0.9) 100% /* Unten rechts: Fast Schwarz */
);
/* --- BORDERS --- */
/* Borders sind jetzt feiner und transparenter */
--sp-blog-border: rgba(255,255,255,0.06);
--sp-blog-border-hover: rgba(255,255,255,0.15);
/* ... deine anderen Variablen (Farben, Glows) bleiben gleich ... */
--sp-blog-blue: #0057ff;
--sp-blog-purple: #8b5cf6;
--sp-blog-green: #10b981;
--sp-blog-red: #ef4444;
--sp-blog-azure: #3b82f6;
/* Glows etc. (nimm die aus dem v8 Code) */
--glow-blue: 0 0 50px rgba(0, 87, 255, 0.10);
--glow-blue-strong: 0 0 80px rgba(0, 87, 255, 0.22);
/* ... usw ... */
}
/* ── Block 30 ── */
.styledvideo {
box-shadow: 0px 10px 50px -10px rgba(0, 0, 0, 0.1) !important;
border-radius: 10px !important;
}
/* ── Block 31 ── */
/* ============================================================
SP-NAV · Floating Nav (position:absolute, schwebt auf Page-Top)
============================================================ */
.sp-nav{
position:relative !important;
top:auto !important;
z-index:9999 !important;
isolation:isolate !important;
width:100%;
padding:0 30px !important;
margin:0 !important;
background:transparent !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
border:none !important;
border-bottom:none !important;
box-shadow:none !important;
pointer-events:auto;
}
/* Floating-Mode override — wenn Hero mit .sp-hero-with-nav existiert.
CSS :has() greift SOFORT beim Render → kein FOUC/Layout-Shift mehr.
JS-Fallback body.has-sp-nav für ältere Browser ohne :has()-Support. */
body:has(.sp-hero-with-nav) .sp-nav,
body.has-sp-nav .sp-nav{
position:absolute !important;
top:0;
left:0;
right:0;
}
.sp-nav-inner{
max-width:1140px;
margin:0 auto;
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
gap:24px;
padding:32px 0 0; /* nur top — Section darunter bringt ihr eigenes top-padding mit */
}
/* INSEL 1: Logo plain */
.sp-nav-logo{
justify-self:start;
display:inline-flex;
align-items:center;
gap:10px;
text-decoration:none;
}
.sp-nav-logo img{height:32px;width:auto;display:block}
/* INSEL 2: Reiter-Pille mitte (Glassmorph) */
.sp-nav-links{
justify-self:center;
display:flex;
gap:4px;
list-style:none;
margin:0 !important;
padding:6px !important;
background:hsla(0,0%,100%,.04);
backdrop-filter:blur(20px) saturate(180%);
-webkit-backdrop-filter:blur(20px) saturate(180%);
border:1px solid hsla(0,0%,100%,.10);
border-radius:999px;
}
.sp-nav-links a{
font-size:14px !important;
font-weight:600 !important;
color:var(--sp-text-muted) !important;
transition:all .2s ease;
padding:8px 18px;
border-radius:999px;
display:inline-flex;
align-items:center;
text-decoration:none;
}
.sp-nav-links a:hover{color:#fff !important;background:hsla(0,0%,100%,.06)}
/* INSEL 3: CTA = sp-btn-primary Mini-Version (Brand-Blau, kompakt) */
.sp-nav-cta{
justify-self:end; /* Button am rechten Rand */
min-height:auto !important;
padding:9px 14px !important;
font-size:12px !important;
gap:6px !important;
letter-spacing:.04em !important;
border-radius:10px !important;
width:max-content !important; /* strenges Text-Sizing */
}
.sp-nav-cta:hover{
transform:none !important; /* kein Lift — würde aus Nav-Container clippen */
}
.sp-nav-cta svg{width:13px;height:13px;flex-shrink:0}
/* Burger-Button (Mobile only — Desktop hidden) */
.sp-nav-burger{
display:none;
background:transparent;
border:1px solid hsla(0,0%,100%,.15);
border-radius:10px;
padding:8px;
cursor:pointer;
color:#fff;
transition:color .2s ease, border-color .2s ease, background .2s ease;
pointer-events:auto !important;
}
.sp-nav-burger *{pointer-events:none} /* SVGs blockieren keine Klicks — Button kriegt sie immer */
.sp-nav-logo{pointer-events:auto !important}
.sp-nav-burger-icon{width:22px;height:22px;display:block !important}
.sp-nav-burger-icon--close{display:none !important}
/* Open-State: rotes X statt Burger */
.sp-nav.is-open .sp-nav-burger{
color:var(--sp-attention-soft) !important;
border-color:color-mix(in srgb, var(--sp-attention-soft), transparent 55%) !important;
background:color-mix(in srgb, var(--sp-attention-soft), transparent 92%) !important;
}
.sp-nav.is-open .sp-nav-burger-icon--open{display:none !important}
.sp-nav.is-open .sp-nav-burger-icon--close{display:block !important}
/* ============================================================
sp-hero-with-nav — Wrapper-Klasse für die erste Section
============================================================
Liefert padding-top für den Nav-Bereich (Nav schwebt darüber, out of flow).
GREIFT NUR wenn das Snippet aktiv ist (body bekommt .has-sp-nav via JS unten).
Damit: Wenn Snippet auf einer Page rausgezogen ist, ist auch das extra
padding weg → Section hat normales sp-py-hero Spacing.
============================================================ */
body:has(.sp-hero-with-nav) .sp-hero-with-nav,
body.has-sp-nav .sp-hero-with-nav{padding-top:140px !important}
/* ============================================================
Mobile (≤960px) — Square-Dropdown nahe X, Burger statt Reiter-Pille
============================================================ */
@media (max-width:960px){
.sp-nav{padding:0 20px !important} /* matched DS sp-section Mobile padding (20px) → Logo/Burger bündig mit Hero-Content */
.sp-nav-inner{grid-template-columns:auto auto !important;gap:12px;padding:18px 0 0 !important;justify-items:stretch}
.sp-nav-logo{justify-self:start}
.sp-nav-logo img{height:26px}
/* Reiter = SQUARE Dropdown nahe X (solid black, rounded, küsst Burger).
position:fixed → bypasst Parent-Stacking-Contexts (z.B. WP-Wrapper auf no-Hero-Pages),
Dropdown garantiert sichtbar über allem. */
.sp-nav-links{
position:fixed !important;
top:60px !important;
right:20px !important;
left:auto !important;
bottom:auto !important;
width:auto !important;
height:auto !important;
min-width:240px !important;
max-width:none !important;
margin:0 !important;
border-radius:16px !important;
border:1px solid hsla(0,0%,100%,.10) !important;
background:var(--sp-bg) !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
flex-direction:column !important;
justify-content:flex-start !important;
align-items:stretch !important;
gap:2px !important;
padding:10px !important;
opacity:0;
transform:translateY(-6px) scale(.96);
transform-origin:top right;
pointer-events:none;
transition:opacity .18s ease, transform .18s ease;
z-index:99999 !important;
box-shadow:0 16px 48px hsla(0,0%,0%,.6);
}
.sp-nav.is-open .sp-nav-links{
opacity:1;
transform:translateY(0) scale(1);
pointer-events:auto;
}
.sp-nav-links a{
padding:12px 18px !important;
font-size:15px !important;
font-weight:600 !important;
color:#fff !important;
width:100%;
justify-content:flex-start;
border-radius:10px !important;
}
.sp-nav-links a:hover{background:hsla(0,0%,100%,.06) !important}
.sp-nav-cta{display:none !important}
.sp-nav-burger{display:inline-flex;justify-self:end;align-items:center;justify-content:center;position:relative;z-index:100000}
/* Mobile-Variante sp-hero-with-nav: kompakter (Nav-Bereich kleiner) */
body:has(.sp-hero-with-nav) .sp-hero-with-nav,
body.has-sp-nav .sp-hero-with-nav{padding-top:90px !important; padding-bottom:36px !important}
/* Mobile sp-fade-top länger (Edge-Protection gegen Device-Notches/Browser-Chrome) */
.kss-page .sp-py-hero.sp-fade-top{--sp-fade-top-h:200px}
}
/* Desktop: sp-fade-top Pseudo disablen (nur Mobile braucht den Top-Fade) */
@media (min-width:961px){
.kss-page .sp-py-hero.sp-fade-top::before{display:none !important}
}
/* ── Block 32 ── */
/* Outer = page-width Wrapper mit horizontal padding (matched sp-section).
Inner = max-width:1140 zentriert (matched sp-container) → Footer-Inhalt-Edge
alignt pixelgenau mit der CTA-Card-Box und allem anderen Page-Content. */
.sp-footer-slim{
width:100%;
padding:36px 30px 32px;
background:var(--sp-bg);
}
.sp-footer-slim-inner{
max-width:1140px;
margin:0 auto;
display:flex;
flex-direction:column;
align-items:flex-start;
}
.sp-footer-slim-logo{
display:inline-flex;
align-items:center;
gap:10px;
text-decoration:none;
margin:0 0 16px;
}
.sp-footer-slim-logo img{
height:26px;
width:auto;
display:block;
}
.sp-footer-slim-copy{
margin:0 !important;
font-size:11.5px !important;
color:rgba(255,255,255,.42) !important;
letter-spacing:.01em;
line-height:1.6;
}
.sp-footer-slim-legal{
margin:0 !important;
padding:0 !important;
list-style:none;
display:flex;
flex-wrap:wrap;
align-items:center;
gap:0;
font-size:11.5px;
line-height:1.6;
}
.sp-footer-slim-legal li{display:inline-flex;align-items:center}
.sp-footer-slim-legal li:not(:last-child)::after{
content:"|";
color:rgba(255,255,255,.28);
margin:0 8px;
pointer-events:none;
}
.sp-footer-slim-legal a{
font-size:11.5px !important;
line-height:1.6 !important;
color:rgba(255,255,255,.42) !important;
text-decoration:none !important;
transition:color .2s ease;
letter-spacing:.01em !important;
}
.sp-footer-slim-legal a:hover{color:rgba(255,255,255,.85) !important}
@media (max-width:720px){
.sp-footer-slim{padding:28px 20px 24px}
}
/* ── Block 33 ── */
@media print {
html, body {
display: none; /* hide whole page */
}
}
/* ── Block 34 ── */
.styledimage img{
box-shadow: 0px 10px 50px -10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}