@charset "utf-8";

/* CSS Document */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: Inter, sans-serif;
	background: #faf7fa;
	color: #111;
	overflow-x: hidden;
}

a {
	text-decoration: none;
}

.container {
	width: min(1440px, 92%);
	margin: auto;
}

/* HERO */
.hero{
    padding:160px 0 80px;
}

.hero-content{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
}

.hero-left{
    max-width:650px;
}

.visual{
    position:relative;
    height:620px;
}

.hero small {
	color: #ff0a78;
	font-weight: 700;
	letter-spacing: 2px;
}

.hero h1 {
	font-size: 72px;
	line-height: 1.05;
	margin-top: 15px;
}

.hero h1 span {
	color: #ff0a78;
}

.hero p {
	margin-top: 25px;
	line-height: 1.8;
	color: #555;
}

.badges {
	display: flex;
	gap: 25px;
	flex-wrap: wrap;
	margin-top: 35px;
}

.badge {
	display: flex;
	gap: 10px;
	font-weight: 600;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:18px 32px;
    border-radius:16px;
    background:linear-gradient(135deg,#ff0080,#b13cff);
    color:#fff;
    font-weight:600;
    border:none;
}

/* VISUAL */
.visual {
	position: relative;
	height: 620px;
}

.main-card {
	height: 100%;
	border-radius: 34px;
	background: url(../img/glossar/header-glossar-.png) no-repeat;
	background-size: cover;
	box-shadow: 0 60px 100px rgba(0, 0, 0, .2);
}

.floating {
	position: absolute;
	background: white;
	padding: 18px 24px;
	border-radius: 18px;
	box-shadow: 0 25px 40px rgba(0, 0, 0, .08);
	font-weight: 700;
}

.f1 {
	top: 30px;
	left: -20px;
}

.f2 {
	right: -10px;
	top: 70px;
}

.f3 {
	top: 220px;
	left: -50px;
}

.f4 {
	right: -30px;
	top: 270px;
}

.f5 {
	bottom: 60px;
	right: 40px;
}

/* GLOSSAR */
.glossar {
	padding: 100px 0;
}

.section-label {
	color: #ff0a78;
	font-weight: 700;
	margin-bottom: 10px;
	text-align: center;
}

.glossar h2 {
	font-size: 48px;
	margin-bottom: 40px;
}

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

.item {
	background: white;
	padding: 28px;
	border-radius: 22px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, .04);
}

.head {
	display: flex;
	justify-content: space-between;
	font-weight: 700;
	cursor: pointer;
}

.content {
	display: none;
	margin-top: 18px;
	color: #666;
	line-height: 1.8;
}

.item.open .content {
	display: block;
}

.glossary-nav{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:60px;
}

.glossary-nav a{
    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:#fff;
    color:#d92e86;
    font-weight:700;
    text-decoration:none;
    box-shadow:0 10px 25px rgba(0,0,0,.05);
    transition:.3s ease;
}

.glossary-nav a:hover{
    background:#d92e86;
    color:#fff;
    transform:translateY(-3px);
}

.letter-group{
    margin-bottom:80px;
}

.letter-group h2{
    font-size:58px;
    line-height:1;
    margin-bottom:35px;
    color:#d92e86;
}

/* ==========================
   GLOSSAR CTA
========================== */

.glossar-cta{
    max-width:1500px;
    margin:100px auto;
    display:flex;
    flex-direction:column;
    gap:30px;
}

.cta-card{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:35px 45px;

    border-radius:32px;

    box-shadow:
    0 10px 35px rgba(0,0,0,.05);

    overflow:hidden;
}

.cta-card.light{
    background:#fff;
}

.cta-card.gradient{

    background:
    linear-gradient(
    135deg,
    #d92e86 0%,
    #ff0f8b 100%
    );
}

.cta-left{
    display:flex;
    align-items:center;
    gap:30px;
}

.cta-icon{

    width:100px;
    height:100px;

    border-radius:50%;

    background:
    linear-gradient(
    135deg,
    #d92e86,
    #ff0f8b
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#fff;
    font-size:2rem;

    flex-shrink:0;
}

.cta-icon.white{
    background:#fff;
    color:#d92e86;
}

.cta-text h3{
    font-size:2rem;
    font-weight:700;
    margin-bottom:10px;
}

.cta-text p{
    font-size:1.1rem;
    line-height:1.7;
    max-width:650px;
}

.cta-text.white{
    color:#fff;
}

.cta-btn{

    height:64px;

    padding:0 35px;

    border-radius:16px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:14px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;
}

.cta-btn:hover{
    transform:translateY(-3px);
}

.cta-btn.pink{

    background:
    linear-gradient(
    135deg,
    #d92e86,
    #ff0f8b
    );

    color:#fff;
}

.white-btn{
    background:#fff;
    color:#d92e86;
}

.cta-actions{
    display:flex;
    gap:20px;
}



/* =========================
FAQ
========================= */
.faq-section {
	 padding: 0;
  	 width: min(1440px,92%);
 	 margin: 0 auto;
}

.faq-title {
	 font-size: 52px;
	 margin-bottom: 50px;
	 text-align: center;
}

.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

.faq-item {
	background: #fff;
	border-radius: 28px;
	padding: 30px;
	box-shadow:	0 10px 30px rgba(180, 120, 220, .08);
	cursor: pointer;
	transition: .35s ease;
    align-self: start;
}

.faq-item:hover {
	transform: translateY(-6px);
}

.faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.faq-question h3 {
	font-size: 22px;
}

.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:.35s ease;
}

.faq-item.active .faq-answer{
    max-height:300px;
}

.faq-answer p {
	padding-top: 20px;
	color: #666;
	line-height: 1.9;
}

.faq-item.active .faq-answer {
	max-height: 200px;
}

/* =========================
ANIMATIONS
========================= */
@keyframes gradientMove {
	0% {background-position: 0% 50%;}
	50% {background-position: 100% 50%;}
	100% {background-position: 0% 50%;}
}

@keyframes floatCard {
	0% {transform: translateY(0px);}
	50% {transform: translateY(-12px);}
	100% {transform: translateY(0px);}
}

@keyframes floatIcon {
	0% {transform: translateY(0px);}
	50% {transform: translateY(-10px);}
	100% {transform: translateY(0px);}
}

.reveal {
	opacity: 0;
	transform: translateY(60px);
	transition: 1s ease;
}

.reveal.active {
	opacity: 1;
	transform: translateY(0);
}


/* MOBILE */

@media(max-width:991px){

    .cta-card{
        flex-direction:column;
        gap:30px;
        text-align:center;
    }

    .cta-left{
        flex-direction:column;
    }

    .cta-actions{
        flex-direction:column;
        width:100%;
    }

    .cta-btn{
        width:100%;
    }
}


@media(max-width:980px) {
	.menu {
		display: none;
	}

	.hero {
		grid-template-columns: 1fr;
	}

	.hero h1 {
		font-size: 48px;
	}

	.visual {
		height: 400px;
	}

	.grid {
		grid-template-columns: 1fr;
	}

	.help,
	.cta {
		flex-direction: column;
		gap: 30px;
		text-align: center;
	}

	.cta-buttons {
		flex-direction: column;
		width: 100%;
	}

	.btn {
		justify-content: center;
	}
}