/* Datei: frontend.css */

/* Grundlayout Guide */
.gbp-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:60px;align-items:start;margin-top:40px;}
.gbp-layout-full{grid-template-columns:1fr;}
.gbp-sidebar{position:sticky;top:20px;align-self:start;height:max-content;}
.gbp-section-align-left{text-align:left;}
.gbp-section-align-center{text-align:center;}

/* Inhaltsverzeichnis */
.gbp-toc-wrapper{position:relative;}
.gbp-toc{width:100%;background:#fff;}
.gbp-toc-title{text-transform:uppercase;font-size:18px;font-weight:700;margin-bottom:15px;}
.gbp-toc-list{list-style:none;margin:0;padding:0;}
.gbp-toc-list li{margin:0;padding:0;}
.gbp-toc-list a{display:block;border-left:4px solid #ccc;padding:15px 0 15px 20px;font-family:'Nunito',sans-serif;font-size:16px;color:#808080;text-decoration:none;transition:all .2s ease;}
.gbp-toc-list a:hover{background:#f5f7ff;color:#4d858d;}
.gbp-toc-list a.active,.gbp-toc-list a.active:hover{border-left-color:#4d858d;color:#4d858d;font-weight:700;}

/* Guide Inhalt */
.gbp-guide{width:100%;}
.gbp-content{min-width:0;padding:60px 0 55px;}
.gbp-guide-section{scroll-margin-top:120px;margin-top:80px;}
.gbp-guide-section h2{font-size:26px;margin-bottom:20px;}

/* Guide Header */
.gbp-guide-header,.gbp-category-page-header{position:relative;overflow:hidden;padding:105px 0 65px;background:#243746;color:#fff;}
.gbp-guide-header:before,.gbp-category-page-header:before{content:"";position:absolute;width:650px;height:650px;left:50%;top:50%;transform:translate(-35%,-50%);background:radial-gradient(circle,rgba(77,133,141,.22) 0%,rgba(77,133,141,.09) 32%,rgba(77,133,141,0) 68%);pointer-events:none;}
.gbp-guide-header:after,.gbp-category-page-header:after{content:"";position:absolute;width:300px;height:300px;left:38%;top:25%;background:radial-gradient(circle,rgba(255,255,255,.055),rgba(255,255,255,0) 70%);pointer-events:none;}
.gbp-guide-header .container,.gbp-category-page-header .container{position:relative;z-index:1;}
.gbp-category-kicker{display:inline-flex;align-items:center;gap:7px;margin-bottom:18px;padding:6px 13px;border:1px solid rgba(137,201,207,.45);border-radius:30px;color:#a9d9dd;background:rgba(255,255,255,.035);font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;white-space:nowrap;}
.gbp-category-kicker-subtitle{display:inline!important;color:#fff;white-space:nowrap;}
.gbp-guide-header h1,.gbp-category-page-header h1{position:relative;margin:0 0 18px;color:#fff;font-size:44px;line-height:1.15;font-weight:800;}
.gbp-guide-header h1:after,.gbp-category-page-header h1:after{content:"";display:block;width:32px;height:1px;margin-top:17px;background:#78b8bf;}
.gbp-guide-header p,.gbp-category-page-header p{max-width:700px;margin:0;color:#d5dfe3;font-size:18px;line-height:1.7;}
.gbp-updated {display:flex;align-items:center;gap:8px;margin-top:28px;color:#9fb0b7;font-size:13px;line-height:1.5;}
.gbp-updated:before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #78b8bf; box-shadow: 0 0 0 4px rgba(120, 184, 191, .1); }

/* FAQ */
.gbp-faq{margin-top:80px;padding:20px 0 30px;}
.gbp-faq-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:70px;align-items:start;}
.gbp-faq-sidebar{ position:sticky; top:30px; margin-bottom:50px; }
.gbp-faq-sidebar-kicker{display:block;margin-bottom:12px;color:#4d858d;font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;}
.gbp-faq-sidebar h2{margin:0 0 15px;color:#243746;font-size:28px;line-height:1.2;font-weight:800;}
.gbp-faq-sidebar p{margin:0;color:#71808a;line-height:1.7;}

.gbp-faq-contact-box{margin-top:30px;padding:25px 24px;border:1px solid #d9e8ea;border-radius:18px;background:linear-gradient(145deg,#f4f9fa,#fff);box-shadow:0 12px 30px rgba(36,55,70,.07);}
.gbp-faq-contact-kicker{display:block;margin-bottom:9px;color:#4d858d;font-size:12px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;}
.gbp-faq-contact-box h3{margin:0 0 12px;color:#243746;font-size:20px;line-height:1.3;font-weight:800;}
.gbp-faq-contact-box p{margin:0 0 20px;color:#66727c; line-height:1.5;}
.gbp-faq-contact-button{display:inline-flex;align-items:center;gap:12px;padding:10px 25px; margin-bottom:10px; border-radius:25px; background:#f98d29;color:#fff;font-size:16px;font-weight:700;text-decoration:none;transition:all .25s ease;}
.gbp-faq-contact-button:hover{background:#e77b18;color:#fff;transform:translateY(-2px);}
.gbp-faq-contact-button span{font-size:18px;line-height:1;transition:transform .25s ease;}
.gbp-faq-contact-button:hover span{transform:translateX(4px);}
.gbp-faq-contact-meta{margin-top:13px;color:#89969d;font-size:12px;line-height:1.5;text-align:center;}

.gbp-faq-list{border-top:1px solid #dfe6e8;}
.gbp-faq-item{border-bottom:1px solid #dfe6e8;transition:background .3s ease,border-color .3s ease;}

.gbp-faq-question{position:relative;display:block;cursor:pointer;padding:22px 55px 22px 20px;color:#243746;font-size:17px;font-weight:700;line-height:1.5;list-style:none;transition:color .3s ease,background .3s ease;}
.gbp-faq-question::-webkit-details-marker{display:none;}

.gbp-faq-question:before{content:"";position:absolute;right:6px;top:50%;width:30px;height:30px;border:1px solid #b9dce2;border-radius:50%;transform:translateY(-50%);transition:all .25s ease;}
.gbp-faq-question:after{content:"↓";position:absolute;right:6px;top:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;color:#4d858d;font-size:16px;font-weight:400;line-height:1;transform:translateY(-50%);transition:transform .3s ease,color .25s ease;}

.gbp-faq-item[open]{background:#f4f9fa;border-color:#c9e0e3;}
.gbp-faq-item[open] .gbp-faq-question{color:#4d858d;}
.gbp-faq-item[open] .gbp-faq-question:before{background:#4d858d;border-color:#4d858d;}
.gbp-faq-item[open] .gbp-faq-question:after{color:#fff;transform:translateY(-50%) rotate(180deg);}

.gbp-faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease;overflow:hidden;padding:0 55px 0 20px;color:#66727c;line-height:1.7;}
.gbp-faq-answer>*{overflow:hidden;}
.gbp-faq-item[open] .gbp-faq-answer{grid-template-rows:1fr;padding-bottom:22px;}

/* Kategorie Übersicht */
.gbp-category-page{width:100%;background:#fff;}
.gbp-category-overview{padding:70px 0 100px;}
.gbp-guide-list{padding:50px 0 45px;}

/* Kategorie Boxen */
.gbp-category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;}
.gbp-category-card{position:relative;min-width:0;border:1px solid #e3eaed;border-radius:22px;background:#fff;box-shadow:0 12px 35px rgba(36,55,70,.08);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.gbp-category-card:hover{transform:translateY(-6px);border-color:#cbdde1;box-shadow:0 20px 45px rgba(36,55,70,.14);}
.gbp-category-card-link{display:flex;height:100%;flex-direction:column;color:inherit;text-decoration:none;}
.gbp-category-card-top{position:relative;padding:22px 22px 0;}
.gbp-category-badge{position:absolute;top:22px;left:22px;z-index:2;display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border:1px solid #b9dce2;border-radius:30px;background:rgba(247,251,252,.95);color:#4d858d;font-size:11px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;}
.gbp-category-badge span{display:flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:#4d858d;color:#fff;font-size:10px;}
.gbp-category-image{height:220px;border-radius:16px;background:#eef4f5;overflow:hidden;}
.gbp-category-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.gbp-category-card:hover .gbp-category-image img{transform:scale(1.04);}
.gbp-category-image-empty{background:linear-gradient(135deg,#e9f2f3,#d5e6e8);}
.gbp-category-card-body{display:flex;flex:1;flex-direction:column;padding:27px 30px 30px;}
.gbp-category-card h2{margin:0 0 12px;color:#243746;font-size:25px;line-height:1.25;font-weight:800;}
.gbp-category-card h2 a{color:inherit;text-decoration:none;}
.gbp-category-description{min-height:55px;color:#6b7880;font-size:15px;line-height:1.65;}
.gbp-category-description p{margin:0;}
.gbp-category-button{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:25px;padding:13px 20px;border-radius:30px;background:#4d858d;color:#fff;font-size:14px;font-weight:700;text-decoration:none;box-shadow:0 8px 18px rgba(77,133,141,.2);transition:background .25s ease,transform .25s ease;}
.gbp-category-button span{font-size:20px;line-height:14px;transition:transform .25s ease;}
.gbp-category-card:hover .gbp-category-button{background:#3f7279;}
.gbp-category-card:hover .gbp-category-button span{transform:translateX(4px);}

/* Alte/vereinfachte Kategorie Struktur */
.gbp-category-card>.gbp-category-image{margin:22px 22px 0;}
.gbp-category-card>h2{padding:0 30px;margin-top:27px;}
.gbp-category-card>p{padding:0 30px;color:#6b7880;font-size:15px;line-height:1.65;}
.gbp-category-card>.gbp-category-link{display:inline-flex;align-items:center;gap:8px;margin:25px 30px 30px;color:#4d858d;font-weight:700;text-decoration:none;}
.gbp-category-card>.gbp-category-link:after{content:"→";font-size:18px;transition:transform .2s ease;}
.gbp-category-card:hover>.gbp-category-link:after{transform:translateX(4px);}

/* Guides innerhalb einer Kategorie */
.gbp-guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:1200px;margin:60px auto 0;}
.gbp-guide-card{display:flex;flex-direction:column;padding:28px 30px;background:#fff;border:1px solid #e3eaed;border-radius:20px;box-shadow:0 8px 25px rgba(36,55,70,.06);transition:transform .2s ease,box-shadow .2s ease;}
.gbp-guide-card:hover{transform:translateY(-4px);box-shadow:0 15px 35px rgba(36,55,70,.1);}
.gbp-guide-card h2{margin:0 0 12px;color:#243746;font-size:22px;line-height:1.35;}
.gbp-guide-card h2 a{color:#243746;text-decoration:none;}
.gbp-guide-excerpt{color:#66727c;line-height:1.7;}
.gbp-guide-link{margin-top:20px;color:#4d858d;font-weight:700;text-decoration:none;}
.gbp-guide-link:after{content:" →";}

/* Breadcrumbs */
.gbp-breadcrumbs{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:50px;color:#9fb0b7;font-size:13px;line-height:1.5;}
.gbp-breadcrumbs a{color:#d2dde1;text-decoration:none;transition:color .2s ease;}
.gbp-breadcrumbs a:hover{color:#9ed1d5;}
.gbp-breadcrumbs span{color:#91a3aa;}
.gbp-guide-header .gbp-category-kicker{margin-bottom:18px;}

/* Mobil */
@media(max-width:1100px){
	.gbp-category-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media(max-width:1024px){
	.gbp-layout{grid-template-columns:1fr;gap:30px;}
	.gbp-sidebar{position:relative;top:auto;}
	.gbp-faq-layout{grid-template-columns:220px minmax(0,1fr);gap:45px;}
}

@media(max-width:767px){
	.gbp-guide-header,.gbp-category-page-header{padding:55px 0 45px;}
	.gbp-guide-header:before,.gbp-category-page-header:before{width:450px;height:450px;left:50%;top:45%;transform:translate(-50%,-50%);}
	.gbp-guide-header h1,.gbp-category-page-header h1{font-size:34px;}
	.gbp-guide-header p,.gbp-category-page-header p{font-size:16px;}
	.gbp-category-overview{padding:45px 0 70px;}
	.gbp-category-grid,.gbp-guide-grid{grid-template-columns:1fr;gap:22px;}
	.gbp-category-image{height:200px;}
	.gbp-category-card-body{padding:24px;}
	.gbp-breadcrumbs{margin-bottom:35px;}
	.gbp-faq{margin-top:55px;}
	.gbp-faq-layout{grid-template-columns:1fr;gap:30px;}
	.gbp-faq-sidebar{position:relative;top:auto;}
	.gbp-faq-sidebar h2{font-size:25px;}
	.gbp-faq-question{padding:18px 50px 18px 15px;font-size:16px;}
	.gbp-faq-item[open] .gbp-faq-question:before,.gbp-faq-item[open] .gbp-faq-question:after{right:21px;}
	.gbp-faq-answer{padding-right:45px;padding-left:15px;}
	.gbp-faq-contact-box{margin-top:25px;padding:22px 20px;}
}