/**
 * Datei: faq.css
 * Pfad: /wp-content/plugins/dokusecur-calculator/assets/css/faq.css
 * Zweck: Gestaltet den FAQ-Shortcode im modernen DokuSecur-Layout.
 * Zweck: Hält Hero, Suche, Kategorien, Accordion und CTA optisch getrennt.
 * Zweck: Nutzt CSS-Variablen aus den FAQ-Design-Einstellungen im Adminbereich.
 * Zweck: Überschreibt störende Theme-Hover-Regeln nur innerhalb des FAQ-Moduls.
 * Zweck: Setzt volle Hintergrundbreite, während der Inhalt in fester Contentbreite bleibt.
 * Zweck: Bleibt als wiederverwendbares FAQ-Modul weitgehend unabhängig vom Theme.
 */

.dsc-faq{
	--dsc-faq-primary:#242A56;
	--dsc-faq-secondary:#FFBF00;
	--dsc-faq-text:#242A56;
	--dsc-faq-muted:#5f6880;
	--dsc-faq-bg:#f6f8fb;
	--dsc-faq-card:#ffffff;
	--dsc-faq-border:#dfe5ee;
	--dsc-faq-hero-bg:#242A56;
	--dsc-faq-cta-bg:#fffaf0;
	--dsc-faq-font:inherit;
	--dsc-faq-container:1320px;
	--dsc-faq-hero-pt:58px;
	--dsc-faq-hero-pb:44px;
	--dsc-faq-sidebar:310px;
	--dsc-faq-radius:14px;
	--dsc-faq-question-size:16px;
	--dsc-faq-answer-size:15px;
	--dsc-faq-gap:42px;

	width:100vw;
	max-width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
	background:var(--dsc-faq-bg);
	color:var(--dsc-faq-text);
	font-family:var(--dsc-faq-font);
}

.dsc-faq *,
.dsc-faq *::before,
.dsc-faq *::after{
	box-sizing:border-box;
}

.dsc-faq [hidden]{
	display:none !important;
}

.dsc-faq a,
.dsc-faq button{
	transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease;
}

.dsc-faq-hero{
	width:100%;
	background:var(--dsc-faq-hero-bg);
	border-bottom:1px solid rgba(255,255,255,.08);
	overflow:hidden;
}

.dsc-faq-hero-inner{
	position:relative;
	display:grid;
	grid-template-columns:minmax(0,1fr) 280px;
	gap:40px;
	width:min(var(--dsc-faq-container),calc(100% - 48px));
	margin:0 auto;
	padding:var(--dsc-faq-hero-pt) 0 var(--dsc-faq-hero-pb);
}

.dsc-faq-hero-text{
	position:relative;
	z-index:2;
	max-width:760px;
}

.dsc-faq-hero h1{
	margin:0 0 10px;
	color:#fff;
}

.dsc-faq-hero p{
	max-width:690px;
	margin:0 0 24px;
	font-size:18px;
	line-height:1.45;
	color:#fff;
}

.dsc-faq-hero-mark{
	display:flex;
	align-items:center;
	justify-content:center;
	width:230px;
	height:230px;
	border:14px solid rgba(255,255,255,.08);
	border-radius:50%;
	color:rgba(255,255,255,.10);
	font-size:132px;
	font-weight:900;
	line-height:1;
	align-self:center;
	justify-self:end;
}

.dsc-faq-search{
	position:relative;
	display:block;
	width:min(720px,100%);
	margin:0 0 20px;
}

.dsc-faq-search::before{
	content:"⌕";
	position:absolute;
	left:18px;
	top:50%;
	transform:translateY(-50%);
	color:#7b8498;
	font-size:22px;
	line-height:1;
}

.dsc-faq-search input{
	width:100%;
	min-height:56px;
	border:1px solid var(--dsc-faq-border);
	border-radius:11px;
	background:#fff;
	padding:14px 18px 14px 52px;
	font:inherit;
	font-size:17px;
	color:var(--dsc-faq-primary);
	box-shadow:0 10px 30px rgba(25,28,59,.04);
}

.dsc-faq-search input:focus{
	outline:none;
	border-color:var(--dsc-faq-secondary);
	box-shadow:0 0 0 3px rgba(255,191,0,.28);
}

.dsc-faq-tabs{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
}

.dsc-faq-tab{
	appearance:none;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:40px;
	border:1px solid rgba(255,255,255,.38);
	border-radius:999px;
	background:#fff;
	color:var(--dsc-faq-primary);
	padding:8px 26px;
	font:inherit;
	font-size:16px;
	font-weight:800;
	cursor:pointer;
}

.dsc-faq-tab:not(.is-active):hover,
.dsc-faq-tab:not(.is-active):focus{
	background:#f1f4f8;
	border-color:#cbd5e1;
	color:var(--dsc-faq-primary);
	outline:none;
}

.dsc-faq-tab.is-active,
.dsc-faq-hero .dsc-faq-tab.is-active{
	background:var(--dsc-faq-secondary);
	border-color:var(--dsc-faq-secondary);
	color:var(--dsc-faq-primary);
}

.dsc-faq-tab.is-active:hover,
.dsc-faq-tab.is-active:focus,
.dsc-faq-hero .dsc-faq-tab.is-active:hover,
.dsc-faq-hero .dsc-faq-tab.is-active:focus{
	background:#e6ac00;
	border-color:#e6ac00;
	color:var(--dsc-faq-primary);
	outline:none;
}

.dsc-faq-main{
	display:grid;
	grid-template-columns:var(--dsc-faq-sidebar) minmax(0,1fr);
	gap:var(--dsc-faq-gap);
	width:min(var(--dsc-faq-container),calc(100% - 48px));
	margin:0 auto;
	padding:28px 0 52px;
	background:transparent;
}

.dsc-faq-sidebar{
	position:relative;
}

.dsc-faq-sidebar-card{
	position:sticky;
	top:92px;
	overflow:hidden;
	border:1px solid var(--dsc-faq-border);
	border-radius:var(--dsc-faq-radius);
	background:var(--dsc-faq-card);
	box-shadow:0 12px 34px rgba(25,28,59,.04);
}

.dsc-faq-main--no-sticky .dsc-faq-sidebar-card{
	position:static;
}

.dsc-faq-sidebar-card h2{
	margin:0;
	padding:20px 18px 14px;
	color:var(--dsc-faq-primary);
}

.dsc-faq-category-list{
	display:grid;
}

.dsc-faq-category{
	appearance:none;
	position:relative;
	display:flex;
	align-items:center;
	gap:13px;
	width:100%;
	min-height:56px;
	border:0;
	border-top:1px solid #edf1f6;
	background:#fff;
	color:var(--dsc-faq-primary);
	padding:12px 18px;
	font:inherit;
	font-size:15px;
	font-weight:800;
	text-align:left;
	cursor:pointer;
}

.dsc-faq-category::before{
	content:"";
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	width:3px;
	background:transparent;
}

.dsc-faq-category:hover,
.dsc-faq-category:focus,
.dsc-faq-category.is-active{
	background:#fbfcff;
	color:var(--dsc-faq-primary);
	outline:none;
}

.dsc-faq-category.is-active::before{
	background:var(--dsc-faq-secondary);
}

.dsc-faq-category-icon{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:24px;
	height:24px;
	border:1px solid #cbd5e1;
	border-radius:7px;
	color:var(--dsc-faq-primary);
	font-size:14px;
	flex:0 0 auto;
}

.dsc-faq-tip{
	display:grid;
	grid-template-columns:42px minmax(0,1fr);
	gap:12px;
	margin:18px;
	padding:15px;
	border:1px solid #f3d37b;
	border-radius:12px;
	background:#fffaf0;
	color:var(--dsc-faq-primary);
}

.dsc-faq-tip > span{
	display:flex;
	align-items:center;
	justify-content:center;
	width:36px;
	height:36px;
	border:2px solid var(--dsc-faq-secondary);
	border-radius:50%;
	color:#d19a00;
	font-weight:900;
}

.dsc-faq-tip p{
	margin:0;
	font-size:14px;
	line-height:1.4;
	color:#30384d;
}

.dsc-faq-content{
	min-width:0;
}

.dsc-faq-panel{
	margin:0 0 18px;
}

.dsc-faq-panel h2{
	margin:0 0 10px;
	color:var(--dsc-faq-primary);
}

.dsc-faq-accordion{
	display:grid;
	gap:0;
	border:1px solid var(--dsc-faq-border);
	border-radius:12px;
	background:#fff;
	overflow:hidden;
	box-shadow:0 10px 28px rgba(25,28,59,.035);
}

.dsc-faq-item + .dsc-faq-item{
	border-top:1px solid #edf1f6;
}

.dsc-faq-question{
	appearance:none;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:18px;
	width:100%;
	min-height:48px;
	border:0;
	background:#fff;
	color:var(--dsc-faq-primary);
	padding:13px 18px;
	font:inherit;
	font-size:var(--dsc-faq-question-size);
	font-weight:900;
	text-align:left;
	cursor:pointer;
}

.dsc-faq-question:hover,
.dsc-faq-question:focus{
	background:#fbfcff;
	color:var(--dsc-faq-primary);
	outline:none;
}

.dsc-faq-chevron{
	position:relative;
	display:inline-flex;
	width:16px;
	height:16px;
	flex:0 0 auto;
}

.dsc-faq-chevron::before{
	content:"";
	position:absolute;
	left:4px;
	top:5px;
	width:8px;
	height:8px;
	border-right:2px solid var(--dsc-faq-primary);
	border-bottom:2px solid var(--dsc-faq-primary);
	transform:rotate(45deg);
	transition:transform .15s ease;
}

.dsc-faq-question[aria-expanded="true"] .dsc-faq-chevron::before{
	top:7px;
	transform:rotate(225deg);
}

.dsc-faq-answer{
	padding:0 18px 16px;
	color:#344055;
	font-size:var(--dsc-faq-answer-size);
	line-height:1.5;
}

.dsc-faq-answer p{
	margin:0 0 8px;
}

.dsc-faq-answer p:last-child{
	margin-bottom:0;
}

.dsc-faq-no-results{
	border:1px solid var(--dsc-faq-border);
	border-radius:12px;
	background:#fff;
	padding:18px;
	color:var(--dsc-faq-muted);
	font-size:15px;
}

.dsc-faq-cta{
	display:grid;
	grid-template-columns:auto minmax(0,1fr) auto;
	gap:18px;
	align-items:center;
	margin-top:24px;
	padding:22px;
	border:1px solid #f1d692;
	border-radius:var(--dsc-faq-radius);
	background:linear-gradient(135deg,var(--dsc-faq-cta-bg) 0%,#fff 100%);
	box-shadow:0 10px 28px rgba(25,28,59,.035);
}

.dsc-faq-cta-icon{
	display:flex;
	align-items:center;
	justify-content:center;
	width:58px;
	height:58px;
	border-radius:50%;
	background:#fff2c6;
	color:var(--dsc-faq-primary);
	font-size:26px;
	font-weight:900;
}

.dsc-faq-cta h2{
	margin:0 0 4px;
	color:var(--dsc-faq-primary);
}

.dsc-faq-cta p{
	margin:0;
	color:#4d5870;
	font-size:16px;
	line-height:1.4;
}

.dsc-faq-cta-actions{
	display:flex;
	flex-wrap:wrap;
	gap:12px;
	justify-content:flex-end;
}

.dsc-faq-button{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:48px;
	border-radius:9px;
	padding:12px 24px;
	font-size:15px;
	font-weight:900;
	text-decoration:none;
	white-space:nowrap;
}

.dsc-faq-button--light{
	border:1px solid var(--dsc-faq-border);
	background:#fff;
	color:var(--dsc-faq-primary);
}

.dsc-faq-button--light:hover,
.dsc-faq-button--light:focus{
	background:#f1f4f8;
	border-color:#cbd5e1;
	color:var(--dsc-faq-primary);
	outline:none;
}

.dsc-faq-button--dark{
	border:1px solid var(--dsc-faq-primary);
	background:var(--dsc-faq-primary);
	color:#fff;
}

.dsc-faq-button--dark:hover,
.dsc-faq-button--dark:focus{
	background:var(--dsc-faq-secondary);
	border-color:var(--dsc-faq-secondary);
	color:var(--dsc-faq-primary);
	outline:none;
}

.dsc-faq .dsc-faq-tab:hover span,
.dsc-faq .dsc-faq-tab:focus span,
.dsc-faq .dsc-faq-button:hover span,
.dsc-faq .dsc-faq-button:focus span,
.dsc-faq .dsc-faq-category:hover span,
.dsc-faq .dsc-faq-category:focus span,
.dsc-faq .dsc-faq-question:hover span,
.dsc-faq .dsc-faq-question:focus span{
	color:inherit;
}

@media (max-width:980px){
	.dsc-faq-hero-inner{
		grid-template-columns:1fr;
	}

	.dsc-faq-hero-mark{
		display:none;
	}

	.dsc-faq-main{
		grid-template-columns:1fr;
	}

	.dsc-faq-sidebar-card{
		position:static;
	}

	.dsc-faq-category-list{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}

	.dsc-faq-cta{
		grid-template-columns:1fr;
	}

	.dsc-faq-cta-actions{
		justify-content:flex-start;
	}
}

@media (max-width:640px){
	.dsc-faq-hero-inner,
	.dsc-faq-main{
		width:calc(100% - 28px);
	}

	.dsc-faq-hero-inner{
		padding:38px 0 32px;
	}

	.dsc-faq-hero p{
		font-size:16px;
	}

	.dsc-faq-search input{
		min-height:50px;
		font-size:16px;
	}

	.dsc-faq-tabs{
		display:grid;
		grid-template-columns:1fr;
	}

	.dsc-faq-category-list{
		grid-template-columns:1fr;
	}

	.dsc-faq-question{
		font-size:15px;
		padding:13px 14px;
	}

	.dsc-faq-answer{
		padding:0 14px 15px;
		font-size:14px;
	}

	.dsc-faq-button{
		width:100%;
	}
}