/* DROPPY – Pakete
   Wird nur auf diesen Seiten zusätzlich zu main.css geladen. */

/*  Nav Tabs  */

.nav-tabs > li > a i {
    font-size: 20px;
}

.nav-tabs > li.last {
    border-right: 1px solid var(--c-line);
}

/*  3. FEATURES TABBED SECTION  */

.features-tabbed .tab-content {
    padding: 30px 15px;
}

.features-tabbed .tab-content .title {
    font-size: 16px;
    color: var(--c-coral);
    font-weight: 600;
    margin-bottom: 30px;
}

.features-tabbed .tab-content .desc {
    margin-bottom: 30px;
    color: var(--c-text);
}

.features-tabbed .tab-content .desc ul {
    padding-top: 15px;
    padding-bottom: 15px;
}

.features-tabbed .tab-content .desc ul i {
    margin-right: 5px;
    font-size: 1em;
    color: var(--c-coral);
    vertical-align: middle;
}

.features-tabbed .tab-content .desc blockquote {
    font-style: italic;
    color: var(--c-muted);
}

/*  Feature List  */

.section-pricing .item .feature-list li i {
    margin-right: 5px;
    font-size: 1em;
    line-height: inherit;
    color: var(--c-dark-2);
    vertical-align: middle;
}

.section-pricing .item .feature-list li.disabled {
    opacity: 0.4;
}

/*  DESKTOP (min-width: 992px)  */

@media screen and (min-width: 992px) {
    .features-tabbed .tab-content {
        padding: 60px 30px;
    }
    .features-tabbed .tab-content .desc ul {
        padding-left: 30px;
    }
}

/*  Variante: Paket (Pakete-Seite). Spenden behaelt die bisherigen .item-Werte  */

.section-pricing .item.card-tile {
    padding: 0;
    margin-bottom: 30px;
    overflow: visible;
}

.section-pricing .item.card-tile .item-inner,
.section-pricing .item.card-tile .heading {
    border-radius: var(--radius);
}

.section-pricing .item.card-tile .heading { border-radius: var(--radius) var(--radius) 0 0; }

/*  4.12 Hilfsklassen (ersetzen Inline-Styles)  */

.is-spacer { visibility: hidden; }

/*  4.11 Nachtrag v4.2: Bewegung, Anker, Seitenbreite, Icon-Kreise  */

.content-box--page { max-width: var(--page-width); margin: var(--space-4) auto; float: none; }

.content-box h2:not(:first-child),
.content-box h3:not(:first-child) { margin-top: var(--space-3); }

/*  ==========================================================================  */

.features-tabbed .pkg-tabs {
    display: flex;
    gap: .375rem;
    max-width: 520px;
    margin: 0 auto var(--space-4);
    padding: .375rem;
    background: var(--c-bg);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-pill);
}

.features-tabbed .pkg-tabs:before { display: none; }

.features-tabbed .pkg-tabs > li,
.features-tabbed .pkg-tabs > li.active,
.features-tabbed .pkg-tabs > li.last {
    flex: 1 1 0;
    width: auto;
    margin: 0;
    background: none;
    border: 0;
}

.features-tabbed .pkg-tabs > li > a,
.features-tabbed .pkg-tabs > li > a:hover,
.features-tabbed .pkg-tabs > li.active > a,
.features-tabbed .pkg-tabs > li.active > a:hover,
.features-tabbed .pkg-tabs > li.active > a:focus {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    padding: .625rem .5rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: none;
    box-shadow: none;
    color: var(--c-text);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.2;
    transition: background-color .15s, color .15s, box-shadow .15s;
}

.features-tabbed .pkg-tabs > li > a br { display: none; }

.features-tabbed .pkg-tabs > li > a i { font-size: 20px; color: var(--c-teal); }

.features-tabbed .pkg-tabs > li > a:hover { color: var(--c-coral); }

.features-tabbed .pkg-tabs > li.active > a,
.features-tabbed .pkg-tabs > li.active > a:hover,
.features-tabbed .pkg-tabs > li.active > a:focus {
    background: var(--c-white);
    color: var(--c-dark);
    box-shadow: var(--shadow-card);
}

.features-tabbed .tab-content .desc ul.pkg-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-grid);
    margin: var(--space-3) 0;
    padding: 0;
}

.features-tabbed .tab-content .desc ul.pkg-features > li {
    position: relative;
    margin: 0;
    padding: var(--space-card) var(--space-card) var(--space-card) 4.25rem;
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    font-size: var(--fs-sm);
    line-height: 1.6;
}

.features-tabbed .tab-content .desc ul.pkg-features > li > i {
    vertical-align: baseline;
    position: absolute;
    left: var(--space-card);
    top: var(--space-card);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin: 0;
    border-radius: 50%;
    background: rgb(var(--rgb-teal) / .12);
    color: var(--c-teal);
    font-size: 1.125rem;
}

.features-tabbed .tab-content .desc ul.pkg-features > li > b {
    display: inline-block;
    margin-bottom: .25rem;
    color: var(--c-dark);
    font-size: var(--fs-md);
}

@media (min-width: 768px) {
    .features-tabbed .tab-content .desc ul.pkg-features { grid-template-columns: repeat(2, 1fr); }
    .features-tabbed .tab-content .desc ul.pkg-features > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/*  Handy: Der Hero-Text ist hier lang und lief unter dem Bild heraus (weisse Schrift auf Weiss). Bild entsprechend hoeher.  */

@media (max-width: 767px) { .bg-img.hero-band { height: 590px; } }
@media (max-width: 480px) { .bg-img.hero-band { height: 660px; } }
@media (max-width: 420px) { .bg-img.hero-band { height: 720px; } }
@media (max-width: 380px) { .bg-img.hero-band { height: 760px; } }
@media (max-width: 340px) { .bg-img.hero-band { height: 860px; } }
@media (min-width: 768px) and (max-width: 991px) { .bg-img.hero-band { height: 500px; } }

/*  Paket-Rahmen: Reiter und Inhalt stehen gemeinsam in einem Rahmen. Die Farbe wechselt mit dem Paket
    (Basic grau, Business helles Mint, Expert helles Rot). Die Klasse setzt ein kleines Script in pakete.php.  */

.features-tabbed.pkg-frame {
    padding: var(--space-3) var(--space-3) var(--space-2);
    border: 1px solid rgb(var(--rgb-dark) / .14);
    border-radius: var(--radius);
    background: rgb(var(--rgb-dark) / .06);
    transition: background-color .3s ease, border-color .3s ease;
}

.features-tabbed.pkg-frame.pkg-business { background: rgb(var(--rgb-teal) / .10); border-color: rgb(var(--rgb-teal) / .35); }

.features-tabbed.pkg-frame.pkg-expert { background: rgb(var(--rgb-coral) / .10); border-color: rgb(var(--rgb-coral) / .35); }

.features-tabbed.pkg-frame .pkg-tabs { background: var(--c-white); margin-bottom: var(--space-2); }

.features-tabbed.pkg-frame .tab-content { padding: var(--space-2) 0 0; }

@media (max-width: 767px) {
    .features-tabbed.pkg-frame { padding: var(--space-2) var(--space-1); }
}

/*  Aktiver Reiter in der Farbe des Pakets (sonst ist die Auswahl schlecht erkennbar)  */

.features-tabbed.pkg-frame.pkg-basic .pkg-tabs > li.active > a,
.features-tabbed.pkg-frame.pkg-basic .pkg-tabs > li.active > a:hover,
.features-tabbed.pkg-frame.pkg-basic .pkg-tabs > li.active > a:focus { background: rgb(var(--rgb-dark) / .14); box-shadow: none; }

.features-tabbed.pkg-frame.pkg-business .pkg-tabs > li.active > a,
.features-tabbed.pkg-frame.pkg-business .pkg-tabs > li.active > a:hover,
.features-tabbed.pkg-frame.pkg-business .pkg-tabs > li.active > a:focus { background: rgb(var(--rgb-teal) / .28); box-shadow: none; }

.features-tabbed.pkg-frame.pkg-expert .pkg-tabs > li.active > a,
.features-tabbed.pkg-frame.pkg-expert .pkg-tabs > li.active > a:hover,
.features-tabbed.pkg-frame.pkg-expert .pkg-tabs > li.active > a:focus { background: rgb(var(--rgb-coral) / .24); box-shadow: none; }

/*  Abstand zwischen «Faire Preise» und «Produktmerkmale» verkleinert (leerer Absatz ausgeblendet, Section-Abstaende reduziert)  */

.section-pricing .container > p:last-child { display: none; }
.section-pricing.section-on-bg { padding-bottom: 0; }
.section-pricing + .section-story { padding-top: var(--space-2); }

/*  Hover: Die Pille erscheint auch beim Ueberfahren (nicht aktive Reiter, in der Farbe des jeweiligen Pakets)  */

.features-tabbed.pkg-frame .pkg-tabs > li:not(.active) > a { transition: background-color .2s ease, color .2s ease; }

.features-tabbed.pkg-frame .pkg-tabs > li:nth-child(1):not(.active) > a:hover { background: rgb(var(--rgb-dark) / .08); }

.features-tabbed.pkg-frame .pkg-tabs > li:nth-child(2):not(.active) > a:hover { background: rgb(var(--rgb-teal) / .16); }

.features-tabbed.pkg-frame .pkg-tabs > li:nth-child(3):not(.active) > a:hover { background: rgb(var(--rgb-coral) / .14); }

.features-tabbed.pkg-frame .pkg-tabs > li:not(.active) > a:hover { color: var(--c-dark); }