/* Blog-Karten (fbl): Editor aus dem echten Dashboard (blog.js editorSeite, blog.css), dazu die Blog-Übersicht auf der hellen Kessler-Seite (BLOG_CSS, Petrol #17857D) */

/* ---------- Editor (bl-ed, bl-titel, bl-werkzeug, bl-text) ---------- */
.fbl-back{display:inline-flex;align-items:center;gap:calc(4 * var(--e));height:calc(22 * var(--e));margin-bottom:calc(12 * var(--e));padding:0 calc(9 * var(--e)) 0 calc(7 * var(--e));border-radius:calc(7 * var(--e));box-shadow:inset 0 0 0 1px rgba(244,243,240,.09);font-size:calc(9 * var(--e));font-weight:600;color:#F4F3F0}
.fbl-back svg{width:calc(10 * var(--e));height:calc(10 * var(--e))}
.fbl-ed{display:grid;grid-template-columns:minmax(0,1fr) calc(178 * var(--e));gap:calc(14 * var(--e));align-items:stretch}
.fbl-haupt{display:flex;flex-direction:column;min-width:0}
.fbl-haupt .fbl-text{flex:1}
.fbl-titel{position:relative;min-height:calc(2.44em + calc(11 * var(--e)));padding:calc(2 * var(--e)) 0 calc(9 * var(--e));border-bottom:1px solid rgba(244,243,240,.09);font:600 calc(18 * var(--e))/1.22 var(--display);letter-spacing:-.015em;color:#F4F3F0}
.fbl-ph{position:absolute;left:0;right:0;top:calc(2 * var(--e));color:#6F6D68;opacity:0;pointer-events:none}
.leer>.fbl-ph{opacity:1}
.fbl-car{display:none;width:1.5px;height:1em;margin-left:1px;background:#F4F3F0;vertical-align:-.12em}
.tippt>.fbl-car{display:inline-block}
.fbl-wz{display:flex;align-items:center;gap:calc(1 * var(--e));margin-top:calc(11 * var(--e));padding:calc(4 * var(--e));background:#141416;border:1px solid rgba(244,243,240,.09);border-radius:calc(9 * var(--e)) calc(9 * var(--e)) 0 0;overflow:hidden}
.fbl-wb{display:flex;align-items:center;flex:none;height:calc(22 * var(--e));padding:0 calc(6 * var(--e));border-radius:calc(6 * var(--e));font-size:calc(8.5 * var(--e));font-weight:600;line-height:1;color:#A9A7A1;white-space:nowrap;transition:background .2s,color .2s,box-shadow .2s}
.fbl-wi{display:grid;place-items:center;flex:none;width:calc(22 * var(--e));height:calc(22 * var(--e));border-radius:calc(6 * var(--e));color:#A9A7A1;transition:background .2s,color .2s,box-shadow .2s}
.fbl-wi svg{width:calc(11 * var(--e));height:calc(11 * var(--e));stroke:currentColor}
.fbl-wi b{font-size:calc(10 * var(--e));font-weight:600}
.fbl-wi em{font:italic calc(10.5 * var(--e))/1 Georgia,serif}
.fbl-wb.an,.fbl-wi.an{background:#1C1C1F;color:#F4F3F0;box-shadow:inset 0 0 0 1px rgba(244,243,240,.16)}
.fbl-tr{flex:none;width:1px;height:calc(13 * var(--e));margin:0 calc(3 * var(--e));background:rgba(244,243,240,.09)}
.fbl-flex{flex:1}
.fbl-st{flex:none;padding:0 calc(6 * var(--e));font-size:calc(8.5 * var(--e));color:#6F6D68;white-space:nowrap}
.fbl-text{padding:calc(12 * var(--e)) calc(14 * var(--e)) calc(16 * var(--e));background:#141416;border:1px solid rgba(244,243,240,.09);border-top:0;border-radius:0 0 calc(10 * var(--e)) calc(10 * var(--e));font-size:calc(9.5 * var(--e));line-height:1.68;color:#D6D4CE}
.fbl-text>p+p{margin-top:calc(8 * var(--e))}
.fbl-text .fbl-h2{margin-top:calc(12 * var(--e));font:600 calc(12 * var(--e))/1.3 var(--display);letter-spacing:-.01em;color:#F4F3F0}
.fbl-text .fbl-h2+p{margin-top:calc(4 * var(--e))}
.fbl-ul{margin-top:calc(5 * var(--e));padding-left:1.25em}
.fbl-ul li{margin-top:calc(2 * var(--e))}
.fbl-ul li::marker{color:#A9A7A1}
.fbl-aus{display:none!important}

/* ---------- Seitenleiste: Status und „Bei Google“ (bl-seite, bl-zustand, bl-google) ---------- */
.fbl-seite{min-width:0}
.fbl-t0{margin-top:0}
.fbl-box{padding:calc(10 * var(--e)) calc(11 * var(--e)) calc(11 * var(--e))}
.fbl-status{display:grid}
.fbl-z{grid-area:1/1;opacity:0;pointer-events:none}
.fbl-status:not(.live) .fbl-z-e,.fbl-status.live .fbl-z-l{opacity:1;pointer-events:auto;transition:opacity .35s ease}
.fbl-zeile{display:flex;align-items:center;flex-wrap:wrap;gap:calc(3 * var(--e)) calc(7 * var(--e))}
.fbl-zu{display:inline-flex;align-items:center;gap:calc(5 * var(--e));font-size:calc(9 * var(--e));font-weight:500;color:#A9A7A1;white-space:nowrap}
.fbl-zu i{width:calc(6 * var(--e));height:calc(6 * var(--e));border-radius:50%;box-shadow:inset 0 0 0 1.3px #A9A7A1;flex:none}
.fbl-zu.an{color:#F4F3F0}
.fbl-zu.an i{background:#3DD68C;box-shadow:none}
.fbl-klein{font-size:calc(8.5 * var(--e));line-height:1.5;color:#A9A7A1}
p.fbl-klein{margin-top:calc(6 * var(--e))}
.fbl-kn{display:flex;flex-wrap:wrap;gap:calc(5 * var(--e));margin-top:calc(9 * var(--e))}
.fbl-kn .d-btn{transition:transform .14s ease,background .2s}
.fbl-g{min-width:0;padding:calc(9 * var(--e)) calc(10 * var(--e)) calc(10 * var(--e));border-radius:calc(8 * var(--e));background:#0B0B0C;border:1px solid rgba(244,243,240,.09)}
.fbl-g-url{overflow:hidden;font-size:calc(8 * var(--e));line-height:1.35;color:#A9A7A1;white-space:nowrap;text-overflow:ellipsis}
.fbl-g-titel{margin-top:calc(3 * var(--e));font-size:calc(11 * var(--e));line-height:1.3;color:#8AB4F8;overflow-wrap:anywhere}
.fbl-g-text{margin-top:calc(3 * var(--e));font-size:calc(8.5 * var(--e));line-height:1.5;color:#D6D4CE;overflow-wrap:anywhere}
.fbl-hero .fbl-g-titel{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:3.9em}
.fbl-hero .fbl-g-text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fbl-leer{margin-top:calc(8 * var(--e))}
.fbl-hero .fbl-leer{display:none}
.fbl-cover{position:relative;display:block;aspect-ratio:16/10;border-radius:calc(8 * var(--e));overflow:hidden;background:#0B0B0C}
.fbl-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fbl-tb .fbl-kn{margin-top:calc(8 * var(--e))}

/* ---------- S1: Schreiben ---------- */
.fn-dk.fbl-s1{display:flex;flex-direction:column}
.fbl-titel-s{min-height:0;padding-bottom:calc(9 * var(--e));font-size:calc(15 * var(--e));overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.fbl-s1 .fbl-wz{margin-top:calc(10 * var(--e))}
.fbl-text-s{flex:1;padding:calc(16 * var(--e)) calc(18 * var(--e)) calc(18 * var(--e));font-size:calc(11 * var(--e));line-height:1.62}
.fbl-text-s .fbl-h2{margin-top:calc(14 * var(--e));font-size:calc(14.5 * var(--e))}
.fbl-text-s .fbl-ul{margin-top:calc(6 * var(--e))}
.fbl-text-s .fbl-ul li{margin-top:calc(3 * var(--e))}

/* ---------- S2: „Bei Google“ ---------- */
.fbl-gbox{padding:calc(12 * var(--e)) calc(13 * var(--e)) calc(13 * var(--e))}
.fbl-fld+.fbl-fld{margin-top:calc(10 * var(--e))}
.fbl-lab{display:flex;align-items:baseline;justify-content:space-between;gap:calc(8 * var(--e));margin-bottom:calc(5 * var(--e));font-size:calc(9 * var(--e));font-weight:500;color:#A9A7A1}
.fbl-zz{font-style:normal;font-weight:500;color:#6F6D68;font-variant-numeric:tabular-nums}
.fbl-in{position:relative;min-height:calc(26 * var(--e));padding:calc(5 * var(--e)) calc(9 * var(--e));border-radius:calc(7 * var(--e));background:#0B0B0C;border:1px solid rgba(244,243,240,.09);font-size:calc(9.5 * var(--e));line-height:1.5;color:#F4F3F0;transition:border-color .2s}
.fbl-in .fbl-ph{left:calc(9 * var(--e));right:calc(9 * var(--e));top:calc(5 * var(--e))}
.fbl-in.fokus{border-color:rgba(244,243,240,.2)}
.fbl-in-3{min-height:calc(58 * var(--e))}
.fbl-gbox .fbl-g{margin-top:calc(12 * var(--e))}
.fbl-gbox .fbl-g-url{font-size:calc(8.5 * var(--e))}
.fbl-gbox .fbl-g-titel{font-size:calc(12.5 * var(--e))}
.fbl-gbox .fbl-g-text{font-size:calc(9 * var(--e))}
.fbl-gbox .fbl-leer{margin-top:calc(9 * var(--e))}

/* ---------- S3: Freigeben, und der Beitrag steht in der Übersicht ---------- */
.fn-dk.fbl-s3{display:flex;flex-direction:column;padding:0}
.fbl-oben{flex:none;padding:calc(13 * var(--e)) calc(16 * var(--e)) calc(12 * var(--e))}
.fbl-quer{padding:calc(9 * var(--e)) calc(9 * var(--e)) calc(9 * var(--e)) calc(12 * var(--e))}
.fbl-quer .fbl-z{display:flex;align-items:center;justify-content:space-between;gap:calc(8 * var(--e))}
.fbl-quer .fbl-kn{margin-top:0;flex-wrap:nowrap}
.fbl-seite-k{position:relative;flex:1;min-height:0;margin:0 calc(12 * var(--e));border-radius:calc(12 * var(--e)) calc(12 * var(--e)) 0 0;background:#F4EFE7;color:#132523;overflow:hidden;font-family:-apple-system,"SF Pro Text","Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
.fbl-knav{display:flex;align-items:center;gap:calc(10 * var(--e));height:calc(28 * var(--e));padding:0 calc(14 * var(--e));border-bottom:1px solid rgba(19,37,35,.07)}
.fbl-klogo{display:flex;align-items:center;gap:calc(3 * var(--e));font-size:calc(9.5 * var(--e));line-height:1;letter-spacing:-.02em;white-space:nowrap}
.fbl-klogo svg{width:calc(12 * var(--e));height:calc(11 * var(--e));flex:none}
.fbl-klogo b{font-weight:700}
.fbl-klogo span{color:#5A6663}
.fbl-klinks{display:flex;gap:calc(10 * var(--e));margin-left:auto;font-size:calc(8 * var(--e));color:rgba(19,37,35,.8);white-space:nowrap}
.fbl-kbtn{display:inline-flex;align-items:center;flex:none;height:calc(19 * var(--e));padding:0 calc(8 * var(--e));border-radius:999px;background:#17857D;color:#fff;font-size:calc(7.5 * var(--e));font-weight:600;white-space:nowrap}
.fbl-kh1{padding:calc(10 * var(--e)) calc(14 * var(--e)) 0;font-size:calc(20 * var(--e));font-weight:700;line-height:1.05;letter-spacing:-.03em}
.fbl-kfenster{margin:calc(9 * var(--e)) calc(14 * var(--e)) 0;overflow:hidden}
.fbl-kzug{display:flex;gap:calc(10 * var(--e));transform:translateX(calc(-50% - calc(5 * var(--e))));transition:transform .9s var(--ease)}
.fbl-s3.live .fbl-kzug{transform:none}
.fbl-kk{flex:none;width:calc((100% - calc(10 * var(--e))) / 2);border-radius:calc(11 * var(--e));background:#fff;border:1px solid rgba(19,37,35,.09);overflow:hidden}
.fbl-kk-neu{opacity:0;transition:opacity .6s ease .25s}
.fbl-s3.live .fbl-kk-neu{opacity:1}
.fbl-kbild{position:relative;display:block;aspect-ratio:16/9.4;background:rgba(19,37,35,.06)}
.fbl-kbild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fbl-kt{display:flex;flex-direction:column;gap:calc(4 * var(--e));padding:calc(9 * var(--e)) calc(10 * var(--e)) calc(11 * var(--e))}
.fbl-kd{font-size:calc(7.5 * var(--e));color:#5A6663}
.fbl-kt b{font-size:calc(10.5 * var(--e));font-weight:600;line-height:1.3;letter-spacing:-.01em}
.fbl-km{margin-top:calc(2 * var(--e));font-size:calc(8 * var(--e));font-weight:600;color:#17857D}

/* ---------- Handy ---------- */
@container (max-width:460px){
  .fn-stat.fbl-hero{--e:calc(100cqw / 350)}
  .fbl-ed{grid-template-columns:minmax(0,1fr);gap:calc(12 * var(--e))}
  .fbl-hero .fbl-titel{font-size:calc(17 * var(--e))}
  .fbl-hero .fbl-text>p:nth-child(3),.fbl-hero .fbl-mehr,.fbl-hero .fbl-tb{display:none}
  .fbl-hero .fbl-seite{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 calc(10 * var(--e))}
  .fbl-hero .fbl-seite .d-tit{grid-row:1}
  .fbl-hero .fbl-seite .d-tit+.d-box{grid-row:2}
  .fbl-hero .fbl-seite .d-tit{margin-top:0}
}
@container (max-width:400px){
  .fn-dk.fbl-s1,.fn-dk.fbl-s2,.fn-dk.fbl-s3{--e:calc(100cqw / 360);aspect-ratio:360/330}
  .fbl-w-h3{display:none}
  .fbl-klinks{display:none}
  .fbl-kbtn{margin-left:auto}
  .fbl-kt b{font-size:calc(10 * var(--e))}
  .fbl-gbox .fbl-leer{display:none}
}
@media (prefers-reduced-motion:reduce){.fbl-kzug,.fbl-kk-neu,.fbl-z,.fbl-wb,.fbl-wi,.fbl-in{transition:none!important}}