<section data-bs-version="5.1" class="slide-card-builder" once="sliders">

<mbr-parameters>

<header>Position &amp; Layout</header>

<input type="text" name="widgetId" title="Widget ID" value="mbCard1">

<select name="position" title="Position">

<option value="left">Unten Links</option>

<option value="center">Unten Mittig</option>

<option value="right" selected>Unten Rechts</option>

</select>

<input type="range" inline name="cardWidth" title="Card Breite (px)" min="200" max="500" step="10" value="400">

<input type="range" inline name="bottomOffset" title="Abstand Unten (px)" min="0" max="200" step="5" value="5">

<input type="range" inline name="sideOffset" title="Abstand Seite (px)" min="0" max="200" step="5" value="5">

<header>Button Style</header>

<input type="color" name="buttonBg" title="Button Farbe" value="#d70081">

<input type="range" inline name="buttonWidth" title="Button Breite (px)" min="30" max="80" step="2" value="40">

<input type="range" inline name="buttonHeight" title="Button Höhe (px)" min="24" max="60" step="2" value="32">

<input type="range" inline name="buttonRadius" title="Button Radius (px)" min="0" max="30" step="1" value="8">

<header>Card Style</header>

<input type="color" name="cardBg" title="Card Hintergrund" value="#000000">

<input type="range" inline name="cardPadding" title="Card Padding (px)" min="8" max="40" step="2" value="18">

<input type="range" inline name="cardRadius" title="Card Radius (px)" min="0" max="30" step="1" value="30">

<select name="cardShadow" title="Schatten">

<option value="0">Kein Schatten</option>

<option value="1">Soft</option>

<option value="2">Medium</option>

<option value="3" selected>Stark</option>

</select>

<input type="range" inline name="cardMaxHeight" title="Max Höhe (px)" min="300" max="1200" step="50" value="700">

<input type="range" inline name="animationSpeed" title="Animation (ms)" min="100" max="1000" step="50" value="350">

<header>Inhalt</header>

<input type="checkbox" name="showTitle" title="Titel anzeigen" checked>

<input type="color" name="titleColor" title="Titel-Farbe" value="#f7f7f7">

<input type="checkbox" name="showText" title="Text anzeigen" checked>

<input type="color" name="textColor" title="Text-Farbe" value="#9fe870">

<select name="contentType" title="Content Type">

<option value="1">Nur Text</option>

<option value="2">Button</option>

<option value="3">Bild</option>

<option value="4">Formular</option>

<option value="5" selected>Video</option>

</select>

<input type="text" name="videoUrl" title="YouTube Video ID" value="https://www.niederastroth.de/feuer.mp4" condition="contentType == 5">

<input type="text" name="formAction" title="Formular Action URL (PHP/Script)" value="send.php" condition="contentType == 4">

<input type="email" name="formEmail" title="Formular E-Mail (Empfänger)" value="info@example.com" condition="contentType == 4">

<input type="checkbox" name="showCloseButton" title="Schließen-Button anzeigen">

</mbr-parameters>

<div mbr-class="{'hidden': isPublish}">

<div class="container">

<div class="row justify-content-center">

<div class="col-12">

<div style="background:#111;color:#fff;padding:0.75rem 1rem;border-radius:6px;font-size:13px;font-weight:600;margin-bottom:1.5rem;text-align:center;">

📱 Slide-Card Vorschau © 2026 Volker Niederastroth

</div>

<div mbr-class="{'text-start': position == 'left', 'text-center': position == 'center', 'text-end': position == 'right'}" style="min-height:400px;background:linear-gradient(135deg,#f5f5f5 0%,#e9ecef 100%);border:2px dashed #ccc;border-radius:12px;padding:3rem 2rem;display:flex;align-items:flex-end;" mbr-style="{'justify-content': position == 'left' ? 'flex-start' : position == 'center' ? 'center' : 'flex-end'}">

<div style="display:inline-block;position:relative;">

<div mbr-style="{'width': buttonWidth + 'px', 'height': buttonHeight + 'px', 'background': buttonBg, 'border-radius': buttonRadius + 'px ' + buttonRadius + 'px 0 0'}" style="cursor:pointer;display:flex;align-items:center;justify-content:center;user-select:none;box-shadow:0 8px 24px rgba(0,0,0,0.15);">

<span style="width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:9px solid #fff;"></span>

</div>

<div mbr-style="{'background': cardBg, 'padding': cardPadding + 'px', 'border-radius': cardRadius + 'px ' + cardRadius + 'px 0 0', 'width': cardWidth + 'px', 'box-shadow': cardShadow == 0 ? 'none' : cardShadow == 1 ? '0 4px 12px rgba(0,0,0,0.08)' : cardShadow == 3 ? '0 12px 35px rgba(0,0,0,0.25)' : '0 8px 24px rgba(0,0,0,0.15)'}">

<div mbr-if="showCloseButton" style="text-align:right;margin-bottom:8px;">

<span style="cursor:pointer;font-size:20px;line-height:1;color:#999;display:inline-block;">×</span>

</div>

<h5 class="mbr-fonts-style modal-title" mbr-theme-style="display-5" data-app-selector=".modal-title" mbr-if="showTitle" mbr-style="{'color': titleColor}" style="margin:0 0 10px;text-align:center;"><b>

test</b></h5>

<p class="mbr-fonts-style mbr-text" mbr-theme-style="display-7" data-app-selector=".mbr-text" mbr-if="showText" mbr-style="{'color': textColor}" style="margin:0 0 16px;text-align:center;">

Wir beraten Sie gerne zu allen Fragen.

</p>

<div mbr-if="contentType == 2" mbr-buttons mbr-theme-style="display-4" data-toolbar="-mbrBtnMove" style="text-align:center;">

<a class="btn btn-primary" href="#kontakt" style="width:100%;" mbr-style="{'background-color': buttonBg, 'border-color': buttonBg}">Kontakt aufnehmen</a>

</div>

<div mbr-if="contentType == 3" class="card-img mbr-figure" style="margin:10px 0;">

<img src="../../app/themes/startm5/components/_images/background17.jpg" alt="Slide Card" data-app-selector="img" data-app-placeholder="Type Text" style="width:100%;height:auto;border-radius:8px;">

</div>

<div mbr-if="contentType == 4" class="form-wrapper">

<form action="{{formAction}}" method="POST" class="mbr-form" style="margin:0;">

<div style="display:grid;gap:10px;">

<input type="text" name="name" placeholder="Name" required class="form-control" style="width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;box-sizing:border-box;">

<input type="email" name="email" placeholder="E-Mail" required class="form-control" style="width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;box-sizing:border-box;">

<textarea name="message" placeholder="Nachricht" rows="3" class="form-control" style="width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;resize:vertical;box-sizing:border-box;"></textarea>

<button type="submit" class="btn btn-primary" mbr-style="{'background-color': buttonBg, 'border-color': buttonBg}" style="width:100%;padding:12px;">Absenden</button>

</div>

</form>

</div>

<div mbr-if="contentType == 5" class="video-block" style="margin:10px 0;">

<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:8px;">

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" data-app-selector="iframe" data-app-placeholder="Paste YouTube URL" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" allowfullscreen></iframe>

</div>

</div>

</div>

</div>

</div>

<div style="margin-top:1rem;padding:0.75rem;background:#fff3cd;border-radius:6px;font-size:12px;color:#856404;text-align:center;">

ℹ️ Diese Vorschau ist nur im Editor sichtbar. Auf der Live-Seite erscheint das Widget als fixed Element.

</div>

</div>

</div>

</div>

</div>

<div class="slide-widget-live mbr-popup" style="display:none;" data-widget-id="{{widgetId}}" data-position="{{position}}" data-card-width="{{cardWidth}}" data-bottom-offset="{{bottomOffset}}" data-side-offset="{{sideOffset}}" data-button-bg="{{buttonBg}}" data-button-width="{{buttonWidth}}" data-button-height="{{buttonHeight}}" data-button-radius="{{buttonRadius}}" data-card-bg="{{cardBg}}" data-card-padding="{{cardPadding}}" data-card-radius="{{cardRadius}}" data-card-shadow="{{cardShadow}}" data-card-max-height="{{cardMaxHeight}}" data-animation-speed="{{animationSpeed}}" data-content-type="{{contentType}}" data-show-close="{{showCloseButton}}" data-show-title="{{showTitle}}" data-show-text="{{showText}}" data-title-color="{{titleColor}}" data-text-color="{{textColor}}" data-video-url="{{videoUrl}}" data-form-email="{{formEmail}}" data-form-action="{{formAction}}">

<div class="close-btn" mbr-class="{'hidden': !showCloseButton}" style="text-align:right;margin-bottom:8px;">

<span style="cursor:pointer;font-size:24px;line-height:1;color:#999;display:inline-block;font-weight:300;">×</span>

</div>

<h5 class="modal-title mbr-fonts-style" mbr-theme-style="display-5" data-app-selector=".modal-title" mbr-class="{'hidden': !showTitle}">

Hilfe benötigt?

</h5>

<p class="mbr-text mbr-fonts-style" mbr-theme-style="display-7" data-app-selector=".mbr-text" mbr-class="{'hidden': !showText}">

Wir beraten Sie gerne zu allen Fragen.

</p>

<div class="content-button mbr-section-btn" mbr-buttons mbr-theme-style="display-4" data-toolbar="-mbrBtnMove" mbr-class="{'hidden': contentType != 2}">

<a class="btn btn-primary" href="#kontakt" data-app-placeholder="Type Text">Kontakt aufnehmen</a>

</div>

<div class="content-image card-img mbr-figure" mbr-class="{'hidden': contentType != 3}">

<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='200'%3E%3Crect fill='%230d6efd' width='420' height='200'/%3E%3Ctext fill='%23ffffff' font-family='Arial' font-size='16' x='50%25' y='50%25' text-anchor='middle' dy='.3em'%3EBild hier hochladen%3C/text%3E%3C/svg%3E" alt="Slide Card" data-app-selector=".content-image img" data-app-placeholder="Type Text">

</div>

<div class="content-form form-wrapper" mbr-class="{'hidden': contentType != 4}">

<form action="{{formAction}}" method="POST" class="mbr-form">

<input type="text" name="name" placeholder="Name" required class="form-control">

<input type="email" name="email" placeholder="E-Mail" required class="form-control">

<textarea name="message" placeholder="Nachricht" rows="3" class="form-control"></textarea>

<button type="submit" class="btn btn-primary">Absenden</button>

</form>

</div>

<div class="content-video video-block" mbr-class="{'hidden': contentType != 5}">

<div class="video-container">

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" data-app-selector=".content-video iframe" data-app-placeholder="Paste YouTube URL" allowfullscreen></iframe>

</div>

</div>

</div>

<script>

(function () {

'use strict';

if (window.__MB_SLIDE_CARD_INIT__) {

return;

}

window.__MB_SLIDE_CARD_INIT__ = true;

function initSlideCards() {

var widgets = document.querySelectorAll('.slide-widget-live.mbr-popup');

widgets.forEach(function (dataEl) {

if (dataEl.hasAttribute('data-initialized')) return;

dataEl.setAttribute('data-initialized', 'true');

/* Parameter lesen */

var widgetId = dataEl.getAttribute('data-widget-id') || 'mbCard1';

var position = dataEl.getAttribute('data-position') || 'right';

var cardWidth = dataEl.getAttribute('data-card-width') || '320';

var bottomOffset = dataEl.getAttribute('data-bottom-offset') || '20';

var sideOffset = dataEl.getAttribute('data-side-offset') || '20';

var buttonBg = dataEl.getAttribute('data-button-bg') || '#0d6efd';

var buttonWidth = dataEl.getAttribute('data-button-width') || '44';

var buttonHeight = dataEl.getAttribute('data-button-height') || '32';

var buttonRadius = dataEl.getAttribute('data-button-radius') || '6';

var cardBg = dataEl.getAttribute('data-card-bg') || '#ffffff';

var cardPadding = dataEl.getAttribute('data-card-padding') || '20';

var cardRadius = dataEl.getAttribute('data-card-radius') || '12';

var cardShadow = parseInt(dataEl.getAttribute('data-card-shadow') || '2');

var cardMaxHeight= dataEl.getAttribute('data-card-max-height') || '700';

var animSpeed = dataEl.getAttribute('data-animation-speed') || '350';

var contentType = dataEl.getAttribute('data-content-type') || '2';

var showClose = dataEl.getAttribute('data-show-close') === 'true';

var showTitle = dataEl.getAttribute('data-show-title') === 'true';

var showText = dataEl.getAttribute('data-show-text') === 'true';

var titleColor = dataEl.getAttribute('data-title-color') || '#000000';

var textColor = dataEl.getAttribute('data-text-color') || '#000000';

var videoUrl = dataEl.getAttribute('data-video-url') || 'dQw4w9WgXcQ';

var formEmail = dataEl.getAttribute('data-form-email') || 'info@example.com';

var formAction = dataEl.getAttribute('data-form-action') || '';

var shadowMap = [

'none',

'0 4px 12px rgba(0,0,0,0.08)',

'0 8px 24px rgba(0,0,0,0.15)',

'0 12px 35px rgba(0,0,0,0.25)'

];

/* Content vorbereiten */

var tempDiv = document.createElement('div');

tempDiv.innerHTML = dataEl.innerHTML;

var section = dataEl.closest('section');

var editorTitle = section.querySelector('.editor-preview .modal-title, .hidden .modal-title');

var editorText = section.querySelector('.editor-preview .mbr-text, .hidden .mbr-text');

if (editorTitle) {

var tempTitle = tempDiv.querySelector('.modal-title');

if (tempTitle) {

tempTitle.innerHTML = editorTitle.innerHTML;

var titleStyle = editorTitle.getAttribute('style');

if (titleStyle) {

tempTitle.setAttribute('style', (tempTitle.getAttribute('style') || '') + ';' + titleStyle);

}

}

}

if (editorText) {

var tempText = tempDiv.querySelector('.mbr-text');

if (tempText) {

tempText.innerHTML = editorText.innerHTML;

var textStyle = editorText.getAttribute('style');

if (textStyle) {

tempText.setAttribute('style', (tempText.getAttribute('style') || '') + ';' + textStyle);

}

}

}

var allContent = tempDiv.querySelectorAll(

'.content-button, .content-image, .content-form, .content-video'

);

allContent.forEach(function (el) {

el.classList.remove('hidden');

el.style.display = 'none';

});

/* Content-Type aktivieren */

if (contentType == '2') {

var btnEl = tempDiv.querySelector('.content-button');

if (btnEl) btnEl.style.display = 'block';

} else if (contentType == '3') {

var originalImg = dataEl.closest('section').querySelector('.card-img img');

var imgWrapper = tempDiv.querySelector('.content-image');

if (originalImg && imgWrapper) {

var realSrc = originalImg.getAttribute('src');

if (realSrc && !realSrc.startsWith('data:image/svg')) {

imgWrapper.innerHTML =

'<img src="' + realSrc + '" style="width:100%;height:auto;border-radius:8px;display:block;" alt>';

imgWrapper.style.display = 'block';

}

}

} else if (contentType == '4') {

var formEl = tempDiv.querySelector('.content-form');

if (formEl) {

formEl.style.display = 'block';

// Setze Form Action aus dem Parameter

var realForm = formEl.querySelector('form');

if (realForm && formAction) {

realForm.setAttribute('action', formAction);

}

}

} else if (contentType == '5') {

var vidEl = tempDiv.querySelector('.content-video');

if (vidEl) {

vidEl.style.display = 'block';

var container = vidEl.querySelector('.video-container');

if (!container) return;

container.innerHTML = ''; // reset

var v = videoUrl.trim();

/* 🎥 Lokales Video erkennen */

if (/\.(mp4|webm|ogg)$/i.test(v)) {

container.innerHTML =

'<video controls playsinline style="width:100%;border-radius:8px;">' +

'<source src="' + v + '">' +

'Dein Browser unterstützt dieses Video nicht.' +

'</video>';

}

/* ▶️ YouTube URL */

else if (v.includes('youtube.com') || v.includes('youtu.be')) {

var id = v.split('v=')[1] || v.split('/').pop();

container.innerHTML =

'<iframe src="https://www.youtube.com/embed/' + id +

'" frameborder="0" allowfullscreen></iframe>';

}

/* ▶️ YouTube ID */

else {

container.innerHTML =

'<iframe src="https://www.youtube.com/embed/' + v +

'" frameborder="0" allowfullscreen></iframe>';

}

}

}

/* Titel / Text steuern */

if (!showTitle) {

var title = tempDiv.querySelector('.modal-title');

if (title) title.style.display = 'none';

}

if (!showText) {

var text = tempDiv.querySelector('.mbr-text');

if (text) text.style.display = 'none';

}

var content = tempDiv.innerHTML;

/* Widget bauen */

var widget = document.createElement('div');

widget.id = widgetId;

widget.className = 'mb-slide-widget-fixed';

widget.style.cssText =

'position:fixed;z-index:9999;bottom:' + bottomOffset + 'px;';

if (position === 'left') {

widget.style.left = sideOffset + 'px';

} else if (position === 'center') {

widget.style.left = '50%';

widget.style.transform = 'translateX(-50%)';

} else {

widget.style.right = sideOffset + 'px';

}

widget.innerHTML =

'<div class="mb-slide-toggle" style="width:' + buttonWidth + 'px;height:' + buttonHeight +

'px;background:' + buttonBg + ';border-radius:' + buttonRadius + 'px ' +

buttonRadius + 'px 0 0;cursor:pointer;display:flex;align-items:center;' +

'justify-content:center;box-shadow:' + shadowMap[cardShadow] +

';user-select:none;transition:all 0.2s;">' +

'<span class="mb-arrow" style="width:0;height:0;border-left:7px solid transparent;' +

'border-right:7px solid transparent;border-bottom:9px solid #fff;' +

'transition:transform ' + animSpeed + 'ms ease;"></span>' +

'</div>' +

'<div class="mb-slide-card" style="background:' + cardBg + ';padding:' + cardPadding +

'px;border-radius:' + cardRadius + 'px ' + cardRadius +

'px 0 0;width:' + cardWidth +

'px;box-shadow:' + shadowMap[cardShadow] +

';max-height:0;overflow:hidden;opacity:0;transform:translateY(10px);' +

'transition:all ' + animSpeed + 'ms ease;">' +

content +

'</div>';

document.body.appendChild(widget);

/* FARBEN SETZEN */

var card = widget.querySelector('.mb-slide-card');

card.querySelectorAll('.btn, button[type="submit"], .content-button .btn, .content-form button, a.btn').forEach(function(btn) {

btn.classList.remove('btn-primary', 'btn-secondary', 'btn-info', 'btn-success', 'btn-warning', 'btn-danger');

btn.style.setProperty('background-color', buttonBg, 'important');

btn.style.setProperty('border-color', buttonBg, 'important');

btn.style.setProperty('color', '#ffffff', 'important');

});

var titleEl = card.querySelector('.modal-title');

if (titleEl) {

titleEl.style.cssText = (titleEl.style.cssText || '') + ';color:' + titleColor + ' !important;';

}

var textEl = card.querySelector('.mbr-text');

if (textEl) {

textEl.style.cssText = (textEl.style.cssText || '') + ';color:' + textColor + ' !important;';

}

/* Interaktion */

var toggle = widget.querySelector('.mb-slide-toggle');

var arrow = widget.querySelector('.mb-arrow');

function closeCard() {

widget.classList.remove('open');

card.style.maxHeight = '0';

card.style.opacity = '0';

card.style.transform = 'translateY(10px)';

arrow.style.transform = 'rotate(0)';

}

toggle.addEventListener('click', function (e) {

e.stopPropagation();

var open = widget.classList.toggle('open');

if (open) {

card.style.maxHeight = cardMaxHeight + 'px';

card.style.opacity = '1';

card.style.transform = 'translateY(0)';

arrow.style.transform = 'rotate(180deg)';

} else {

closeCard();

}

});

var closeBtn = card.querySelector('.close-btn span');

if (closeBtn) {

closeBtn.addEventListener('click', function (e) {

e.stopPropagation();

closeCard();

});

}

document.addEventListener('click', function (e) {

if (!widget.contains(e.target) && widget.classList.contains('open')) {

closeCard();

}

});

});

}

if (document.readyState === 'loading') {

document.addEventListener('DOMContentLoaded', initSlideCards);

} else {

initSlideCards();

}

})();

</script>

</section>