/* ============================================================ KARL KANE — blog.css · Blog-Index + Artikelseiten (nutzt Tokens/Fonts/Nav/Footer/Buttons aus styles.css) ============================================================ */ /* background on (not body) so the injected FX canvases stay visible — see styles.css. blog.css only loads on blog pages, so targeting html directly is safe here. */ html{background:radial-gradient(120% 80% at 50% -10%,#0e0e15 0,var(--bg) 55%) fixed;background-color:var(--bg)} body.blog{background:transparent} .blog main{padding-top:clamp(6.5rem,10vw,9rem)} /* ---------- breadcrumb ---------- */ .crumb{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin-bottom:1.4rem} .crumb a{color:var(--muted-2);transition:color .3s} .crumb a:hover{color:var(--orange)} .crumb span{color:var(--muted-2)} /* ---------- blog index hero ---------- */ .blog-hero{position:relative;padding-block:clamp(1rem,3vw,2rem) clamp(2.5rem,5vw,4rem)} .blog-hero h1{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(2.8rem,8vw,6rem);line-height:.92;letter-spacing:-.02em} .blog-hero .ac{color:var(--orange);text-shadow:0 0 30px var(--orange-glow)} .blog-hero p{color:var(--muted);max-width:60ch;margin-top:1.3rem;font-size:1.05rem} /* ---------- posts grid ---------- */ .post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:clamp(1.4rem,2.5vw,2.2rem);padding-bottom:clamp(3rem,6vw,5rem)} .post-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:rgba(255,255,255,.02);transition:transform .5s var(--eo),border-color .4s,box-shadow .4s} .post-card:hover{transform:translateY(-6px);border-color:rgba(255,83,29,.4);box-shadow:0 30px 60px -28px #000} .post-card__media{position:relative;aspect-ratio:16/10;overflow:hidden} .post-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--eo),filter .5s;filter:contrast(1.05) saturate(1.05)} .post-card:hover .post-card__media img{transform:scale(1.06)} .post-card__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(8,8,10,.65))} .post-card__cat{position:absolute;left:.9rem;top:.9rem;z-index:2;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:rgba(8,8,10,.65);border:1px solid var(--line-3);border-radius:100px;padding:.34rem .7rem;backdrop-filter:blur(6px)} .post-card__body{display:flex;flex-direction:column;gap:.7rem;padding:clamp(1.2rem,2vw,1.6rem);flex:1} .post-card__body h2{font-family:var(--display);font-weight:600;font-size:clamp(1.2rem,1.8vw,1.5rem);line-height:1.15;text-transform:none} .post-card:hover .post-card__body h2{color:var(--orange)} .post-card__ex{color:var(--muted);font-size:.92rem;line-height:1.6;flex:1} .post-card__meta{display:flex;align-items:center;gap:.8rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-top:.3rem} .post-card__meta .dot{width:4px;height:4px;border-radius:50%;background:var(--orange)} .post-card__go{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-top:.2rem} .post-card__go svg{width:16px;height:16px;transition:transform .4s var(--eo)} .post-card:hover .post-card__go svg{transform:translateX(5px)} .post-card a.stretch{position:absolute;inset:0;z-index:3} /* ---------- article ---------- */ .article{max-width:820px;margin-inline:auto} .article__head{margin-bottom:clamp(1.6rem,3vw,2.4rem)} .article__cat{display:inline-block;font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);margin-bottom:1rem} .article h1{font-family:var(--display);font-weight:700;text-transform:none;font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.05;letter-spacing:-.01em} .article__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin-top:1.2rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)} .article__meta .dot{width:4px;height:4px;border-radius:50%;background:var(--teal)} .article__hero{margin:clamp(1.6rem,3vw,2.4rem) 0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);aspect-ratio:16/9} .article__hero img{width:100%;height:100%;object-fit:cover;filter:contrast(1.05) saturate(1.05)} /* lead + key takeaways (great for AI citation) */ .article__lead{font-size:clamp(1.15rem,2vw,1.35rem);line-height:1.6;color:var(--ink);font-weight:500;margin-bottom:1.6rem} .tldr{border:1px solid var(--line-3);border-left:3px solid var(--orange);border-radius:0 12px 12px 0;background:linear-gradient(100deg,rgba(255,83,29,.08),transparent 70%);padding:1.3rem 1.5rem;margin:1.8rem 0} .tldr b{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin-bottom:.7rem} .tldr ul{display:grid;gap:.5rem} .tldr li{position:relative;padding-left:1.3rem;color:var(--ink);font-size:.95rem;line-height:1.55} .tldr li::before{content:"✓";position:absolute;left:0;color:var(--teal);font-weight:700} /* body typography */ .article__body{font-size:1.06rem;line-height:1.8;color:#d9d7d2} .article__body h2{font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,3vw,2rem);line-height:1.15;letter-spacing:-.01em;margin:2.4rem 0 1rem;color:var(--ink);scroll-margin-top:6rem} .article__body h3{font-family:var(--display);font-weight:600;font-size:1.25rem;margin:1.8rem 0 .7rem;color:var(--ink)} .article__body p{margin-bottom:1.15rem} .article__body a{color:var(--teal);text-decoration:underline;text-underline-offset:3px} .article__body strong{color:var(--ink)} .article__body ul,.article__body ol{margin:0 0 1.3rem 1.3rem;display:grid;gap:.55rem} .article__body li{padding-left:.3rem} .article__body ul li::marker{color:var(--orange)} .article__body ol li::marker{color:var(--teal);font-family:var(--mono)} .article__body blockquote{margin:1.6rem 0;padding:1.1rem 1.5rem;border-left:3px solid var(--teal);background:rgba(94,211,187,.06);border-radius:0 12px 12px 0;font-size:1.1rem;color:var(--ink);font-style:italic} .article__body figure{margin:1.8rem 0} .article__body figure img{width:100%;border-radius:var(--r);border:1px solid var(--line)} .article__body figcaption{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--muted-2);text-transform:uppercase;margin-top:.6rem;text-align:center} .article__body h2:first-child{margin-top:0} /* faq inside article (semantic Q&A for AI) */ .article__faq{margin-top:2.6rem;border-top:1px solid var(--line);padding-top:1.8rem} .article__faq h2{margin-top:0} .qa{border-bottom:1px solid var(--line-2);padding:1.1rem 0} .qa h3{font-size:1.1rem;margin:0 0 .5rem;color:var(--ink)} .qa p{margin:0;color:var(--muted)} /* article CTA + author */ .article__cta{margin-top:2.6rem;border:1px solid rgba(255,83,29,.3);border-radius:var(--r);background:linear-gradient(135deg,#1c1109,#0a0a0c 60%);padding:clamp(1.6rem,3vw,2.4rem);text-align:center} .article__cta h2{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:clamp(1.4rem,2.6vw,2rem);margin-bottom:.6rem} .article__cta p{color:var(--muted);max-width:52ch;margin:0 auto 1.4rem} .article__author{display:flex;align-items:center;gap:1rem;margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--line)} .article__author img{width:54px;height:54px;border-radius:50%;object-fit:cover;border:1px solid var(--line-3)} .article__author b{font-family:var(--display);font-size:1.05rem} .article__author span{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-top:.2rem} /* related */ .related{margin-top:clamp(3rem,6vw,5rem);border-top:1px solid var(--line);padding-top:clamp(2rem,4vw,3rem)} .related h2{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:clamp(1.4rem,2.6vw,1.9rem);margin-bottom:1.4rem} @media (max-width:640px){ .article__hero{aspect-ratio:4/3} .post-grid{grid-template-columns:1fr} } /* ============================================================ THEME TOGGLE (dark / light) ============================================================ */ .theme-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line-3);color:var(--muted);background:transparent;transition:color .3s,border-color .3s,background .3s,transform .3s var(--eo);flex:none} .theme-btn:hover{color:var(--ink);border-color:var(--ink);transform:rotate(18deg)} .theme-btn svg{width:18px;height:18px} .theme-btn .ico-moon{display:none} html.theme-light .theme-btn .ico-sun{display:none} html.theme-light .theme-btn .ico-moon{display:block} /* ============================================================ WHITE LANYARD (blog index hero) ============================================================ */ .blog .lanyard{position:absolute;top:-12.2rem;right:clamp(0rem,2vw,2.5rem);left:auto;margin:0;z-index:6} @media (max-width:1080px){.blog .lanyard{display:none}} .lanyard--white .lanyard__strap{background:linear-gradient(180deg,#f4f2ec,#c7c4bb);box-shadow:0 0 18px rgba(255,255,255,.22)} .lanyard--white .lanyard__strap::after{color:rgba(20,20,22,.5)} .lanyard--white .lanyard__clip{border-color:#b9b9c0;background:linear-gradient(180deg,#fafafa,#9a9aa2)} .lanyard--white .lanyard__card{background:linear-gradient(158deg,#ffffff,#e9e6df);border-color:rgba(0,0,0,.14);box-shadow:0 34px 70px -18px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.85)} .lanyard--white .lanyard__hole{background:#cfccc3;box-shadow:inset 0 0 4px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.6)} .lanyard--white .lanyard__logo{filter:drop-shadow(0 2px 7px rgba(0,0,0,.18));opacity:1} .lanyard--white .lanyard__name{color:#17171c} .lanyard--white .lanyard__role{color:#1f9e86} .lanyard--white .lanyard__bc{color:#8b8892} .lanyard--white .lanyard__holo{mix-blend-mode:multiply;opacity:.7} /* ============================================================ LIGHT MODE · scoped to blog pages via html.theme-light ============================================================ */ html.theme-light{ --bg:#F4F2ED; --bg-2:#EBE8E1; --ink:#17171C; --muted:#54545E; --muted-2:#87878F; --surface:rgba(0,0,0,.03); --surface-2:rgba(0,0,0,.05); --line:rgba(0,0,0,.12); --line-2:rgba(0,0,0,.08); --line-3:rgba(0,0,0,.2); --grid-line:rgba(0,0,0,.09); color-scheme:light; } html.theme-light{background:radial-gradient(120% 80% at 50% -10%,#fdfcf9 0,var(--bg) 55%) fixed;background-color:var(--bg)} html.theme-light .nav.scrolled{background:rgba(244,242,237,.82)} html.theme-light .nav__logo img{filter:drop-shadow(0 0 10px rgba(255,83,29,.25))} html.theme-light .footer{background:var(--bg-2)} html.theme-light .ft-wordmark img{filter:drop-shadow(0 0 40px rgba(255,83,29,.18))} @media (max-width:940px){html.theme-light .nav__links{background:rgba(246,244,240,.98)}} /* text surfaces that used hard-coded dark values */ html.theme-light .article__body{color:#33333B} html.theme-light .article__body a{color:#1a8a73} html.theme-light .crumb a:hover{color:var(--orange)} html.theme-light .post-card{background:rgba(0,0,0,.02)} html.theme-light .post-card:hover{box-shadow:0 30px 60px -30px rgba(0,0,0,.35)} /* primary/ghost buttons flip to a dark fill on hover → keep hover text light */ html.theme-light .btn:hover,html.theme-light .btn--ghost:hover{color:#F6F4F0} /* the article CTA box stays intentionally dark → force its text light */ html.theme-light .article__cta h2{color:#F6F4F0} html.theme-light .article__cta p{color:#C9C7C2} /* cookie bar panel */ html.theme-light .cc__in{background:rgba(248,247,243,.96);box-shadow:0 30px 80px -24px rgba(0,0,0,.35)} html.theme-light .cc__txt a{color:#1a8a73} /* Ablehnen-Button auch im Light-Theme gleichwertig sichtbar (DSGVO/TDDDG). Die Dark-Variante nutzt helles Weiss auf Dunkel - das verschwindet auf Hell. */ html.theme-light .cc__btns .btn--ghost{background:rgba(10,10,11,.07);border:1px solid rgba(10,10,11,.55);color:#0A0A0B} html.theme-light .cc__btns .btn--ghost:hover{background:rgba(10,10,11,.13);border-color:#0A0A0B} /* ============================================================ LANDINGPAGES · Anlass- und Regionsseiten (/hochzeits-dj/, /dj-nuernberg/ ...) Nutzt dieselben Tokens wie Blog + styles.css. ============================================================ */ /* Kennzahlen-Leiste unter dem Lead */ .lp-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.8rem;margin:1.6rem 0} .lp-facts>div{display:flex;flex-direction:column;gap:.25rem;padding:.9rem 1rem;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02)} .lp-facts b{font-family:var(--display);font-weight:700;font-size:clamp(1.1rem,2.1vw,1.5rem);line-height:1.05;color:var(--orange);overflow-wrap:anywhere;hyphens:auto} .lp-facts span{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);overflow-wrap:anywhere} /* CTA-Reihe direkt unter dem Einstieg — die Anfrage soll nicht erst am Seitenende stehen */ .lp-cta-top{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.8rem 0 2.4rem;padding-bottom:1.8rem;border-bottom:1px solid var(--line-2)} .lp-cta-top .btn{font-size:.82rem} /* Ortschaften-Chips (Einsatzgebiet) */ .lp-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:2rem 0} .lp-chips span{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;color:var(--muted);border:1px solid var(--line);border-radius:100px;padding:.32rem .74rem;background:rgba(255,255,255,.02)} /* "Passt vielleicht auch" — Querverlinkung zwischen den Landingpages */ .lp-rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;padding-bottom:clamp(2rem,4vw,3rem)} .lp-rel{display:flex;flex-direction:column;gap:.35rem;padding:1.1rem 1.2rem;border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.02);transition:transform .4s var(--eo),border-color .35s,box-shadow .35s} .lp-rel:hover{transform:translateY(-4px);border-color:rgba(255,83,29,.42);box-shadow:0 24px 48px -28px #000} .lp-rel b{font-family:var(--display);font-weight:600;font-size:1.02rem;color:var(--ink)} .lp-rel:hover b{color:var(--orange)} .lp-rel span{font-size:.85rem;line-height:1.5;color:var(--muted)} /* Footer-Sitelinks (Anlässe / Regionen / Kontakt) */ .lp-sitelinks{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:clamp(1.4rem,3vw,3rem);padding:clamp(2rem,4vw,3rem) 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);margin-bottom:1.6rem} .lp-sitelinks h5{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin-bottom:.9rem} .lp-sitelinks a{display:block;color:var(--muted);font-size:.9rem;padding:.22rem 0;transition:color .3s} .lp-sitelinks a:hover{color:var(--orange)} .lp-sitelinks address{font-style:normal;color:var(--muted);font-size:.9rem;line-height:1.6;margin-bottom:.5rem} /* Light-Mode-Anpassungen */ html.theme-light .lp-facts>div,html.theme-light .lp-rel,html.theme-light .lp-chips span{background:rgba(0,0,0,.02)} html.theme-light .lp-rel:hover{box-shadow:0 24px 48px -30px rgba(0,0,0,.35)} html.theme-light .lp-sitelinks a:hover{color:var(--orange)} @media (max-width:600px){ .lp-cta-top{flex-direction:column;align-items:stretch} .lp-cta-top .btn{justify-content:center} }