/* components.css - WP-Komponenten und App Store UI-Elemente */

/* Navigation
--------------------------------------------- */

button.deinstallieren {
    background: #c1c1c1;
    color: #fff;
}

.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}


/* ===================================================================
   VARIO App Store Styles
   =================================================================== */

/* VARIO App Store Shortcode Styles - Modern Enhanced */
.container.vs {
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 20px;
}

.vs-banner {
    position: relative;
    overflow: hidden;
}

.vs-banner .row {
    position: relative;
    z-index: 2;
}

h1 {
    font-family: 'Figtree', sans-serif;
    font-weight: 700;
    line-height: 1.2;
	margin-top: 1rem;
    font-size: clamp(2rem,5vw,2.8rem);
	margin-bottom: 1.1rem;
	color: #1f1f1f;
}

h2 {
    font-family: 'Figtree', sans-serif;
    font-weight: 700;
    line-height: 1.2;
	font-size: clamp(2rem,5vw,2.2rem);
	margin-top: 1rem;
	color: #1f1f1f;
}

h2.detail {
    font-family: 'Figtree', sans-serif;
    line-height: 1.2;
	font-size: clamp(1.5rem,5vw,1.7rem);
	margin-top: 1rem;
	color: #1f1f1f;
} 

h1.headline-detail{
	font-family: 'Figtree', sans-serif;
    font-weight: 700;
    line-height: 1.2;
	font-size: clamp(2rem,5vw,2rem);
	margin-top: 1rem;
	color: #1f1f1f;
}

h3 {
    font-family: 'Figtree', sans-serif;
    font-weight: 700;
    line-height: 1.2;
	font-size: clamp(2rem,5vw,2rem);
	margin-top: 1rem;
	color: #1f1f1f;
}

p.headline-app {
	font-family: 'Figtree', sans-serif;
    font-weight: 700;
    line-height: 1.2;
	font-size: clamp(2rem,5vw,2.2rem);
	margin-top: 1rem;
	color: #1f1f1f;
}

@media (max-width: 767.98px) {
    h1, h2 {
        font-size: clamp(2rem, 6vw, 2.2rem);
    }
}

.listing-apps h2 {
	margin-top: 0;
}


h6{
	font-weight: 600;
    font-size: 1.05rem;
	color: #2e2e2e;
}


@keyframes textGlow {
    from { text-shadow: 0 0 20px rgba(255, 255, 255, 0.1); }
    to { text-shadow: 0 0 30px rgba(255, 255, 255, 0.2), 0 0 40px rgba(132, 185, 51, 0.1); }
}

.underlined-title {
    background-image: url(/wp-content/uploads/2025/07/underline-1.png);
    background-repeat: no-repeat;
    background-size: 100% 25%;
    background-position: 0 94%;
    padding-bottom: 8px;
}

p.lead {
    font-size: 1.25rem;
	line-height: 1.5;
    font-weight: 400;
    position: relative;
    z-index: 1;
	font-family: 'Figtree';
	margin-bottom: 0;
}


.text-button {
    color: #fff;
    text-align: center;
    justify-content: center;
    display: flex;
    font-weight: 700;
}
.text-muted {

}


/* Parallax Effekt fuer die Cloud */

.vs-banner{
  position: relative;
}

/* Rechte Grid-Spalte: Wrapper fuer Cloud + Icons */
.vario-cloud-visual{
	position: relative;
	width: 100%;
	min-height: 280px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.vario-decorative-cloud{
	position: static;
	transform: none;
	display: block;
	width: 100%;
	max-width: 520px;
	height: auto;
	margin-inline: auto;
	background: none;
	pointer-events: none;
	z-index: 1;
	animation: cloudFloat2 6s ease-in-out infinite;
	will-change: transform;
}

/* Animiert NUR die Verschiebung, nicht transform */
@keyframes cloudFloat2 {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -20px; }
}


/* Container fuer Icons ueber der Wolke */
.vs-banner .vario-cloud-icons{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  height: 260px;
  z-index: 2;
  pointer-events: none;
}

/* einzelne Icon-Bubbles */
.vs-banner .vario-cloud-icon{
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: rgba(255,255,255, 0.5);
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
  color: #84b933;
}

/* Positionen (4 Icons) */
.vs-banner .vario-cloud-icon--1{
	top: 38px;
	left: 67px;
}
.vs-banner .vario-cloud-icon--2{
	top: 34px;
	right: 0px;
}
.vs-banner .vario-cloud-icon--3{
	bottom: 40px;
	left: -20px;
}
.vs-banner .vario-cloud-icon--4{
	bottom: 10px;
	right: 70px;
}

@keyframes varioIconFloat{
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(8px, -10px); }
  100% { transform: translate(0, 0); }
}


/* dezente Bewegung */
@keyframes varioCloudFloat{
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(10px, -10px); }
  100% { transform: translate(0, 0); }
}


@media (max-width: 997px) {
   .vario-cloud-visual{
		display: none;
	}

	 .vs-banner .col-12 {
    text-align: center;
  }

  .vs-banner h1,
  .vs-banner .lead {
    text-align: center;
  }

  .vs-banner .badge-wrapper {
    justify-content: center;
  }

  .vs-banner .d-flex {
    justify-content: center !important;
  }


}
@media (max-width: 997px) {
   .vario-cloud-icon {
		display: none!important;
	}
}


.thumbnail-btn,
.thumbnail-btn:focus,
.thumbnail-btn:active,
.thumbnail-btn.btn:focus,
.thumbnail-btn.btn:active {
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

.thumbnail-btn {
  width: 90px;
  height: 64px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}

/* Thumbnail Bild */
.thumbnail-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center center;
}

/* Play-Overlay auf Video-Thumbnails */
.thumbnail-btn .thumbnail-video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(14, 14, 14, .42);
  color: #fff;
  font-size: 18px;
  pointer-events: none;
  transition: background-color .15s ease;
}
.thumbnail-btn:hover .thumbnail-video-overlay,
.thumbnail-btn.active .thumbnail-video-overlay {
  background: rgba(132, 185, 51, .65);
}
/* Video-Thumbnails sollen den Frame komplett ausfuellen, nicht "contain" */
.thumbnail-btn[data-type="video"] img {
  object-fit: cover !important;
}

/* Haupt-Viewer: iframe soll volle Box ausfuellen */
#mainGalleryViewer iframe {
  display: block;
  width: 100%;
  height: 100%;
}


.appstore-header.text-white.py-5 {
    overflow: hidden;
    position: relative;
}

form.searchwp-form input.swp-input, form.searchwp-form select.swp-select {
    color: rgb(255 255 255 / 80%)!important;
}


.vc-apps-grid {
    min-height: 344px;
}

/* Dashboard mit erweiterten Effekten */
.vario-decorative-dashboard {
    position: absolute;
    width: 835px;
    height: 406px;
    bottom: -3%;
    left: -8%;
    z-index: 2;
    background-size: cover;
    background-position: center;
    filter: drop-shadow(0 10px 30px rgba(132, 185, 51, 0.1));
}

.app-entwickler {
	position: relative;
}

.app-entwickler .img-fluid {
    max-width: 100%;
    height: auto;
    bottom: 0;
    position: absolute;
    left: 0;
}


@media (max-width: 997px) {
    .app-entwickler .img-fluid {
		display:none;
	}
}

.all-apps {
		background: #84b933;
		color: #fff;
}

/* VARIO FAQ Shortcode Styles */

.vario-faq {
    background-color: var(--faq-bg-color, #ffffff);
    color: var(--faq-text-color, #2e2e2e);
    padding: 80px 0;
}

.vario-faq .faq-title {
    font-size: clamp(1.75rem,3vw,2.5rem);
	line-height: 1.2;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #2e2e2e;
	text-align: center;
}

.vario-faq .faq-description {
    font-size: 1rem;
    margin-bottom: 3rem;
    color: #2e2e2e;
	text-align: center;
}

.vario-faq .faq-item {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 32px;
    margin-bottom: 1rem;
    transition: all 0.8s ease;
    overflow: hidden;
}

.vario-faq .faq-item:hover {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.vario-faq .faq-question {
    padding: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--faq-text-color, #2e2e2e);
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    transition: all 0.8s ease;
	font-weight: 500;
	font-family: "Figtree", sans-serif;
	line-height: 1.2;
}

.vario-faq .faq-question .d-flex {
    display: flex;
    align-items: center;
    width: 100%;
}

.vario-faq .faq-icon {
    width: 32px;
    height: 32px;
    background-color: #cee3ad;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
    transition: all 0.8s ease;
}

.vario-faq .faq-icon::before {
    content: '+';
    color: #84b933;
    font-size: 2.2rem;
    font-weight: 500;
    transition: transform 0.8s ease;
	transform-origin: 50% 50%;
    margin-bottom: 0.2rem;
}

.vario-faq .faq-item.active .faq-icon::before {
    transform: rotate(45deg);
	transform-origin: 50% 50%;
    margin-left: 0.1rem;
}

.vario-faq .faq-answer {
    display: none;
    padding: 0 1.5rem 1.5rem 4.5rem;
    color: var(--faq-text-color, #2e2e2e);
    line-height: 1.6;
}

.vario-faq .faq-item.active .faq-answer {
    display: block;
    animation: fadeIn 0.8s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 0.8;
        transform: translateY(0);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .vario-faq {
        padding: 60px 0;
    }

    .vario-faq .faq-title {
        font-size: clamp(1.75rem,3vw,2.5rem);
    }

    .vario-faq .faq-question {
        padding: 1.25rem;
        font-size: 1rem;
    }

    .vario-faq .faq-answer {
        padding: 0 1.25rem 1.25rem 3.5rem;
    }

    .vario-faq .faq-icon {
        width: 28px;
        height: 28px;
        margin-right: 0.75rem;
    }
}


/* header */
.container.site-branding {
    display: flex;
    align-items: center;
    padding: 0.7rem 1rem 0.7rem 1rem;
}

header#masthead {
    background: #E8E5DF;
}


.container.site-branding p { color:#fff; }


/*Detail*/

.app-info-box {
	background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.app-info-box a {
    color: #84b933;
    text-decoration: none;
    transition: color .15s ease;
}
.app-info-box a:hover { color: #8c2952; }

/* Labels (Entwickler, Kategorie, Preis ...) - übernimmt die frühere h6-Optik,
   da die Labels jetzt <p class="info-label"> statt <h6> sind. */
.app-info-box .info-label {
    font-weight: 700;
    font-size: 1.rem;
    color: #2e2e2e;
    margin-bottom: .25rem;
}

.app-info-box > div + div:not(#app-install-btn) {
    border-top: 1px solid #e9ecef;
    padding-top: .75rem;
}

.headline-detail {
	position: relative;
}

/*Badge*/
.bg-success {
	padding: 6px 11px 6px 11px;
    margin-bottom: 0rem;
    position: absolute;
	background-color: #84b9331a!important;
	font-size: 0.85rem;
	font-weight: 500;
	border-radius: 50px;
	top: 27px;
	right: 25px;
	font-size: 0.7rem;
	color: #84b933;
}




.list.-white.rounded-circle.d-flex.align-items-center.justify-content-center.me-3 {
    background: #84b933;
    color: #fff;
    font-weight: 700;
}

.rating {
    background: #f1f1f1;
}

.register {
    justify-content: flex-end;
    display: flex;
}

.search {
	justify-content: center;
    display: flex
}

.site-header p { margin-bottom: 0; }

.single-vc_app a.info-box-links.d-flex {
  color: #84b933;
}

.single-vc_app a.info-box-links.d-flex:hover {
  color: #aa2d66;
}

.praxis {
	 overflow: hidden;
    position: relative;
}

img.img-screen {
	right: -170px;
	bottom: 10px;
	width: 320px;
	max-width: none;
}

@media (min-width: 1200px) {
    .display-5 {
        font-size: 2.7rem;
    }
}


/**Listing**/

.search-box {
	z-index: 1;
}

.appstore-header {
    text-align: center;
}

.search-container {
	width: 70%;
    text-align: center;
    margin: 0 auto;
}

.wpgb-facet .wpgb-checkbox-facet .wpgb-checkbox[aria-pressed=true] .wpgb-checkbox-control {
    background: #84b933!important;
    border-color: #84b933!important;
}


/* Search Styles */
form.searchwp-form .searchwp-form-input-container .swp-input {
    margin: 0;
    width: 100%;
    border-radius: 2rem;
    min-height: 3rem;
}
form.searchwp-form .searchwp-form-input-container {
    z-index: 1;
}

#searchwp-form-2 .swp-input, #searchwp-form-2 .swp-select {
    border-radius: 2rem!important;
}

/* Obere Header-Suche nur auf Seite "Alle Apps" ausblenden */
body.page-id-41 header .search {
    display: none !important;
}

form#searchwp-form-2 {
    width: 100%;
}


.container.site-branding a.text-white {
    margin-right: 1rem;
	display: flex;
    align-items: center;
    justify-content: center;
}

span.text-white {
    line-height: 3;
}

.container.site-branding a.text-white:hover {
    text-decoration: underline;
}

.container.site-branding i.bi.bi-person-fill.text-white::before {
    background: #506630;
    border-radius: 50%;
    padding: 0.6rem;
}

.container .bi-person-fill::before {
    content: "\f4da";
    color: #84b933;
    font-size: 1.2rem;
}

.container.site-branding .text-white {
    color: #84b933;
}

.searchwp-live-search-results {
    background: #fff;
    border-radius: 2rem!important;

}

.searchwp-live-search-result .searchwp-live-search-result--title a {
    font-size: 16px;
    color: #2e2e2e;
}
.searchwp-live-search-results-container a {
    color: #2e2e2e;
}
.searchwp-live-search-results-container a:hover {
    color: #84b933!important;
}

div#searchwp_live_search_results_6891bbb5c6315 {
    border-radius: 2rem;
}

form.searchwp-form input.swp-input--search {
    padding-left: 1.5em!important;
}

.searchwp-live-search-result {
    padding: 20px!important;
}

.wp-grid-builder .wpgb-card-21 .wpgb-block-1 {
    background: #84b933;
    width: fit-content;
}

.wp-grid-builder .wpgb-card-21 .wpgb-card-inner {
    background: #fff;
    box-shadow: 0 8px 30px #0000000f!important;
    border: none!important;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 2rem;
}


.wp-grid-builder .wpgb-card-media-thumbnail img,
.wp-grid-builder .wpgb-lazy-load {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: 12px !important;
  background: transparent !important;
  display: block;
}

.sortieren-inline {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 1rem;
  float: right;
}

.sortieren-inline select {
  border: none;
  background: none;
  padding: 0;
  font-size: 1rem;
  font-weight: 400;
  appearance: none;
  line-height: 1;
}


.sortieren-inline .wpgb-select {
    border-color: #fff!important;
}

.wpgb-select-placeholder {
    width: 85px;
}

.wpgb-select .wpgb-select-controls .wpgb-select-separator {
    display: none;
}

.wpgb-card-footer {
    border-radius: 2rem;
}


/* Hover-Effekt: leicht anheben und Schatten */
.wpgb-card:hover {
	border-radius: 2rem;
}

.bi-funnel-fill::before {
    content: "\f3e0";
    font-size: 1.4rem;
    color: #84b933;
    margin-left: 0.3rem;
}

.wp-grid-builder .wpgb-card-21 .wpgb-block-9:hover {
    color: #84b933!important;
}

.wpgb-block-3 a:hover {
	color: red;
}

.wp-grid-builder .wpgb-card-21 .wpgb-block-3:hover {
    color: #2e2e2e!important;
}
.wp-grid-builder .wpgb-card-21 .wpgb-block-3 {
    color: #1f1f1f!important;

}

.thumbnails-right img{
	border: 1px solid #c6c6c6;
    border-radius: 9px;
}

/* Thumbnails: Button quadratisch & gross */
.thumbnails-right {
  width: 110px !important;
}

.thumbnails-right .thumbnail-btn{
  width: 90px !important;
  height: 90px !important;
  padding: 0 !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Bild soll den Button komplett ausfuellen (ohne Crop) */
.thumbnails-right .thumbnail-btn img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
}

.wpgb-card-media.wpgb-scheme-light {
    background: transparent!important;
}

.wp-grid-builder .wpgb-card .wpgb-card-media-thumbnail div {
	background-position: 10% 10% !important;
	background-repeat: no-repeat !important;
	background-size: inherit;
	top: 24px !important;
	border:1px solid rgba(0,0,0,6%)!important;
	height: 80%!important;
	width: 33%!important;
	margin-left: 23px!important;
	border-radius: 24px!important;
	height: 80px !important;
	width: 80px !important;
}

.wp-grid-builder .wpgb-card-21 .wpgb-block-2 {
    margin: 0 24px 24px 24px!important;
}

.wp-grid-builder .wpgb-card-21 .wpgb-block-3 {
    margin: .5rem 24px!important;
}

.wp-grid-builder .wpgb-card .wpgb-card-body, .wp-grid-builder .wpgb-card .wpgb-card-content, .wp-grid-builder .wpgb-card .wpgb-card-footer, .wp-grid-builder .wpgb-card .wpgb-card-header, .wp-grid-builder .wpgb-card .wpgb-card-inner, .wp-grid-builder .wpgb-card .wpgb-card-media, .wp-grid-builder .wpgb-card .wpgb-card-media-content, .wp-grid-builder .wpgb-card .wpgb-card-media-overlay, .wp-grid-builder .wpgb-card .wpgb-card-media-thumbnail, .wp-grid-builder .wpgb-card [class*=wpgb-block-] {
    transition-duration: unset;
    transition-property: unset;
}

.wpgb-card-media {
	height: 7rem;
}


.wpgb-card-media.wpgb-scheme-light {
    max-height: 140px!important;
}

.wpgb-card-media-thumbnail {
  width: auto!important;
  max-width: 100%!important;
  display: inline-block!important;
  overflow: hidden!important;
}

.wpgb-card-media {
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
}

.wpgb-card-media-thumbnail {
    width: 100% !important;
    height: 100% !important;
}

.wpgb-card-media-thumbnail img,
.wpgb-lazy-load {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

.wpgb-card-media svg[data-ratio] {
    padding-top: 100% !important;
}

.vc-app-card {
    background: transparent;
}

.vc-app-card:hover {
   box-shadow: 0 12px 40px #00000018;
}


img.vc-app-icon{
    border: 1px solid #dee2e6;
}

@media (min-width: 768px) {
  .gleiche-hoehe {
    display: flex;
    align-items: stretch;
  }

  .gleiche-hoehe > [class*="col-"] {
    display: flex;
    flex-direction: column;
  }

  .praxis {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
  }
}

form.searchwp-form input.swp-input--search {
    background-image: url('/wp-content/uploads/2025/08/search.png')!important;
    background-position: right 25px top 44%!important;
    background-repeat: no-repeat!important;
    background-size: 29px auto!important;
}

.wpgb-card-media svg[data-ratio] {
    padding-top: 0 !important;
}

.sec-two .row {
    display: flex;
}

.sec-two .demo-teaser-container {
    height: 100%;
    display: flex;
}

.sec-two .demo-teaser-container > div,
.sec-two .all-apps {
    height: 100%;
}


/**Dark*/
.hero-dark {
    background: linear-gradient(135deg, #0f172a 0%, #101828 100%);
}

.code-card {
    background: #1e293b;
    border-radius: 18px;
    padding: 28px;
    color: #e5e7eb;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                 "Liberation Mono", "Courier New", monospace;
    font-size: 14px;
    line-height: 1.6;
    position: relative;
    overflow: hidden;
}

.code-header {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #9ca3af;
}

.code-lang {
    background: #84b933;
    color: #0f172a;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 11px;
}

.code-label {
    opacity: 0.6;
}

.code-card pre {
    margin: 0;
    white-space: pre-wrap;
}

pre {
    background: #1e293b!important;
}

span.badge.bg-light.text-dark.px-3.py-2.mb-4.d-inline-block.rounded-pill.pill-green {
    background: #27382a !important;
    color: #84b933 !important;
}


/* Sections sollen aus dem Theme-Container ausbrechen */
.entry-content .vario-section {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Verhindert horizontales Scrollen durch 100vw.
   "clip" statt "hidden": gleicher Effekt visuell, bricht aber position:sticky nicht. */
html, body {
  overflow-x: clip;
}

/* ============================= */
/* Section Spacing               */
/* ============================= */

.vario-section {
  padding-top: var(--section-pt, 0rem);
  padding-bottom: var(--section-pb, 0rem);
}


/* ============================= */
/* Section Background Themes     */
/* ============================= */

/* Default */
.vario-section.theme-default {
  background: #FBFAF8;
  color: #1F1F1F;
}

/* Muted */
.vario-section.theme-muted {
  background: #F4F2EE;
  color: #1F1F1F;
}

/* White */
.vario-section.theme-white {
  background: #FFFFFF;
  color: #1F1F1F;
}

/* Dark */
.vario-section.theme-dark {
  background: #2e2e2e;
  color: #FBFAF8;
}

/* Berry */
.vario-section.theme-berry {
  background: #8C2952;
  color: #FBFAF8;
}


/* ============================= */
/* Width Variants                */
/* ============================= */

.vario-section.width-narrow .container {
  max-width: 920px;
}

.vario-section.width-tight .container {
  max-width: 760px;
}

.vario-section.width-wide .container {
  max-width: 1280px;
}



/* Steps / Icons Section */
.vc-steps {
  padding: 5rem 0;
}

.vc-steps__row {
  row-gap: 2.5rem;
}

.vc-step {
  text-align: center;
  max-width: 260px;
  margin: 0 auto;
}

.vc-step__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #eef6dd;
  display: grid;
  place-items: center;
  margin: 0 auto 1rem;
}

.vc-step__icon i {
  font-size: 18px;
  color: #84b933;
  line-height: 1;
}

.vc-step__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
  color: #1f1f1f;
}

.vc-step__text {
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
  color: #1e1e1e;
}

/* Optional: etwas mehr Luft auf grossen Screens */
@media (min-width: 992px) {
  .vc-step {
    max-width: 240px;
  }
}


/* Einheitlicher "Mehr erfahren" Link in allen Cards */
.vc-app-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    width: fit-content;
    padding: 4px 10px;
    background: #f4f1ea;
    color: #0e0e0e;
    font-family: 'Figtree', system-ui, sans-serif;
    letter-spacing: -0.005em;
    border-radius: 6px;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.vc-app-price-prefix,
.vc-app-price-suffix {
    font-size: 12px;
    font-weight: 500;
    color: rgba(14, 14, 14, .55);
}
/* Streichpreis: alter Preis durchgestrichen, dezent vor dem aktuellen Preis */
del.vc-app-price-strike,
.vc-app-price-strike {
    text-decoration: line-through;
    color: rgba(14, 14, 14, .45);
    font-weight: 500;
    font-size: 12px;
}

/* Sale-Zeile + Ersparnis-Badge in der Card (kompakt, gleiches Design wie Detail) */
.vc-app-price-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.vc-app-price-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #84B933;
    color: #fff;
    font: 500 11px/1 'Figtree', system-ui, sans-serif;
    letter-spacing: .01em;
    padding: 3px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.vc-app-price-badge svg {
    fill: none;
    stroke: #fff;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ============================================================
   Preis-Darstellung Detailseite: nutzt dieselbe Pricebox wie das
   Card-Listing (gleiche Klassen, gleiche Proportionen). Nur die
   Spar-Zeile darunter ist detail-spezifisch.
   ============================================================ */
.app-info-box .vc-app-price-amount {
    font-size: 16px;
}
.app-info-box .vc-app-price-save {
    font-size: 13px;
    color: #A6A99E;
    margin-top: 10px;
}
.vc-app-price-amount {
    font-size: 14px;
    font-weight: 700;
}
.vc-app-price--free {
    background: #84b9331a;
    color: #5a8420;
    font-size: 14px;
    font-weight: 700;
}
.vc-app-price--usage {
    background: #f4f1ea;
    color: #0e0e0e;
    font-size: 14px;
    font-weight: 700;
}
.vc-app-price-note {
    font: 500 11px/1.3 'Figtree', system-ui, sans-serif;
    color: rgba(14, 14, 14, .55);
    letter-spacing: -0.005em;
}
.vc-app-pricebox.mt-1.mb-2 {
    min-height: 43px;
}

/* App-Beschreibung: Aufzählungen als zweispaltige Liste mit grünem Häkchen.
   Greift automatisch auf jede <ul> im Editor-Content, ohne Extra-Klassen. */
.app-desc ul {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 30px;
}
.app-desc li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15.5px;
    line-height: 1.45;
    color: #232B1C;
    background: #fbfaf8;
    padding: 1rem;
    border-radius: 15px;
}
.app-desc li::before {
    content: "";
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2384B933' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12.5 4.5 4.5L19 7'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
}
/* Einspaltig auf schmalen Screens */
@media (max-width: 560px) {
    .app-desc ul {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* Dezente Trennlinie über dem Preis-/Link-Bereich – greift bei ALLEN Karten
   (frei + kostenpflichtig) und damit auch auf der "Alle Apps"-Seite. */
.vc-app-card .vc-app-foot {
    border-top: 1px solid rgba(14, 14, 14, .08);
    padding-top: 12px;
}

/* Titel: feste Höhe von 2 Zeilen, längere mit … gekürzt → Border/Preis fluchten
   kartenübergreifend (auch über mehrere Reihen). */
.vc-app-card h5 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    min-height: 2.6em; /* 2 Zeilen × 1.3 */
}

/* Kurzbeschreibung: feste Höhe von 2 Zeilen, längere mit … gekürzt.
   Wird immer gerendert (auch leer), damit Apps ohne Text den Platz reservieren. */
.vc-app-card .vc-app-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    min-height: 2.8em; /* 2 Zeilen × 1.4 */
}

.vc-app-link,
.vc-app-link:visited {
  display: inline-block;
    margin-top: 1rem;
    font-weight: 500;
    font-size: .95rem;
    color: #8c2952;
    text-decoration: none;
}

.vc-app-link:hover {
  color: #8c2952;
  text-decoration: none;
}

.vc-app-link i {
  font-size: 0.65rem;
  transition: transform 0.2s ease;
  font-weight: 500;
}

.vc-app-link:hover i {
  transform: translateX(4px);
}


/* Buttons */
.btn, a.btn {
    font-size: 1rem;
    border-radius: 20px;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
	background: #84b933;
	border-color: #84b933;
	color: #fff;
	padding-top: .5rem !important;
    padding-bottom: .5rem !important;
	padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
	font-weight: 500;
}

.btn:hover, a.btn:hover {
    background-color: #fff;
	color: #84b933;
	border-color: #84b933;
}

.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
	background: #fff;
	color: #84b933;
	border-color: #84b933;
}


.image-galerie .btn {
    background-color: #fff;
	box-shadow: none;
}

.image-galerie .btn:hover {
    background-color: #fff;
}


.btn-secondary {
    color: #fafafa;
    background: linear-gradient(135deg, #84b933 0%, #6f9b2b 100%);
}

.btn-secondary:hover {
    background: linear-gradient(135deg, #6f9b2b 0%, #5a7f23 100%);
    box-shadow: 0 1rem 2rem rgba(111, 155, 43, 0.4);
}

.btn.all-apps-button{
    font-size: 1rem;
    padding: .6rem 1.75rem;
    border-radius: 50rem;
    position: relative;
    overflow: hidden;
	background: #b5d78b;
}

.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
    color: #84b933;
}

.btn:focus,
.btn:active,
.btn.active,
.btn-check:checked + .btn {
    background: #fff;
    color: #84b933;
    border-color: #84b933;
    box-shadow: none;
}

.btn:focus {
	background: #84b933;
    color: #fff;
    border-color: #84b933;
    box-shadow: none;
}

/* Card */
.card {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 1.5rem;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.card h3 {
    margin-top: 0;
    font-size: 1.25rem;
}


.vario-cloud-visual,
.viz-wrap {
    width: 100%;
    overflow: visible;
}

.viz-wrap svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}