/* DocFlow Brand Colors — Auto-generated from theme style.css */
/* Maps theme red (#e84a52) and cyan blues to DocFlow brand palette */

/* === Slider Revolution: Default-Bar/Preloader weg === */
canvas.sr7-pbar,
.sr7-pbar,
sr7-prl,
.sr7-prl,
[class*="prlt"],
.tp-loader,
.tp-bgimg.defaultimg.tp-loader,
.rs-loader,
.rev-loader,
.tp-banner-loader {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* === Custom DocFlow Slide-Progress: Gradient-Sweep mit Glow === */
sr7-module {
  position: relative !important;
}
sr7-module::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 500;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(126, 168, 216, 0.4) 20%,
    #4a7fb8 45%,
    #7ea8d8 50%,
    #4a7fb8 55%,
    rgba(126, 168, 216, 0.4) 80%,
    transparent 100%
  );
  background-size: 50% 100%;
  background-repeat: no-repeat;
  background-position: -50% 0;
  animation: docflow-slide-sweep 9s linear infinite;
  filter: drop-shadow(0 0 8px rgba(126, 168, 216, 0.7))
          drop-shadow(0 0 16px rgba(74, 127, 184, 0.4));
}

/* Dezente Glow-Linie über dem Sweep (immer sichtbar, atmet) */
sr7-module::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  z-index: 499;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(126, 168, 216, 0.15) 50%,
    transparent 100%
  );
  animation: docflow-glow-pulse 4s ease-in-out infinite;
}

@keyframes docflow-slide-sweep {
  0%   { background-position: -50% 0; }
  100% { background-position: 150% 0; }
}
@keyframes docflow-glow-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

/* === Slide-Bilder: Ken-Burns + Smooth Reveal === */
/* Background-Layer: leichter Zoom + Pan, langsam und sanft */
sr7-slide sr7-bg,
sr7-slide sr7-module-bg,
sr7-slide [class*="sr7-bg"] {
  animation: docflow-kenburns 18s ease-in-out infinite alternate;
  transform-origin: center center;
  will-change: transform, filter;
}
@keyframes docflow-kenburns {
  0% {
    transform: scale(1) translate3d(0, 0, 0);
    filter: brightness(1) saturate(1);
  }
  50% {
    transform: scale(1.06) translate3d(-1%, -0.5%, 0);
    filter: brightness(1.04) saturate(1.05);
  }
  100% {
    transform: scale(1.1) translate3d(1%, 0.5%, 0);
    filter: brightness(1) saturate(1);
  }
}

/* === Rauschend Auflösen: nuke SR7-Slide-Transform, force Blur-Dissolve === */
/* Alle Slides positioniert auf 0,0 — kein Transform-Slide mehr */
sr7-content > sr7-slide {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: translate3d(0, 0, 0) !important;
  opacity: 0 !important;
  filter: blur(28px) saturate(0.4) brightness(1.15) !important;
  transition:
    opacity 1.6s cubic-bezier(0.4, 0, 0.2, 1),
    filter 1.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
  pointer-events: none;
}

/* Aktive Slide: scharf + sichtbar */
sr7-content > sr7-slide[style*="visibility: visible"],
sr7-content > sr7-slide[style*="visibility:visible"] {
  opacity: 1 !important;
  filter: blur(0) saturate(1) brightness(1) !important;
  pointer-events: auto;
  visibility: visible !important;
}

/* Slides die SR7 als "hidden" markiert sollen weiter sichtbar sein für die Transition,
   bekommen aber 0 opacity */
sr7-content > sr7-slide[style*="visibility: hidden"],
sr7-content > sr7-slide[style*="visibility:hidden"] {
  visibility: visible !important;
  opacity: 0 !important;
  filter: blur(28px) saturate(0.4) brightness(1.15) !important;
}

a {
  color: #2c5282 !important;
}
a:active, a:visited {
  color: #2c5282 !important;
}
input:focus, textarea:focus {
  border: 1px solid rgba(44, 82, 130, 0.8) !important;
}
#content .dark-bg .contact-form input[type=text]:focus, #content .dark-bg .contact-form input[type=tel]:focus, #content .dark-bg .contact-form input[type=url]:focus, #content .dark-bg .contact-form input[type=email]:focus, #content .dark-bg .contact-form input[type=number]:focus, #content .dark-bg .contact-form input[type=range]:focus, #content .dark-bg .contact-form textarea:focus, #content .dark-bg .wpcf7-form input[type=text]:focus, #content .dark-bg .wpcf7-form input[type=tel]:focus, #content .dark-bg .wpcf7-form input[type=url]:focus, #content .dark-bg .wpcf7-form input[type=email]:focus, #content .dark-bg .wpcf7-form input[type=number]:focus, #content .dark-bg .wpcf7-form input[type=range]:focus, #content .dark-bg .wpcf7-form textarea:focus {
  border-color: #2c5282 !important;
}
#content .contact-form input:focus, #content .contact-form textarea:focus,
#footer .contact-form input:focus, #footer .contact-form textarea:focus {
  border: 1px solid rgba(44, 82, 130, 0.8) !important;
}
button, .button, input[type=button], input[type="submit"], input[type="reset"] {
  background-color: #2c5282 !important;
  border: 1px solid #2c5282 !important;
  border-color: #2c5282 #2c5282 #2c5282 #2c5282 !important;
}
.button.blue {
  background-color: #4a7fb8 !important;
  border-color: #7ea8d8 #2c5282 #2c5282 #7ea8d8 !important;
}
.sec-nav .button:hover, .sec-nav button:hover, .sec-nav input[type="button"]:hover, .sec-nav input[type="submit"]:hover, .sec-nav input[type="reset"]:hover {
  background-color: #2c5282 !important;
  border-color: #2c5282 !important;
}
.button.theme {
  border-color: #2c5282 !important;
}
.button.theme:hover {
  background: #2c5282 !important;
  border-color: #2c5282 !important;
}
.image-info-buttons i {
  color: #2c5282 !important;
}
.image-info h3 a:hover {
  color: #2c5282 !important;
}
.image-info .terms a:hover {
  color: #2c5282 !important;
}
.gallery-carousel .carousel-container .owl-carousel.owl-theme .owl-prev, .gallery-carousel .carousel-container .owl-carousel.owl-theme .owl-next {
  background: #2c5282 !important;
}
ul.tab-list, .widget ul.tab-list {
  border-bottom: 1px solid #2c5282 !important;
}
ul.tab-list li a.visible, ul.tab-list li a.flex-active, .widget ul.tab-list li a.visible, .widget ul.tab-list li a.flex-active {
  border-bottom: 3px solid #2c5282 !important;
}
ul.tab-list li a:hover, .widget ul.tab-list li a:hover {
  color: #2c5282 !important;
}
.widget_rss ul > li a.rsswidget {
  color: #2c5282 !important;
}
.widget.widget_nav_menu ul li.current_page_item > a {
  background: #2c5282 !important;
}
#flickr-widget .flickr_badge_image img:hover {
  border: 4px solid #2c5282 !important;
}
ul#recentcomments li.recentcomments a {
  color: #2c5282 !important;
}
.term-cloud a:hover {
  background-color: #2c5282 !important;
}
#mc_signup_submit {
  background-color: #2c5282 !important;
  border-color: #7ea8d8 #2c5282 #2c5282 #7ea8d8 !important;
}
#sidebar-header .social-list a:hover i {
  color: #2c5282 !important;
}
.header-fancy span {
  background-color: #2c5282 !important;
}
h3.fancy-header {
  background-color: #2c5282 !important;
}
.top-of-page a:hover {
  color: #2c5282 !important;
}
.toggle-label:hover {
  background-color: #2c5282 !important;
}
.active-toggle .toggle-label:hover {
  background-color: #2c5282 !important;
}
.tabs .current, .tabs .current:hover, .tabs li.current a {
  border-top: 2px solid #2c5282 !important;
}
.stats-bar-content {
  background: #2c5282 !important;
}
.animate-numbers .stats .number {
  color: #2c5282 !important;
}
.animate-numbers .stats .stats-title i {
  color: #2c5282 !important;
}
.dropdown-menu-wrap ul.sub-menu li:hover > a {
  color: #2c5282 !important;
}
.dropdown-menu-wrap > ul.menu > li:hover {
  border-color: #2c5282 !important;
}
.dropdown-menu-wrap > ul.menu > li.active {
  border-color: #2c5282 !important;
}
#primary-menu > ul.menu > li > a:hover {
  color: #2c5282 !important;
}
#primary-menu .hover-bg {
  border-color: #2c5282 !important;
  border-color: #2c5282 !important;
}
#title-area {
  background: #2c5282 !important;
}
#title-area a {
  color: #2c5282 !important;
}
#title-area a:active, #title-area a:visited {
  color: #2c5282 !important;
}
#custom-title-area {
  background: #2c5282 !important;
}
.post-list .entry-title a:hover {
  color: #2c5282 !important;
}
.post-list .byline a, .post-list .byline a:active, .post-list .byline a:visited {
  color: #2c5282 !important;
}
.sticky .entry-snippet {
  border-right: 5px solid #2c5282 !important;
}
#content .hentry h2.entry-title a:hover {
  color: #2c5282 !important;
}
#content .hentry .entry-meta a:hover {
  color: #2c5282 !important;
}
.entry-meta span i {
  color: #2c5282 !important;
}
.entry-meta span a:hover, .entry-header span a:hover {
  color: #2c5282 !important;
}
.byline span i {
  color: #2c5282 !important;
}
a.more-link:hover {
  color: #2c5282 !important;
}
.read-more a, .read-more-link a {
  color: #2c5282 !important;
}
.read-more:hover {
  color: #2c5282 !important;
  border-color: #2c5282 !important;
}
.page-links a, .page-links a:visited, .pagination a, .pagination a:visited {
  background: #2c5282 !important;
}
.loop-nav a:hover {
  color: #2c5282 !important;
}
.comment-reply-link, .comment-edit-link {
  background-color: #2c5282 !important;
}
.comment-reply-link:visited, .comment-edit-link:visited {
  background-color: #2c5282 !important;
}
.sidebar li > a:hover {
  color: #2c5282 !important;
}
.sidebar li:hover > a {
  color: #2c5282 !important;
}
.sec-nav a:active, .sec-nav a:hover, .sec-nav li > a:active, .sec-nav li > a:hover {
  color: #2c5282 !important;
}
.sec-nav .sidebars .widget_text a.small {
  color: #2c5282 !important;
}
.sec-nav .sidebars .widget_text a.small:visited {
  color: #2c5282 !important;
}
#sidebars-footer .widget_text a.small {
  color: #2c5282 !important;
}
#sidebars-footer .widget_text a.small:visited {
  color: #2c5282 !important;
}
.heading .title.dashed:after {
  background: #2c5282 !important;
}
.segment.slogan blockquote .footer cite, .panel-row-style.slogan blockquote .footer cite {
  color: #2c5282 !important;
}
.pricing-table .pricing-plan.highlight .pricing-table .top-header h3 {
  color: #2c5282 !important;
}
.testimonials-slider-container cite .client-name {
  color: #2c5282 !important;
}
.app-benefit i, .agency-benefit i {
  color: #2c5282 !important;
}
.member-profile h3:after {
  background: #2c5282 !important;
}
#call-to-action .button {
  background-color: #4a7fb8 !important;
}
#features-slider ul.tab-list li a.visible i, #features-slider ul.tab-list li a.visible span, #features-slider ul.tab-list li a.flex-active i, #features-slider ul.tab-list li a.flex-active span, #services-slider ul.tab-list li a.visible i, #services-slider ul.tab-list li a.visible span, #services-slider ul.tab-list li a.flex-active i, #services-slider ul.tab-list li a.flex-active span, #features-slider2 ul.tab-list li a.visible i, #features-slider2 ul.tab-list li a.visible span, #features-slider2 ul.tab-list li a.flex-active i, #features-slider2 ul.tab-list li a.flex-active span {
  color: #2c5282 !important;
}
#services-slider ul.tab-list li a.visible i, #services-slider ul.tab-list li a.visible span, #services-slider ul.tab-list li a.flex-active i, #services-slider ul.tab-list li a.flex-active span {
  color: #2c5282 !important;
}
#services-slider ul.tab-list li a.visible:hover i, #services-slider ul.tab-list li a.visible:hover span, #services-slider ul.tab-list li a.flex-active:hover i, #services-slider ul.tab-list li a.flex-active:hover span {
  color: #2c5282 !important;
}
#app-intro .heading .title {
  color: #2c5282 !important;
}
#app-platforms .button-wrap .button {
  background-color: #4a7fb8 !important;
}
#subscribe-news input[type="submit"] {
  background-color: #4a7fb8 !important;
  border-color: #4a7fb8 !important;
}
#column-shortcode-section p {
  background: #2c5282 !important;
}
.showcase-filter a:hover, .showcase-filter a.active, #showcase-links a:hover, #showcase-links a.active {
  background: #2c5282 !important;
  border-color: #2c5282 !important;
}
.portfolio-label {
  color: #2c5282 !important;
}
.single-portfolio .post-index i:hover {
  color: #2c5282 !important;
}
.post-snippets .hentry .entry-title a:hover {
  color: #2c5282 !important;
}
.post-snippets .byline a:hover {
  color: #2c5282 !important;
}

/* === Lesbare Textfarbe für gefärbte Buttons === */
/* Alle .button-Varianten mit gefärbtem BG bekommen weißen Text.
   Ausnahmen: .theme (transparent + gefärbter Border), .trans (transparent),
   und der Dark-Mode-Toggle. */
.button:not(.theme):not(.trans):not(#docflow-theme-toggle),
button:not(.theme):not(.trans):not(#docflow-theme-toggle),
input[type="submit"]:not(.theme):not(.trans),
input[type="button"]:not(.theme):not(.trans),
input[type="reset"]:not(.theme):not(.trans) {
  color: #fff !important;
}
.button:not(.theme):not(.trans):hover,
.button:not(.theme):not(.trans):focus,
.button:not(.theme):not(.trans):visited {
  color: #fff !important;
}

/* .button.theme (Outline-Style): Border und Hover bleiben Brand */
.button.theme {
  color: var(--df-brand-primary, #2c5282) !important;
}
.button.theme:hover {
  color: #fff !important;
}

/* === Ultra-Specific overrides für a.button (Shortcode-Output) === */
a.button,
a.button:link,
a.button:visited,
a.button:hover,
a.button:active,
.textwidget a.button,
.button-wrap a.button,
.widget a.button,
#sidebar-header a.button {
  color: #fff !important;
}
/* Text-Shadow weg, um Kontrast zu maximieren */
a.button {
  text-shadow: none !important;
}

/* === Button Hover-Animation: Shimmer-Schein läuft diagonal drüber === */
a.button,
button.button,
.button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease !important;
}

/* Pseudo-Element für den Sweep — startet links außerhalb des Buttons */
a.button::before,
button.button::before,
.button::before,
input[type="submit"]::before,
input[type="button"]::before,
input[type="reset"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 40%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 60%,
    transparent 100%
  );
  transition: left .7s ease;
  pointer-events: none;
  z-index: 0;
}

/* Beim Hover: Sweep läuft nach rechts raus */
a.button:hover::before,
button.button:hover::before,
.button:hover::before,
input[type="submit"]:hover::before,
input[type="button"]:hover::before,
input[type="reset"]:hover::before {
  left: 120%;
}

/* Dark Mode: dezenterer Sweep (heller Akzent statt purem Weiß) */
[data-theme="dark"] a.button::before,
[data-theme="dark"] button.button::before,
[data-theme="dark"] .button::before,
[data-theme="dark"] input[type="submit"]::before,
[data-theme="dark"] input[type="button"]::before {
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 40%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 60%,
    transparent 100%
  );
}

/* === Page Loader: DocFlow-Icon mit Pulse-Animation === */
#page-loading {
  background: #161b24 !important;
  background-image: none !important;
}

[data-theme="light"] #page-loading,
:root:not([data-theme="dark"]) #page-loading {
  background: #f4f5f7 !important;
}

#page-loading::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  background-image: url('df-icon.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 22px;
  animation: df-loader-pulse 1.6s ease-in-out infinite;
  filter: drop-shadow(0 8px 28px rgba(126, 168, 216, 0.4));
}

#page-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(126, 168, 216, 0.15) 0%, transparent 70%);
  animation: df-loader-glow 1.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes df-loader-pulse {
  0%, 100% {
    transform: scale(0.92);
    opacity: 0.85;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

@keyframes df-loader-glow {
  0%, 100% {
    transform: scale(0.8);
    opacity: 0.4;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.8;
  }
}

/* === Dark Mode Text Overrides === */
/* Höchstmögliche Specificity (html[attr] + body + element/klasse),
   damit es auch die brand-colors-Auto-Regeln schlägt */

html[data-theme="dark"] body,
html[data-theme="dark"] body p,
html[data-theme="dark"] body div,
html[data-theme="dark"] body span,
html[data-theme="dark"] body li,
html[data-theme="dark"] body label,
html[data-theme="dark"] body td,
html[data-theme="dark"] body th,
html[data-theme="dark"] body .pitch,
html[data-theme="dark"] body .heading2 .pitch,
html[data-theme="dark"] body .heading .pitch {
  color: var(--df-text) !important;
}

html[data-theme="dark"] body h1,
html[data-theme="dark"] body h2,
html[data-theme="dark"] body h3,
html[data-theme="dark"] body h4,
html[data-theme="dark"] body h5,
html[data-theme="dark"] body h6,
html[data-theme="dark"] body .heading .title,
html[data-theme="dark"] body .title,
html[data-theme="dark"] body .heading2 .title,
html[data-theme="dark"] body .big-heading,
html[data-theme="dark"] body .heading3 .title {
  color: var(--df-text) !important;
}

/* Sub-headlines / Untertitel (oft in muted-Grau) */
html[data-theme="dark"] body .subtitle,
html[data-theme="dark"] body .sub-heading,
html[data-theme="dark"] body .meta,
html[data-theme="dark"] body .post-meta,
html[data-theme="dark"] body small,
html[data-theme="dark"] body em {
  color: var(--df-muted) !important;
}

/* Links: weiterhin Akzent, aber etwas heller im Dark */
html[data-theme="dark"] body a:not(.button):not(.standard-logo) {
  color: var(--df-accent) !important;
}
html[data-theme="dark"] body a:not(.button):not(.standard-logo):hover {
  color: var(--df-text) !important;
}

/* Block-Quote Text */
html[data-theme="dark"] body blockquote,
html[data-theme="dark"] body cite {
  color: var(--df-text) !important;
}

/* === Dark Mode: SiteOrigin Page-Builder Sektion-BGs auch dunkel === */
/* Theme-Layouts setzen Inline-Styles wie #f5f5f5 / #f4f4f4 / #f1f1f1 für Sektionen.
   Im Dark Mode wirken die als helle Inseln im sonst dunklen Layout. */
html[data-theme="dark"] body .panel-row-style,
html[data-theme="dark"] body .lsow-row,
html[data-theme="dark"] body .panel-grid.panel-has-style > .panel-row-style {
  background-color: var(--df-bg) !important;
}

/* Sektionen, die original-dark sind (z.B. #2c3137), passen wir noch dezenter an
   (an die DocFlow-Surface) — visuelle Konsistenz */
html[data-theme="dark"] body #pg-9024-3 > .panel-row-style,
html[data-theme="dark"] body #pg-9024-6 > .panel-row-style {
  background-color: var(--df-surface) !important;
}

/* === mockups-container Section: Teal #0ba798 → DocFlow-Blau === */
/* Dashed-Linie unter Heading */
.mockups-container.dark-bg .heading .title:after,
.mockups-container .heading .title:after {
  background-color: #2c5282 !important;
}
/* Button Background + Hover */
.mockups-container .button,
.mockups-container a.button {
  background: #2c5282 !important;
  background-color: #2c5282 !important;
  border-color: #2c5282 !important;
  color: #fff !important;
}
.mockups-container .button:hover,
.mockups-container a.button:hover {
  background: #4a7fb8 !important;
  background-color: #4a7fb8 !important;
  border-color: #4a7fb8 !important;
  color: #fff !important;
}

/* === Plattform-Icons: minimalistische Line-Icons (Mobile/Tablet/Desktop) === */
.platform-icons i.icon-mobile,
.platform-icons i.icon-tablet,
.platform-icons i.icon-desktop,
.platform-icons i.icon-laptop3,
.app-platforms i.icon-mobile,
.app-platforms i.icon-tablet,
.app-platforms i.icon-desktop {
  display: inline-block !important;
  width: 28px !important;
  height: 28px !important;
  background-color: currentColor !important;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  vertical-align: middle;
}
.platform-icons i.icon-mobile::before,
.platform-icons i.icon-tablet::before,
.platform-icons i.icon-desktop::before,
.platform-icons i.icon-laptop3::before {
  display: none !important;
  content: "" !important;
}

/* Mobile / Phone */
.platform-icons i.icon-mobile,
.app-platforms i.icon-mobile {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='7' y='2' width='10' height='20' rx='2'/><line x1='11' y1='18' x2='13' y2='18'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='7' y='2' width='10' height='20' rx='2'/><line x1='11' y1='18' x2='13' y2='18'/></svg>");
}

/* Tablet */
.platform-icons i.icon-tablet,
.app-platforms i.icon-tablet {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='2' width='16' height='20' rx='2'/><line x1='11' y1='18' x2='13' y2='18'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='2' width='16' height='20' rx='2'/><line x1='11' y1='18' x2='13' y2='18'/></svg>");
}

/* Desktop */
.platform-icons i.icon-desktop,
.platform-icons i.icon-laptop3,
.app-platforms i.icon-desktop {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='14' rx='1'/><line x1='8' y1='22' x2='16' y2='22'/><line x1='12' y1='18' x2='12' y2='22'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='14' rx='1'/><line x1='8' y1='22' x2='16' y2='22'/><line x1='12' y1='18' x2='12' y2='22'/></svg>");
}

/* Hover: dezenter Akzent statt Standardtext */
.platform-icons a:hover i {
  background-color: var(--df-brand-primary, #2c5282) !important;
  transform: translateY(-1px);
  transition: all .2s ease;
}
[data-theme="dark"] .platform-icons a:hover i {
  background-color: var(--df-accent, #7ea8d8) !important;
}

/* Image-Text-Toggle Layout: Theme-Default (entfernt — keine Overrides) */

/* === Einzelnes Bild: app-screens_ipad1.png 20% größer === */
img[src*="app-screens_ipad1.png"] {
  transform: scale(1.2);
  transform-origin: center center;
}

/* === Bilder in .video-content: füllen ihre Spalte komplett (statt original Videos)
       Mit festem 3:2 Aspect Ratio damit alle Sektionen gleich hoch sind === */
.video-content img,
.video-toggle .video-content img,
.image-toggle .video-content img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 2 !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
}

/* Sicherstellen, dass die .video-content Spalte 50% nimmt und das Bild komplett zeigt */
.video-toggle .video-content,
.video-toggle .image-content,
.image-toggle .image-content,
.image-toggle .video-content {
  overflow: visible !important;
}

/* === DocFlow Footer: Link-Sammlung in Spalten === */
.docflow-footer-grid {
  display: grid !important;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 50px;
  max-width: 1100px;
  margin: 0 auto 40px;
  text-align: left !important;
  padding: 20px 30px;
}
.docflow-footer-grid .footer-col h4 {
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px;
  margin: 0 0 18px !important;
  text-transform: uppercase;
}
.docflow-footer-grid .footer-col p {
  color: rgba(255, 255, 255, 0.65) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin: 0 0 12px !important;
}
.docflow-footer-grid .footer-col ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.docflow-footer-grid .footer-col ul li {
  margin: 0 0 10px !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}
.docflow-footer-grid .footer-col ul li a {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 14px !important;
  text-decoration: none !important;
  transition: color .2s ease !important;
}
.docflow-footer-grid .footer-col ul li a:hover {
  color: #7ea8d8 !important;
}
.docflow-footer-social {
  text-align: center !important;
  margin: 30px auto 20px !important;
  padding: 0 !important;
  list-style: none !important;
}
.docflow-footer-social li {
  display: inline-block !important;
  margin: 0 12px !important;
}
.docflow-footer-social li a {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 18px !important;
  transition: color .2s ease, transform .2s ease !important;
  display: inline-block;
}
.docflow-footer-social li a:hover {
  color: #7ea8d8 !important;
  transform: translateY(-2px);
}
@media (max-width: 768px) {
  .docflow-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    padding: 20px;
  }
}
@media (max-width: 480px) {
  .docflow-footer-grid {
    grid-template-columns: 1fr;
  }
}

/* === Network-Sektion: leicht abweichender Ton zur Abgrenzung === */
#pg-9024-9 > .panel-row-style,
#pg-9024-9.panel-has-style > .panel-row-style {
  background-color: #1e2634 !important;
}

/* === 3 Feature-Sektionen: alle in DocFlow-Tonen statt Demo-Farben === */
/* Datenschutz (war #19475f Teal) */
#panel-9024-3-0-0 > .panel-widget-style,
#panel-9024-3-0-0 .panel-widget-style {
  background-color: #2c5282 !important; /* Navy */
}
/* Behalte die Kontrolle (war #94dbdd Mint) */
#panel-9024-3-0-1 > .panel-widget-style,
#panel-9024-3-0-1 .panel-widget-style {
  background-color: #4a7fb8 !important; /* Mid Blue */
}
/* 3. Sektion (war #ec6c3d Orange) */
#panel-9024-3-0-2 > .panel-widget-style,
#panel-9024-3-0-2 .panel-widget-style {
  background-color: #1a3150 !important; /* Dark Navy */
}

/* === iPhone-Slider: Specular.png als fester Hintergrund, Slides drin === */
/* 1) ALLE Theme-Bezel-Imgs komplett raus (black/gold/etc Slider-Stages) */
.iphone-slider-container > img,
.smartphone-slider > img,
.iphone-slider-container img[src*="slider-stage"],
.smartphone-slider img[src*="slider-stage"],
img[src*="iphone-black-slider-stage"],
img[src*="iphone-gold-slider-stage"],
img[src*="ipad-slider-stage"] {
  display: none !important;
}

/* 2) Container: 80% Breite, Aspect-Ratio match Specular (977×2020 ≈ 0.484) */
.iphone-slider-container,
.smartphone-slider {
  background-image: url("https://mwp-business.com/wp-content/uploads/2026/05/Specular.png") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  max-width: 66% !important;
  width: 66% !important;
  margin: 0 auto !important;
  aspect-ratio: 977 / 2020 !important;
  height: auto !important;
}

/* 3) Inner-Slider füllt Container 100% komplett */
.iphone-slider-container .flex-slider-container,
.smartphone-slider .flex-slider-container {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

/* 4) Slider, Slides, Wrappers füllen Container vollständig — alle Hintergründe
   transparent oder Dark-Navy, sodass beim Sliden kein weißer Flash sichtbar wird */
.iphone-slider-container .flexslider,
.iphone-slider-container .flexslider .slides,
.iphone-slider-container .flexslider .slides > li,
.iphone-slider-container .flexslider .slides .img-wrap,
.smartphone-slider .flexslider,
.smartphone-slider .flexslider .slides,
.smartphone-slider .flexslider .slides > li,
.smartphone-slider .flexslider .slides .img-wrap {
  height: 100% !important;
  max-height: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* Loading-State des Sliders: dark statt grau (#333 default) */
.iphone-slider-container .flex-slider-container.loading,
.smartphone-slider .flex-slider-container.loading {
  background-color: #161b24 !important;
}
/* (Container-BG entfernt — sonst überdeckt es das Specular-Bezel) */

/* 6) Tab-Icons: Ionicons-Outline-Style (wie in der nativen DocFlow-App)
   Nur auf die NEUEN Icon-Klassen anwenden (sonst legacy Icons werden grau-Quadrate) */
#features-slider ul.tab-list li a i.icon-grid,
#features-slider ul.tab-list li a i.icon-document,
#features-slider ul.tab-list li a i.icon-comment,
#features-slider ul.tab-list li a i.icon-search,
#features-slider ul.tab-list li a i.icon-calendar,
#features-slider2 ul.tab-list li a i.icon-grid,
#features-slider2 ul.tab-list li a i.icon-document,
#features-slider2 ul.tab-list li a i.icon-comment,
#features-slider2 ul.tab-list li a i.icon-search,
#features-slider2 ul.tab-list li a i.icon-calendar {
  display: inline-block !important;
  width: 32px !important;
  height: 32px !important;
  background-color: currentColor !important;
  font-size: 0 !important;
  line-height: 0 !important;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  vertical-align: middle;
}
#features-slider ul.tab-list li a i.icon-grid::before,
#features-slider ul.tab-list li a i.icon-document::before,
#features-slider ul.tab-list li a i.icon-comment::before,
#features-slider ul.tab-list li a i.icon-search::before,
#features-slider ul.tab-list li a i.icon-calendar::before,
#features-slider2 ul.tab-list li a i.icon-grid::before,
#features-slider2 ul.tab-list li a i.icon-document::before,
#features-slider2 ul.tab-list li a i.icon-comment::before,
#features-slider2 ul.tab-list li a i.icon-search::before,
#features-slider2 ul.tab-list li a i.icon-calendar::before {
  display: none !important;
  content: "" !important;
}

/* Dashboard → home-outline */
#features-slider ul.tab-list li a i.icon-grid,
#features-slider2 ul.tab-list li a i.icon-grid {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M80 212v236a16 16 0 0016 16h96V328a24 24 0 0124-24h112a24 24 0 0124 24v136h96a16 16 0 0016-16V212' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/><path d='M480 256L266.89 52c-5-5.28-16.69-5.34-21.78 0L32 256m368-77V64h-48v69' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M80 212v236a16 16 0 0016 16h96V328a24 24 0 0124-24h112a24 24 0 0124 24v136h96a16 16 0 0016-16V212' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/><path d='M480 256L266.89 52c-5-5.28-16.69-5.34-21.78 0L32 256m368-77V64h-48v69' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/></svg>");
}

/* Dokumente → folder-outline */
#features-slider ul.tab-list li a i.icon-document,
#features-slider2 ul.tab-list li a i.icon-document {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M64 192v-72a40 40 0 0140-40h75.89a40 40 0 0122.19 6.72l27.84 18.56a40 40 0 0022.19 6.72H408a40 40 0 0140 40v40' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/><path d='M479.9 226.55L463.69 392a40 40 0 01-39.83 40H88.14a40 40 0 01-39.83-40L32.1 226.55A32 32 0 0164 192h384.1a32 32 0 0131.8 34.55z' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M64 192v-72a40 40 0 0140-40h75.89a40 40 0 0122.19 6.72l27.84 18.56a40 40 0 0022.19 6.72H408a40 40 0 0140 40v40' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/><path d='M479.9 226.55L463.69 392a40 40 0 01-39.83 40H88.14a40 40 0 01-39.83-40L32.1 226.55A32 32 0 0164 192h384.1a32 32 0 0131.8 34.55z' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/></svg>");
}

/* Chat Room → sparkles-outline */
#features-slider ul.tab-list li a i.icon-comment,
#features-slider2 ul.tab-list li a i.icon-comment {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M259.92 262.91L216.4 149.77a9 9 0 00-16.8 0l-43.52 113.14a9 9 0 01-5.17 5.17L37.77 311.6a9 9 0 000 16.8l113.14 43.52a9 9 0 015.17 5.17l43.52 113.14a9 9 0 0016.8 0l43.52-113.14a9 9 0 015.17-5.17l113.14-43.52a9 9 0 000-16.8l-113.14-43.52a9 9 0 01-5.17-5.17zM108 68L88 16 68 68 16 88l52 20 20 52 20-52 52-20-52-20zM426.67 117.33L400 64l-26.67 53.33L320 144l53.33 26.67L400 224l26.67-53.33L480 144l-53.33-26.67z' fill='none' stroke='black' stroke-linejoin='round' stroke-width='32'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M259.92 262.91L216.4 149.77a9 9 0 00-16.8 0l-43.52 113.14a9 9 0 01-5.17 5.17L37.77 311.6a9 9 0 000 16.8l113.14 43.52a9 9 0 015.17 5.17l43.52 113.14a9 9 0 0016.8 0l43.52-113.14a9 9 0 015.17-5.17l113.14-43.52a9 9 0 000-16.8l-113.14-43.52a9 9 0 01-5.17-5.17zM108 68L88 16 68 68 16 88l52 20 20 52 20-52 52-20-52-20zM426.67 117.33L400 64l-26.67 53.33L320 144l53.33 26.67L400 224l26.67-53.33L480 144l-53.33-26.67z' fill='none' stroke='black' stroke-linejoin='round' stroke-width='32'/></svg>");
}

/* Suche → search-outline */
#features-slider ul.tab-list li a i.icon-search,
#features-slider2 ul.tab-list li a i.icon-search {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M221.09 64a157.09 157.09 0 10157.09 157.09A157.1 157.1 0 00221.09 64z' fill='none' stroke='black' stroke-miterlimit='10' stroke-width='32'/><path d='M338.29 338.29L448 448' fill='none' stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M221.09 64a157.09 157.09 0 10157.09 157.09A157.1 157.1 0 00221.09 64z' fill='none' stroke='black' stroke-miterlimit='10' stroke-width='32'/><path d='M338.29 338.29L448 448' fill='none' stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32'/></svg>");
}

/* Kalender → calendar-outline */
#features-slider ul.tab-list li a i.icon-calendar,
#features-slider2 ul.tab-list li a i.icon-calendar {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><rect x='48' y='80' width='416' height='384' rx='48' fill='none' stroke='black' stroke-linejoin='round' stroke-width='32'/><path stroke-linecap='round' stroke-linejoin='round' stroke-width='32' stroke='black' fill='none' d='M128 48v32M384 48v32'/><path fill='none' stroke='black' stroke-linejoin='round' stroke-width='32' d='M464 160H48'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><rect x='48' y='80' width='416' height='384' rx='48' fill='none' stroke='black' stroke-linejoin='round' stroke-width='32'/><path stroke-linecap='round' stroke-linejoin='round' stroke-width='32' stroke='black' fill='none' d='M128 48v32M384 48v32'/><path fill='none' stroke='black' stroke-linejoin='round' stroke-width='32' d='M464 160H48'/></svg>");
}

/* 7) Tab-Content: linke Spalte (.big) in gleicher Schriftgröße wie rechts, nicht fett */
.app-features-list .text-content .big,
.app-features-list .text-content big,
.tab-slider-container .six_col .big,
.tab-slider-container .sixcol .big {
  font-size: 15px !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
  color: inherit !important;
}

/* 5) Slide-Image füllt komplette Inner-Area */
.iphone-slider-container .flexslider .slides img,
.smartphone-slider .flexslider .slides img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* === Sektionen 2 & 3 ("Behalte die Kontrolle" + "Frag einfach"):
       Inline-Farben weg, Read-More weiß, Text fit === */
/* Beide Paragraphen — auch die mit Demo-Inline-Color (#336a6f, #f4e5e0) — auf Weiß */
#panel-9024-3-0-1 .text-content p,
#panel-9024-3-0-1 .text-content p[style],
#panel-9024-3-0-2 .text-content p,
#panel-9024-3-0-2 .text-content p[style] {
  color: #ffffff !important;
}
/* Read-More Link weiß + sichtbar */
#panel-9024-3-0-1 a.read-more,
#panel-9024-3-0-1 .read-more,
#panel-9024-3-0-2 a.read-more,
#panel-9024-3-0-2 .read-more {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
}
#panel-9024-3-0-1 a.read-more:hover,
#panel-9024-3-0-2 a.read-more:hover {
  color: rgba(255, 255, 255, 0.85) !important;
  border-color: #ffffff !important;
}
/* Padding reduzieren, damit Text reinpasst */
#panel-9024-3-0-1 .text-content,
#panel-9024-3-0-2 .text-content {
  padding: 24px 20px !important;
}
/* Engerer Zeilenabstand für lange Inhalte */
#panel-9024-3-0-1 .text-content p,
#panel-9024-3-0-2 .text-content p {
  line-height: 1.5 !important;
  margin-bottom: 10px !important;
  font-size: 14px !important;
}
/* Heading ebenfalls etwas kompakter */
#panel-9024-3-0-1 .text-content .heading,
#panel-9024-3-0-2 .text-content .heading {
  margin-bottom: 12px !important;
}