.elementor-893 .elementor-element.elementor-element-e8a28b1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overlay-opacity:1;--margin-top:-100px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:120px;--padding-bottom:96px;--padding-left:0px;--padding-right:0px;}.elementor-893 .elementor-element.elementor-element-e8a28b1:not(.elementor-motion-effects-element-type-background), .elementor-893 .elementor-element.elementor-element-e8a28b1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F5F5F5;background-image:url("https://kreislaufkraft.winterwonderland.cloud/wp-content/uploads/2026/09/Kreislaufkraft_Bio-Erde-online-kaufen_bg-768x432.webp");}.elementor-893 .elementor-element.elementor-element-e8a28b1::before, .elementor-893 .elementor-element.elementor-element-e8a28b1 > .elementor-background-video-container::before, .elementor-893 .elementor-element.elementor-element-e8a28b1 > .e-con-inner > .elementor-background-video-container::before, .elementor-893 .elementor-element.elementor-element-e8a28b1 > .elementor-background-slideshow::before, .elementor-893 .elementor-element.elementor-element-e8a28b1 > .e-con-inner > .elementor-background-slideshow::before, .elementor-893 .elementor-element.elementor-element-e8a28b1 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:transparent;--background-overlay:'';background-image:radial-gradient(at center center, #F5F0E7DE 0%, #F5F0E7 87%);}.elementor-893 .elementor-element.elementor-element-e4d3886{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:24px;--padding-right:24px;}.elementor-893 .elementor-element.elementor-element-6efd277{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:48px 48px;--row-gap:48px;--column-gap:48px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-893 .elementor-element.elementor-element-ea45e61{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overflow:hidden;border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:rgba(0,0,0,0.1);--border-color:rgba(0,0,0,0.1);--border-radius:24px 24px 24px 24px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-893 .elementor-element.elementor-element-ea45e61:not(.elementor-motion-effects-element-type-background), .elementor-893 .elementor-element.elementor-element-ea45e61 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-893 .elementor-element.elementor-element-6756648{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overflow:hidden;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}.elementor-893 .elementor-element.elementor-element-0de95c9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:48px;--padding-bottom:48px;--padding-left:48px;--padding-right:48px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );word-spacing:var( --e-global-typography-primary-word-spacing );color:var( --e-global-color-primary );}.elementor-893 .elementor-element.elementor-element-ebc4699{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:48px;--padding-bottom:48px;--padding-left:48px;--padding-right:48px;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-893 .elementor-element.elementor-element-3481e1a{font-family:var( --e-global-typography-kk_lead-font-family ), Sans-serif;font-size:var( --e-global-typography-kk_lead-font-size );font-weight:var( --e-global-typography-kk_lead-font-weight );line-height:var( --e-global-typography-kk_lead-line-height );letter-spacing:var( --e-global-typography-kk_lead-letter-spacing );word-spacing:var( --e-global-typography-kk_lead-word-spacing );}.elementor-893 .elementor-element.elementor-element-f114d21{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:24px;--padding-bottom:24px;--padding-left:48px;--padding-right:48px;}.elementor-893 .elementor-element.elementor-element-f114d21:not(.elementor-motion-effects-element-type-background), .elementor-893 .elementor-element.elementor-element-f114d21 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FAFAF9;}.elementor-893 .elementor-element.elementor-element-e630d47{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:32px 32px;--row-gap:32px;--column-gap:32px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-893 .elementor-element.elementor-element-189a26a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(min-width:768px){.elementor-893 .elementor-element.elementor-element-e4d3886{--content-width:1280px;}}@media(max-width:1024px){.elementor-893 .elementor-element.elementor-element-e8a28b1{--padding-top:48px;--padding-bottom:80px;--padding-left:0px;--padding-right:0px;}.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );word-spacing:var( --e-global-typography-primary-word-spacing );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}.elementor-893 .elementor-element.elementor-element-3481e1a{font-size:var( --e-global-typography-kk_lead-font-size );line-height:var( --e-global-typography-kk_lead-line-height );letter-spacing:var( --e-global-typography-kk_lead-letter-spacing );word-spacing:var( --e-global-typography-kk_lead-word-spacing );}}@media(max-width:767px){.elementor-893 .elementor-element.elementor-element-e8a28b1{--padding-top:40px;--padding-bottom:64px;--padding-left:0px;--padding-right:0px;}.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}.elementor-893 .elementor-element.elementor-element-0de95c9{--padding-top:32px;--padding-bottom:32px;--padding-left:32px;--padding-right:32px;}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );word-spacing:var( --e-global-typography-primary-word-spacing );}.elementor-893 .elementor-element.elementor-element-ebc4699{--padding-top:32px;--padding-bottom:32px;--padding-left:32px;--padding-right:32px;}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}.elementor-893 .elementor-element.elementor-element-3481e1a{font-size:var( --e-global-typography-kk_lead-font-size );line-height:var( --e-global-typography-kk_lead-line-height );letter-spacing:var( --e-global-typography-kk_lead-letter-spacing );word-spacing:var( --e-global-typography-kk_lead-word-spacing );}.elementor-893 .elementor-element.elementor-element-f114d21{--padding-top:20px;--padding-bottom:20px;--padding-left:32px;--padding-right:32px;}}/* Start custom CSS *//* === Kreislaufkraft Magazin – Single Template === */ /* Tokens der Referenz */ #kk-mag-root{--kk-acc:var(--e-global-color-accent);--kk-acc-dark:#4D7C0F;--kk-card:#FFFFFF;--kk-line:rgba(0,0,0,.1);--kk-stone50:#FAFAF9;--kk-stone100:#F5F5F4;--kk-stone700:#44403C;--kk-stone800:#292524;--kk-muted:rgba(0,0,0,.4);--kk-body:rgba(0,0,0,.8);--kk-r:24px} #kk-mag-root .kk-mag-ico{width:16px;height:16px;flex:0 0 auto} /* --- Breadcrumb --- */ #kk-mag-crumbs{margin-bottom:32px} #kk-mag-crumbs .kk-mag-crumbs{display:flex;align-items:center;gap:8px;font-size:var(--kk-fs-meta, 12px);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--kk-muted)} #kk-mag-crumbs a{color:var(--kk-muted);text-decoration:none;transition:color .2s} #kk-mag-crumbs a:hover{color:#000} #kk-mag-crumbs .kk-mag-ico{width:12px;height:12px} #kk-mag-crumbs .kk-mag-crumbs__current{color:rgba(0,0,0,.8);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px} @media(min-width:640px){#kk-mag-crumbs .kk-mag-crumbs__current{max-width:320px}} /* --- Zurueck-Link --- */ #kk-mag-back{margin-bottom:24px} #kk-mag-back .kk-mag-back{display:inline-flex;align-items:center;gap:8px;font-size:var(--kk-fs-meta, 12px);font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--kk-acc);text-decoration:none;transition:color .2s} #kk-mag-back .kk-mag-back:hover{color:var(--kk-acc-dark)} #kk-mag-back .kk-mag-back:hover .kk-mag-ico{transform:translateX(-3px)} #kk-mag-back .kk-mag-ico{transition:transform .2s} /* --- Grid: 1 Spalte, ab 1024px 12 Spalten (8/4) --- */ @media(min-width:1024px){ #kk-mag-grid{display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr));gap:48px;align-items:start} #kk-mag-article{grid-column:span 8/span 8} #kk-mag-side{grid-column:span 4/span 4} } /* --- Artikelkarte --- */ #kk-mag-article{box-shadow:0 1px 2px rgba(0,0,0,.05)} /* Hero mit Badge */ #kk-mag-hero{position:relative;height:256px;background:var(--kk-stone100)} @media(min-width:640px){#kk-mag-hero{height:384px}} @media(min-width:768px){#kk-mag-hero{height:420px}} #kk-mag-heroimg,#kk-mag-heroimg .elementor-widget-container,#kk-mag-heroimg figure,#kk-mag-heroimg .elementor-image{height:100%;width:100%;margin:0} #kk-mag-heroimg img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0} #kk-mag-badge{position:absolute;top:24px;left:24px;z-index:2;width:auto} #kk-mag-badge .kk-mag-badge{display:inline-block;background:var(--kk-acc);color:#fff;font-size:var(--kk-fs-meta, 12px);font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:6px 16px;border-radius:9999px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1)} /* Kopfbereich */ #kk-mag-head{border-bottom:1px solid rgba(0,0,0,.06)} #kk-mag-meta{margin-bottom:16px} #kk-mag-meta .kk-mag-meta{display:flex;flex-wrap:wrap;align-items:center;gap:16px;font-size:var(--kk-fs-meta, 12px);font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--kk-muted)} #kk-mag-meta .kk-mag-meta span{display:flex;align-items:center;gap:6px} #kk-mag-title{margin-bottom:24px} #kk-mag-title .elementor-heading-title{font-family:var(--kk-font-display, Fraunces, Georgia, serif);font-weight:500;font-size:var(--kk-fs-h2, 32px);line-height:1.1;letter-spacing:-.02em;text-transform:uppercase;color:#000;margin:0} @media(min-width:768px){#kk-mag-title .elementor-heading-title{font-size:var(--kk-fs-h1, 42px)}} #kk-mag-autor .kk-mag-autor{display:flex;align-items:center;gap:16px} #kk-mag-autor .kk-mag-autor__avatar{width:48px;height:48px;flex:0 0 48px;border-radius:9999px;background:color-mix(in srgb,var(--e-global-color-accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--e-global-color-accent) 20%,transparent);color:var(--kk-acc);font-weight:700;font-size:var(--kk-fs-body, 15px);letter-spacing:.02em;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 2px rgba(0,0,0,.05)} #kk-mag-autor .kk-mag-autor__text h4{font-family:var(--kk-font-display, Fraunces, Georgia, serif);font-weight:700;font-size:var(--kk-fs-body, 15px);color:#000;margin:0 0 2px} #kk-mag-autor .kk-mag-autor__text p{font-size:var(--kk-fs-overline, 11px);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--kk-muted);margin:0} /* --- Artikeltext (SCF-Feld "artikel", WYSIWYG) --- */ #kk-mag-artikel{color:var(--kk-body);line-height:1.625} #kk-mag-artikel .elementor-widget-container>*{margin-bottom:32px} #kk-mag-artikel .elementor-widget-container>*:last-child{margin-bottom:0} #kk-mag-artikel p{font-size:var(--kk-fs-body, 15px);line-height:1.625;color:var(--kk-stone800);margin:0 0 32px} @media(min-width:768px){#kk-mag-artikel p{font-size:var(--kk-fs-lead, 18px)}} #kk-mag-artikel p:last-child{margin-bottom:0} #kk-mag-artikel a{color:var(--kk-acc);text-decoration:underline;text-underline-offset:2px} #kk-mag-artikel a:hover{color:var(--kk-acc-dark)} #kk-mag-artikel strong{font-weight:600;color:var(--kk-stone800)} /* Initial des ersten Absatzes */ #kk-mag-artikel .float-left{float:left;font-size:var(--kk-fs-h1, 42px);line-height:1;font-weight:700;color:var(--kk-acc);text-transform:uppercase;margin:4px 12px 0 0;font-family:var(--kk-font-display, Fraunces, Georgia, serif)} /* Zwischenueberschriften – h2/h3 und die aus dem Prototyp stammenden .text-2xl/.text-3xl Absaetze */ #kk-mag-artikel h2,#kk-mag-artikel h3,#kk-mag-artikel p.text-2xl,#kk-mag-artikel p.text-3xl{font-family:var(--kk-font-display, Fraunces, Georgia, serif);font-weight:700;font-size:var(--kk-fs-h3, 24px);line-height:1.15;letter-spacing:-.02em;text-transform:uppercase;color:#000;margin:0 0 32px;padding-top:16px} @media(min-width:640px){#kk-mag-artikel h2,#kk-mag-artikel h3,#kk-mag-artikel p.text-2xl,#kk-mag-artikel p.text-3xl{font-size:var(--kk-fs-h2, 32px)}} #kk-mag-artikel h4{font-family:var(--kk-font-display, Fraunces, Georgia, serif);font-weight:700;font-size:var(--kk-fs-h4, 18px);text-transform:uppercase;color:#000;margin:0 0 16px} /* Zitat – blockquote und die Prototyp-Variante div.border-l-4 */ #kk-mag-artikel blockquote,#kk-mag-artikel .border-l-4{border-left:4px solid var(--kk-acc);background:rgba(250,250,249,.6);padding:24px;border-radius:0 16px 16px 0;font-style:italic;font-family:var(--kk-font-display, Fraunces, Georgia, serif);font-size:var(--kk-fs-quote, 22px);line-height:1.6;color:var(--kk-stone700);margin:32px 0} #kk-mag-artikel blockquote p,#kk-mag-artikel .border-l-4 p{font-size:inherit;color:inherit;margin:0} /* Listen als Karten wie in der Referenz */ #kk-mag-artikel ul{list-style:none;padding:0;margin:0 0 32px;display:flex;flex-direction:column;gap:12px} #kk-mag-artikel ul li{display:flex;align-items:flex-start;gap:12px;background:rgba(250,250,249,.6);padding:16px;border-radius:12px;border:1px solid rgba(0,0,0,.03);font-size:var(--kk-fs-body, 15px);font-weight:600;line-height:1.5;color:var(--kk-body)} #kk-mag-artikel ul li::before{content:"";width:8px;height:8px;flex:0 0 8px;border-radius:9999px;background:var(--kk-acc);margin-top:7px} #kk-mag-artikel ol{padding-left:20px;margin:0 0 32px} #kk-mag-artikel ol li{margin-bottom:8px;font-size:var(--kk-fs-body, 15px);color:var(--kk-stone800)} #kk-mag-artikel .space-y-4>*{margin-bottom:16px} /* Bilder im Artikel */ #kk-mag-artikel img{max-width:100%;height:auto;border-radius:16px;display:block} #kk-mag-artikel figure{margin:0} /* --- Fusszeile der Artikelkarte --- */ #kk-mag-foot{border-top:1px solid rgba(0,0,0,.04)} #kk-mag-share .kk-mag-share{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px} #kk-mag-share .kk-mag-share__label{display:flex;align-items:center;gap:8px;font-size:var(--kk-fs-meta, 12px);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--kk-muted)} #kk-mag-share .kk-mag-share__links{display:flex;flex-wrap:wrap;align-items:center;gap:8px} #kk-mag-share .kk-mag-share__links a,#kk-mag-share .kk-mag-share__copy{display:inline-flex;align-items:center;gap:6px;font-size:var(--kk-fs-meta, 12px);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:rgba(0,0,0,.6);background:none;border:0;cursor:pointer;padding:8px 16px;border-radius:30px;text-decoration:none;transition:all .2s;font-family:inherit} #kk-mag-share .kk-mag-share__links a:hover,#kk-mag-share .kk-mag-share__copy:hover{color:#000;background:rgba(231,229,228,.5)} /* === Sidebar === */ /* --- Hero-Produkt (SCF-Feld "hero_produkt") --- */ #kk-mag-produkt .kk-mag-produkt{position:relative;overflow:hidden;background:#E5DDD5;border:1px solid rgba(0,0,0,.05);border-radius:24px;padding:32px} #kk-mag-produkt .kk-mag-produkt::before{content:"";position:absolute;top:0;right:0;width:96px;height:96px;background:color-mix(in srgb,var(--e-global-color-accent) 10%,transparent);border-bottom-left-radius:100%;pointer-events:none} #kk-mag-produkt .kk-mag-produkt__kicker{display:block;color:var(--kk-acc);font-size:var(--kk-fs-overline, 11px);font-weight:700;text-transform:uppercase;letter-spacing:.2em;margin-bottom:8px;position:relative} #kk-mag-produkt .kk-mag-produkt__titel{font-family:var(--kk-font-display, Fraunces, Georgia, serif);font-weight:700;font-size:var(--kk-fs-h4, 18px);line-height:1.2;text-transform:uppercase;color:#000;margin:0 0 12px;position:relative} #kk-mag-produkt .kk-mag-produkt__text{font-size:var(--kk-fs-meta, 12px);line-height:1.625;color:rgba(0,0,0,.6);margin:0 0 24px;position:relative} #kk-mag-produkt .kk-mag-produkt__karte{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid rgba(0,0,0,.05);border-radius:16px;padding:16px;margin-bottom:24px;position:relative} #kk-mag-produkt .kk-mag-produkt__bild{width:64px;height:64px;flex:0 0 64px;border-radius:12px;overflow:hidden;background:var(--kk-stone100)} #kk-mag-produkt .kk-mag-produkt__bild img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s} #kk-mag-produkt .kk-mag-produkt:hover .kk-mag-produkt__bild img{transform:scale(1.05)} #kk-mag-produkt .kk-mag-produkt__info h4{font-family:var(--kk-font-display, Fraunces, Georgia, serif);font-weight:700;font-size:var(--kk-fs-body, 15px);color:#000;margin:0 0 2px} #kk-mag-produkt .kk-mag-produkt__preis,#kk-mag-produkt .kk-mag-produkt__preis .woocommerce-Price-amount,#kk-mag-produkt .kk-mag-produkt__preis bdi{font-size:var(--kk-fs-body, 15px);font-weight:700;color:var(--kk-acc);text-decoration:none} #kk-mag-produkt .kk-mag-produkt__preis del{opacity:.5;font-weight:400;margin-right:6px} #kk-mag-produkt .kk-mag-produkt__cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--kk-acc);color:#fff;font-size:var(--kk-fs-overline, 11px);font-weight:700;text-transform:uppercase;letter-spacing:.15em;text-align:center;text-decoration:none;padding:14px;border-radius:30px;box-shadow:0 1px 2px rgba(0,0,0,.05);transition:background .2s;position:relative} #kk-mag-produkt .kk-mag-produkt__cta:hover{background:var(--kk-acc-dark);color:#fff} /* --- Newsletter --- */ #kk-mag-news{box-shadow:0 1px 2px rgba(0,0,0,.05)} #kk-mag-news-titel{margin-bottom:8px} #kk-mag-news-titel .elementor-heading-title{font-family:var(--kk-font-display, Fraunces, Georgia, serif);font-weight:700;font-size:var(--kk-fs-h4, 18px);line-height:1.25;text-transform:uppercase;color:#000;margin:0} #kk-mag-news-text{margin-bottom:24px} #kk-mag-news-text p{font-size:var(--kk-fs-meta, 12px);line-height:1.625;color:rgba(0,0,0,.6);margin:0} #kk-mag-news-form .elementor-field-group{margin-bottom:12px;padding:0!important;width:100%!important} #kk-mag-news-form .elementor-field-textual{width:100%;background:var(--kk-stone50);border:1px solid rgba(0,0,0,.05);border-radius:12px;padding:12px 16px;font-size:var(--kk-fs-ui, 15px);font-weight:500;color:#000;height:auto;line-height:1.4} #kk-mag-news-form .elementor-field-textual::placeholder{color:rgba(0,0,0,.3)} #kk-mag-news-form .elementor-field-textual:focus{border-color:var(--kk-acc);outline:none;box-shadow:none} #kk-mag-news-form .elementor-button,#kk-mag-news-form button[type="submit"]{width:100%;background:#000;color:#fff;font-size:var(--kk-fs-overline, 11px);font-weight:700;text-transform:uppercase;letter-spacing:.15em;padding:14px;border-radius:30px;border:0;transition:background .2s;min-height:auto} #kk-mag-news-form .elementor-button:hover,#kk-mag-news-form button[type="submit"]:hover{background:#292524;color:#fff} #kk-mag-news-form .elementor-field-group-submit{margin-bottom:0} /* --- Weitere Artikel --- */ #kk-mag-weitere .kk-mag-weitere{background:#fff;border:1px solid var(--kk-line);border-radius:24px;padding:32px;box-shadow:0 1px 2px rgba(0,0,0,.05)} #kk-mag-weitere .kk-mag-weitere__titel{font-family:var(--kk-font-display, Fraunces, Georgia, serif);font-weight:700;font-size:var(--kk-fs-h4, 18px);line-height:1.2;letter-spacing:-.01em;text-transform:uppercase;color:#000;margin:0 0 24px} #kk-mag-weitere .kk-mag-weitere__liste{display:flex;flex-direction:column;gap:24px} #kk-mag-weitere .kk-mag-weitere__item{display:flex;gap:16px;text-decoration:none} #kk-mag-weitere .kk-mag-weitere__bild{width:64px;height:64px;flex:0 0 64px;border-radius:12px;overflow:hidden;background:var(--kk-stone100)} #kk-mag-weitere .kk-mag-weitere__bild img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s} #kk-mag-weitere .kk-mag-weitere__item:hover .kk-mag-weitere__bild img{transform:scale(1.05)} #kk-mag-weitere .kk-mag-weitere__text span{display:block;font-size:var(--kk-fs-overline, 11px);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--kk-acc);margin-bottom:4px} #kk-mag-weitere .kk-mag-weitere__text h4{font-family:var(--kk-font-display, Fraunces, Georgia, serif);font-weight:700;font-size:var(--kk-fs-body-s, 13px);line-height:1.35;text-transform:uppercase;color:#000;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .2s} #kk-mag-weitere .kk-mag-weitere__item:hover h4{color:var(--kk-acc)} /* --- Mobile Feinschliff --- */ @media(max-width:767px){ #kk-mag-produkt .kk-mag-produkt,#kk-mag-weitere .kk-mag-weitere,#kk-mag-news{padding:24px} #kk-mag-share .kk-mag-share{justify-content:flex-start} #kk-mag-share .kk-mag-share__links a,#kk-mag-share .kk-mag-share__copy{padding:8px 12px} #kk-mag-badge{top:16px;left:16px} } /* --- Schriftfamilien: die UI-Sans fuer Fliesstext und Bedienelemente, Fraunces fuer Titel und Zitate. --- */ #kk-mag-root{font-family:var(--kk-font-ui, Red Hat Display, sans-serif)} #kk-mag-artikel p,#kk-mag-artikel ul li,#kk-mag-artikel ol li,#kk-mag-artikel .space-y-4>*:not(h2):not(h3):not(h4), #kk-mag-crumbs .kk-mag-crumbs,#kk-mag-back .kk-mag-back,#kk-mag-meta .kk-mag-meta,#kk-mag-badge .kk-mag-badge, #kk-mag-autor .kk-mag-autor__avatar,#kk-mag-autor .kk-mag-autor__text p,#kk-mag-share .kk-mag-share, #kk-mag-produkt .kk-mag-produkt__kicker,#kk-mag-produkt .kk-mag-produkt__text,#kk-mag-produkt .kk-mag-produkt__preis, #kk-mag-produkt .kk-mag-produkt__cta,#kk-mag-news-text p,#kk-mag-news-form .elementor-field-textual, #kk-mag-news-form .elementor-button,#kk-mag-weitere .kk-mag-weitere__text span{font-family:var(--kk-font-ui, Red Hat Display, sans-serif)} /* Zitat bleibt bewusst in der Serifenschrift wie in der Referenz */ #kk-mag-artikel blockquote,#kk-mag-artikel .border-l-4,#kk-mag-artikel blockquote p,#kk-mag-artikel .border-l-4 p{font-family:var(--kk-font-display, Fraunces, Georgia, serif)} /* Abstandsregel fuer beide Wrapper-Varianten, die Elementor beim dynamischen Artikelfeld rendert (mit und ohne .elementor-widget-container). */ #kk-mag-artikel>*:not(.elementor-widget-container), #kk-mag-artikel .elementor-widget-container>*{margin-bottom:32px} #kk-mag-artikel>*:not(.elementor-widget-container):last-child, #kk-mag-artikel .elementor-widget-container>*:last-child{margin-bottom:0} /* Der Autorenblock wurde aus dem Kopfbereich entfernt. Steht der Titel dadurch als letztes Element, wuerde sein Abstand nach unten auf das Container-Padding addiert – also nur dann zuruecksetzen. */ #kk-mag-title:last-child{margin-bottom:0} /* ============================================================================= * Sidebar bleibt beim Scrollen stehen – knapp unter dem fixierten Kopf. * Der Kopf (.custom-sticky-header) ist 85 px hoch; die Variable macht eine * spaetere Anpassung zu einer Zahl statt zu einer Suche. * Erst ab 1024 px, denn darunter liegt die Sidebar ohnehin unter dem Artikel. * ========================================================================== */ @media(min-width:1024px){ #kk-mag-side{ --kk-head-h:85px; --kk-head-gap:24px; position:sticky; top:calc(var(--kk-head-h) + var(--kk-head-gap)); align-self:start; /* Faengt den Fall ab, dass die Sidebar hoeher wird als der sichtbare Bereich – sonst bliebe ihr unteres Ende unerreichbar. */ max-height:calc(100vh - var(--kk-head-h) - (var(--kk-head-gap) * 2)); overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(0,0,0,.2) transparent; } } /* Nachtrag: Falls eine gemessene Kopfhoehe bereitsteht, hat sie Vorrang vor der festen 85 – dann wandert die Sidebar bei einem hoeher werdenden Kopf mit, statt dahinter zu rutschen. */ @media(min-width:1024px){ #kk-mag-side{--kk-head-h:var(--kk-header-h,85px)} } /* ============================================================================= * Produkthinweis am unteren Bildschirmrand. * Erscheint, sobald der erste Bildschirm verlassen ist - der Ausloeser sitzt * site-weit im Kind-Theme (kk_bottom_bar_reveal) und setzt kk-buybar-on am * body, dieselbe Klasse wie die Kaufleiste der Produktseite. * Sie haengt am unteren Rand und damit an keiner gemessenen Kopfhoehe. * ========================================================================== */ #kk-mag-leiste{padding:0!important} #kk-mag-leiste .kk-magbar{ position:fixed; bottom:0; left:0; right:0; width:100%; z-index:998; border-top:1px solid rgba(10,10,10,.08); opacity:0; visibility:hidden; transform:translateY(8px); pointer-events:none; transition:opacity .28s ease, transform .28s ease, visibility .28s; } /* Die Unschaerfe sitzt auf einem Pseudoelement: ein Element mit backdrop-filter wird sonst selbst zum Bezugsrahmen fuer fixierte Nachfahren. */ #kk-mag-leiste .kk-magbar::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background-color:rgba(255,255,255,.72); backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px); } body.kk-buybar-on #kk-mag-leiste .kk-magbar{opacity:1;visibility:visible;transform:none;pointer-events:auto} #kk-mag-leiste .kk-magbar__inner{ max-width:1180px;margin:0 auto;padding:12px 24px; display:flex;align-items:center;gap:16px; } #kk-mag-leiste .kk-magbar__bild{width:44px;height:44px;flex:0 0 44px;border-radius:10px;overflow:hidden;background:var(--kk-stone100)} #kk-mag-leiste .kk-magbar__bild img{width:100%;height:100%;object-fit:cover;display:block} #kk-mag-leiste .kk-magbar__text{display:flex;flex-direction:column;gap:2px;min-width:0;margin-right:auto} #kk-mag-leiste .kk-magbar__kicker{ font-family:var(--kk-font-ui, Red Hat Display, sans-serif); font-size:var(--kk-fs-overline, 11px);font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--kk-acc);line-height:1.3; } #kk-mag-leiste .kk-magbar__titel{ font-family:var(--kk-font-display, Fraunces, Georgia, serif); font-size:var(--kk-fs-body, 15px);font-weight:700;text-transform:uppercase;color:#000;line-height:1.2; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } #kk-mag-leiste .kk-magbar__preis, #kk-mag-leiste .kk-magbar__preis .woocommerce-Price-amount, #kk-mag-leiste .kk-magbar__preis bdi{ font-family:var(--kk-font-ui, Red Hat Display, sans-serif); font-size:var(--kk-fs-body, 15px);font-weight:700;color:var(--kk-acc);white-space:nowrap;text-decoration:none; } #kk-mag-leiste .kk-magbar__cta{ display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:0 0 auto; background:var(--kk-acc);color:#fff;text-decoration:none; font-family:var(--kk-font-ui, Red Hat Display, sans-serif); font-size:var(--kk-fs-overline, 11px);font-weight:700;text-transform:uppercase;letter-spacing:.15em; padding:12px 22px;border-radius:30px;transition:background .2s; } #kk-mag-leiste .kk-magbar__cta:hover{background:var(--kk-acc-dark);color:#fff} /* Schmale Fenster: der Titel kuerzt, Preis und Knopf bleiben ganz. */ @media(max-width:600px){ #kk-mag-leiste .kk-magbar__inner{padding:10px 16px;gap:12px} #kk-mag-leiste .kk-magbar__bild{display:none} #kk-mag-leiste .kk-magbar__titel{font-size:var(--kk-fs-body-s, 13px)} #kk-mag-leiste .kk-magbar__cta{padding:11px 18px} } /* ============================================================================= * Korrekturen mobil (05.09.2026) * ========================================================================== */ /* 1) Die Leiste ist ein eigener Container NEBEN #kk-mag-root und erbt dessen * Farbvariablen daher nicht - der Knopf blieb ohne Hintergrund (weiss auf * hell) und der Kicker grau. Die Variablen hier also nochmal setzen. */ #kk-mag-leiste{ --kk-acc:var(--e-global-color-accent,#65A30D); --kk-acc-dark:#4D7C0F; --kk-stone100:#F5F5F4; } /* 2) Der Container wird bewusst 100 px nach oben gezogen, damit sein Hintergrund * buendig unter dem Kopf beginnt. Dieser Versatz UND die Kopfhoehe muessen * im Innenabstand wieder drauf, sonst liegen Brotkrumen und Titel hinter dem * fixierten Kopf. Die Kopfhoehe misst das Kind-Theme (--kk-header-h), sie * schwankt je nach Fensterbreite deutlich (92 px am Desktop, 148 px mobil). */ #kk-mag-root{padding-top:calc(100px + var(--kk-header-h,92px) + 32px)} /* 3) Auf schmalen Displays passt die Leiste nicht in eine Zeile: der Kicker * brach um und der Produktname wurde abgeschnitten. Der Kicker entfaellt * dort - der Zusammenhang ergibt sich aus dem Artikel - und der Name * bekommt den Platz. */ @media(max-width:600px){ #kk-mag-leiste .kk-magbar__kicker{display:none} #kk-mag-leiste .kk-magbar__titel{font-size:var(--kk-fs-body, 15px);line-height:1.25} #kk-mag-leiste .kk-magbar__preis, #kk-mag-leiste .kk-magbar__preis .woocommerce-Price-amount, #kk-mag-leiste .kk-magbar__preis bdi{font-size:var(--kk-fs-body, 15px)} #kk-mag-leiste .kk-magbar__cta{padding:11px 16px;font-size:var(--kk-fs-overline, 11px);letter-spacing:.1em;gap:6px} #kk-mag-leiste .kk-magbar__inner{gap:10px} } /* Knopf unter den Empfehlungen, der ins ganze Magazin fuehrt. Bewusst zurueckhaltend (heller Grund, gruene Schrift): die gruene Flaeche in der Sidebar gehoert dem Produkt-Knopf, der schwarze dem Newsletter - eine dritte kraeftige Flaeche wuerde die Rangfolge verwischen. */ #kk-mag-weitere .kk-mag-weitere__alle{ display:flex;align-items:center;justify-content:center;gap:8px; margin-top:24px;padding:14px; border:1px solid rgba(0,0,0,.12);border-radius:30px; font-family:var(--kk-font-ui, Red Hat Display, sans-serif); font-size:var(--kk-fs-overline, 11px);font-weight:700;text-transform:uppercase;letter-spacing:.15em; color:var(--kk-acc);text-decoration:none;transition:all .2s; } #kk-mag-weitere .kk-mag-weitere__alle:hover{ background:var(--kk-acc);border-color:var(--kk-acc);color:#fff; } #kk-mag-weitere .kk-mag-weitere__alle .kk-mag-ico{width:14px;height:14px;transition:transform .2s} #kk-mag-weitere .kk-mag-weitere__alle:hover .kk-mag-ico{transform:translateX(3px)} /* ============================================================ Magazin-Artikel · Mobiler Feinschliff (05.09.2026) ============================================================ */ @media (max-width: 767px){ /* --- Luft unter dem Kopfbereich --- #kk-mag-root wird mit margin-top:-100px nach oben gezogen, damit der Hintergrund buendig unter dem Kopf beginnt. Der Innenabstand muss diese 100px zuerst wieder ausgleichen; alles darueber ist die sichtbare Luft zwischen Kopf und Brotkrumen. In der Grundregel steht zusaetzlich var(--kk-header-h). Am Handy wird die Kopfhoehe damit doppelt gezaehlt: Der Kopf belegt seinen Platz bereits im normalen Textfluss, und sobald er einrastet, stellt Elementor einen Platzhalter derselben Hoehe. Rechnung bisher 100 + 64 + 32 = 196px Innenabstand, davon 96px sichtbare Luft - auf einem Telefonbildschirm ein leeres Achtel. Jetzt 100 + 40 = 140px, also 40px Luft. Bewusst eine feste Zahl statt der Variablen, damit die Kopfhoehe hier nicht ein zweites Mal einfliesst. Desktop bleibt unveraendert. */ #kk-mag-root{ padding-top: 140px; } /* --- Brotkrumen eine Stufe kleiner --- Die Ueberzeilen-Groesse entspricht am Telefon den uebrigen Kleinbeschriftungen; die Laufweite geht leicht mit zurueck, sonst wirkt die Zeile bei kleinerer Schrift zu locker. */ #kk-mag-crumbs .kk-mag-crumbs{ font-size:var(--kk-fs-overline, 11px); letter-spacing: .5px; } }/* End custom CSS */