/* KaffeePasst Design v2 (Simon 154083, 31.10.2026): gleiche Sprache wie OfenPasst/ChinaPasst. Überschreib-Schicht hinter style.css,
   Markenton Kaffeebraun (hsl 28), stehender Hintergrund mit Bohnen und Dampf. Kauf-Knöpfe bleiben grün (Conversion-Token aus style.css). */
@font-face{font-family:'Inter var';src:url('/fonts/inter.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Poppins';src:url('/fonts/poppins-800.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Poppins';src:url('/fonts/poppins-600.woff2') format('woff2');font-weight:600;font-display:swap}
:root{
  --m-50:hsl(28 40% 95%);--m-100:hsl(28 40% 88%);--m-300:hsl(28 32% 64%);--m-500:hsl(28 48% 32%);--m-600:hsl(28 50% 26%);--m-700:hsl(28 48% 20%);
  --ink2:hsl(28 30% 6%);--navy2:hsl(28 24% 11%);
  --creme:hsl(40 33% 97%);--creme-2:hsl(38 30% 93%);
  --g100:hsl(35 14% 87%);--g400:hsl(30 6% 46%);--g500:hsl(30 10% 33%);--g900:hsl(28 20% 12%);
  --e1:0 1px 2px hsl(30 30% 20%/.07),0 3px 10px hsl(30 30% 20%/.06);--e2:0 6px 14px hsl(30 30% 20%/.10),0 14px 40px hsl(30 30% 20%/.10);--e3:0 30px 70px -20px hsl(28 60% 4%/.7);
  --bg:var(--creme);--card:#fff;--ink:var(--g900);--muted:var(--g500);--line:var(--g100);
  --brand:var(--m-500);--brand-dark:var(--m-700);--accent:var(--m-500);--accent-dark:var(--m-600);--shadow:var(--e2);--radius:16px;
}
body.op2{font-family:'Inter var',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--creme);color:var(--g900);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.op2::before{content:"";position:fixed;inset:0;z-index:-1;background:url(/hintergrund.svg?v=40f73b) center/cover no-repeat;pointer-events:none}
body.op2 h1,body.op2 h2,body.op2 h3{font-family:'Poppins','Inter var',system-ui,sans-serif;letter-spacing:-.015em}
body.op2 h1{font-weight:800;line-height:1.12}
body.op2 main h2{font-weight:800;font-size:clamp(1.4rem,2.8vw,1.95rem);margin:3rem 0 1rem;border:0;padding:0}
body.op2 h3{font-weight:600}
body.op2 main.wrap{max-width:1120px;padding-left:22px;padding-right:22px}
@media(max-width:640px){body.op2 main.wrap{padding-left:16px;padding-right:16px}}
body.op2 a{color:var(--m-700)}
/* Kopf: hell, mit Navigation */
body.op2 .site-header{background:hsl(40 33% 98%/.92);color:var(--g900);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--g100);box-shadow:none}
body.op2 .header-inner{max-width:1120px;padding:10px 22px;grid-template-columns:auto 1fr auto}
body.op2 .site-header .logo{display:inline-flex;align-items:center;gap:10px;color:var(--g900);font-family:'Poppins',sans-serif;font-weight:800;letter-spacing:-.02em;font-size:1.35rem}
body.op2 .op2-emblem{width:32px;height:32px;color:var(--m-500);flex:0 0 auto}
body.op2 .site-header .logo .op2-wort span{color:var(--m-500)}
body.op2 .op2-nav{display:flex;justify-content:flex-end;gap:2px;flex-wrap:wrap}
body.op2 .op2-nav a{color:var(--g500);font-weight:500;border-radius:8px;padding:.45rem .7rem;text-decoration:none;font-size:.95rem}
body.op2 .op2-nav a:hover{background:var(--m-50);color:var(--m-700)}
body.op2 .live-counter{background:var(--creme-2);color:var(--g500);font-size:.78rem}
body.op2 .live-counter strong{color:var(--g900)}
body.op2 .topbar-back{color:var(--g900)}
@media(max-width:1000px){body.op2 .live-counter{display:none}body.op2 .header-inner{grid-template-columns:auto 1fr}}
@media(max-width:760px){body.op2 .header-inner{grid-template-columns:1fr;gap:4px;padding:8px 16px}body.op2 .op2-nav{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:0 10px;scrollbar-width:none}body.op2 .op2-nav a{flex:0 0 auto;font-size:.9rem;padding:.4rem .6rem}}
body.op2 .crumbs{color:var(--g400);max-width:1120px;padding-left:22px;padding-right:22px}body.op2 .crumbs a{color:var(--g500)}
/* Knöpfe */
body.op2 .cta{border-radius:12px;font-weight:700}
body.op2 .hero-btn{border-radius:12px;border:1.5px solid var(--m-500);color:var(--m-700);font-weight:700;background:#fff}
body.op2 .hero-btn:hover{background:var(--m-50)}
body.op2 .fq-go,body.op2 .fw-start{border-radius:12px}
/* Hero Startseite: dunkles Band, Bild rechts */
.op2-hero{position:relative;background:linear-gradient(160deg,var(--navy2),var(--ink2));color:#fff;padding:48px 0 120px;overflow:hidden}
.op2-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 520px at 85% -10%,hsl(28 70% 38%/.42),transparent 60%);pointer-events:none}
.op2-hero-in{position:relative;max-width:1120px;margin:0 auto;padding:0 22px;display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.op2-eyebrow{display:inline-flex;background:hsl(0 0% 100%/.08);border:1px solid hsl(0 0% 100%/.14);border-radius:99px;padding:.35rem .9rem;font-size:.85rem;color:hsl(32 25% 86%);margin-bottom:1.1rem}
body.op2 .op2-hero h1{color:#fff;font-size:clamp(1.9rem,4.2vw,3rem);margin:0}
body.op2 .op2-hero h1 em{color:var(--m-300);font-style:normal}
body.op2 .op2-hero .sub{color:hsl(32 14% 82%);font-size:1.08rem;margin:1rem 0 1.4rem;line-height:1.6}
body.op2 .op2-hero .sub strong{color:#fff}
body.op2 .op2-hero .searchbox{max-width:none;margin:0}
body.op2 .op2-hero .searchbox input{border:0;border-radius:14px;padding:17px 20px;box-shadow:var(--e3);font-size:1.02rem}
body.op2 .op2-hero .searchbox input:focus{outline:3px solid var(--m-300)}
body.op2 .op2-hero .hero-hint{color:hsl(32 10% 70%);font-size:.88rem;margin:.7rem 0 0;text-align:left}
.op2-heroimg{position:relative;margin:0;border-radius:18px;overflow:hidden;box-shadow:var(--e3);aspect-ratio:4/3}
.op2-heroimg picture,.op2-heroimg img{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:860px){.op2-hero{padding:32px 0 96px}.op2-hero-in{grid-template-columns:1fr;gap:26px;padding:0 16px}.op2-heroimg{aspect-ratio:16/9}}
/* Kennzahlen-Karte ragt in den Hero */
.op2-kennz{position:relative;z-index:2;margin-top:-72px}
.op2-kennz-in{max-width:1120px;margin:0 auto;padding:0 22px}
.op2-kennz dl{display:grid;grid-template-columns:repeat(4,1fr);margin:0;background:#fff;border-radius:20px;box-shadow:var(--e2);overflow:hidden}
.op2-kennz dl>div{padding:22px 24px;border-left:1px solid var(--g100)}.op2-kennz dl>div:first-child{border-left:0}
.op2-kennz dt{font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(1.3rem,2.5vw,1.9rem);line-height:1.1;letter-spacing:-.02em;color:var(--m-600)}
.op2-kennz dd{margin:6px 0 0;color:var(--g500);font-size:.9rem}
@media(max-width:720px){.op2-kennz{margin-top:-60px}.op2-kennz-in{padding:0 16px}.op2-kennz dl{grid-template-columns:1fr 1fr}.op2-kennz dl>div{padding:16px;border-left:0}.op2-kennz dl>div:nth-child(even){border-left:1px solid var(--g100)}.op2-kennz dl>div:nth-child(n+3){border-top:1px solid var(--g100)}}
/* Hinweis-Kästen */
body.op2 .starter-cta{margin-top:2.4rem;background:#fff;border:0;border-left:4px solid var(--m-500);border-radius:16px;box-shadow:var(--e1);padding:18px 22px}
body.op2 .starter-cta:hover{box-shadow:var(--e2);background:#fff}
body.op2 .starter-cta strong,body.op2 .starter-txt strong{color:var(--g900)}
body.op2 .starter-arrow{color:var(--m-500)}
body.op2 .callout{background:#fff;border-left:4px solid var(--m-500);border-radius:14px;box-shadow:var(--e1)}
body.op2 .callout strong{color:var(--m-700)}
body.op2 .quick-answer{background:#fff;border:0;border-left:4px solid var(--m-500);border-radius:14px;box-shadow:var(--e1)}
body.op2 .quick-answer strong{color:var(--m-700)}
body.op2 .ratgeber-banner{background:#fff;border:0;border-radius:16px;box-shadow:var(--e1)}
body.op2 .ratgeber-banner:hover{box-shadow:var(--e2);background:#fff}
/* Finder */
body.op2 .fw-intro{background:#fff;border:0;border-radius:18px;box-shadow:var(--e1);padding:18px 22px}
body.op2 .fw-body,body.op2 .fq-results{border:0;border-radius:18px;box-shadow:var(--e2)}
body.op2 .fw-bar{background:var(--creme-2)}
body.op2 .fq-opt{border-radius:12px}
/* Marken-Kacheln mit Logo */
body.op2 .brand-grid{gap:14px}
body.op2 .brand-tile{border:0;border-radius:16px;box-shadow:var(--e1);background:#fff;text-decoration:none;color:var(--g900);min-height:96px}
body.op2 .brand-tile:hover{box-shadow:var(--e2);transform:translateY(-2px)}
body.op2 .brand-tile .bt-name{font-family:'Poppins',sans-serif;font-weight:600}
body.op2 .op2-marke{gap:10px;padding:18px 12px 14px}
body.op2 .op2-logo{display:grid;place-items:center;height:40px;width:100%}
body.op2 .op2-logo img{max-height:34px;max-width:80%;width:auto;height:auto;transition:.25s}
body.op2 .op2-marke:hover .op2-logo img{transform:scale(1.06)}
body.op2 .op2-marke .bt-name{font-size:.82rem;font-weight:600;color:var(--g400);font-family:'Inter var',sans-serif}
body.op2 .op2-logo-mini{display:inline-grid;place-items:center;height:30px;margin:0 0 6px}body.op2 .op2-logo-mini img{max-height:30px;width:auto}
/* Kategorie-Karten: Bild bis an den Rand */
body.op2 .cat-card{padding:0;border:0;border-radius:16px;box-shadow:var(--e1);overflow:hidden;gap:0;background:#fff}
body.op2 .cat-card:hover{box-shadow:var(--e2);transform:translateY(-2px)}
body.op2 .cat-card .imgbox{height:130px;border-radius:0}
body.op2 .cat-card .imgbox img{height:130px;border-radius:0}
body.op2 .cat-card>span:last-child{display:block;width:100%;padding:12px 14px 14px;font-family:'Poppins',sans-serif;font-weight:600;font-size:.98rem;text-align:left}
/* Produktkarten */
body.op2 .pcard{border:0;border-radius:16px;box-shadow:var(--e1)}
body.op2 .pcard:hover{box-shadow:var(--e2)}
body.op2 .pcard-img{padding:0;background:#fff;border-bottom:1px solid var(--g100)}
body.op2 .pcard-img .imgbox{height:170px;border:0;border-radius:0;padding:14px}
body.op2 .pcard-img .imgbox img{max-height:142px}
body.op2 .pcard-body{padding:14px 16px 16px}
body.op2 .pcard-kind{color:var(--m-600);letter-spacing:.1em;font-weight:800}
body.op2 .pcard h3{font-family:'Poppins',sans-serif;font-weight:600;font-size:1.02rem;line-height:1.3}
body.op2 .pcard .cta{border-radius:12px;padding:12px 16px}
/* Ratgeber-Karten */
body.op2 .rat-card{border:0;border-radius:16px;box-shadow:var(--e1)}
body.op2 .rat-card:hover{box-shadow:var(--e2)}
body.op2 .rat-card .imgbox{border:0;border-radius:0}
body.op2 .rat-card-b h3{font-family:'Poppins',sans-serif}
body.op2 .rat-card-cta{color:var(--m-600)}
/* Unterseiten-Kopf */
body.op2 .hero-inner{padding:30px 0 6px}
body.op2 .hero-inner h1{font-size:clamp(1.8rem,3.8vw,2.6rem)}
body.op2 .hero-inner .sub{color:var(--g500);max-width:760px;margin-left:auto;margin-right:auto}
body.op2 .device-hero .imgbox.product,body.op2 .device-hero .imgbox.device{border:0;border-radius:18px;box-shadow:var(--e1)}
body.op2 .brand-eyebrow{color:var(--m-600);letter-spacing:.12em}
/* Tabellen, FAQ, Chips */
body.op2 .cmp-table{border:0;border-radius:16px;box-shadow:var(--e1)}
body.op2 .cmp-table thead th{background:var(--m-600);color:#fff;font-family:'Poppins',sans-serif;font-weight:600}
body.op2 .cmp-table tbody tr:nth-child(even){background:var(--creme)}
body.op2 .cmp-table tbody tr:hover{background:var(--m-50)}
body.op2 .cmp-table td a{background:var(--m-50);color:var(--m-700)}
body.op2 .cmp-table td a:hover{background:var(--m-500);color:#fff}
body.op2 .faq-item{border:0;border-radius:14px;box-shadow:var(--e1)}
body.op2 .faq-item summary::after{color:var(--m-500)}
body.op2 .faq-item summary:hover{color:var(--m-700)}
body.op2 .blog-hero-img{border:0;border-radius:18px;box-shadow:var(--e1)}
body.op2 .searchbox input{border-radius:14px}
body.op2 .suggest{border-radius:14px}body.op2 .suggest li a:hover,body.op2 .suggest li.active a{background:var(--m-50)}
/* Fuß */
body.op2 .site-footer{background:hsl(38 30% 93%/.92);color:var(--g500);border-top:1px solid var(--g100)}
body.op2 .site-footer .wrap{max-width:1120px}
body.op2 .site-footer a{color:var(--g500)}
body.op2 .op2-nachweis{font-size:.74rem}
/* Feinschliff 1 */
body.op2 a.cta,body.op2 .cta{color:var(--cta-fg,#fff)}
body.op2 a.starter-cta{color:var(--g900)}
body.op2 .site-header .logo .op2-wort{color:var(--g900)}
body.op2 .brand-tile,body.op2 .cat-card,body.op2 .rat-card,body.op2 .ratgeber-banner{color:var(--g900)}
/* Ratgeber: Überschriften ohne Balken, mitlaufende Navigation (op2.js) */
body.op2 article.ratgeber h2{padding-left:0}body.op2 article.ratgeber h2::before{display:none}
html{scroll-padding-top:84px}
body.op2 .op2-seitennav{display:none}
@media(min-width:1520px){body.op2 .op2-seitennav{display:block;position:fixed;top:100px;left:calc(50% + 584px);width:min(240px,calc(50vw - 610px));max-height:calc(100vh - 140px);overflow:auto;padding:16px 14px;background:#fff;border-radius:16px;box-shadow:var(--e1);z-index:30}}
body.op2 .op2-seitennav b{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--g400);margin:0 0 8px 8px}
body.op2 .op2-seitennav ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
body.op2 .op2-seitennav li a{display:block;padding:7px 8px 7px 10px;border-left:3px solid transparent;border-radius:0 8px 8px 0;color:var(--g500);text-decoration:none;font-size:.88rem;line-height:1.3}
body.op2 .op2-seitennav li a:hover{background:var(--creme);color:var(--g900)}
body.op2 .op2-seitennav li a.an{border-left-color:var(--m-500);background:var(--m-50);color:var(--m-700);font-weight:600}
body.op2 .op2-hoch{display:block;margin:10px 8px 0;padding-top:10px;border-top:1px solid var(--g100);color:var(--m-600);font-weight:700;font-size:.88rem;text-decoration:none}
body.op2 .op2-mobilnav{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:60;display:grid;grid-template-columns:1fr 48px;gap:8px}
body.op2 .op2-mobilnav[hidden]{display:none}
@media(min-width:1520px){body.op2 .op2-mobilnav{display:none!important}}
body.op2 .op2-mn-knopf,body.op2 .op2-mn-hoch{min-height:48px;border:0;border-radius:14px;background:hsl(28 24% 11%/.94);color:#fff;backdrop-filter:blur(8px);box-shadow:var(--e2);font:600 .92rem 'Inter var',sans-serif}
body.op2 .op2-mn-knopf{display:flex;align-items:center;gap:10px;padding:0 14px;text-align:left;cursor:pointer;min-width:0}
body.op2 .op2-mn-nr{font-size:.78rem;color:var(--m-300);font-weight:700;flex:0 0 auto}body.op2 .op2-mn-titel{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.op2 .op2-mn-pfeil{transition:.2s}body.op2 .op2-mobilnav.offen .op2-mn-pfeil{transform:rotate(180deg)}
body.op2 .op2-mn-hoch{display:grid;place-items:center;text-decoration:none;font-size:1.2rem;color:#fff}
body.op2 .op2-mn-liste{grid-column:1/-1;grid-row:1;list-style:none;margin:0 0 8px;padding:8px;background:#fff;border-radius:16px;box-shadow:var(--e3);max-height:60vh;overflow:auto}
body.op2 .op2-mobilnav.offen{grid-template-rows:auto auto}body.op2 .op2-mobilnav.offen .op2-mn-knopf,body.op2 .op2-mobilnav.offen .op2-mn-hoch{grid-row:2}
body.op2 .op2-mn-liste a{display:block;padding:11px 12px;border-radius:10px;color:var(--g900);text-decoration:none;font-weight:600;font-size:.95rem}
body.op2 .op2-mn-liste a.an{background:var(--m-50);color:var(--m-700)}
body.op2 main h2{font-size:clamp(1.3rem,2.4vw,1.75rem)}
/* Markenseite: Logo statt Produktbild im Kopf */
body.op2 .op2-markenkopf{display:grid;place-items:center;width:210px;flex:0 0 210px;min-height:170px;background:#fff;border-radius:18px;box-shadow:var(--e1);padding:20px}
body.op2 .op2-markenkopf img{max-width:150px;max-height:64px;width:auto;height:auto}
@media(max-width:640px){body.op2 .op2-markenkopf{width:100%;flex-basis:100%;min-height:120px}}
/* Produktseite: Bild als feste Kachel neben dem Text (vorher volle Breite) */
body.op2 .device-hero{align-items:flex-start;gap:28px}
body.op2 .device-hero>.imgbox:not(.device){flex:0 0 300px;width:300px;height:300px;border:0;border-radius:18px;box-shadow:var(--e1);background:#fff;padding:12px}
body.op2 .device-hero>.imgbox:not(.device) img{object-fit:contain}
body.op2 .device-hero .device-info{flex:1 1 380px;min-width:0}
@media(max-width:700px){body.op2 .device-hero>.imgbox:not(.device){flex-basis:100%;width:100%;height:230px}}
body.op2 .chip{border-radius:10px;background:#fff;border:1px solid var(--g100)}
body.op2 a.ai-pill,body.op2 .ai-pill{color:#fff}
body.op2 .pcard h3 a,body.op2 .rat-card-b h3{color:var(--g900)}body.op2 .pcard h3 a:hover{color:var(--m-600)}
/* Ergänzungen SE-1-Fork 3 */
body.op2 nav.toc[hidden]{display:none!important}
body.op2 a.cat-card,body.op2 a.cat-card span,body.op2 a.brand-tile{text-decoration:none}
body.op2 .op2-ohne-logo .bt-name{font-family:'Poppins',sans-serif;font-weight:600;font-size:1rem;color:var(--g900)}
body.op2 .op2-ohne-logo{justify-content:center}
body.op2 .brand-tile.op2-marke{display:flex;flex-direction:column;align-items:center;justify-content:center}
body.op2 .pcard-img .imgbox{width:100%}