/* yogamatte-test.de – Prüfstand/Datenblatt. snake_case-Klassen. */
@font-face{font-family:"Sora";src:url(/assets/fonts/sora.woff2) format("woff2");font-weight:100 800;font-display:swap}
@font-face{font-family:"Reddit Sans";src:url(/assets/fonts/reddit-sans.woff2) format("woff2");font-weight:200 900;font-display:swap}

:root{
  --grund:#f6f3ec; --blatt:#fffdf8; --tinte:#1b1f1e; --grau:#4f5553; --linie:#ddd6c6;
  --jade:#0e5b52; --jade_d:#093d37; --jade_h:#e3efec; --mango:#f2a43a; --mango_h:#fdf0dc;
  --mauve:#c7577e; --mauve_d:#9c3a5d;
  --r:14px; --breite:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--grund);color:var(--tinte);font:400 1.0625rem/1.68 "Reddit Sans",system-ui,sans-serif}
img,svg{max-width:100%;height:auto}
a{color:var(--jade);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--mauve_d)}
h1,h2,h3{font-family:"Sora",system-ui,sans-serif;line-height:1.2;letter-spacing:-.015em;color:var(--tinte)}
h1{font-size:clamp(1.8rem,4.2vw,2.75rem);font-weight:700;margin:.2em 0 .4em}
h2{font-size:clamp(1.35rem,2.6vw,1.75rem);font-weight:650;margin:2em 0 .6em}
h3{font-size:1.12rem;font-weight:650;margin:1.5em 0 .4em}
.wrap{max-width:var(--breite);margin:0 auto;padding:0 16px}
.skip_link{position:absolute;left:-999px;top:0;background:var(--tinte);color:#fff;padding:8px 14px;z-index:10}
.skip_link:focus{left:8px}

/* Noppenband wie eine Mattenoberfläche */
.grip_band{height:10px;background-color:var(--jade);background-image:radial-gradient(circle at 3px 3px,rgba(255,255,255,.28) 1.4px,transparent 1.6px);background-size:8px 8px}

/* Kopf */
.site_head{background:var(--blatt);border-bottom:1px solid var(--linie);position:sticky;top:0;z-index:5}
.head_row{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:68px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tinte)}
.brand_word{font:700 1.2rem/1 "Sora",sans-serif;letter-spacing:-.02em}
.brand_dot{color:var(--mango);padding:0 1px}
.mat_tabs ul{display:flex;gap:4px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.mat_tabs a{display:block;padding:8px 13px 7px;border-radius:0 0 10px 10px;border-top:3px solid transparent;text-decoration:none;color:var(--tinte);font-weight:550;font-size:.97rem}
.mat_tabs a:hover{background:var(--jade_h);border-top-color:var(--jade)}
.mat_tabs a[aria-current]{background:var(--jade);color:#fff;border-top-color:var(--mango)}
@media (max-width:760px){
  .site_head{position:static}
  .head_row{padding:10px 0;gap:8px}
  .mat_tabs{width:100%;overflow-x:auto}
  .mat_tabs ul{flex-wrap:nowrap}
  .mat_tabs a{padding:7px 10px;font-size:.92rem;white-space:nowrap;border-radius:8px}
}

/* Allgemeine Bausteine */
.post_kicker{font:600 .78rem/1.3 "Sora",sans-serif;text-transform:uppercase;letter-spacing:.09em;color:var(--mauve_d);margin:0}
.btn{display:inline-block;padding:11px 20px;border-radius:999px;font-weight:650;text-decoration:none;margin:0 10px 10px 0}
.btn_main{background:var(--jade);color:#fff}
.btn_main:hover{background:var(--jade_d);color:#fff}
.btn_line{border:2px solid var(--jade);color:var(--jade)}
.more{font-weight:650;text-decoration:none}
.table_wrap{overflow-x:auto;margin:1.4em 0;border:1px solid var(--linie);border-radius:var(--r);background:var(--blatt)}
table{border-collapse:collapse;width:100%;font-size:.96rem}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--linie);vertical-align:top}
thead th{background:var(--jade_h);font-family:"Sora",sans-serif;font-size:.85rem;font-weight:650}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
.svg_box{background:var(--blatt);border:1px solid var(--linie);border-radius:var(--r);padding:14px;margin:1.5em 0}
.svg_box svg{display:block;margin:0 auto}
.figur_pose{max-width:420px}
.bild{margin:1.6em 0}
.bild img{display:block;width:100%;border-radius:var(--r)}
figcaption{font-size:.88rem;color:var(--grau);margin-top:8px;line-height:1.5}
.credit{display:block;font-size:.8rem}
.note{border-left:5px solid var(--jade);background:var(--jade_h);padding:14px 18px;border-radius:0 var(--r) var(--r) 0;margin:1.5em 0}
.note p{margin:0}
.note .note_title{font:650 .82rem/1.4 "Sora",sans-serif;text-transform:uppercase;letter-spacing:.07em;color:var(--jade_d);margin-bottom:4px}
.note_achtung{border-left-color:var(--mauve);background:#f8e7ed}
.note_achtung .note_title{color:var(--mauve_d)}
.note_kurz{border-left-color:var(--mango);background:var(--mango_h)}
.note_kurz .note_title{color:#7a4a08}
.note_test{border-left-color:var(--tinte);background:#ecebe6}
.faq_item{background:var(--blatt);border:1px solid var(--linie);border-radius:10px;padding:0 16px;margin:10px 0}
.faq_item summary{cursor:pointer;font-weight:650;padding:13px 0;list-style-position:outside}
.faq_item p{margin:0 0 14px}
.amz{font-weight:600}

/* Karten */
.card_grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.card{background:var(--blatt);border:1px solid var(--linie);border-top:5px solid var(--jade);border-radius:6px 6px var(--r) var(--r);padding:16px 18px}
.card:nth-child(3n+2){border-top-color:var(--mango)}
.card:nth-child(3n){border-top-color:var(--mauve)}
.card_tag{font-size:.8rem;color:var(--grau);margin:0 0 4px}
.card_title{margin:0 0 8px;font-size:1.05rem}
.card_title a{color:var(--tinte);text-decoration:none}
.card_title a:hover{color:var(--jade)}
.card p:last-child{margin:0;font-size:.95rem;color:var(--grau)}

/* Startseite */
.home_hero{background:linear-gradient(180deg,var(--blatt),var(--grund));border-bottom:1px solid var(--linie)}
.hero_grid{display:grid;grid-template-columns:1.05fr 1fr;gap:34px;align-items:center;padding-top:44px;padding-bottom:40px}
.hero_lead{font-size:1.14rem;color:var(--grau);max-width:40em}
.chip_row{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:18px 0 22px}
.chip_row li{border:1.5px solid var(--jade);color:var(--jade_d);border-radius:999px;padding:3px 13px;font-size:.9rem;font-weight:600;background:var(--blatt)}
.hero_art svg{width:100%}
@media (max-width:860px){.hero_grid{grid-template-columns:1fr;padding-top:26px}}
.honesty{display:grid;grid-template-columns:150px 1fr;gap:20px;margin-top:34px;align-items:start}
.honesty_label{font:700 .95rem/1.2 "Sora",sans-serif;background:var(--mango);color:var(--tinte);padding:12px 14px;border-radius:var(--r) 0 var(--r) 0;text-align:center}
.honesty_text p{margin:0}
@media (max-width:640px){.honesty{grid-template-columns:1fr;gap:10px}.honesty_label{justify-self:start}}
.home_section{margin-top:56px}
.section_head{max-width:48em}
.section_head h2{margin:.2em 0 .4em}
.section_head p:last-child{color:var(--grau)}
.ruler_list{list-style:none;margin:24px 0 0;padding:0;border-top:2px solid var(--tinte)}
.ruler_row{display:grid;grid-template-columns:70px 1fr 160px;gap:18px;padding:18px 0;border-bottom:1px solid var(--linie);align-items:start}
.ruler_no{font:700 2rem/1 "Sora",sans-serif;color:var(--mango)}
.ruler_text h3{margin:0 0 4px}
.ruler_text p{margin:0 0 6px}
.ruler_scale{height:26px;margin-top:6px;background:repeating-linear-gradient(90deg,var(--tinte) 0 1px,transparent 1px 16px),repeating-linear-gradient(90deg,var(--tinte) 0 1px,transparent 1px 4px);background-size:100% 100%,100% 45%;background-repeat:no-repeat;opacity:.5}
@media (max-width:700px){.ruler_row{grid-template-columns:48px 1fr}.ruler_scale{display:none}.ruler_no{font-size:1.5rem}}
.band_dark{background:var(--jade_d);color:#eef4f2;margin-top:60px;padding:44px 0}
.band_dark h2,.band_dark .section_head p{color:#fff}
.band_dark .post_kicker{color:var(--mango)}
.band_dark a{color:#ffd79e}
.band_dark .table_wrap{border-color:#2d5c55}
.band_dark table{color:var(--tinte)}
.band_dark .table_wrap a{color:var(--jade)}
.band_note{font-size:.88rem;color:#cfe0dc}
.swatch_grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;list-style:none;padding:0;margin:24px 0 0}
.swatch_item{background:var(--blatt);border:1px solid var(--linie);border-radius:var(--r);padding:0 16px 14px;overflow:hidden}
.swatch_item h3{margin:12px 0 4px}
.swatch_item p{margin:0 0 4px;font-size:.95rem}
.swatch{display:block;height:54px;margin:0 -16px}
.swatch_pvc{background:#6b4fa8 radial-gradient(circle at 4px 4px,rgba(255,255,255,.25) 1.5px,transparent 1.8px) 0 0/9px 9px}
.swatch_tpe{background:repeating-linear-gradient(135deg,#3f8f86 0 6px,#4fa097 6px 12px)}
.swatch_kautschuk{background:#2b2d2c radial-gradient(circle at 2px 2px,rgba(255,255,255,.12) 1px,transparent 1.2px) 0 0/5px 5px}
.swatch_kork{background:#c49a63 radial-gradient(circle at 30% 40%,#a57a45 2px,transparent 2.5px) 0 0/11px 13px}
.swatch_baumwolle{background:repeating-linear-gradient(0deg,#d8cdb4 0 3px,#e8dfcb 3px 6px),#e8dfcb;background-blend-mode:multiply}
.swatch_pu{background:linear-gradient(90deg,#f2a43a,#f5bb67)}
.rub_grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;list-style:none;padding:0;margin:24px 0 0}
.rub_grid a{display:grid;grid-template-columns:1fr auto;gap:2px 12px;background:var(--blatt);border:1px solid var(--linie);border-radius:var(--r);padding:16px 18px;text-decoration:none;color:var(--tinte);height:100%}
.rub_grid a:hover{border-color:var(--jade);box-shadow:0 0 0 2px var(--jade_h)}
.rub_name{font:650 1.1rem/1.3 "Sora",sans-serif}
.rub_count{font-size:.82rem;color:var(--jade_d);background:var(--jade_h);border-radius:999px;padding:2px 10px;align-self:start}
.rub_intro{grid-column:1/-1;color:var(--grau);font-size:.95rem}
.home_faq{max-width:860px}
.home_partner{margin-top:40px}

/* Beitrag */
.crumbs ol{display:flex;flex-wrap:wrap;gap:4px;list-style:none;padding:0;margin:22px 0 0;font-size:.87rem;color:var(--grau)}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--linie)}
.crumbs a{color:var(--grau)}
.post_head{max-width:50em;margin-top:18px}
.post_meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.88rem;color:var(--grau);margin:0 0 12px}
.post_meta span+span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--mango);margin-right:10px;vertical-align:middle}
.post_lead{font-size:1.17rem;line-height:1.6;color:#3a403e}
.post_grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:40px;align-items:start;margin-top:8px}
.post_body{max-width:44em}
.post_body>p:first-child{margin-top:0}
.post_body ul,.post_body ol{padding-left:1.3em}
.post_body li{margin:.25em 0}
.spec_card{position:sticky;top:90px;background:var(--blatt);border:2px solid var(--tinte);border-radius:var(--r);padding:0 0 6px;overflow:hidden}
.spec_title{margin:0;background:var(--tinte);color:#fff;font:650 .82rem/1 "Sora",sans-serif;text-transform:uppercase;letter-spacing:.1em;padding:12px 16px}
.spec_card dl{margin:0;padding:4px 16px}
.spec_card div{padding:9px 0;border-bottom:1px dashed var(--linie)}
.spec_card div:last-child{border-bottom:0}
.spec_card dt{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--grau)}
.spec_card dd{margin:0;font-weight:600}
@media (max-width:960px){.post_grid{grid-template-columns:1fr;gap:0}.spec_card{position:static;order:-1;margin-bottom:10px}}
.post_plain{max-width:50em}
.shop_box{margin:2.2em 0;border:2px dashed var(--mango);border-radius:var(--r);background:var(--mango_h);padding:16px 20px}
.shop_badge{display:inline-block;margin:0;background:var(--tinte);color:#fff;font:600 .72rem/1 "Sora",sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:5px 8px;border-radius:4px}
.shop_head{margin:.5em 0 .5em;font-size:1.15rem}
.shop_list{list-style:none;padding:0;margin:0}
.shop_list li{display:flex;flex-direction:column;padding:8px 0;border-bottom:1px solid #f1d9b4}
.shop_hint{font-size:.9rem;color:var(--grau)}
.shop_note{font-size:.82rem;color:var(--grau);margin:10px 0 0}
.sources{border-top:1px solid var(--linie);margin-top:2em}
.sources h2{font-size:1.1rem}
.sources ul{font-size:.95rem}
.prev_next{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:40px 0}
.prev_next a{background:var(--blatt);border:1px solid var(--linie);border-radius:var(--r);padding:14px 18px;text-decoration:none;color:var(--tinte);font-weight:600}
.prev_next span{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--mauve_d);font-weight:600}
.pn_next{text-align:right;grid-column:2}
@media (max-width:640px){.prev_next{grid-template-columns:1fr}.pn_next{grid-column:1;text-align:left}}
.related{margin:30px 0 60px}
.related h2{margin-top:0}

/* Rubrik */
.hub_head{max-width:50em;margin-top:18px}
.hub_grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:36px;align-items:start}
.hub_text{max-width:44em}
@media (max-width:900px){.hub_grid{grid-template-columns:1fr}}
.index_list{list-style:none;padding:0;margin:28px 0;border-top:2px solid var(--tinte)}
.index_row{display:grid;grid-template-columns:54px 1fr auto;gap:14px;padding:14px 0;border-bottom:1px solid var(--linie);align-items:baseline}
.index_no{font:700 1.2rem/1 "Sora",sans-serif;color:var(--jade)}
.index_row a{font:650 1.06rem/1.35 "Sora",sans-serif;text-decoration:none;color:var(--tinte)}
.index_row a:hover{color:var(--jade)}
.index_row p{margin:4px 0 0;color:var(--grau);font-size:.95rem}
.index_time{font-size:.82rem;color:var(--grau);white-space:nowrap}
.page_wrap{padding-bottom:60px}
.sitemap_cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:0 30px}
.sitemap_cols h2{font-size:1.15rem}
.legal h2{font-size:1.2rem}

/* Fuß */
.site_foot{background:var(--jade_h);margin-top:40px;padding-bottom:20px;font-size:.95rem}
.roll_edge{height:18px;background:radial-gradient(circle at 9px 0,var(--grund) 8px,transparent 8.5px) 0 0/18px 18px repeat-x}
.foot_grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px;padding-top:26px}
.foot_grid ul{list-style:none;padding:0;margin:0}
.foot_grid li{margin:4px 0}
.foot_grid a{color:var(--jade_d)}
.foot_brand{display:flex;align-items:center;gap:8px;font:700 1.1rem/1 "Sora",sans-serif}
.foot_head{font:650 .8rem/1 "Sora",sans-serif;text-transform:uppercase;letter-spacing:.1em;color:var(--mauve_d)}
.foot_ad{font-size:.85rem;color:var(--grau)}
.foot_small{font-size:.82rem;color:var(--grau);margin-top:24px}
@media (max-width:760px){.foot_grid{grid-template-columns:1fr 1fr}.foot_about{grid-column:1/-1}}