/* =========================================================
   CoreBlog – öffentliche Website
   ========================================================= */
.wrap { width: min(1200px, 100% - 32px); margin-inline: auto; }

/* ---------- Demo-Leiste ---------- */
.demo-bar { background: var(--ink); color: #DCE3F0; font-size: .86rem; }
.demo-bar .wrap { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; justify-content: center; padding: .5rem 0; }
.demo-bar a { color: #fff; font-weight: 600; text-decoration: none; }
.demo-bar a.is-cta { background: var(--marker); color: var(--ink); padding: .18rem .6rem; border-radius: 6px; }
.demo-bar a:hover { text-decoration: underline; }

/* ---------- Kopfbereich ---------- */
.site-header { position: sticky; top: 0; z-index: 1030; background: rgba(255,255,255,.94); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: 1.5rem; height: 68px; }
.site-nav { display: flex; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.site-nav a { display: block; padding: .45rem .75rem; border-radius: 8px; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .96rem; }
.site-nav a:hover { background: var(--mist); color: var(--ink); }
.site-nav a.is-active { color: var(--ink); background: linear-gradient(transparent 62%, var(--marker) 62%, var(--marker) 88%, transparent 88%); border-radius: 0; }
.header-search { margin-left: auto; position: relative; }
.header-search input { width: 220px; padding: .45rem .8rem .45rem 2.1rem; border-radius: 999px; background: var(--mist); border: 1px solid transparent; font-size: .92rem; }
.header-search input:focus { background: #fff; border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(47,91,234,.15); width: 260px; }
.header-search i { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: .85rem; }
.header-actions { display: flex; gap: .5rem; align-items: center; }
.nav-toggle { display: none; margin-left: auto; }

.user-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .25rem .7rem .25rem .25rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-weight: 600; font-size: .9rem; text-decoration: none; }
.user-pill:hover { border-color: #C9D2DF; color: var(--ink); }
.dropdown-menu { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: .4rem; font-size: .93rem; }
.dropdown-item { border-radius: 6px; padding: .45rem .7rem; color: var(--ink); }
.dropdown-item i { width: 1.2rem; color: var(--muted); }
.dropdown-item:active { background: var(--mist); color: var(--ink); }

@media (max-width: 991.98px) {
    .site-header .wrap { flex-wrap: wrap; height: auto; padding: .7rem 0; gap: .75rem; }
    .nav-toggle { display: inline-flex; }
    .site-menu { display: none; width: 100%; flex-direction: column; gap: .75rem; padding-bottom: .5rem; }
    .site-menu.is-open { display: flex; }
    .site-nav { flex-direction: column; }
    .header-search { margin-left: 0; }
    .header-search input, .header-search input:focus { width: 100%; }
}
@media (min-width: 992px) { .site-menu { display: flex; align-items: center; gap: 1.5rem; flex: 1; } }

/* ---------- Titelgeschichte ---------- */
.front { padding: 2.5rem 0 2rem; }
.front-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.5rem; align-items: start; }
.lead-story { text-decoration: none; color: var(--ink); display: block; }
.lead-story .media { position: relative; border-radius: var(--radius-l); overflow: hidden; aspect-ratio: 16 / 10; background: var(--mist); }
.lead-story .media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.lead-story:hover .media img { transform: scale(1.025); }
.lead-story .body { margin-top: -4.5rem; position: relative; padding: 0 1.5rem; }
.lead-story h1 { font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.035em; margin: 0 0 .9rem; }
.lead-story h1 span { background: #fff; box-shadow: 0 0 0 .18em #fff; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lead-story:hover h1 span { background: linear-gradient(transparent 55%, var(--marker) 55%, var(--marker) 90%, #fff 90%); }
.lead-story p { font-family: var(--font-read); font-size: 1.1rem; color: var(--ink-2); max-width: 60ch; margin-bottom: 1rem; }

.byline { display: flex; align-items: center; gap: .6rem; font-size: .9rem; color: var(--muted); flex-wrap: wrap; }
.byline strong { color: var(--ink); font-weight: 600; }
.byline .sep { width: 4px; height: 4px; border-radius: 50%; background: #B5C0D2; }

.side-stories { display: flex; flex-direction: column; }
.side-stories h2 { font-size: 1rem; color: var(--muted); font-weight: 600; margin: .2rem 0 .8rem; letter-spacing: 0; }
.side-story { display: grid; grid-template-columns: 112px 1fr; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.side-story:first-of-type { border-top: 0; padding-top: 0; }
.side-story img { width: 112px; height: 84px; object-fit: cover; border-radius: var(--radius); }
.side-story h3 { font-size: 1.08rem; line-height: 1.25; margin: .3rem 0 .35rem; }
.side-story:hover h3 { text-decoration: underline; text-decoration-color: var(--marker); text-decoration-thickness: 4px; text-underline-offset: 2px; }
.side-story .meta { font-size: .82rem; color: var(--muted); }

@media (max-width: 991.98px) { .front-grid { grid-template-columns: 1fr; gap: 2rem; } .lead-story .body { margin-top: -3rem; padding: 0 1rem; } }

/* ---------- Kategorien-Leiste ---------- */
.topic-strip { border-block: 1px solid var(--line); background: #fff; }
.topic-strip .wrap { display: flex; gap: .5rem; align-items: center; overflow-x: auto; padding: .9rem 0; scrollbar-width: thin; }
.topic-strip .label { font-weight: 600; color: var(--muted); font-size: .9rem; margin-right: .3rem; white-space: nowrap; }
.chip .count { color: var(--muted); font-weight: 500; }
.chip.is-active .count { color: #C9D2E3; }

/* ---------- Hauptbereich ---------- */
.main-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 3rem; padding: 2.5rem 0 4rem; }
@media (max-width: 991.98px) { .main-grid { grid-template-columns: 1fr; gap: 2.5rem; } }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.section-head h2 { font-size: 1.6rem; margin: 0; }
.section-head p { margin: 0; color: var(--muted); font-size: .92rem; }

.post-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 2rem; }
@media (max-width: 640px) { .post-grid { grid-template-columns: 1fr; } }
.post-card { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.post-card .media { aspect-ratio: 3 / 2; border-radius: var(--radius); overflow: hidden; background: var(--mist); margin-bottom: .9rem; }
.post-card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.post-card:hover .media img { transform: scale(1.03); }
.post-card h3 { font-size: 1.28rem; line-height: 1.22; margin: .55rem 0 .45rem; }
.post-card:hover h3 { text-decoration: underline; text-decoration-color: var(--marker); text-decoration-thickness: 5px; text-underline-offset: 1px; text-decoration-skip-ink: none; }
.post-card p { font-family: var(--font-read); color: var(--ink-2); font-size: .98rem; margin-bottom: .75rem; }
.post-card .byline { margin-top: auto; font-size: .84rem; }

.filter-note { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: 1rem 1.2rem; background: var(--marker-soft); border-radius: var(--radius); margin-bottom: 1.75rem; }
.filter-note strong { font-weight: 700; }

/* ---------- Seitenleiste ---------- */
.side-block { margin-bottom: 2.25rem; }
.side-block > h2 { font-size: 1.1rem; margin-bottom: 1rem; padding-bottom: .6rem; border-bottom: 2px solid var(--ink); }
.popular { list-style: none; margin: 0; padding: 0; counter-reset: pop; }
.popular li { counter-increment: pop; display: grid; grid-template-columns: 2.1rem 1fr; gap: .4rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.popular li::before { content: counter(pop); font-weight: 800; font-size: 1.5rem; line-height: 1; color: #C3CCDA; }
.popular a { color: var(--ink); text-decoration: none; font-weight: 600; line-height: 1.3; }
.popular a:hover { color: var(--blue); }
.popular .meta { font-size: .8rem; color: var(--muted); margin-top: .2rem; }
.authors { display: flex; flex-direction: column; gap: .8rem; }
.author-row { display: flex; gap: .75rem; align-items: center; text-decoration: none; color: var(--ink); }
.author-row strong { display: block; font-weight: 600; line-height: 1.2; }
.author-row span { font-size: .82rem; color: var(--muted); }
.author-row:hover strong { color: var(--blue); }

.newsletter-box { background: var(--ink); color: #DCE3F0; border-radius: var(--radius-l); padding: 1.6rem; }
.newsletter-box h2 { color: #fff; font-size: 1.3rem; margin-bottom: .5rem; }
.newsletter-box p { font-size: .93rem; margin-bottom: 1rem; }
.newsletter-box .form-control { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff; }
.newsletter-box .form-control::placeholder { color: #A8B4CB; }
.newsletter-box .form-control:focus { background: rgba(255,255,255,.12); border-color: var(--marker); box-shadow: 0 0 0 3px rgba(255,216,77,.25); }
.newsletter-box .result { font-size: .88rem; margin-top: .6rem; min-height: 1.2em; color: var(--marker); }

/* ---------- Seitennavigation ---------- */
.pager { display: flex; gap: .4rem; justify-content: center; margin-top: 3rem; flex-wrap: wrap; }
.pager a, .pager span { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 .8rem; border-radius: 8px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; }
.pager a:hover { background: var(--mist); }
.pager .is-current { background: var(--ink); color: #fff; border-color: var(--ink); }
.pager .is-disabled { color: #B5C0D2; }

/* ---------- Artikel ---------- */
.article-head { padding: 3rem 0 2rem; }
.article-head .inner { max-width: 820px; }
.article-head h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.06; margin: 1rem 0 1.1rem; }
.article-head .lead { font-family: var(--font-read); font-size: 1.25rem; color: var(--ink-2); line-height: 1.55; max-width: 62ch; margin-bottom: 1.6rem; }
.article-hero { border-radius: var(--radius-l); overflow: hidden; aspect-ratio: 21 / 9; background: var(--mist); }
.article-hero img { width: 100%; height: 100%; object-fit: cover; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 4rem; padding: 3rem 0 2rem; }
@media (max-width: 991.98px) { .article-layout { grid-template-columns: 1fr; gap: 2rem; } .toc { display: none; } }

.prose { font-family: var(--font-read); font-size: 1.16rem; line-height: 1.78; color: #22304F; max-width: 68ch; }
.prose p { margin: 0 0 1.4em; }
.prose h2 { font-family: var(--font-ui); font-size: 1.55rem; margin: 2.2em 0 .7em; scroll-margin-top: 90px; }
.prose ul { padding-left: 1.2em; margin-bottom: 1.4em; }
.prose code { font-size: .86em; background: var(--mist); padding: .12em .4em; border-radius: 5px; color: var(--ink); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.prose > p:first-child::first-letter { float: left; font-family: var(--font-ui); font-weight: 800; font-size: 3.6em; line-height: .85; padding: .08em .12em 0 0; color: var(--ink); }

.toc { position: sticky; top: 96px; align-self: start; }
.toc h2 { font-size: .95rem; color: var(--muted); margin-bottom: .75rem; font-weight: 600; }
.toc ol { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--line); }
.toc a { display: block; padding: .35rem 0 .35rem 1rem; margin-left: -2px; border-left: 2px solid transparent; color: var(--ink-2); text-decoration: none; font-size: .92rem; line-height: 1.35; }
.toc a:hover { border-left-color: var(--marker); color: var(--ink); }
.toc .rating-box { margin-top: 2rem; padding: 1.1rem; background: var(--mist); border-radius: var(--radius); }
.rating-box .big { font-size: 2rem; font-weight: 800; line-height: 1; }

.author-card { display: flex; gap: 1.25rem; align-items: flex-start; padding: 1.6rem; border-radius: var(--radius-l); background: var(--mist); max-width: 68ch; margin: 1rem 0 3rem; }
.author-card h3 { font-size: 1.15rem; margin: 0 0 .35rem; }
.author-card p { font-family: var(--font-read); color: var(--ink-2); margin-bottom: .6rem; }

.preview-banner { background: var(--marker-soft); border-bottom: 1px solid #F0D98A; padding: .7rem 0; font-size: .92rem; }

/* ---------- Kommentare ---------- */
.comments { max-width: 68ch; padding-bottom: 3rem; }
.comments > h2 { font-size: 1.5rem; margin-bottom: 1.5rem; scroll-margin-top: 90px; }
.comment { display: grid; grid-template-columns: 44px 1fr; gap: 1rem; padding: 1.25rem 0; border-top: 1px solid var(--line); }
.comment .initial { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--marker); display: grid; place-items: center; font-weight: 700; }
.comment h3 { font-size: 1rem; margin: 0; }
.comment .meta { font-size: .82rem; color: var(--muted); margin: .15rem 0 .5rem; }
.comment p { margin: 0; font-family: var(--font-read); color: var(--ink-2); }
.comment-form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l); padding: 1.75rem; margin-top: 2rem; scroll-margin-top: 90px; }
.comment-form h2 { font-size: 1.35rem; margin-bottom: .3rem; }

.star-input { display: inline-flex; flex-direction: row-reverse; gap: .15rem; }
.star-input input { position: absolute; opacity: 0; pointer-events: none; }
.star-input label { font-size: 1.6rem; color: #D5DBE5; cursor: pointer; line-height: 1; padding: 0 .05rem; }
.star-input input:checked ~ label, .star-input label:hover, .star-input label:hover ~ label { color: #E2A400; }
.star-input input:focus-visible + label { outline: 2px solid var(--blue); border-radius: 4px; }

.related { background: var(--mist); padding: 3.5rem 0 4rem; }
.related .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .related .post-grid { grid-template-columns: 1fr; } }

/* ---------- Inhaltsseiten ---------- */
.page-hero { padding: 3.5rem 0 2.5rem; border-bottom: 1px solid var(--line); }
.page-hero h1 { font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 800; letter-spacing: -0.035em; max-width: 20ch; margin-bottom: 1rem; }
.page-hero p { font-family: var(--font-read); font-size: 1.18rem; color: var(--ink-2); max-width: 60ch; margin: 0; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; padding: 3.5rem 0; }
.about-grid img { border-radius: var(--radius-l); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; gap: 2rem; } }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--line); }
.facts div { padding: 1.6rem 1rem; text-align: center; }
.facts div + div { border-left: 1px solid var(--line); }
.facts strong { display: block; font-size: 2.4rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.facts span { color: var(--muted); font-size: .92rem; }
.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; padding: 3rem 0 4rem; }
@media (max-width: 860px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.team a { text-decoration: none; color: var(--ink); }
.team img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-l); margin-bottom: .8rem; filter: grayscale(.2); }
.team a:hover img { filter: none; }
.team h3 { font-size: 1.08rem; margin: 0 0 .2rem; }
.team p { color: var(--muted); font-size: .88rem; margin: 0; }

.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 3rem; padding: 3rem 0 4rem; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.info-list { list-style: none; padding: 0; margin: 0; }
.info-list li { display: flex; gap: .9rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.info-list i { width: 38px; height: 38px; border-radius: 10px; background: var(--marker-soft); display: grid; place-items: center; color: var(--ink); flex-shrink: 0; }
.info-list strong { display: block; }
.info-list span { color: var(--muted); font-size: .92rem; }

.author-hero { display: flex; gap: 2rem; align-items: center; padding: 3rem 0 2.5rem; border-bottom: 1px solid var(--line); }
.author-hero h1 { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; margin-bottom: .5rem; }
.author-hero p { font-family: var(--font-read); font-size: 1.1rem; color: var(--ink-2); max-width: 58ch; }
.author-stats { display: flex; gap: 2rem; margin-top: .8rem; }
.author-stats strong { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.author-stats span { font-size: .85rem; color: var(--muted); }
@media (max-width: 640px) { .author-hero { flex-direction: column; align-items: flex-start; } }

/* ---------- Anmeldung & Demo ---------- */
.auth { min-height: calc(100vh - 140px); display: grid; grid-template-columns: 1fr 1fr; }
.auth-art { background: var(--ink) url("../img/blog/banner2.jpg") center / cover; position: relative; display: flex; align-items: flex-end; padding: 3rem; color: #fff; }
.auth-art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,42,74,.15), rgba(27,42,74,.92)); }
.auth-art > * { position: relative; }
.auth-art blockquote { font-family: var(--font-read); font-size: 1.45rem; line-height: 1.45; max-width: 30ch; margin: 0 0 1rem; }
.auth-art cite { font-style: normal; color: var(--marker); font-weight: 600; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 3rem 1.25rem; }
.auth-form .box { width: min(420px, 100%); }
.auth-form h1 { font-size: 2rem; font-weight: 800; margin-bottom: .4rem; }
.auth-form .sub { color: var(--muted); margin-bottom: 1.75rem; }
.demo-hint { display: flex; gap: .8rem; padding: 1rem; border-radius: var(--radius); background: var(--marker-soft); margin-bottom: 1.5rem; font-size: .92rem; }
.demo-hint code { background: rgba(255,255,255,.7); color: var(--ink); padding: .05rem .35rem; border-radius: 4px; }
@media (max-width: 860px) { .auth { grid-template-columns: 1fr; } .auth-art { display: none; } }

.demo-page { padding: 4rem 0 5rem; }
.demo-page h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; letter-spacing: -0.04em; max-width: 18ch; line-height: 1.04; }
.demo-page > .wrap > p { font-family: var(--font-read); font-size: 1.2rem; color: var(--ink-2); max-width: 58ch; margin: 1.2rem 0 2.5rem; }
.demo-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 900px) { .demo-choices { grid-template-columns: 1fr; } }
.demo-choice { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-l); padding: 1.6rem; text-decoration: none; color: var(--ink); background: #fff; transition: border-color .2s, transform .2s; }
.demo-choice:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-2px); }
.demo-choice .icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem; margin-bottom: 1.1rem; background: var(--mist); }
.demo-choice.is-primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.demo-choice.is-primary .icon { background: var(--marker); color: var(--ink); }
.demo-choice.is-primary p { color: #C9D2E3; }
.demo-choice h2 { font-size: 1.35rem; margin-bottom: .5rem; color: inherit; }
.demo-choice p { color: var(--muted); font-size: .95rem; margin-bottom: 1.2rem; }
.demo-choice ul { padding-left: 1.1rem; font-size: .92rem; margin-bottom: 1.4rem; }
.demo-choice .go { margin-top: auto; font-weight: 700; }
.tech { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2.5rem; }

/* ---------- Fehlerseite ---------- */
.error-page { padding: 6rem 0; text-align: center; }
.error-page .code { font-size: clamp(5rem, 16vw, 9rem); font-weight: 800; letter-spacing: -0.06em; line-height: 1; }
.error-page h1 { font-size: 1.8rem; margin: 1rem 0 .6rem; }
.error-page p { color: var(--muted); max-width: 46ch; margin: 0 auto 2rem; }

/* ---------- Fußbereich ---------- */
.site-footer { background: var(--ink); color: #B9C4D8; padding: 3.5rem 0 1.5rem; font-size: .93rem; }
.site-footer .grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; }
@media (max-width: 860px) { .site-footer .grid { grid-template-columns: 1fr 1fr; } }
.site-footer .brand { color: #fff; margin-bottom: .8rem; }
.site-footer h2 { color: #fff; font-size: .98rem; margin-bottom: .8rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .4rem; }
.site-footer a { color: #DCE3F0; text-decoration: none; }
.site-footer a:hover { color: var(--marker); }
.site-footer .bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 2.5rem; padding-top: 1.25rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .85rem; }
.post-grid.is-wide { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.site-footer .brand:hover { color: #fff; }
@media (max-width: 600px) { .demo-bar span { display: none; } }