/* Bine backt – Kommentare in Rezept und Fachartikel (Entwurf 10.10.2026)
   Ersetzt das Zwei-Spalten-Raster aus dem Prototyp durch eine Spalte auf der Textbreite.
   Leser-Kommentare: weiße Fläche mit Linie. Antworten: eingerückt, getönt.
   Bines Antworten (bypostauthor): zarter Hagebutten-Ton, ohne Kennzeichen (Sabine, 10.10.2026: „Autorin“ passt nicht).
   Initialen statt Avatar-Bildern kommen aus inc/kommentare.php.
   Alle Regeln hängen an body.bb-kom-neu, damit sie die alten Regeln in style.css schlagen. */

body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments){
  --kom-breite:760px;
  --kom-linie:#e5e5e2;
  --kom-ink:#3a2620;
  --kom-muted:#62514a;
  --kom-akzent:#9a3d33;
  --kom-akzent-dunkel:#7a2f27;
  --kom-akzent-wash:#fbf5f3;
  --kom-akzent-kante:#cf9d95;
  --kom-akzent-kreis:#f1ddd9;
  --kom-neutral-wash:#f6f6f4;
  --kom-salbei-wash:#e3e8df;
  --kom-salbei-ink:#4f5645;
  --kom-feld-linie:#8c8580;
}

/* Kopf: Anzahl und Sprung zum Formular */
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-kom-kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 20px;max-width:var(--kom-breite)}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-comments__count{font-family:Mulish,sans-serif;font-weight:700;font-size:15px;line-height:1.5;color:var(--kom-muted);margin:0}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-kom-sprung{font-family:Mulish,sans-serif;font-size:15px;font-weight:800;color:var(--kom-akzent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-kom-sprung:hover,body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-kom-sprung:focus-visible{color:var(--kom-akzent-dunkel)}

/* Liste: eine Spalte */
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) ol.wp-block-comment-template{display:block;max-width:var(--kom-breite);margin:28px 0 0;padding:0;list-style:none}

/* Ein Gesprächsfaden = eine Fläche */
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) ol.wp-block-comment-template > li{margin:0 0 20px;padding:28px 32px;background:#fff;border:1px solid var(--kom-linie);border-top:0;box-shadow:inset 0 2px 0 var(--kom-akzent)}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) ol.wp-block-comment-template > li:last-child{margin-bottom:0}

/* Antworten: eingerückt unter den Text. Die Kachel sitzt am Kommentar selbst (.bb-comment), nicht am Listeneintrag,
   damit tiefere Antworten gleich breit untereinander stehen statt immer schmaler zu werden. */
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) ol.wp-block-comment-template ol{list-style:none;margin:20px 0 0 56px;padding:0;border:0}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) ol.wp-block-comment-template ol ol{margin:12px 0 0}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) ol.wp-block-comment-template ol li{margin:0 0 12px;padding:0;background:none;border:0}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) ol.wp-block-comment-template ol li:last-child{margin-bottom:0}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) ol.wp-block-comment-template ol li > .bb-comment{padding:18px 20px;background:var(--kom-neutral-wash);border-left:3px solid var(--kom-linie)}

/* Bines Antworten */
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) ol.wp-block-comment-template ol li.bypostauthor > .bb-comment{background:var(--kom-akzent-wash);border-left-color:var(--kom-akzent-kante)}

/* Ein Kommentar: Initiale + Text */
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-comment{gap:16px!important;align-items:flex-start}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-comment__avatar{display:block;flex:none;margin:0}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-kom-initiale{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--kom-salbei-wash);color:var(--kom-salbei-ink);font-family:Mulish,sans-serif;font-weight:800;font-size:16px;line-height:1;text-transform:uppercase}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) li.bypostauthor > .bb-comment .bb-kom-initiale{background:var(--kom-akzent-kreis);color:var(--kom-akzent-dunkel)}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) ol ol .bb-kom-initiale{width:32px;height:32px;font-size:14px}

body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-comment__body{flex:1;min-width:0;padding:0}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-comment__body > *{max-width:none!important;margin-inline:0!important}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-comment__meta{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px!important;min-height:40px;margin:0}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) ol ol .bb-comment__meta{min-height:32px}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) :is(.bb-comment__author,.bb-comment__author a){font-family:Mulish,sans-serif;font-weight:800;font-size:16px;line-height:1.3;color:var(--kom-ink);text-decoration:none}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) :is(.bb-comment__date,.bb-comment__date a){font-family:Mulish,sans-serif;font-weight:400;font-size:14px;line-height:1.3;color:var(--kom-muted);text-decoration:none}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-comment__date::before{content:none}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-comment__date a:hover{color:var(--kom-akzent)}

body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-comment__content{margin-top:10px;font-family:Mulish,sans-serif;font-size:17px;line-height:1.65;color:var(--kom-ink);overflow-wrap:break-word}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-comment__content p{margin:0 0 12px}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-comment__content p:last-child{margin-bottom:0}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-comment__content a{color:var(--kom-akzent-dunkel);text-underline-offset:3px}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-comment__content .wprm-comment-rating{display:block;margin:0 0 8px}

body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-comment__reply{margin-top:12px}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-comment__reply a{display:inline-block;padding:2px 0;font-family:Mulish,sans-serif;font-weight:800;font-size:14px;color:var(--kom-akzent);text-decoration:none;border-bottom:1px solid rgba(154,61,51,.35)}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-comment__reply a:hover,body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-comment__reply a:focus-visible{color:var(--kom-akzent-dunkel);border-bottom-color:currentColor}

/* Formular: eigene Fläche */
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .wp-block-post-comments-form{box-sizing:border-box;max-width:var(--kom-breite);margin:40px 0 0;padding:32px;background:#f1f1ef;border:0;box-shadow:inset 0 3px 0 var(--kom-akzent)}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) :is(li,ol) > .wp-block-post-comments-form{margin-top:16px;margin-bottom:20px;padding:24px;background:#fff;box-shadow:inset 0 3px 0 var(--kom-akzent),0 0 0 1px var(--kom-linie)}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .comment-reply-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;font-family:Fraunces,Georgia,serif;font-weight:400;font-size:clamp(24px,2.2vw,30px);line-height:1.12;letter-spacing:-.015em;color:var(--kom-ink);margin:0}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .comment-reply-title small a{font-family:Mulish,sans-serif;font-size:14px;font-weight:800;color:var(--kom-akzent)}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) :is(.comment-notes,.logged-in-as){font-size:14px;line-height:1.55;color:var(--kom-muted);margin:8px 0 0}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .comment-form{display:flex;flex-wrap:wrap;gap:16px;margin:20px 0 0}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .comment-form > *{flex:1 1 100%;margin:0}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .comment-form > :is(.comment-form-author,.comment-form-email){flex:1 1 calc(50% - 8px)}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .comment-form label{display:block;margin:0 0 6px;font-family:Mulish,sans-serif;font-weight:800;font-size:14px;line-height:1.4;color:var(--kom-ink)}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .wp-block-post-comments-form .comment-form :is(input[type=text],input[type=email],input[type=url],textarea){box-sizing:border-box;display:block;width:100%;padding:12px 14px;border:1px solid var(--kom-feld-linie);border-radius:0;background:#fff;color:var(--kom-ink);font-family:Mulish,sans-serif;font-size:16px;line-height:1.5}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .wp-block-post-comments-form .comment-form textarea{min-height:150px;resize:vertical}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .wp-block-post-comments-form .comment-form :is(input,textarea):focus{outline:3px solid rgba(154,61,51,.35);outline-offset:0;border-color:var(--kom-akzent)}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .comment-form-wprm-rating label{margin-bottom:4px}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .comment-form-cookies-consent{display:flex;align-items:flex-start;gap:10px}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .comment-form-cookies-consent input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--kom-akzent)}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .comment-form-cookies-consent label{margin:0;font-weight:400;font-size:14px;color:var(--kom-muted)}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .wp-block-post-comments-form :is(.wp-element-button,.submit){padding:12px 22px;border:0;border-radius:0;background:var(--kom-akzent);color:#fff;font-family:Mulish,sans-serif;font-size:16px;font-weight:800;line-height:1.4;cursor:pointer;transition:transform .1s}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .wp-block-post-comments-form :is(.wp-element-button,.submit):hover,body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .wp-block-post-comments-form :is(.wp-element-button,.submit):focus-visible{background:var(--kom-akzent-dunkel)}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .wp-block-post-comments-form :is(.wp-element-button,.submit):active{transform:translateY(1px)}

/* Mobil */
@media(max-width:760px){
  body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) ol.wp-block-comment-template > li{margin-bottom:16px;padding:20px 18px}
  body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) ol.wp-block-comment-template ol{margin-left:0;margin-top:16px}
  body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) ol.wp-block-comment-template ol li > .bb-comment{padding:16px 14px}
  body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) ol.wp-block-comment-template ol ol{margin:12px 0 0}
  /* Mobil: Initiale und Name in einer Zeile, Text darunter auf voller Breite */
  body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-comment{display:grid!important;grid-template-columns:auto minmax(0,1fr);gap:0 12px!important;align-items:center}
  body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-comment__body{display:contents}
  body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-comment__body > :not(.bb-comment__meta){grid-column:1 / -1;justify-self:start;width:100%}
  body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-comment__meta{justify-self:start}
  body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-kom-initiale{width:34px;height:34px;font-size:14px}
  body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) ol ol .bb-kom-initiale{width:28px;height:28px;font-size:12px}
  body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-comment__meta{min-height:34px}
  body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-comment__content{font-size:16px}
  body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .wp-block-post-comments-form{padding:24px 18px;margin-inline:calc(-1 * var(--bb-gutter-mobile,0px))}
  body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .comment-form > :is(.comment-form-author,.comment-form-email){flex-basis:100%}
}
@media(prefers-reduced-motion:reduce){
  body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .wp-block-post-comments-form :is(.wp-element-button,.submit){transition:none}
}

/* Über mich (1319): der ältere weiße Kasten um den ganzen Bereich entfällt, die Fäden tragen selbst Flächen */
body.bb-kom-neu main .bb-comments{background:none!important;border:0!important;box-shadow:none!important;padding-block:clamp(40px,5vw,64px)!important}
body.bb-kom-neu .bb-comments .bb-comments__head{margin-bottom:12px}
body.bb-kom-neu.page-id-1319 main .bb-comments > .bb-comments__head{max-width:none!important;margin-left:0!important;margin-right:0!important}
@media(max-width:760px){body.bb-kom-neu.page-id-1319 main .bb-comments{padding-left:0!important;padding-right:0!important}}

/* ---- Stufe 2 (10.10.2026): Formular vor den Kommentaren ---- */
body.bb-kom-v2 :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-comments__area > .wp-block-post-comments-form{margin:8px 0 56px}
body.bb-kom-v2 :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-kom-kopf,body.bb-kom-v2 :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-comments__area > .bb-comments__count{max-width:var(--kom-breite);padding-top:0}
body.bb-kom-v2 :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-comments__count{font-family:Fraunces,Georgia,serif;font-weight:400;font-size:clamp(24px,2.2vw,30px);line-height:1.12;letter-spacing:-.015em;color:var(--kom-ink)}
body.bb-kom-v2 :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) ol.wp-block-comment-template{margin-top:20px}

/* Foto-Feld */
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-kb{box-sizing:border-box;padding:18px 20px;background:#fff;border:1.5px dashed #cfc9c3}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-kb.bb-kb--fehler{border-color:var(--kom-akzent)}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-kb__titel{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-family:Mulish,sans-serif;font-weight:800;font-size:15px;line-height:1.3;color:var(--kom-ink)}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-kb__icon{flex:none;color:var(--kom-akzent)}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-kb__frei{font-weight:400;color:var(--kom-muted)}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-kb__wahl{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-kb__input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0;opacity:0}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .comment-form label.bb-kb__knopf{display:inline-block;margin:0;padding:9px 18px;border:1.5px solid var(--kom-akzent);background:#fff;color:var(--kom-akzent);font-family:Mulish,sans-serif;font-weight:800;font-size:15px;line-height:1.3;cursor:pointer}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .comment-form label.bb-kb__knopf:hover{background:var(--kom-akzent-wash);color:var(--kom-akzent-dunkel);border-color:var(--kom-akzent-dunkel)}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-kb__input:focus-visible + label.bb-kb__knopf{outline:3px solid rgba(154,61,51,.35);outline-offset:2px}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-kb__name{min-width:0;font-family:Mulish,sans-serif;font-size:14px;color:var(--kom-muted);overflow-wrap:anywhere}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-kb--fehler .bb-kb__name{color:var(--kom-akzent-dunkel);font-weight:700}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-kb__vorschau{display:flex;align-items:flex-end;gap:14px;margin-top:14px}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-kb__vorschau[hidden]{display:none}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-kb__vorschau img{display:block;width:96px;height:96px;object-fit:cover;border:1px solid var(--kom-linie)}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-kb__weg{padding:0;border:0;background:none;color:var(--kom-akzent);font-family:Mulish,sans-serif;font-weight:800;font-size:14px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-kb__hinweis{margin:12px 0 0;font-family:Mulish,sans-serif;font-size:13px;line-height:1.5;color:var(--kom-muted)}

/* Foto im Kommentar */
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-kb-foto{margin:14px 0 0}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-kb-foto a{display:inline-block;line-height:0}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-kb-foto__bild{display:block;width:auto;max-width:min(100%,360px);height:auto;max-height:360px;border:1px solid var(--kom-linie)}
body.bb-kom-neu :is(.bb-rz-kommentare,.bb-fa-kommentare,.bb-comments) .bb-kb-foto a:focus-visible .bb-kb-foto__bild{outline:3px solid rgba(154,61,51,.35);outline-offset:2px}