/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */
/* Highlights Container & globale Styles
***********************************************************/
.highlight-container {
	font-family: var(--e-global-typography-accent-font-family), Sans-serif;
    font-size: var(--e-global-typography-accent-font-size);
    font-weight: var(--e-global-typography-accent-font-weight);
    line-height: var(--e-global-typography-accent-line-height);
}

.highlight-container .highlights {
    list-style: none;
    display: grid;
    justify-items: start;
    gap: 1rem;
    padding-left: 0;
    margin: 0;
}

.highlight-container .highlights li {
    background: color-mix(in srgb, var(--e-global-color-47a7e76) 60%, var(--e-global-color-f2ba8d3)) !important;
    color: var(--e-global-color-text);
    min-inline-size: 6ch;
    text-align: center;
    padding: 0 0.5rem;
    border-radius: 100vw;
    box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.11);
}

/* Optional: Spezifische Farben für einzelne Highlights */
.highlight-container .highlights li.popular {
    background-color: var(--e-global-color-50be59a) !important;
	color: var(--e-global-color-f2ba8d3) !important;
}

.highlight-container .highlights li.made-in-france {
background-color: white !important;
    color: var(--e-global-color-text) !important;
}
.highlight-container .highlights li.bio {
background-color: #A3B899 !important;
    color: var(--e-global-color-text) !important;
}


/* Nested Tabs: einheitlicher Eckenradius in allen Zuständen
***********************************************************/
/* Die Tab-Titel sind <button>-Elemente. Das Elementor-Kit gibt jedem Button
   bei :hover und :focus border-radius 5px (".elementor-kit-37 button:hover"),
   und das ist spezifischer als die Tab-Regel des Widgets. Ergebnis: Tabs
   hatten normal 1rem, beim Hover bzw. nach dem Anklicken aber 5px.
   Hier gilt in jedem Zustand der Radius, der im Tabs-Widget eingestellt ist
   (--n-tabs-title-border-radius). Das betrifft alle Nested-Tabs der Website,
   auch die mobile Ansicht. */
.elementor-kit-37 .elementor-widget-n-tabs .e-n-tab-title,
.elementor-kit-37 .elementor-widget-n-tabs .e-n-tab-title:hover,
.elementor-kit-37 .elementor-widget-n-tabs .e-n-tab-title:focus,
.elementor-kit-37 .elementor-widget-n-tabs .e-n-tab-title:focus-visible,
.elementor-kit-37 .elementor-widget-n-tabs .e-n-tab-title:active {
	border-radius: var(--n-tabs-title-border-radius);
}