/* Lack- & Farbberater - lackundfarbe24.de */
/* Layout: Fragen-Karten untereinander, beantwortete Fragen als Zusammenfassung oben, Empfehlung als großes Ergebnisblatt */
.lfb{
  /* Farben und Schrift wie lackundfarbe24.de (Shopware-Theme) */
  --bg:#ffffff; --panel:#ffffff; --ink:#172601; --muted:#5f6656; --line:#dadae5;
  --accent:#ba1618; --accent-ink:#ffffff; --accent-soft:#f8f8fa; --signal:#ba1618; --ok:#3a8a1e; --chip:#f2f2f5;
  --btn:#ef5152; --btn-hover:#d9393a;
  --f-display:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; --f-body:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}


.lfb{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.5;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:20px 56px}
.lfb *{box-sizing:border-box}
.lfb .wrap{max-width:980px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.lfb h1,.lfb h2,.lfb h3{font-family:var(--f-display);text-wrap:balance;margin:0;letter-spacing:-.01em}
.lfb header h1{font-size:clamp(26px,4vw,38px);font-weight:800;margin-top:10px}
.lfb header p{margin:4px 0 0;color:var(--muted);max-width:62ch}
.lfb .swatch{display:flex;height:6px;border-radius:3px;overflow:hidden;width:160px}.lfb .swatch i{flex:1}
.lfb .label{font-family:var(--f-display);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.lfb .summary{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.lfb .sum{all:unset;cursor:pointer;font-size:14px;font-weight:600;padding:5px 10px;border-radius:99px;background:var(--chip);color:var(--ink)}
.lfb .sum b{font-weight:400;color:var(--muted);margin-right:4px}
.lfb .sum:hover{background:var(--accent-soft)}
.lfb .reset{all:unset;cursor:pointer;font-size:14px;font-weight:700;color:var(--accent);padding:5px 6px}
.lfb .q{background:var(--panel);border:1.5px solid var(--line);border-radius:12px;padding:18px clamp(14px,3vw,24px);display:flex;flex-direction:column;gap:12px}
.lfb .q h2{font-size:21px}
.lfb .q p.help{margin:-6px 0 0;color:var(--muted);font-size:15px}
.lfb .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.lfb .tile{all:unset;cursor:pointer;background:var(--bg);border:1.5px solid var(--line);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:2px}
.lfb .tile:hover{border-color:var(--accent)}
.lfb .tile b{font-family:var(--f-display);font-size:17px;font-weight:700}
.lfb .tile span{color:var(--muted);font-size:14px;line-height:1.35}
.lfb .tile[disabled]{opacity:.5;cursor:default}.lfb .tile[disabled]:hover{border-color:var(--line)}
.lfb .chips{display:flex;flex-wrap:wrap;gap:8px}
.lfb .chip{all:unset;cursor:pointer;border:1.5px solid var(--line);background:var(--bg);border-radius:10px;padding:9px 14px;font-weight:600;font-size:15px;display:flex;flex-direction:column;gap:1px;max-width:100%}
.lfb .chip small{font-weight:400;color:var(--muted);font-size:13px}
.lfb .chip:hover{border-color:var(--accent)}
.lfb .chip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.lfb .chip[aria-pressed=true] small{color:inherit;opacity:.85}
.lfb .go{all:unset;cursor:pointer;align-self:flex-start;background:var(--accent);color:var(--accent-ink);font-weight:700;padding:10px 18px;border-radius:8px}
.lfb .result{display:flex;flex-direction:column;gap:18px}
.lfb .rec{background:var(--panel);border:2px solid var(--accent);border-radius:14px;padding:22px clamp(16px,3vw,30px);display:flex;flex-direction:column;gap:22px}
.lfb .badge{display:inline-block;font-family:var(--f-display);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;background:var(--accent);color:var(--accent-ink);padding:3px 10px;border-radius:4px}
.lfb .rec h2{font-size:clamp(23px,3vw,30px);font-weight:800;margin-top:8px}
.lfb .rec .pitch{margin:6px 0 0;font-size:17px;max-width:65ch}
.lfb .procon{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:6px 20px;margin:0;padding:0;list-style:none;font-size:15px}
.lfb .procon li{display:flex;gap:8px}.lfb .procon li::before{content:"+";font-weight:800;color:var(--ok)}
.lfb .procon li.c::before{content:"!";color:var(--signal)}
.lfb .area{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:var(--accent-soft);border-radius:10px;padding:12px 16px}
.lfb .area label{font-weight:700;font-family:var(--f-display);font-size:17px}
.lfb .sel{font:inherit;font-weight:600;color:var(--ink);background:var(--panel);border:1.5px solid var(--line);border-radius:8px;padding:8px 10px;max-width:100%}
.lfb .area input{font:inherit;font-weight:700;font-size:18px;color:var(--ink);background:var(--panel);border:1.5px solid var(--line);border-radius:8px;padding:8px 10px;width:110px}
.lfb .area input:disabled{opacity:.5}
.lfb input:focus-visible,.lfb button:focus-visible,.lfb a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.lfb .seq{list-style:none;margin:0;padding:0;counter-reset:s;display:flex;flex-direction:column}
.lfb .seq>li{counter-increment:s;display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;padding:14px 0;border-top:1px solid var(--line)}
.lfb .seq>li:first-child{border-top:0;padding-top:4px}
.lfb .seq>li::before{content:counter(s);font-family:var(--f-display);font-weight:800;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--bg)}
.lfb .seq h3{font-size:17px}
.lfb .seq p{margin:4px 0 0}
.lfb .seq .dry{font-size:14px;color:var(--muted);margin-top:4px}
.lfb .use{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.lfb .use span{font-size:13px;font-weight:600;background:var(--chip);border-radius:4px;padding:2px 8px;font-variant-numeric:tabular-nums}
.lfb .tbl{overflow-x:auto}
.lfb table{border-collapse:collapse;width:100%;font-size:15px}
.lfb th{text-align:left;font-family:var(--f-display);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:6px 8px;border-bottom:1.5px solid var(--line)}
.lfb td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.lfb td.num{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:700;text-align:right}
.lfb td small{display:block;color:var(--muted);font-size:13px}
.lfb td.num small{white-space:normal;font-weight:400;max-width:240px;margin-left:auto}
.lfb .btn{display:inline-flex;text-decoration:none;font-weight:700;font-size:14px;color:var(--accent);border:1.5px solid var(--accent);padding:6px 12px;border-radius:6px;white-space:nowrap}
.lfb .btn:hover{background:var(--accent);color:var(--accent-ink)}
.lfb .box{border-left:4px solid var(--line);padding:4px 0 4px 14px}
.lfb .box.warn{border-color:var(--signal)}
.lfb .box ul{margin:6px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.lfb .notice{background:var(--chip);border-radius:8px;padding:10px 14px;font-size:15px}
.lfb .alts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.lfb .alt{all:unset;cursor:pointer;background:var(--panel);border:1.5px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.lfb .alt:hover{border-color:var(--accent)}
.lfb .alt b{font-family:var(--f-display);font-size:16px}
.lfb .alt span{color:var(--muted);font-size:14px}
.lfb .alt em{font-style:normal;font-weight:700;color:var(--accent);font-size:14px}
.lfb .alt i.fw,.lfb p.fw{font-style:normal;font-size:14px;color:var(--ink);background:var(--panel-2,rgba(0,0,0,.04));border-radius:8px;padding:4px 8px;display:inline-block}
.lfb p.fw{margin:6px 0 0;font-weight:600}
.lfb details.zub{border:1.5px solid var(--line);border-radius:12px;padding:10px 14px}.lfb details.zub summary{cursor:pointer;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;list-style:none}.lfb details.zub summary::-webkit-details-marker{display:none}.lfb details.zub summary::before{content:"▸";color:var(--accent);margin-right:6px}.lfb details.zub[open] summary::before{content:"▾"}
.lfb details.zub p.sub{margin:12px 0 0;font-weight:700;font-size:14px;color:var(--muted)}
.lfb .box.check .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.lfb .btn.ghost{background:transparent;color:var(--btn,var(--accent))}.lfb td.num small.price{display:block;font-weight:700;color:var(--ink);margin-top:2px}
.lfb .fine{color:var(--muted);font-size:13px;margin:0}
@media (max-width:520px){.lfb td,.lfb th{padding:8px 4px}.lfb .btn{padding:5px 8px;font-size:13px}.lfb table{font-size:14px}}
@media (prefers-reduced-motion:no-preference){.lfb .tile,.lfb .chip,.lfb .alt{transition:border-color .15s,background .15s}}

/* Shop-Optik: eckig, rote Buttons, Open Sans */
.lfb{font-size:14px;line-height:1.55}
.lfb h1,.lfb h2,.lfb h3{letter-spacing:0}
.lfb header h1{color:var(--accent);font-weight:600;font-size:clamp(24px,3vw,30px)}
.lfb .swatch{display:none}
.lfb .q,.lfb .rec,.lfb .tile,.lfb .chip,.lfb .alt,.lfb .area,.lfb .sel,.lfb .area input,.lfb .notice,.lfb .btn,.lfb .badge,.lfb .sum{border-radius:2px}
.lfb .q{border:1px solid var(--line)}
.lfb .q h2{font-size:18px;font-weight:600}
.lfb .tile{background:var(--panel);border:1px solid var(--line)}
.lfb .tile b{font-size:15px;font-weight:600}
.lfb .tile:hover,.lfb .chip:hover,.lfb .alt:hover{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.lfb .chip{background:var(--accent-soft);border:1px solid var(--line);font-size:14px}
.lfb .rec{border:1px solid var(--line);border-top:3px solid var(--accent)}
.lfb .rec h2{color:var(--accent);font-weight:600;font-size:clamp(20px,2.6vw,26px)}
.lfb .badge{background:var(--btn);font-family:var(--f-body);letter-spacing:.04em}
.lfb .area{background:var(--accent-soft);border:1px solid var(--line)}
.lfb .area label{font-size:15px;font-weight:600}
.lfb .sel,.lfb .area input{background:#f8f8fa;border:1px solid var(--line)}
.lfb .btn{background:var(--btn);border-color:var(--btn);color:#fff;font-weight:600;padding:6px 14px}
.lfb .btn:hover{background:var(--btn-hover);border-color:var(--btn-hover);color:#fff}
.lfb .sum{background:var(--chip);border:1px solid var(--line)}
.lfb .reset{color:var(--accent)}
.lfb .seq>li::before{background:var(--accent);color:#fff;border-radius:50%}
.lfb .label{color:var(--ink);font-family:var(--f-body);font-weight:700;letter-spacing:.05em}
.lfb th{font-family:var(--f-body)}
.lfb td.num{color:var(--ink)}
.lfb .alt em{color:var(--accent)}
.lfb .use span{background:var(--chip)}
.lfb a:not(.btn){color:var(--accent)}
.lfb .linkbtn{background:none;border:0;padding:0;color:#ba1618;font:inherit;cursor:pointer;text-decoration:underline}
.lfb ul.rg{margin:6px 0 0;padding-left:18px}.lfb ul.rg li{margin:4px 0}.lfb ul.rg a{color:#ba1618}
.lfb .ff{border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--accent-soft);display:flex;flex-direction:column;gap:8px}
.lfb .ff label{font-size:15px}
.lfb .ff-row{display:flex;gap:8px;flex-wrap:wrap}
.lfb .ff-row input{flex:1 1 220px;min-width:0;font:inherit;font-size:16px;padding:10px 12px;border:1.5px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink)}
.lfb .ff-list{display:flex;flex-direction:column;gap:4px}
.lfb .ff-hit{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.lfb .ff-hit:hover{border-color:var(--accent)}
.lfb .ff-hit b{display:block;font-weight:600}.lfb .ff-hit small{color:var(--muted);font-size:13px}
.lfb .ff .sw{flex:0 0 22px;height:22px;border-radius:50%;border:1px solid rgba(0,0,0,.15);background:#9aa3ad}
.lfb .ff .sw-metallic{background:linear-gradient(135deg,#f3f4f6,#9ca3af 45%,#e5e7eb 60%,#6b7280)}
.lfb .ff .sw-perleffekt{background:linear-gradient(135deg,#fdf2f8,#c4b5fd 45%,#e0f2fe 60%,#a78bfa)}
.lfb .ff-all{font-size:14px;color:var(--accent)}
.lfb .notice.ok{border-left:4px solid var(--ok)}
.lfb .pdfbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.lfb .pdfbtn{all:unset;cursor:pointer;background:var(--btn);color:#fff;font-weight:700;padding:11px 18px;border-radius:2px;font-size:15px}
.lfb .pdfbtn:hover{background:var(--btn-hover)}
.lfb .pdfbtn[disabled]{opacity:.6;cursor:wait}
.lfb .tile.has-ill{padding:0 0 12px;overflow:hidden}
.lfb .tile.has-ill .ill{display:block;height:96px;margin:0 0 10px;background:var(--accent-soft);overflow:hidden;transition:transform .25s}
.lfb .tile.has-ill .ill svg{display:block;width:100%;height:100%}
.lfb .tile.has-ill b,.lfb .tile.has-ill>span:not(.ill){padding:0 12px}
.lfb .tile.has-ill:hover:not([disabled]) .ill{transform:scale(1.04)}
.lfb .tile.has-ill:hover:not([disabled]){box-shadow:0 6px 18px rgba(23,38,1,.10)}
.lfb .tile[disabled] .ill{filter:grayscale(1);opacity:.45}
.lfb .prog{display:flex;align-items:center;gap:12px;margin:-4px 0 2px}
.lfb .prog-bar{flex:1;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.lfb .prog-bar i{display:block;height:100%;background:var(--accent);border-radius:3px;transition:width .3s}
.lfb .prog span{font-size:13px;color:var(--muted);white-space:nowrap}
.lfb img.pimg{float:left;width:46px;height:46px;object-fit:contain;margin:0 12px 0 0;border:1px solid var(--line);border-radius:4px;background:#fff;padding:2px}
.lfb td small{display:block}
.lfb .rec-head img.hero{float:right;width:120px;height:120px;object-fit:contain;margin:0 0 8px 16px;border:1px solid var(--line);border-radius:6px;background:#fff;padding:4px}
@media (max-width:560px){.lfb .rec-head img.hero{width:84px;height:84px}}

/* Schutz gegen Theme-Styles (Shopware/ThemeWare) */
.lfb{font-size:16px!important;line-height:1.5!important}
.lfb .label{background:none!important;color:var(--muted)!important;padding:0!important;border:0!important;border-radius:0!important;display:block!important;height:auto!important;line-height:1.4!important;font-size:12px!important;font-weight:700!important;letter-spacing:.08em;text-transform:uppercase;text-shadow:none!important;white-space:normal!important;margin:0 0 4px}
.lfb table{border-collapse:collapse!important;width:100%;background:transparent!important;border:0!important}
.lfb table th,.lfb table td,.lfb table tr{background:transparent!important;background-color:transparent!important;box-shadow:none!important}
.lfb table thead th{color:var(--muted)!important;font-size:12px!important;font-weight:700!important;text-transform:uppercase;letter-spacing:.06em;border:0!important;border-bottom:1.5px solid var(--line)!important;padding:8px 6px!important}
.lfb table td{border:0!important;border-bottom:1px solid var(--line)!important;padding:10px 6px!important;vertical-align:middle!important;color:var(--ink)!important}
.lfb input[type=number],.lfb input[type=text],.lfb input[type=search],.lfb input[type=email],.lfb input[type=tel],.lfb textarea{font-family:inherit!important;font-size:16px!important;font-weight:600!important;color:var(--ink)!important;background:#fff!important;border:1.5px solid var(--line)!important;border-radius:6px!important;padding:8px 10px!important;height:auto!important;line-height:1.3!important;box-shadow:none!important;-webkit-appearance:none;appearance:textfield}
.lfb #lfb-area,.lfb #lfb-mm,.lfb #lfb-dft{width:110px!important}
.lfb input::placeholder,.lfb textarea::placeholder{color:#9aa0a6!important;font-weight:400!important;opacity:1!important}
.lfb input:focus,.lfb textarea:focus{border-color:var(--accent)!important;outline:none!important}
.lfb .btn{display:inline-block!important;height:auto!important;line-height:1.2!important;padding:9px 14px!important;font-size:14px!important;border-radius:2px!important;white-space:nowrap}
.lfb td.num{text-align:right!important;white-space:nowrap}
.lfb h2,.lfb h3{color:inherit;line-height:1.25!important;margin-bottom:0}
.lfb ul{margin-left:0}
.lfb .label{text-align:left!important}
.lfb table thead th{text-align:left!important}
.lfb table thead th:nth-child(2){text-align:right!important}
.lfb .badge{display:inline-block!important;height:auto!important;line-height:1.4!important;padding:4px 10px!important;font-size:12px!important}
.lfb .ff-row input{flex:1 1 220px!important;width:auto!important}
.lfb .chip,.lfb .tile,.lfb .sum{line-height:1.35!important;height:auto!important}
.lfb details.zub summary{display:flex!important;list-style:none!important;background:transparent!important;padding:0!important;margin:0!important}
.lfb details.zub summary .label{display:inline-block!important;margin:0!important}
.lfb details.zub p.sub,.lfb p.fw,.lfb .alt i.fw{margin-bottom:0!important}
.lfb .btn.ghost{background:transparent!important;color:var(--btn)!important;border:1.5px solid var(--btn)!important}
.lfb .btn.ghost:hover{background:var(--btn)!important;color:#fff!important}
.lfb td.num small.price{display:block!important;font-weight:700!important}

.lfb header h2.lfb-h{color:var(--accent);font-weight:600;font-size:clamp(22px,2.6vw,28px);margin-top:10px}
.lfb-embed-wrap{margin:0 0 24px}.lfb-embed--bottom{margin:24px 0 0}
.lfb-embed-wrap .lfb{padding-block:8px 24px}


/* ================================================================
   Shop-Design 2026 (ab 1.10.0) - angelehnt an die neue Startseite:
   Fotokacheln wie "Beliebte Kategorien", warmgraue Fläche, runde Ecken,
   weiche Schatten, Pillen-Auswahl, dunkle Überschriften, rote Kaufbuttons
   ================================================================ */
.lfb{
  --ink:#1b1d21; --muted:#5c6068; --line:#e6e3dc; --warm:#f4f2ee; --panel:#ffffff; --bg:#ffffff;
  --accent:#ba1618; --btn:#e41f21; --btn-hover:#c4161a; --chip:#f4f2ee; --accent-soft:#f4f2ee; --ok:#2f7a1f;
  --r-card:14px; --r-in:8px; --sh:0 2px 12px rgba(27,29,33,.08); --sh-h:0 10px 26px rgba(27,29,33,.14);
}
.lfb{background:var(--warm)!important;color:var(--ink);border-radius:16px;padding:clamp(18px,3vw,32px) clamp(16px,3vw,32px) clamp(22px,3vw,36px)!important}
.lfb-embed-wrap .lfb{padding-block:clamp(18px,3vw,30px)!important}
.lfb .wrap{max-width:1040px;gap:20px}
.lfb header h1,.lfb header h2.lfb-h{color:var(--ink)!important;font-weight:700!important;font-size:clamp(22px,2.8vw,28px)!important;line-height:1.25!important;margin-top:0!important}
.lfb header p{color:var(--muted);font-size:15px;max-width:68ch}

/* Fragen-Karten */
.lfb .q{background:#fff;border:0!important;border-radius:var(--r-card)!important;box-shadow:var(--sh);padding:clamp(16px,2.6vw,26px)!important;gap:14px}
.lfb .q h2{color:var(--ink)!important;font-size:19px!important;font-weight:700!important}
.lfb .q p.help{color:var(--muted)}
.lfb .grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}

/* Auswahl-Kacheln mit Foto */
.lfb .tile{background:#fff!important;border:1px solid var(--line)!important;border-radius:var(--r-card)!important;box-shadow:none;overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s!important}
.lfb .tile.has-ill{padding:0 0 14px!important}
.lfb .tile.has-ill .ill{height:118px!important;margin:0 0 12px!important;background:var(--warm)!important;transition:transform .35s!important}
.lfb .tile.has-ill .ill img{display:block;width:100%;height:100%;object-fit:cover}
.lfb .tile.has-ill b,.lfb .tile.has-ill>span:not(.ill){padding:0 14px!important}
.lfb .tile b{color:var(--ink);font-size:15px!important;font-weight:700!important}
.lfb .tile span{color:var(--muted);font-size:13.5px}
.lfb .tile:hover:not([disabled]){transform:translateY(-3px);box-shadow:var(--sh-h)!important;border-color:transparent!important}
.lfb .tile.has-ill:hover:not([disabled]) .ill{transform:none!important}
.lfb .tile.has-ill:hover:not([disabled]) .ill img{transform:scale(1.04)}
.lfb .tile .ill img{transition:transform .35s}
.lfb .tile[disabled]{opacity:.6}
.lfb .tile[disabled] .ill{filter:grayscale(1);opacity:.55}

/* Antwort-Chips als Pillen */
.lfb .chips{gap:8px}
.lfb .chip{background:var(--warm)!important;border:1.5px solid transparent!important;border-radius:12px!important;padding:10px 16px!important;font-size:14px!important;font-weight:700!important;color:var(--ink)!important;transition:border-color .15s,background .15s,color .15s!important}
.lfb .chip small{color:var(--muted)!important;font-weight:400!important}
.lfb .chip:hover{border-color:var(--ink)!important;box-shadow:none!important;background:#fff!important}
.lfb .chip[aria-pressed=true]{background:var(--ink)!important;border-color:var(--ink)!important;color:#fff!important}
.lfb .chip[aria-pressed=true] small{color:rgba(255,255,255,.8)!important}

/* Zusammenfassung oben */
.lfb .sum{background:#fff!important;border:1px solid var(--line)!important;border-radius:999px!important;padding:6px 12px!important;font-size:13px!important;color:var(--ink)!important}
.lfb .sum:hover{border-color:var(--ink)!important}
.lfb .reset{color:var(--accent)!important;font-size:13px!important}

/* Fortschritt */
.lfb .prog-bar{background:var(--warm);height:6px}
.lfb .prog-bar i{background:var(--btn)}

/* Buttons */
.lfb .btn{background:var(--btn)!important;border:0!important;color:#fff!important;border-radius:var(--r-in)!important;font-weight:700!important;padding:9px 16px!important}
.lfb .btn:hover{background:var(--btn-hover)!important}
.lfb .btn.ghost{background:transparent!important;color:var(--ink)!important;border:2px solid var(--ink)!important;padding:7px 14px!important}
.lfb .btn.ghost:hover{background:var(--ink)!important;color:#fff!important}
.lfb .pdfbtn{background:var(--ink)!important;border-radius:var(--r-in)!important;padding:12px 20px!important}
.lfb .pdfbtn:hover{background:#000!important}
.lfb .go{background:var(--ink);border-radius:var(--r-in)}
.lfb .linkbtn{color:var(--accent)}

/* Ergebnis */
.lfb .rec{background:#fff!important;border:0!important;border-radius:16px!important;box-shadow:var(--sh);padding:clamp(18px,3vw,32px)!important}
.lfb .rec h2{color:var(--ink)!important;font-weight:700!important}
.lfb .rec .pitch{color:var(--ink)}
.lfb .badge{background:var(--btn)!important;border-radius:999px!important;font-family:var(--f-body)!important;letter-spacing:.06em!important;padding:4px 12px!important}
.lfb .rec-head img.hero{border:0!important;border-radius:12px!important;background:var(--warm)!important;padding:8px!important}
.lfb p.fw,.lfb .alt i.fw{background:var(--warm)!important;border-radius:999px!important;padding:4px 12px!important}
.lfb .procon li::before{color:var(--ok)}
.lfb .area{background:var(--warm)!important;border:0!important;border-radius:12px!important;padding:14px 18px!important}
.lfb .sel,.lfb .area input{border-radius:var(--r-in)!important;background:#fff!important}
.lfb .notice{background:var(--warm)!important;border-radius:12px!important}
.lfb .notice.ok{border-left:0!important;box-shadow:inset 4px 0 0 var(--ok)}
.lfb .box{border-left:3px solid var(--line)}
.lfb .box.warn{border-left-color:var(--btn)}
.lfb details.zub{border:1px solid var(--line)!important;border-radius:12px!important;padding:12px 16px!important}
.lfb img.pimg{border:0!important;border-radius:8px!important;background:var(--warm)!important}
.lfb .seq>li::before{background:var(--ink)!important;color:#fff!important}
.lfb .use span{background:var(--warm)!important;border-radius:999px!important;padding:3px 10px!important}
.lfb .label{color:var(--muted)!important}
.lfb .alts{gap:14px}
.lfb .alt{background:#fff!important;border:1px solid var(--line)!important;border-radius:var(--r-card)!important;transition:transform .2s,box-shadow .2s!important}
.lfb .alt:hover{transform:translateY(-3px);box-shadow:var(--sh-h)!important;border-color:transparent!important}
.lfb .alt em{color:var(--accent)}
.lfb .ff{background:var(--warm)!important;border:0!important;border-radius:12px!important}
.lfb .ff-hit{border-radius:var(--r-in)!important}

/* Spezial-Berater: Fotokacheln wie "Beliebte Kategorien" */
.lfb .spez{display:flex;flex-direction:column;gap:10px}
.lfb .spez-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.lfb .spez-item{display:flex;flex-direction:column;text-decoration:none!important;background:#fff;color:var(--ink)!important;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh);transition:transform .2s,box-shadow .2s;min-width:0}
.lfb .spez-item .ph{display:block;height:120px;background:var(--warm);overflow:hidden}
.lfb .spez-item .ph img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s}
.lfb .spez-item .tx{display:flex;flex-direction:column;gap:4px;padding:12px 14px 14px;flex:1}
.lfb .spez-item b{font-size:15px;font-weight:700;color:var(--ink)}
.lfb .spez-item .tx>span{font-size:13.5px;line-height:1.45;color:var(--muted);flex:1}
.lfb .spez-item em{font-style:normal;font-weight:700;font-size:14px;color:var(--accent);margin-top:6px}
.lfb .spez-item:hover,.lfb .spez-item:focus-visible{transform:translateY(-3px);box-shadow:var(--sh-h)}
.lfb .spez-item:hover .ph img{transform:scale(1.04)}
.lfb .box.spez-hint{border-left:0;padding:0}
.lfb .box.spez-hint .spez-grid{margin-top:8px}
.lfb .box.spez-hint .spez-item{box-shadow:none;border:1px solid var(--line)}
.lfb .box.spez-hint .spez-item:hover{box-shadow:var(--sh-h);border-color:transparent}
.lfb .box.spez-hint .spez-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr))}
.lfb .box.spez-hint .spez-item{flex-direction:row}
.lfb .box.spez-hint .spez-item .ph{flex:0 0 150px;height:auto;min-height:104px}
@media (max-width:600px){.lfb .box.spez-hint .spez-item .ph{flex-basis:96px;min-height:88px}.lfb .box.spez-hint .spez-item .tx>span{font-size:12.5px}}

@media (max-width:600px){
  .lfb{border-radius:12px}
  .lfb .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .lfb .tile.has-ill .ill{height:84px!important}
  .lfb .tile span{font-size:12.5px}
  .lfb .spez .spez-grid{gap:8px}
  .lfb .spez .spez-item{flex-direction:row;align-items:center}
  .lfb .spez .spez-item .ph{flex:0 0 84px;height:64px}
  .lfb .spez .spez-item .tx{padding:8px 12px;gap:0}
  .lfb .spez .spez-item .tx>span{display:none}
  .lfb .spez .spez-item em{margin-top:2px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){.lfb .tile,.lfb .alt,.lfb .spez-item,.lfb .tile .ill img,.lfb .spez-item .ph img{transition:none!important;transform:none!important}}