/* ===============================
RESET
=============================== */

*, *::before, *::after {
box-sizing:border-box;
margin:0;
padding:0;
}

/* ===============================
DESIGN VARIABLEN
=============================== */

:root {

--red:#C62828;
--red-light:#EF5350;
--red-pale:#FFEBEE;

--green:#2E7D32;
--green-light:#43A047;
--green-pale:#E8F5E9;

--dark:#212121;
--text:#333;
--mid:#757575;
--light:#eeeeee;
--off:#f5f5f5;

--shadow-sm:0 2px 8px rgba(0,0,0,.08);
--shadow-md:0 4px 20px rgba(0,0,0,.12);

--radius:12px;

--font:'Segoe UI', Arial, Helvetica, sans-serif;

}

/* ===============================
TOP BAR
=============================== */

.topbar{
background:#C62828;
color:#fff;
text-align:center;
font-size:14px;
padding:8px 10px;
font-weight:600;
}

/* ===============================
HEADER
=============================== */

.site-header{
background:#fff;
border-bottom:1px solid #e6e6e6;
position:sticky;
top:0;
z-index:999;
}

.site-header .container{
display:flex;
align-items:center;
justify-content:space-between;
padding:16px 20px;
}

/* ===============================
LOGO
=============================== */

.site-logo{
display:flex;
align-items:center;
gap:8px;
font-weight:700;
font-size:20px;
color:#212121;
text-decoration:none;
}

.site-logo .red{
color:#C62828;
}

.flag{
font-size:22px;
line-height:1;
display:inline-block;
}


/* ===============================
NAV
=============================== */

.main-nav{
display:flex;
align-items:center;
gap:22px;
font-size:15px;
}

.main-nav a{
color:#333;
font-weight:500;
}

.main-nav a:hover{
color:#C62828;
text-decoration:none;
}

/* ===============================
BUTTON
=============================== */

.btn{
display:inline-block;
border-radius:40px;
font-weight:700;
text-decoration:none;
}

.btn-primary{
background:#C62828;
color:#fff;
box-shadow:0 4px 12px rgba(198,40,40,.35);
}

.btn-primary:hover{
background:#EF5350;
}

/* ===============================
MOBILE NAV SIMPLE WRAP
=============================== */

@media(max-width:900px){

.main-nav{
flex-wrap:wrap;
gap:12px;
justify-content:flex-end;
}

}

/* ===============================
BODY
=============================== */

body {
font-family:var(--font);
font-size:17px;
line-height:1.75;
color:var(--text);
background:#fff;
}

/* ===============================
CONTAINER
=============================== */

.container {
max-width:960px;
margin:auto;
padding:60px 20px;
}

/* ===============================
TYPOGRAPHY
=============================== */

h1,h2,h3 {
color:var(--dark);
line-height:1.25;
}

h1 {
font-size:clamp(1.9rem,4vw,2.6rem);
margin-bottom:22px;
}

h2 {
font-size:clamp(1.4rem,3vw,1.9rem);
margin-top:60px;
margin-bottom:14px;
}

h3 {
font-size:1.15rem;
margin-top:28px;
margin-bottom:10px;
}

p {
margin-bottom:18px;
}

/* ===============================
LINKS
=============================== */

a {
color:var(--red);
text-decoration:none;
font-weight:600;
}

a:hover {
text-decoration:underline;
}

/* ===============================
BREADCRUMB
=============================== */

.breadcrumb {
font-size:14px;
color:var(--mid);
margin-bottom:22px;
}

.breadcrumb a {
color:var(--mid);
font-weight:500;
}

/* ===============================
FAQ ACCORDION REAL
=============================== */

.faq-item{
background:#f5f5f5;
border-radius:12px;
padding:18px 22px;
margin-bottom:12px;
box-shadow:var(--shadow-sm);
}

.faq-item summary{
font-weight:600;
cursor:pointer;
list-style:none;
position:relative;
padding-right:40px;
}

.faq-item summary::-webkit-details-marker{
display:none;
}

.faq-item summary::after{
content:"+";
position:absolute;
right:0;
top:0;
background:#C62828;
color:#fff;
width:28px;
height:28px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
}

.faq-item[open] summary::after{
content:"−";
}

.faq-item p{
margin-top:12px;
}

/* ===============================
TAG LABEL
=============================== */

.tag {
display:inline-block;
background:var(--red);
color:#fff;
padding:4px 14px;
border-radius:50px;
font-size:.8rem;
font-weight:700;
letter-spacing:.06em;
text-transform:uppercase;
margin-bottom:14px;
}

/* ===============================
ACCENT LINE
=============================== */

.accent {
width:60px;
height:4px;
background:var(--red);
border-radius:2px;
margin:16px 0 28px 0;
}

/* ===============================
HERO IMAGE
=============================== */

.hero {
width:100%;
border-radius:var(--radius);
box-shadow:var(--shadow-sm);
margin:26px 0 36px 0;
}

/* ===============================
LISTEN
=============================== */

ul {
padding-left:22px;
margin-bottom:18px;
}

li {
margin-bottom:6px;
}

/* ===============================
INHALTSVERZEICHNIS
=============================== */

.toc {
background:var(--off);
padding:24px;
border-radius:var(--radius);
margin:30px 0;
}

/* ===============================
SCHNELLÜBERBLICK BOX
=============================== */

.quickbox {
background:var(--green-pale);
padding:24px;
border-left:5px solid var(--green);
border-radius:var(--radius);
margin:34px 0;
}

/* ===============================
HIGHLIGHT BOX
=============================== */

.highlight {
background:var(--red-pale);
padding:24px;
border-left:5px solid var(--red);
border-radius:var(--radius);
margin:34px 0;
}

/* ===============================
ORTE LISTE
=============================== */

.places-list li {
margin-bottom:10px;
}

/* ===============================
STANDARD BUCHBOX
=============================== */

.book-box {
display:grid;
grid-template-columns:180px 1fr;
gap:36px;
background:#fff;
border-left:6px solid var(--red);
border-radius:var(--radius);
box-shadow:var(--shadow-md);
padding:36px;
margin-top:60px;
}

.book-box img {
width:180px;
border-radius:8px;
box-shadow:var(--shadow-sm);
}

/* ===============================
GROSSE BUCHBOX (GREEN)
=============================== */

.book-box-green {
display:grid;
grid-template-columns:220px 1fr;
gap:40px;
background:#fff;
padding:42px;
border-left:6px solid var(--green);
border-radius:var(--radius);
box-shadow:var(--shadow-md);
margin-top:70px;
}

.book-box-green img {
width:220px;
border-radius:8px;
box-shadow:var(--shadow-sm);
}

/* ===============================
BUCH BUTTON
=============================== */

.book-btn {
display:inline-block;
background:var(--green);
color:#fff;
padding:14px 28px;
border-radius:40px;
font-weight:700;
margin-top:18px;
box-shadow:0 6px 18px rgba(46,125,50,.35);
}

.book-btn:hover {
background:var(--green-light);
text-decoration:none;
}

/* ===============================
FAQ STATIC BOX
=============================== */

.faq-box {
background:#f5f5f5;
border-radius:12px;
padding:18px 22px;
margin-bottom:12px;
display:flex;
justify-content:space-between;
align-items:center;
font-weight:600;
box-shadow:var(--shadow-sm);
}

.faq-icon {
width:26px;
height:26px;
border-radius:50%;
background:var(--red);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
}

/* ===============================
AUTHOR BOX
=============================== */

.author-box {
background:var(--off);
padding:34px;
border-radius:var(--radius);
margin-top:60px;
}

/* ===============================
SOURCES
=============================== */

.sources {
margin-top:40px;
font-size:15px;
color:var(--mid);
}

/* ===============================
DISCLAIMER
=============================== */

.disclaimer {
margin-top:40px;
font-size:13px;
color:#888;
}

/* ===============================
FOOTER
=============================== */

.footer {
background:#212121;
color:#ccc;
padding:70px 20px 40px 20px;
margin-top:80px;
}

.footer-grid {
max-width:960px;
margin:auto;
display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:50px;
}

.footer h4 {
color:#fff;
margin-bottom:16px;
}

.footer a {
color:#ccc;
display:block;
margin-bottom:8px;
font-size:14px;
}

.footer a:hover {
color:var(--red-light);
text-decoration:none;
}

.footer-bottom {
max-width:960px;
margin:40px auto 0 auto;
border-top:1px solid #444;
padding-top:24px;
font-size:13px;
color:#888;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
}

/* ===============================
RESPONSIVE
=============================== */

@media(max-width:768px){

.container {
padding:40px 16px;
}

.book-box,
.book-box-green {
grid-template-columns:1fr;
text-align:center;
}

.book-box img,
.book-box-green img {
margin:auto;
}

.footer-grid {
grid-template-columns:1fr;
gap:30px;
}

.footer-bottom {
flex-direction:column;
gap:10px;
}

}