/* ============================================================
   OrdnungsKiste — main.css
   Konsolidierter <style>-Block aus den Design-Dateien (Home ist
   am vollstaendigsten) + zusaetzliche Klassen aus Artikel,
   Kategorie, Vergleich, Kontakt, Suche und den Rechtstext-Seiten.
   ============================================================ */

*{box-sizing:border-box}
:root{--paper:#eef0ed;--paper2:#e4e8e3;--ink:#1f2a2b;--ink2:#2c3a3b;--petrol:#3f6f77;--petrol-d:#2f565d;--sand:#c7ac84;--sand-d:#b6986b;--clay:#b07d62;--blue:#5b7c99;--mut:rgba(31,42,43,.6);--mut2:rgba(31,42,43,.4);--line:rgba(31,42,43,.12);--card:#fff}
html{scroll-behavior:smooth}
#rubriken,#methode,#beitraege,#favoriten,#newsletter,#faq{scroll-margin-top:90px}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);font-family:'Schibsted Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:rgba(63,111,119,.2)}
a{color:inherit;text-decoration:none}
input,button,textarea,select{font-family:inherit}
summary::-webkit-details-marker{display:none}summary::marker{content:''}
img{max-width:100%;height:auto}
.or-d{font-family:'Schibsted Grotesk',sans-serif}
.or-eye{font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--petrol)}

/* ---------- Scroll-Reveal ---------- */
[data-rv]{opacity:0;transform:translateY(28px);transition:opacity .85s cubic-bezier(.22,.61,.36,1),transform .85s cubic-bezier(.22,.61,.36,1)}
[data-rv].in{opacity:1;transform:none}

/* ---------- Animierter Unterstrich-Link ---------- */
.or-link{position:relative}
.or-link::after{content:'';position:absolute;left:0;right:100%;bottom:-3px;height:1.5px;background:var(--petrol);transition:right .35s ease}
.or-link:hover::after{right:0}

/* ---------- Buttons ---------- */
.or-btn{transition:transform .35s,box-shadow .35s}
.or-btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(63,111,119,.28)}

/* ---------- Keyframes ---------- */
@keyframes orfaq{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes or4{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* ---------- Karten / Kacheln (Hover) ---------- */
.or-card{transition:transform .5s cubic-bezier(.22,.61,.36,1),box-shadow .5s,border-color .5s}
.or-card:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(31,42,43,.12)}
.or-card:hover .or-img,.or-card:hover .or-cimg{transform:scale(1.05)}
.or-tile{transition:transform .5s cubic-bezier(.22,.61,.36,1),box-shadow .5s}
.or-tile:hover{transform:translateY(-6px);box-shadow:0 26px 52px rgba(31,42,43,.14)}
.or-tile:hover .or-img,.or-tile:hover .or-cimg{transform:scale(1.06)}
.or-tile:hover .or-arr{transform:translate(4px,-4px)}
.or-pin{opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .3s,filter .25s}
.or-card:hover .or-pin,.or-tile:hover .or-pin,.or-pin:focus-visible{opacity:1;transform:none}
.or-pin:hover{filter:brightness(1.05)}
@media(hover:none){.or-pin{opacity:1;transform:none}}

/* ---------- Mini-Routine-Checkliste (Hero) ---------- */
.or-chk{cursor:pointer}
.or-chk .box{transition:background .3s,border-color .3s}
.or-chk .tick{stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .35s ease}
.or-chk .lbl{transition:color .3s}
.or-chk.done .box{background:var(--petrol);border-color:var(--petrol)}
.or-chk.done .tick{stroke-dashoffset:0}
.or-chk.done .lbl{color:var(--mut2);text-decoration:line-through}

/* ---------- FAQ (details) ---------- */
.or-faq summary:hover .or-fq{color:var(--petrol)}
.or-faq[open] .or-fic{transform:rotate(135deg);background:var(--petrol);border-color:var(--petrol);color:#fff}
.or-faq[open] .or-fn{color:var(--petrol)}
.or-faq[open] > .or-fa{animation:orfaq .42s cubic-bezier(.22,.61,.36,1)}

/* ---------- Bild-Platzhalter (kein <image-slot> mehr) ---------- */
.or-ph-img{display:block;width:100%;height:100%;background:linear-gradient(150deg,#e7eae6 0%,var(--paper2) 52%,#d9ddd7 100%);position:relative}
.or-ph-img::after{content:"OrdnungsKiste";position:absolute;inset:0;display:grid;place-items:center;font-family:'Schibsted Grotesk',sans-serif;font-weight:700;font-size:clamp(15px,2.6vw,22px);color:rgba(63,111,119,.34);letter-spacing:.01em}

/* ---------- Beitragskarte — KLASSENBASIERT (robust, unabhaengig von Inline-Styles) ----------
   Layout/Optik kommen komplett aus diesen Klassen, damit Karten auch dann
   korrekt aussehen, wenn Inline-Styles fehlen (Optimizer/AMP/alte Datei). */
.or-postgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px;align-items:stretch}
.or-postgrid--wide{grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:22px}
@media(max-width:540px){.or-postgrid{grid-template-columns:1fr;gap:18px}}
.or-card{position:relative;display:flex;flex-direction:column;height:100%;border-radius:18px;overflow:hidden;background:var(--card);border:1px solid var(--line);box-shadow:0 12px 32px rgba(31,42,43,.06);color:inherit;text-decoration:none}
.or-card__link{color:inherit;text-decoration:none}
.or-card__link::after{content:"";position:absolute;inset:0;z-index:1}
.or-card__media{position:relative;display:block;aspect-ratio:4/3;min-height:150px;overflow:hidden;background:linear-gradient(150deg,#e7eae6,var(--paper2) 55%,#d9ddd7)}
.or-card__media>img,.or-card__media .or-cimg,.or-card__media .or-ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.or-card__cat{position:absolute;left:12px;top:12px;z-index:3;padding:5px 11px;border-radius:999px;background:var(--petrol);color:#fff;font-size:10.5px;font-weight:600;letter-spacing:.02em}
.or-card__body{display:flex;flex-direction:column;flex:1;padding:17px 19px 19px}
.or-card__title{margin:0;font-family:'Schibsted Grotesk',sans-serif;font-size:19px;font-weight:700;line-height:1.2;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.4em}
.or-card__meta{display:flex;align-items:center;gap:9px;margin-top:auto;padding-top:12px;font-size:12px;font-weight:500;color:var(--mut)}
.or-card__meta .or-dot{opacity:.5}
/* Pinterest-"Merken"-Button als Overlay (klassenbasiert) */
.or-pin--mini,.or-pin--card{position:absolute;top:13px;right:13px;z-index:4;background:#e60023;color:#fff;box-shadow:0 8px 18px rgba(230,0,35,.4);cursor:pointer}
.or-pin--mini{display:grid;place-items:center;width:32px;height:32px;border-radius:50%}
.or-pin--card{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;font-size:11px;font-weight:700}

/* ---------- Artikel-Body (single / .or-prose) ---------- */
.or-prose>p{margin:0 0 20px;font-size:17px;line-height:1.8;color:rgba(31,42,43,.82)}
.or-prose h2{font-family:'Schibsted Grotesk',sans-serif;font-weight:700;font-size:clamp(23px,3vw,30px);letter-spacing:-.02em;margin:38px 0 14px;color:var(--ink)}
.or-prose h3{font-family:'Schibsted Grotesk',sans-serif;font-weight:700;font-size:clamp(19px,2.4vw,24px);margin:30px 0 10px;color:var(--ink)}
.or-prose ul,.or-prose ol{margin:0 0 20px;padding-left:22px}
.or-prose li{font-size:16px;line-height:1.75;color:rgba(31,42,43,.82);margin:0 0 8px}
.or-prose strong{font-weight:700;color:var(--ink)}
.or-prose a{color:var(--petrol);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(63,111,119,.4)}
.or-prose img{border-radius:14px;margin:30px 0;box-shadow:0 18px 44px rgba(31,42,43,.12)}
.or-prose blockquote{margin:26px 0;padding:18px 24px;border-left:3px solid var(--petrol);font-family:'Schibsted Grotesk',sans-serif;font-size:clamp(20px,2.4vw,21px);font-weight:600;line-height:1.4;color:var(--ink)}
.or-prose blockquote p{margin:0;font-size:inherit;line-height:inherit;color:inherit}

/* ---------- Vergleichs-/Bestenlisten-Karten ---------- */
.or-vrow{transition:transform .4s,box-shadow .4s}
.or-vrow:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(31,42,43,.12)}
.or-ctable{width:100%;border-collapse:collapse;min-width:560px;font-size:14px}
.or-tablewrap{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--card)}
@media(max-width:780px){.or-tablewrap{overflow-x:auto}.or-rank-row{grid-template-columns:1fr!important}}

/* ---------- Rechtstext / Lese-Seiten ---------- */
.or-legal h2{font-family:'Schibsted Grotesk',sans-serif;font-weight:700;font-size:21px;letter-spacing:-.01em;margin:32px 0 9px;color:var(--ink)}
.or-legal h3{font-family:'Schibsted Grotesk',sans-serif;font-weight:700;font-size:18px;margin:24px 0 8px;color:var(--ink)}
.or-legal p{font-size:15px;line-height:1.75;color:var(--mut);margin:0 0 12px}
.or-legal ul,.or-legal ol{margin:0 0 14px;padding-left:22px;font-size:15px;line-height:1.75;color:var(--mut)}
.or-legal strong{color:var(--ink);font-weight:700}
.or-legal a{color:var(--petrol);text-decoration:underline;text-underline-offset:3px}

/* ---------- Formularfelder (Kontakt) ---------- */
.or-in{padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:var(--card);font-size:15px;color:var(--ink);outline:none;width:100%;transition:border-color .3s}
.or-in:focus{border-color:var(--petrol);box-shadow:0 0 0 4px rgba(63,111,119,.08)}

/* ---------- WP-Pagination ---------- */
.or-pagination{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:50px;flex-wrap:wrap}
.or-pagination .page-numbers{display:grid;place-items:center;min-width:44px;height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:var(--card);font-family:'Schibsted Grotesk',sans-serif;font-size:15px;font-weight:600;color:var(--ink);transition:border-color .3s,color .3s}
.or-pagination .page-numbers:hover{border-color:var(--petrol);color:var(--petrol)}
.or-pagination .page-numbers.current{border-color:transparent;background:var(--petrol);color:#fff}
.or-pagination .page-numbers.dots{border:none;background:transparent;color:var(--mut2)}

/* ---------- Kommentare ---------- */
.or-comments{max-width:760px;margin:48px auto 0;padding:0 clamp(20px,5vw,40px)}
.or-comments .comment-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.or-comments .comment-list ul.children{list-style:none;margin:14px 0 0 24px;padding-left:18px;border-left:2px solid var(--line);display:flex;flex-direction:column;gap:16px}
.or-comment-body{padding:22px 24px;border-radius:16px;background:var(--card);border:1px solid var(--line);box-shadow:0 12px 30px rgba(31,42,43,.06)}
.or-comments .comment-author{font-weight:700;color:var(--ink)}
.or-comments .comment-meta{font-size:12px;color:var(--mut2);margin-bottom:8px}
.or-comments p{font-size:14.5px;line-height:1.65;color:rgba(31,42,43,.78)}
.or-comment-form input[type=text],.or-comment-form input[type=email],.or-comment-form input[type=url],.or-comment-form textarea{width:100%;padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:14.5px;outline:none;margin-bottom:14px;transition:border-color .3s,box-shadow .3s}
.or-comment-form input:focus,.or-comment-form textarea:focus{border-color:var(--petrol);box-shadow:0 0 0 4px rgba(63,111,119,.08)}
.or-comment-form .submit{padding:14px 30px;border:none;border-radius:12px;font-size:14.5px;font-weight:600;color:#fff;background:var(--petrol);box-shadow:0 12px 28px rgba(63,111,119,.28);cursor:pointer;transition:transform .35s}
.or-comment-form .submit:hover{transform:translateY(-2px)}

/* ---------- Affiliate-Box-Shortcode ---------- */
.or-affbox{margin:32px 0;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--petrol);border-radius:0 16px 16px 0;padding:22px 24px;box-shadow:0 14px 34px rgba(31,42,43,.07)}

/* ---------- Skip-Link (a11y) ---------- */
.or-skip{position:absolute;left:-9999px;top:0;z-index:300;padding:12px 20px;background:var(--card);color:var(--ink);border-radius:0 0 12px 0}
.or-skip:focus{left:0}

/* ---------- Layout-Helfer / responsive ---------- */
@media(max-width:900px){.or-hero{grid-template-columns:1fr!important}.or-cat3{grid-template-columns:1fr!important}}
@media(max-width:920px){.or-art{grid-template-columns:1fr!important}.or-aside{position:static!important}}
@media(max-width:960px){.or-2col{grid-template-columns:1fr!important}}
@media(max-width:680px){.or-nav-d{display:none!important}.or-hide-sm{display:none!important}}
@media(max-width:620px){.or-nav-d{display:none!important}.or-hide-sm{display:none!important}}

/* ---------- prefers-reduced-motion ---------- */
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto}[data-rv]{opacity:1;transform:none}}

/* mobile-overflow-fix: breite Inhalte (Tabellen/Code) sprengen die Seite nicht mehr */
.or-art,.or-art>*,.or-2col,.or-2col>*,.or-prose{min-width:0}
.or-prose{overflow-wrap:break-word;word-wrap:break-word}
.or-prose table{display:block;width:100%;max-width:100%;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.or-prose .or-ctable{min-width:0}
.or-prose figure,.or-prose .wp-block-table{max-width:100%;overflow-x:auto;margin-left:0;margin-right:0}
.or-prose pre{max-width:100%;overflow-x:auto}

/* kk-cls-v1:begin
 * Reserviert die Bildbox fuer die vier Bildklassen der Publish-Pipeline, auch
 * wenn im Markup weder width/height stehen (Amazon-CDN-Bilder haben keine
 * verlaesslichen Masse) noch der Beitrag sein Inline-<style> mitbringt.
 *
 * WICHTIG — Spezifitaet: alle Selektoren stehen bewusst in :where(), damit sie
 * exakt (0,1,0) wiegen, also GENAU so schwer wie das Inline-CSS der
 * Artikel-Templates (.kk-section-img{...}). Da dieses Stylesheet im <head>
 * liegt und das Beitrags-CSS spaeter im <body> folgt, gewinnt bei Gleichstand
 * das Beitrags-CSS -> die 4.268 Beitraege mit eigenem Inline-Block behalten
 * ihre Seitenverhaeltnisse (16/10, 4/3, 21/9 ...), hier greift nur der
 * Fallback. width/height-Attribute im <img> schlagen aspect-ratio ohnehin
 * nicht, weil height:auto gesetzt ist.
 *
 * Nur <img> wird getroffen: .kk-hero ist auf der Startseite AUCH ein
 * Grid-Container (Hero-Sektion), und der Legacy-Hero ist ein
 * <figure class="wp-block-image kk-hero"> mit width/height am inneren <img>.
 * Beide bleiben unberuehrt.
 */
:where(img).kk-hero { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
:where(img).kk-section-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
:where(img).kk-product-img { width: 136px; height: 136px; object-fit: contain; }
:where(a).kk-aff-img-link { display: block; width: 100%; aspect-ratio: 1 / 1; }
:where(img).kk-aff-img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 520px) {
	:where(img).kk-product-img { width: 100%; height: 160px; }
}
/* kk-cls-v1:end */