/* ========================================================= KAFFEE NOVA – main.css Editoriales Design-System für den Getränke-Blog. Farben werden zusätzlich per Customizer als CSS-Variablen in injiziert (siehe inc/customizer.php) und hier als Fallback definiert. ========================================================= */ :root { --kn-color-primary: #4A2C20; /* Kaffee */ --kn-color-secondary: #6F8F52; /* Tee */ --kn-color-accent: #D89B32; /* Bier */ --kn-color-accent-alt: #E8A63A; /* Andere Getränke */ --kn-color-bg: #FFF9F0; /* Creme */ --kn-color-bg-alt: #F4EBDD; /* Warmes Beige */ --kn-color-text: #292522; /* Charcoal */ --kn-color-text-muted: #706A63; /* Sekundär Grau */ --kn-color-white: #FFFFFF; --kn-accent: var(--kn-color-primary); --kn-font-heading: "Playfair Display", Georgia, serif; --kn-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --kn-container-width: 1240px; --kn-radius: 14px; --kn-radius-sm: 8px; --kn-shadow-sm: 0 2px 10px rgba(41, 37, 34, 0.06); --kn-shadow-md: 0 10px 30px rgba(41, 37, 34, 0.10); --kn-transition: 220ms ease; } /* ---------- Reset & Basis ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--kn-color-bg); color: var(--kn-color-text); font-family: var(--kn-font-body); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } button { font-family: inherit; cursor: pointer; } h1, h2, h3, h4, h5 { font-family: var(--kn-font-heading); font-weight: 700; line-height: 1.2; margin: 0 0 0.5em; color: var(--kn-color-text); } .kn-container { max-width: var(--kn-container-width); margin-inline: auto; padding-inline: 24px; } .screen-reader-text { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; overflow: hidden; } .kn-skip-link { position: absolute; left: -9999px; top: 0; background: var(--kn-color-primary); color: #fff; padding: 12px 20px; z-index: 9999; border-radius: 0 0 8px 0; } .kn-skip-link:focus { left: 0; } :focus-visible { outline: 3px solid var(--kn-color-accent); outline-offset: 2px; } /* ---------- Buttons ---------- */ .kn-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 999px; font-weight: 600; font-size: 0.95rem; border: 2px solid transparent; transition: transform var(--kn-transition), background var(--kn-transition), color var(--kn-transition); } .kn-btn-primary { background: var(--kn-color-primary); color: #fff; } .kn-btn-primary:hover { transform: translateY(-2px); background: #3a2118; } .kn-btn-outline { background: transparent; border-color: var(--kn-accent, var(--kn-color-primary)); color: var(--kn-accent, var(--kn-color-primary)); } .kn-btn-outline:hover { background: var(--kn-accent, var(--kn-color-primary)); color: #fff; } .kn-btn-lg { padding: 16px 32px; font-size: 1.05rem; } /* ---------- Header ---------- */ .kn-header { position: sticky; top: 0; z-index: 500; background: rgba(255, 249, 240, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(41, 37, 34, 0.08); } .kn-no-sticky-header .kn-header { position: static; } .kn-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 14px; } .kn-branding { display: flex; flex-direction: column; } .kn-logo-text { font-family: var(--kn-font-heading); font-size: 1.6rem; font-weight: 800; color: var(--kn-color-primary); letter-spacing: 0.02em; } .kn-logo-tagline { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kn-color-text-muted); } .custom-logo-link img { max-height: 56px; width: auto; } .kn-primary-nav .kn-menu { display: flex; gap: 28px; } .kn-primary-nav .kn-menu a { font-weight: 600; font-size: 0.98rem; padding: 8px 2px; position: relative; } .kn-primary-nav .kn-menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--kn-color-accent); transform: scaleX(0); transition: transform var(--kn-transition); } .kn-primary-nav .kn-menu a:hover::after, .kn-primary-nav .kn-menu li.current-menu-item a::after { transform: scaleX(1); } .kn-header-actions { display: flex; align-items: center; gap: 8px; } .kn-icon-btn { background: transparent; border: none; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--kn-color-text); transition: background var(--kn-transition); } .kn-icon-btn:hover { background: var(--kn-color-bg-alt); } .kn-icon { width: 22px; height: 22px; fill: currentColor; } .kn-menu-toggle { display: none; } /* Mobile Nav Drawer */ .kn-mobile-nav { position: fixed; inset: 0 0 0 auto; width: min(84vw, 360px); background: var(--kn-color-white); transform: translateX(100%); transition: transform var(--kn-transition); z-index: 600; box-shadow: var(--kn-shadow-md); padding: 90px 28px 28px; overflow-y: auto; } .kn-mobile-nav.is-open { transform: translateX(0); } .kn-mobile-menu li { border-bottom: 1px solid var(--kn-color-bg-alt); } .kn-mobile-menu a { display: block; padding: 16px 4px; font-weight: 600; font-size: 1.05rem; } /* Search overlay */ .kn-search-overlay { position: fixed; inset: 0; background: rgba(41, 37, 34, 0.85); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; z-index: 700; opacity: 0; visibility: hidden; transition: opacity var(--kn-transition); } .kn-search-overlay.is-open { opacity: 1; visibility: visible; } .kn-search-overlay-inner { background: var(--kn-color-white); border-radius: var(--kn-radius); padding: 40px; width: min(90vw, 620px); position: relative; } .kn-search-close { position: absolute; top: 12px; right: 12px; font-size: 1.6rem; line-height: 1; } .kn-search-question { font-family: var(--kn-font-heading); font-size: 1.4rem; margin-bottom: 16px; } .kn-search-form { display: flex; gap: 10px; } .kn-search-input { flex: 1; padding: 14px 16px; border: 2px solid var(--kn-color-bg-alt); border-radius: var(--kn-radius-sm); font-size: 1rem; } .kn-search-input:focus { border-color: var(--kn-color-accent); } /* Backdrop for drawer */ body.kn-nav-open::after, body.kn-search-open::after { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 550; } /* Breadcrumbs */ .kn-breadcrumbs-wrap { padding-top: 18px; } .kn-breadcrumbs { font-size: 0.85rem; color: var(--kn-color-text-muted); } .kn-breadcrumbs a:hover { color: var(--kn-color-primary); } /* ---------- Hero ---------- */ .kn-hero { padding: 64px 0 80px; } .kn-hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; } .kn-hero-title { font-size: clamp(2.2rem, 4vw, 3.4rem); margin-bottom: 20px; } .kn-hero-desc { font-size: 1.12rem; color: var(--kn-color-text-muted); max-width: 46ch; margin-bottom: 28px; } .kn-hero-media { position: relative; } .kn-hero-image { border-radius: var(--kn-radius); width: 100%; aspect-ratio: 4/3; object-fit: cover; box-shadow: var(--kn-shadow-md); } .kn-hero-image-placeholder { background: linear-gradient(135deg, var(--kn-color-primary), var(--kn-color-accent)); } .kn-hero-secondary-card { position: absolute; bottom: -24px; left: -24px; background: var(--kn-color-white); border-radius: var(--kn-radius-sm); padding: 16px 20px; box-shadow: var(--kn-shadow-md); max-width: 260px; display: flex; flex-direction: column; gap: 8px; } .kn-hero-secondary-title { font-weight: 700; font-size: 0.95rem; } /* ---------- Badges ---------- */ .kn-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--kn-badge-color, var(--kn-color-primary)); background: color-mix(in srgb, var(--kn-badge-color, var(--kn-color-primary)) 12%, transparent); padding: 6px 12px; border-radius: 999px; margin-bottom: 10px; } .kn-eyebrow { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kn-color-text-muted); margin-bottom: 10px; } /* ---------- Sections ---------- */ .kn-section { padding: 64px 0; } .kn-section-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 32px; gap: 20px; } .kn-section-title { font-size: clamp(1.6rem, 2.4vw, 2.1rem); } .kn-section-link { font-weight: 600; color: var(--kn-color-primary); white-space: nowrap; } .kn-section-link:hover { text-decoration: underline; } /* ---------- Card grid ---------- */ .kn-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .kn-card-grid-popular { grid-template-columns: repeat(4, 1fr); } .kn-card { background: var(--kn-color-white); border-radius: var(--kn-radius); overflow: hidden; box-shadow: var(--kn-shadow-sm); transition: transform var(--kn-transition), box-shadow var(--kn-transition); display: flex; flex-direction: column; } .kn-card:hover { transform: translateY(-6px); box-shadow: var(--kn-shadow-md); } .kn-card-image-link { display: block; overflow: hidden; aspect-ratio: 4/2.7; } .kn-card-image { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; } .kn-card:hover .kn-card-image { transform: scale(1.06); } .kn-card-image-placeholder { width: 100%; height: 100%; } .kn-card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .kn-card-title { font-size: 1.2rem; margin-bottom: 4px; } .kn-card-title a:hover { text-decoration: underline; } .kn-card-excerpt { color: var(--kn-color-text-muted); font-size: 0.94rem; flex: 1; } .kn-card-meta { font-size: 0.8rem; color: var(--kn-color-text-muted); display: flex; gap: 8px; margin-top: 4px; } .kn-card-link { font-weight: 700; font-size: 0.88rem; color: var(--kn-color-primary); margin-top: 10px; } .kn-card-link:hover { text-decoration: underline; } .kn-card-popular { flex-direction: row; } .kn-card-popular .kn-card-image-link { width: 40%; aspect-ratio: auto; } .kn-card-popular .kn-card-body { padding: 16px 18px; } .kn-card-popular .kn-card-title { font-size: 1.02rem; } /* ---------- Category cards ---------- */ .kn-category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .kn-category-card { position: relative; border-radius: var(--kn-radius); overflow: hidden; min-height: 340px; display: flex; flex-direction: column; justify-content: flex-end; background: var(--kn-cat-color, var(--kn-color-primary)); box-shadow: var(--kn-shadow-sm); transition: transform var(--kn-transition), box-shadow var(--kn-transition); } .kn-category-card:hover { transform: translateY(-6px) scale(1.01); box-shadow: var(--kn-shadow-md); } .kn-category-card-media { position: absolute; inset: 0; } .kn-category-card-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; transition: transform 500ms ease, opacity var(--kn-transition); } .kn-category-card:hover .kn-category-card-media img { transform: scale(1.08); opacity: 0.4; } .kn-category-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--kn-cat-color) 85%, black 15%) 100%); } .kn-category-card-body { position: relative; z-index: 1; padding: 24px; color: #fff; display: flex; flex-direction: column; gap: 6px; } .kn-category-card-name { font-family: var(--kn-font-heading); font-size: 1.4rem; font-weight: 700; } .kn-category-card-desc { font-size: 0.86rem; opacity: 0.92; max-width: 30ch; } .kn-category-card-count { font-size: 0.76rem; opacity: 0.8; margin-top: 4px; } /* ---------- Featured story ---------- */ .kn-section-featured { background: var(--kn-color-bg-alt); } .kn-featured-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .kn-featured-media img { border-radius: var(--kn-radius); box-shadow: var(--kn-shadow-md); aspect-ratio: 4/3; object-fit: cover; } .kn-featured-title { font-size: clamp(1.6rem, 3vw, 2.2rem); } .kn-featured-title a:hover { text-decoration: underline; } .kn-featured-excerpt { color: var(--kn-color-text-muted); margin-bottom: 20px; } /* ---------- Newsletter ---------- */ .kn-newsletter--section { background: var(--kn-color-primary); color: #fff; border-radius: var(--kn-radius); margin: 0 24px; } .kn-newsletter-inner { text-align: center; padding: 56px 24px; max-width: 640px; } .kn-newsletter--section .kn-newsletter-title { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2rem); } .kn-newsletter--section .kn-newsletter-desc { opacity: 0.85; margin-bottom: 24px; } .kn-newsletter-form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .kn-newsletter-input { padding: 13px 18px; border-radius: 999px; border: none; min-width: 260px; font-size: 0.95rem; } .kn-newsletter--section .kn-btn-primary { background: #fff; color: var(--kn-color-primary); } .kn-newsletter--section .kn-btn-primary:hover { background: var(--kn-color-bg); } .kn-newsletter-note { font-size: 0.76rem; opacity: 0.65; margin-top: 10px; } .kn-newsletter--sidebar .kn-newsletter-title { font-size: 1.05rem; } .kn-newsletter--sidebar .kn-newsletter-form { flex-direction: column; } .kn-newsletter--sidebar .kn-newsletter-input { min-width: 0; } /* ---------- Layout with sidebar ---------- */ .kn-layout-grid { display: grid; grid-template-columns: 1fr 340px; gap: 56px; padding-block: 48px; } .kn-content-col { min-width: 0; } /* ---------- Sidebar widgets ---------- */ .kn-sidebar { display: flex; flex-direction: column; gap: 36px; } .kn-widget-title { font-size: 1.05rem; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid var(--kn-color-bg-alt); } .kn-widget-list { display: flex; flex-direction: column; gap: 16px; } .kn-widget-item { display: flex; gap: 12px; align-items: flex-start; } .kn-widget-thumb { width: 64px; height: 64px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: var(--kn-color-bg-alt); } .kn-widget-thumb img { width: 100%; height: 100%; object-fit: cover; } .kn-widget-item-content { display: flex; flex-direction: column; gap: 4px; } .kn-widget-item-title { font-weight: 600; font-size: 0.92rem; line-height: 1.3; } .kn-widget-item-title:hover { text-decoration: underline; } .kn-widget-item-date { font-size: 0.76rem; color: var(--kn-color-text-muted); } .kn-widget-categories-list a { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-weight: 600; } .kn-cat-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--kn-badge-color); display: inline-block; } /* ---------- Single article ---------- */ .kn-single-header { margin-bottom: 28px; } .kn-single-title { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-bottom: 14px; } .kn-single-intro { font-size: 1.1rem; color: var(--kn-color-text-muted); margin-bottom: 16px; } .kn-post-meta { font-size: 0.86rem; color: var(--kn-color-text-muted); display: flex; gap: 8px; flex-wrap: wrap; } .kn-post-meta a { font-weight: 600; color: var(--kn-color-text); } .kn-single-thumbnail { margin: 28px 0; border-radius: var(--kn-radius); overflow: hidden; } .kn-single-thumbnail img { width: 100%; aspect-ratio: 16/9; object-fit: cover; } .kn-single-thumbnail figcaption { font-size: 0.8rem; color: var(--kn-color-text-muted); padding: 8px 4px; } .kn-single-content { max-width: 760px; font-size: 1.06rem; } .kn-single-content h2 { font-size: 1.5rem; margin-top: 2em; border-left: 4px solid var(--kn-accent); padding-left: 14px; } .kn-single-content h3 { font-size: 1.2rem; margin-top: 1.6em; } .kn-single-content p { margin: 0 0 1.3em; } .kn-single-content ul, .kn-single-content ol { margin: 0 0 1.3em; padding-left: 1.4em; } .kn-single-content li { margin-bottom: 0.4em; } .kn-single-content img { border-radius: var(--kn-radius-sm); margin: 1.5em 0; } .kn-single-content blockquote { border-left: 4px solid var(--kn-accent); background: var(--kn-color-bg-alt); padding: 18px 24px; margin: 1.6em 0; font-style: italic; border-radius: 0 var(--kn-radius-sm) var(--kn-radius-sm) 0; } .kn-single-content table { width: 100%; border-collapse: collapse; margin: 1.6em 0; display: block; overflow-x: auto; } .kn-single-content table th, .kn-single-content table td { border: 1px solid var(--kn-color-bg-alt); padding: 10px 14px; text-align: left; } .kn-single-content table th { background: var(--kn-color-bg-alt); } .kn-tags { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 32px; } .kn-tag { background: var(--kn-color-bg-alt); padding: 6px 14px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; } .kn-tag:hover { background: var(--kn-color-accent); color: #fff; } .kn-related-posts { border-top: 1px solid var(--kn-color-bg-alt); } /* ---------- Recipe ---------- */ .kn-recipe-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; background: var(--kn-color-bg-alt); border-radius: var(--kn-radius-sm); padding: 20px; margin: 24px 0; } .kn-recipe-meta-item { display: flex; flex-direction: column; gap: 4px; } .kn-recipe-meta-item span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--kn-color-text-muted); } .kn-recipe-meta-item strong { font-size: 1.05rem; } .kn-recipe-ingredients ul, .kn-recipe-tips ul { padding-left: 1.2em; } .kn-recipe-ingredients li, .kn-recipe-tips li { margin-bottom: 0.5em; } /* ---------- Category archive header ---------- */ .kn-category-hero { background: color-mix(in srgb, var(--kn-accent) 10%, var(--kn-color-bg)); padding: 56px 0; border-bottom: 1px solid var(--kn-color-bg-alt); } .kn-category-hero-title { font-size: clamp(2rem, 4vw, 2.8rem); color: var(--kn-accent); } .kn-category-hero-desc { max-width: 60ch; color: var(--kn-color-text-muted); font-size: 1.05rem; } .kn-archive-header { padding-top: 48px; } .kn-archive-title { font-size: clamp(1.8rem, 3vw, 2.4rem); } .kn-archive-description { color: var(--kn-color-text-muted); max-width: 60ch; } /* ---------- Pages ---------- */ .kn-page-narrow { max-width: 780px; padding-block: 56px; } .kn-page-title { font-size: clamp(1.8rem, 3vw, 2.4rem); } .kn-page-thumbnail { margin: 24px 0; border-radius: var(--kn-radius); overflow: hidden; } .kn-page-content { font-size: 1.05rem; } .kn-page-content h2 { margin-top: 1.6em; } .kn-page-content p { margin-bottom: 1.2em; } /* ---------- Empty states ---------- */ .kn-empty-state { background: var(--kn-color-bg-alt); border-radius: var(--kn-radius); padding: 40px; text-align: center; color: var(--kn-color-text-muted); font-size: 1.05rem; } /* ---------- Search results ---------- */ .kn-search-form-inline { margin-top: 16px; max-width: 480px; } .kn-search-tip { color: var(--kn-color-text-muted); margin-top: 16px; } /* ---------- 404 ---------- */ .kn-404 { padding: 100px 0; } .kn-404-inner { text-align: center; max-width: 560px; } .kn-404-code { font-family: var(--kn-font-heading); font-size: 5rem; color: var(--kn-color-bg-alt); margin: 0; line-height: 1; } .kn-404-title { font-size: 1.8rem; margin-top: -20px; } .kn-404-text { color: var(--kn-color-text-muted); margin-bottom: 28px; } .kn-404-actions { margin-bottom: 32px; } .kn-404-search { margin: 0 auto 32px; justify-content: center; } .kn-404-categories { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } /* ---------- Pagination ---------- */ .pagination, .navigation.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 48px; flex-wrap: wrap; } .pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: 8px; background: var(--kn-color-white); font-weight: 600; box-shadow: var(--kn-shadow-sm); } .pagination .page-numbers.current { background: var(--kn-color-primary); color: #fff; } .pagination .page-numbers:hover:not(.current) { background: var(--kn-color-bg-alt); } /* ---------- Comments ---------- */ .comment-respond { margin-top: 48px; max-width: 760px; } #kn-main .comment-form input[type="text"], #kn-main .comment-form input[type="email"], #kn-main .comment-form input[type="url"], #kn-main .comment-form textarea { width: 100%; padding: 12px 14px; border: 2px solid var(--kn-color-bg-alt); border-radius: var(--kn-radius-sm); margin-bottom: 14px; font-family: inherit; } #kn-main .comment-form .form-submit input { all: unset; } #kn-main .comment-form .form-submit input { display: inline-flex; padding: 12px 26px; border-radius: 999px; background: var(--kn-color-primary); color: #fff; font-weight: 600; cursor: pointer; } .comment-list { list-style: none; padding: 0; max-width: 760px; } .comment-list .comment-body { padding: 18px 0; border-bottom: 1px solid var(--kn-color-bg-alt); } /* ---------- Footer ---------- */ .kn-footer { background: var(--kn-color-primary); color: rgba(255,255,255,0.85); margin-top: 64px; } .kn-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding: 64px 0 40px; } .kn-footer-logo-text, .kn-footer-logo { font-family: var(--kn-font-heading); font-size: 1.5rem; color: #fff; font-weight: 800; } .kn-footer-tagline { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--kn-color-accent-alt); margin: 6px 0 16px; } .kn-footer-desc { font-size: 0.92rem; max-width: 32ch; } .kn-footer-heading { color: #fff; font-family: var(--kn-font-body); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 18px; } .kn-footer-menu li { margin-bottom: 10px; } .kn-footer-menu a:hover { color: #fff; text-decoration: underline; } .kn-social-links { display: flex; gap: 10px; margin-top: 20px; } .kn-social-link { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.12); display: inline-flex; align-items: center; justify-content: center; transition: background var(--kn-transition); } .kn-social-link svg { width: 18px; height: 18px; fill: #fff; } .kn-social-link:hover { background: var(--kn-color-accent); } .kn-footer-bottom { border-top: 1px solid rgba(255,255,255,0.15); padding: 20px 0; } .kn-footer-bottom-inner { display: flex; justify-content: center; font-size: 0.82rem; } .kn-footer-widget-title { color: #fff; font-size: 0.85rem; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1024px) { .kn-layout-grid { grid-template-columns: 1fr; } .kn-sidebar { order: 2; } .kn-content-col { order: 1; } .kn-card-grid { grid-template-columns: repeat(2, 1fr); } .kn-card-grid-popular { grid-template-columns: repeat(2, 1fr); } .kn-category-grid { grid-template-columns: repeat(2, 1fr); } .kn-hero-grid { grid-template-columns: 1fr; } .kn-hero-secondary-card { position: static; margin-top: 20px; max-width: 100%; } .kn-featured-grid { grid-template-columns: 1fr; } .kn-footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .kn-primary-nav { display: none; } .kn-menu-toggle { display: inline-flex; } .kn-card-grid, .kn-card-grid-popular, .kn-category-grid { grid-template-columns: 1fr; } .kn-card-popular { flex-direction: column; } .kn-card-popular .kn-card-image-link { width: 100%; aspect-ratio: 4/2.7; } .kn-footer-grid { grid-template-columns: 1fr; padding-block: 48px 24px; } .kn-section { padding: 44px 0; } .kn-newsletter--section { margin: 0 16px; } .kn-container { padding-inline: 18px; } } @media (max-width: 480px) { .kn-hero { padding: 40px 0 56px; } .kn-search-overlay-inner { padding: 28px 20px; } .kn-newsletter-form { flex-direction: column; } .kn-newsletter-input { min-width: 0; width: 100%; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ---------- Category accent utility classes (body_class based) ---------- */ .kn-accent-kaffee { --kn-accent: #4A2C20; } .kn-accent-tee { --kn-accent: #6F8F52; } .kn-accent-bier { --kn-accent: #D89B32; } .kn-accent-andere-getraenke { --kn-accent: #E8A63A; }