/*
Theme Name: Besser Schlafen Child
Theme URI: https://besser-schlafen-jetzt.de
Description: Schlankes Child Theme für GeneratePress + Elementor Pro
Author: Besser Schlafen
Template: generatepress
Version: 2.0.0
Text Domain: besser-schlafen-child
*/
/*
@import 'custom.css';
*/
:root {
	--primary: #1a3a4a;
	--secondary: #4a9bb8;
	--accent: #7ec8e3;
	--night-dark: #0d1b2a;
	--night-mid: #1b3a4b;
	--night-light: #274060;
	--cloud: #f0f5f8;
	--cloud-soft: #e8f4f8;
	--text: #2d3748;
	--text-light: #5a6b7a;
	--white: #ffffff;
	--star: rgba(255, 255, 255, 0.8);
	--gold: #f59e0b;
	--success: #10b981;

	--profil: rgb(93,173,226);
	--profil-rgb: 93,173,226;
	

	--profil-hell: #fdebd0;
	--profil-heller: #fef5e7;
	--profil-dukel: #d68910;
	--markus: #f5b041;
	--markus-rgb: 243, 156, 18;
	--julia: #5dade2;
	--sarah: #af7ac5;
	--sarah-dunkel: #7d3c98;
}

body.clouds-tag        { --cloud-color: #ffffff; --cloud-text: #111111; }  /* Default */
body.clouds-morgen     { --cloud-color: #C0687E; --cloud-text: #ffffff; }
body.clouds-nachmittag { --cloud-color: #1a3a4a; --cloud-text: #ffffff; }
body.clouds-abend      { --cloud-color: #6E75C7; --cloud-text: #111111; }
body.clouds-daemmerung { --cloud-color: #61416C; --cloud-text: #ffffff; }
body.clouds-nacht      { --cloud-color: #141F36; --cloud-text: #ffffff; }


body.error404{
  --cloud-color: #1a3a4a;   /* z.B. Nacht */
  --cloud-text:  #ffffff;
}


 /* rundest du den Rahmen für Navigation */
.elementor-nav-menu .elementor-item.elementor-item-active:before,
.elementor-nav-menu .elementor-item:hover:before {
    border-radius: 10px;
}

 /* Reset padding 10px im div block */
.elementor .e-div-block-base {
	padding: 0;
}


.beitragsinfo {
	color: var(--text-mute);
}

ol, ul {
    margin: 0;
}
 
div.seiten-abschand {
	padding-left: 20px;
	padding-right: 20px;
}


 
 /* Profilseiten */
        .profile-header {
            display: flex;
            gap: 40px;
            margin-bottom: 50px;
            align-items: flex-start;
        }

        .avatar-large, .avatar-large img {
            width: 400px;
            height: 400px;
            border-radius: 50% !important;
			background: linear-gradient(135deg, rgb(var(--profil-rgb), 0) 0%, rgb(var(--profil-rgb), 10) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 64px;
            color: #fff;
            font-weight: 600;
            flex-shrink: 0;
			box-shadow: 0 10px 30px rgb(var(--profil-rgb), 0.3);
        }

        .profile-intro h1 {
            margin-bottom: 8px;
			margin-top: 160px;
        }

        .profile-intro .role {
            color: var(--profil);
                   letter-spacing: 1px;
            margin-bottom: 15px;
        }

        .profile-intro .quote {
            font-size: 1.6rem !important;
            line-height: 2rem;
            color: #555;
            font-style: italic;
            border-left: 4px solid var(--profil) !important;
            padding-left: 20px;
            margin: 20px 0;
            width: 90%;
        }

        .tags, .expertise-tags, .interests {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 20px;
        }

        .tag, .interest {
			/*
            padding: 5px 20px;
            background: rgb(var(--profil-rgb), 0.2);
			 */
			border: 1px solid var(--profil);
            color: var(--profil);

            border-radius: 16px;
            font-size: 0.9rem;
            font-weight: 600;
        }

        .section {
            margin-bottom: 60px;
            margin-top: 60px;
        }

        .section h2 {

            margin-bottom: 20px;

        }


        /* Topics Grid */
        .topics-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 25px;
            margin-top: 25px;
        }

        .topic-card {
            background: #fff;
            border: 1px solid #eee;
            border-radius: 12px;
            padding: 25px;
            transition: all 0.3s ease;
        }

        .topic-card:hover {
            border-color: var(--profil);
			box-shadow: 0 5px 20px rgba(var(--profil-rgb), 0.1);
        }

        .topic-card .icon {
            font-size: 36px;
            margin-bottom: 15px;
        }

        .topic-card h4 {
            color: #1a5276;
            font-size: 18px;
            margin-bottom: 10px;
        }

        .topic-card p {
            font-size: 14px;
            color: #666;
            margin: 0;
        }

        /* Research Box */
        .research-box {
            background: linear-gradient(135deg, rgb(var(--profil-rgb), 0.1) 0%, rgb(var(--profil-rgb), 0.4) 100%);
            padding: 30px;
            border-radius: 12px;
            margin: 30px 0;
        }

        .research-box h3 {
            color: #7d3c98;
            font-size: 18px;
            margin-bottom: 15px;
        }

        .research-box p {
            font-size: 15px;
            color: #555;
            margin-bottom: 10px;
        }

        .research-box ul {
            margin-left: 20px;
            color: #555;
        }

        .research-box li {
            margin-bottom: 8px;
        }


        /* Test Stats */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin: 30px 0;
        }

        .stat-item {
            text-align: center;
            padding: 25px 15px;
            background: #f8f9fa;
            border-radius: 12px;
        }

        .stat-item .number {
            font-size: 36px;
            font-weight: 700;
            color: #1abc9c;
            display: block;
        }

        .stat-item .label {
            font-size: 13px;
            color: #666;
            margin-top: 5px;
        }

        .expertise-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .expertise-item {
            background: linear-gradient(135deg, #f8f9fa 0%, #e8f8f5 100%);
            padding: 25px;
            border-radius: 12px;
            text-align: center;
            transition: transform 0.3s ease;
        }

        .expertise-item:hover {
            transform: translateY(-3px);
        }

        .expertise-item .icon {
            font-size: 32px;
            margin-bottom: 12px;
        }

        .expertise-item h4 {
            color: #1a5276;
            font-size: 16px;
            margin-bottom: 8px;
        }

        .expertise-item p {
            font-size: 13px;
            color: #666;
            margin: 0;
        }


        /* Test Process */
        .process-list {
            list-style: none;
            counter-reset: process;
        }

        .process-list li {
            padding: 20px 20px 20px 70px;
            position: relative;
            border-left: 2px solid #e8f8f5;
            margin-left: 20px;
        }

        .process-list li::before {
            counter-increment: process;
            content: counter(process);
            position: absolute;
            left: -21px;
            top: 20px;
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #48c9b0 0%, #1abc9c 100%);
            color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 16px;
        }

        .process-list li h4 {
            color: #1a5276;
            margin-bottom: 8px;
        }

        .process-list li p {
            margin: 0;
            font-size: 15px;
        }


        /* Warning Box */
        .warning-box {
            background: linear-gradient(135deg, rgb(var(--profil-rgb), 0) 0%, rgb(var(--profil-rgb), 0.1) 100%);
            border-left: 4px solid var(--profil) !important;
            padding: 25px;
            border-radius: 0 12px 12px 0;
            margin: 30px 0;
        }

        .warning-box h2 {

            margin: 0;

        }

        .warning-box p {
            color: var(--text);
            margin: 0;
        }

        .warning-box .source {
/* 
            margin-top: 15px;
			*/

            font-size: 0.95rem;
            font-style: normal;
            color: var(--text-light);
        }


        /* Checklist */
        .checklist {
            list-style: none;
            margin: 25px 0;
        }

        .checklist li {
            padding: 12px 0 12px 40px;
            position: relative;
            border-bottom: 1px solid #f0f0f0;
            font-size: 15px;
        }

        .checklist li:last-child {
            border-bottom: none;
        }

        .checklist li::before {
            content: '✓';
            position: absolute;
            left: 0;
            top: 12px;
            width: 26px;
            height: 26px;
            background: linear-gradient(135deg, var(--profil) 0%, #f39c12 100%);
            color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 700;
        }

        .expertise-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }

        .expertise-item {

			background: linear-gradient(135deg, rgb(var(--profil-rgb), 0.05) 0%, rgb(var(--profil-rgb), 0.15) 100%);
            padding: 25px;
            border-radius: 12px;
            text-align: center;
            transition: transform 0.3s ease;
        }

        .expertise-item:hover {
            transform: translateY(-3px);
        }

        .expertise-item .icon {
            font-size: 32px;
            margin-bottom: 12px;
        }

        .expertise-item h4 {
            color: var(--primary);
            font-size: 1.1rem;
            margin-bottom: 8px;
        }

        .expertise-item p {
            font-size: 0.9rem;
            color: #666;
            margin: 0;
        }

        /* Price Comparison Example */
        .price-example {
            background: #fff;
            border: 2px solid #f39c12;
            border-radius: 12px;
            padding: 25px;
            margin: 25px 0 50px;
        }

        .price-example h4 {
            color: var(--profil);
            margin-bottom: 20px;

        }

        .price-example .comparison {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .price-example .item {
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
            text-align: center;
        }

        .price-example .item.recommended {
            background: #fef5e7;
            border: 1px solid var(--profil);
        }

        .price-example .item .label {
            font-size: 1rem;
            color: #888;
            margin-bottom: 5px;
        }

        .price-example .item .value {
            font-size: 24px;
            font-weight: 700;
            color: #1a5276;
        }

        .price-example .item.recommended .value {
            color: var(--profil);
        }

        .contact-box {
            background: linear-gradient(135deg, var(--profil) 0%, var(--profil) 100%);
			background: linear-gradient(135deg, rgb(var(--profil-rgb), 1) 0%, rgb(var(--profil-rgb), 0.6) 100%);
            color: #fff;
            padding: 35px;
            border-radius: 12px;
            margin-top: 40px;
        }

        .contact-box h3 {
            font-size: 20px;
            margin-bottom: 15px;
        }

        .contact-box p {
            color: rgba(255,255,255,0.9);
            margin-bottom: 20px;
        }

        .contact-box .email {
            display: inline-block;
            background: rgba(255,255,255,0.2);
            padding: 10px 20px;
            border-radius: 25px;
            color: #fff;
            text-decoration: none;
            font-weight: 600;
            transition: background 0.3s ease;
        }

        .contact-box .email:hover {
            background: rgba(255,255,255,0.3);
        }



 /* Profilseiten */
 /* ENDE */

.hero-clouds{

  height: 90px;                 /* anpassen */
  background-repeat: repeat-x;

  background-size: auto 90px;
}

/* Fallback (ohne Maske): zeige einfach das Tag-SVG */
.hero-clouds{
  background-image: url('/files/wolken-header-tag.svg');
}

/* Moderne Browser: Maske + dynamische Farbe */
@supports ((-webkit-mask-image: url("/files/wolken-header.svg")) or (mask-image: url("/files/wolken-header.svg"))) {
  .hero-clouds{
    background-image: none !important;
    background-color: var(--cloud-color, #fff);

    -webkit-mask-image: url('/files/wolken-header.svg');
    mask-image: url('/files/wolken-header.svg');

    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;

    -webkit-mask-position: bottom center;
    mask-position: bottom center;

    -webkit-mask-size: auto 90px;
    mask-size: auto 90px;
  }
}
/**
.hero-header{
  min-height: var(--hero-header-height, 400px);
  display: flex;
  align-items: center;
  position: relative;
}
**/
.hero-header{
  min-height: var(--hero-header-height, 400px);
}

/* nur wenn Elementor inline was überschreibt: */
.hero-header{
  min-height: var(--hero-header-height, 400px) !important;
}



.hero-header{
  background-image: var(--hero-bg);
	background-position: top center;
	background-repeat: no-repeat;
}

/**
 * Breadcrumbs
 */
.bsj-breadcrumbs-bar{
  height: 100px;
  display: flex;
  align-items: center;
  background: var(--cloud-color, #fff);
  color: var(--cloud-text, #111);
}

/* Inhalt zentrieren + begrenzen */
.bsj-breadcrumbs-bar .rank-math-breadcrumb{
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 1.25rem;
  font-size: 0.875rem;
}

.bsj-breadcrumbs-bar a{
  color: inherit;
  text-decoration: none;
}
.bsj-breadcrumbs-bar a:hover{
  text-decoration: underline;
}
.bsj-breadcrumbs-bar .separator{
  margin: 0 0.4em;
  opacity: 0.6;
}
/*
.rank-math-breadcrumb a:first-child::before{
  content:'🏠';
  margin-right:0.4em;
}

.rank-math-breadcrumb a:first-child::before{
  content: '';
  display: inline-block;
  width: 20px;
  height: 18px;
  margin-right: 0.4em;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30.494 34'%3E%3Cpath d='M-1968.716 14445.141v11.355h26.873v-18.122l-13.519-12.878-13.354 12.878' transform='translate(1970.837 -14423.996)' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'/%3E%3C/svg%3E");
}
*/
.bsj-breadcrumbs-bar .breadcrumb-back{
  opacity: .7;
  text-decoration: none;
  white-space: nowrap;
}

.bsj-breadcrumbs-bar .breadcrumb-back:hover{
  opacity: 1;
  text-decoration: underline;
}

/**
 * Tags 
 */
.bsj-cat-tags {
	margin: 2rem 0;
}

.bsj-cat-tags__links {
	display: flex;
	flex-wrap: wrap;
	gap: 1.8rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.bsj-cat-tags__link {
	padding: .5rem 1.2rem;
	border: 1px solid rgba(0,0,0,1);
	border-radius: 20px;
	text-decoration: none;
	transition: all .2s ease;
	color: var(--text);
}

.bsj-cat-tags__link:hover {
	background: rgba(0,0,0,0.05);

}


/*
 * SEITEN ELEMENTE
 *
 */

        /* Verknüpfung zu anderen Bereichen */
        .verknuepfung-section {
            padding: 100px 20px;
            background: var(--white);
        }

        .verknuepfung-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }

        .verknuepfung-card {
            background: var(--cloud);
            border-radius: 20px;
            padding: 40px 30px;
            text-align: center;
            text-decoration: none;
            color: var(--text);
            transition: all 0.3s;
        }

        .verknuepfung-card:hover {
            background: var(--white);
            box-shadow: 0 20px 50px rgba(0,0,0,0.1);
            transform: translateY(-8px);
        }

        .verknuepfung-card .icon {
            font-size: 3rem;
            margin-bottom: 20px;
            display: block;
        }

        .verknuepfung-card h3 {
            font-size: 1.2rem;
            color: var(--primary);
            margin-bottom: 10px;
            font-weight: 600;
        }

        .verknuepfung-card p {
            font-size: 0.9rem;
            color: var(--text-light);
            line-height: 1.6;
            margin-bottom: 15px;
        }

        .verknuepfung-card .link {
            color: var(--secondary);
            font-weight: 600;
            font-size: 0.9rem;
        }


        /* Responsive */
        @media (max-width: 1024px) {
            .kategorien-grid { grid-template-columns: 1fr; }
            .kategorie-card.featured { grid-column: span 1; }
            .artikel-grid { grid-template-columns: 1fr; }
            .pflege-grid { grid-template-columns: 1fr; }
            .faq-content { grid-template-columns: 1fr; }
            .verknuepfung-grid { grid-template-columns: 1fr; }
            .cta-banner { flex-direction: column; text-align: center; }
        }

        @media (max-width: 768px) {
            .hero h1 { font-size: 2.2rem; }
            .hero .tagline { font-size: 1.05rem; }
            .hero-features { flex-direction: column; gap: 15px; }
            .artikel-card { flex-direction: column; }
            .artikel-icon { width: 60px; height: 60px; min-width: 60px; }
            .newsletter-form { flex-direction: column; border-radius: 16px; }
            .newsletter-form input { border-bottom: 1px solid var(--cloud); }
            .cta-buttons { justify-content: center; }
        }

/*
 * SEITEN ELEMENTE
 * ENDE
 */


.bsj-faq-search{display:flex;gap:.5rem;align-items:center;margin:1rem 0}
.bsj-faq-search-input{flex:1 1 auto;min-width:12rem;border:1px solid rgba(0,0,0,.18);border-radius:.75rem;padding:.5rem .75rem;background:transparent}
.bsj-faq-search-btn{border:1px solid rgba(0,0,0,.18);background:transparent;border-radius:.75rem;padding:.5rem .85rem;cursor:pointer}
.bsj-faq-search-meta,.bsj-faq-search-empty{margin:.5rem 0 0;opacity:.75}


/* MOBILE HEADER-HÖHEN */
@media (max-width: 767px){

  /* Default mobile: 330px */
  .hero-header{
    min-height: 330px !important;
  }

  /* Startseite mobile: 380px */
  body.home .hero-header{
    min-height: 380px !important;
  }

}

@media (max-width: 768px) {
	.profile-header {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.avatar-large, .avatar-large img {
		width: 260px;
		height: 260px;
	}
	.profile-intro .quote {
		border-left: none;
		border-top: 4px solid var(--profil) !important;
		border-left: none !important;
		padding-left: 0;
		padding-top: 20px;
		width: 100%;
	}

	.profile-intro h1 {
		margin-bottom: 8px;
		margin-top: 0;
	}
	.interests {
		justify-content: center;
	}
	.stats-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.price-example .comparison {
		grid-template-columns: 1fr;
	}

}