/* FluffyCall Blog-Artikel: Komponenten (Vorschau 20.10.2026) */
.hero{padding-bottom:3rem !important}
.hero-image{display:block;width:100%;max-width:min(900px,calc(100vw - 2rem));height:auto;margin:2rem auto 0;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.25);background:#fff;padding:4px;position:relative;z-index:1}
article h2{scroll-margin-top:90px}
.fc-ico{width:24px;height:24px;flex:0 0 24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Kurzantwort */
.fc-quick{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:1.5rem;margin:1.5rem 0 2rem;box-shadow:0 2px 10px rgba(0,0,0,.04)}
.fc-quick-label{font-size:.75rem !important;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#0b7a35 !important;margin-bottom:.5rem !important}
.fc-quick>p{margin-bottom:1.25rem}
.fc-quick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
.fc-quick-item{background:#f3f6fa;border-radius:10px;padding:.9rem 1rem;color:#1c2b48;line-height:1.4}
.fc-quick-item strong{display:block;margin:.5rem 0 .15rem;font-size:.95rem}
.fc-quick-item span{font-size:.82rem;color:#4a5568}
/* Inhaltsverzeichnis */
.fc-layout{max-width:1060px;margin:0 auto}
.fc-toc{margin:0 auto;max-width:720px;padding:2rem 2rem 0}
.fc-toc details{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:.9rem 1.1rem}
.fc-toc summary{cursor:pointer;font-weight:700;color:#1c2b48;font-size:.9rem;list-style:none}
.fc-toc summary::-webkit-details-marker{display:none}
.fc-toc summary::after{content:'+';float:right;font-weight:400}
.fc-toc details[open] summary::after{content:'\2212'}
.fc-toc ol{margin:.75rem 0 0;padding-left:1.1rem}
.fc-toc li{font-size:.88rem;line-height:1.45;margin:.35rem 0}
.fc-toc a{color:#4a5568;text-decoration:none}
.fc-toc a:hover{color:#1c2b48;text-decoration:underline}
@media(min-width:1100px){
 .fc-layout{display:grid;grid-template-columns:220px minmax(0,720px);gap:3rem;justify-content:center;padding:0 2rem}
 .fc-layout article{margin:0;padding-left:0;padding-right:0}
 .fc-toc{padding:3rem 0 0;max-width:none}
 .fc-toc details{position:sticky;top:96px;border:none;background:none;padding:0}
 .fc-toc summary{pointer-events:none;text-transform:uppercase;letter-spacing:.06em;font-size:.75rem;color:#718096}
 .fc-toc summary::after{content:''}
 .fc-toc ol{list-style:none;padding:0;border-left:2px solid #e2e8f0}
 .fc-toc li{margin:0}
 .fc-toc a{display:block;padding:.35rem 0 .35rem .9rem;margin-left:-2px;border-left:2px solid transparent}
 .fc-toc a:hover{border-left-color:#1c2b48;text-decoration:none}
 .fc-toc details{max-height:calc(100vh - 120px);overflow:auto}
}
/* Die 3 Wege im Ueberblick */
.fc-ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem;margin:1.5rem 0 2rem}
.fc-way{display:flex;flex-direction:column;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:1.1rem;color:#1c2b48;text-decoration:none !important;line-height:1.4;transition:border-color .2s}
.fc-way:hover{border-color:#1c2b48}
.fc-way.is-best{border:2px solid #0b7a35}
.fc-way strong{margin:.6rem 0 .3rem;font-size:.98rem;color:#1c2b48}
.fc-way .fc-price{display:inline-block;align-self:flex-start;font-size:.75rem;font-weight:700;padding:.15rem .55rem;border-radius:20px;background:#f3f6fa;color:#1c2b48;margin-bottom:.5rem}
.fc-way.is-best .fc-price{background:#e8f5ec;color:#096a2e}
.fc-way span.fc-desc{font-size:.85rem;color:#4a5568;flex:1}
.fc-way .fc-more{margin-top:.75rem;font-size:.82rem;font-weight:600;color:#1c2b48}
.method-card h3 .fc-ico{color:#1c2b48}
.method-card{scroll-margin-top:90px}
/* Schritte als Zeitstrahl */
.fc-steps{list-style:none;margin:1.5rem 0 2rem;padding:0;position:relative}
.fc-steps::before{content:'';position:absolute;left:17px;top:18px;bottom:18px;width:2px;background:#e2e8f0}
.fc-steps li{display:flex;gap:1.1rem;position:relative;padding-bottom:1.5rem}
.fc-steps li:last-child{padding-bottom:0}
.fc-step-num{flex:0 0 36px;height:36px;border-radius:50%;background:#1c2b48;color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;box-shadow:0 0 0 4px #f5f7fa}
.fc-steps h3{margin:.35rem 0 .35rem !important;font-size:1.05rem !important}
.fc-steps p{margin-bottom:0 !important}
/* FAQ zum Aufklappen */
details.faq-item{padding:0 !important}
details.faq-item summary{cursor:pointer;list-style:none;padding:1.1rem 3rem 1.1rem 1.5rem;font-weight:700;color:#1a1a1a;position:relative;line-height:1.45}
details.faq-item summary::-webkit-details-marker{display:none}
details.faq-item summary::after{content:'+';position:absolute;right:1.5rem;top:1rem;font-size:1.3rem;font-weight:400;color:#1c2b48}
details.faq-item[open] summary::after{content:'\2212'}
details.faq-item p{padding:0 1.5rem 1.25rem}
@media(max-width:768px){.fc-quick-grid,.fc-ways{grid-template-columns:1fr}.fc-quick-item{display:flex;gap:.75rem;align-items:flex-start}.fc-quick-item strong{margin-top:0}.fc-toc{padding:1.5rem 1.25rem 0}.hero-image{margin-top:1.5rem}}
@media(min-width:1100px){.fc-toc details[open] summary::after{content:''}}
.hero-image{max-width:min(760px,calc(100vw - 2rem)) !important}
/* breite Tabellen scrollen in sich, nicht die ganze Seite */
.fc-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.5rem 0;border-radius:12px}
.fc-table-scroll .price-table{margin:0;min-width:520px}
/* 25.10.2026 Handy: Tabellen passen ohne Wischen (vorher Sonderregel nur auf 2 Seiten) */
@media(max-width:560px){.fc-table-scroll table{min-width:0!important;font-size:.8rem}.fc-table-scroll th,.fc-table-scroll td{padding:.55rem .4rem}.fc-table-scroll th{font-size:.68rem;letter-spacing:0;text-transform:none}}
@media(max-width:400px){.fc-table-scroll table{font-size:.74rem}.fc-table-scroll th,.fc-table-scroll td{padding:.5rem .3rem}.fc-table-scroll th{font-size:.64rem}}
@media(max-width:370px){.fc-table-scroll table{font-size:.7rem}.fc-table-scroll th,.fc-table-scroll td{padding:.45rem .22rem}.fc-table-scroll th{font-size:.6rem}}
/* sehr schmale Handys: Kopfknoepfe kompakter, kein Umbruch */
@media(max-width:380px){.header .logo-text{font-size:1.25rem}.header .nav-buttons{gap:.5rem}.header .btn{padding:.5rem .75rem;font-size:.85rem;white-space:nowrap}}