/* Bilder in Beiträgen und Kurstexten (Andreas 2026-11-04): kleiner als volle Breite, Lage und Breite aus {lage breite},
   Umfluss mit Text daneben, Bildansicht mit Zoom (js/bildansicht.js), Bild-Werkzeug in der Editor-Vorschau. Nur Farbvariablen. */
.text-inhalt{display:flow-root}                       /* Umfluss endet innerhalb des Textes */
.text-inhalt .md-bild{margin:1.1em auto;text-align:center;max-width:100%}
.text-inhalt .md-bild-knopf{display:inline-block;padding:0;border:0;background:none;cursor:zoom-in;max-width:100%;line-height:0;border-radius:10px}
.text-inhalt .md-bild-knopf:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.text-inhalt .md-bild img{display:block;margin:0;max-width:min(100%,420px);max-height:380px;width:auto;height:auto;border-radius:10px;border:1px solid var(--line);object-fit:contain}
/* feste Breite in % der Textbreite */
.text-inhalt .md-bild[style*="--bw"]{width:var(--bw)}
.text-inhalt .md-bild[style*="--bw"] .md-bild-knopf,.text-inhalt .md-bild[style*="--bw"] img{width:100%;max-width:100%;max-height:none}
.text-inhalt .md-bild.lage-links{margin-left:0;margin-right:auto;text-align:left}
.text-inhalt .md-bild.lage-rechts{margin-left:auto;margin-right:0;text-align:right}
.text-inhalt .md-bild.lage-mitte{margin-left:auto;margin-right:auto}
.text-inhalt .md-bild.lage-umfluss-links{float:left;width:var(--bw,38%);margin:.25em 1.3em .7em 0;text-align:left}
.text-inhalt .md-bild.lage-umfluss-rechts{float:right;width:var(--bw,38%);margin:.25em 0 .7em 1.3em;text-align:left}
.text-inhalt .md-bild.lage-umfluss-links .md-bild-knopf,.text-inhalt .md-bild.lage-umfluss-rechts .md-bild-knopf,
.text-inhalt .md-bild.lage-umfluss-links img,.text-inhalt .md-bild.lage-umfluss-rechts img{width:100%;max-width:100%;max-height:none}
.text-inhalt .md-bild figcaption{font-size:.84em;color:var(--mute);font-style:italic;margin-top:6px;line-height:1.35}
.text-inhalt h2,.text-inhalt h3,.text-inhalt h4,.text-inhalt hr{clear:both}   /* neue Abschnitte beginnen unter dem Bild */
.md-bildlink{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;color:var(--text);font-weight:600;border-bottom:1px solid var(--rot-rand);cursor:zoom-in}
@media (max-width:600px){
  .text-inhalt .md-bild img{max-height:300px}
  .text-inhalt .md-bild.lage-umfluss-links,.text-inhalt .md-bild.lage-umfluss-rechts{width:clamp(36%,var(--bw,38%),50%)}
  .text-inhalt .md-bild.lage-umfluss-links{margin-right:.9em}.text-inhalt .md-bild.lage-umfluss-rechts{margin-left:.9em}
}
/* Feed: gekürzte Karte mit klarer Kante, Bild bleibt im Text */
.beitrag .text-inhalt .weiterlesen{display:inline-block;margin-top:2px}

/* Bildansicht */
.lightbox.ba{display:block;padding:0;touch-action:none;user-select:none}
.ba-buehne{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;padding:56px 12px 70px}
.ba-buehne img{max-width:calc(100vw - 24px);max-height:calc(100vh - 126px);max-height:calc(100dvh - 126px);border-radius:6px;transform-origin:center center;transition:transform .12s ease-out;cursor:zoom-in;will-change:transform}
.lightbox.ba.gezoomt .ba-buehne img{cursor:grab;transition:none}
.lightbox.ba button,.lightbox.ba a[data-ba]{position:absolute;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;border:0}
.lightbox.ba button:hover,.lightbox.ba a[data-ba]:hover{background:rgba(255,255,255,.26)}
.lightbox.ba .lb-x{top:12px;right:12px}.lightbox.ba .lb-l{left:12px;top:50%;margin-top:-22px}.lightbox.ba .lb-r{right:12px;top:50%;margin-top:-22px}
.lightbox.ba .lb-zahl{top:24px;bottom:auto}
.ba-leiste{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.55);border-radius:30px;padding:5px 8px}
.lightbox.ba .ba-leiste button,.lightbox.ba .ba-leiste a[data-ba]{position:static;width:38px;height:38px}
.ba-prozent{color:#fff;font-size:13px;min-width:52px;text-align:center;font-variant-numeric:tabular-nums}
.lightbox.ba svg.i{width:20px;height:20px}

/* Bild-Werkzeug in der Editor-Vorschau */
.editor-leiste button.an{background:var(--panel3);color:var(--text)}
.editor-vorschau .md-bild.ba-bearbeitbar{position:relative;outline:1px dashed var(--line);outline-offset:4px;border-radius:10px}
.ba-werkzeug{display:flex;flex-wrap:wrap;gap:2px;justify-content:center;align-items:center;margin:0 auto 6px;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:3px;width:max-content;max-width:100%}
.ba-werkzeug button{width:30px;height:28px;border-radius:6px;border:0;background:none;color:var(--mute);display:grid;place-items:center;cursor:pointer}
.ba-werkzeug button:hover{background:var(--panel3);color:var(--text)}
.ba-werkzeug button.an{background:var(--panel3);color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
.ba-breite{font-size:12px;color:var(--mute);padding:0 6px;min-width:44px;text-align:center}
.ba-griff{position:absolute;right:-8px;bottom:-8px;width:20px;height:20px;border-radius:50%;background:var(--red);border:2px solid var(--panel);cursor:nwse-resize;touch-action:none;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.editor-vorschau .md-bild.lage-umfluss-rechts .ba-griff,.editor-vorschau .md-bild.lage-rechts .ba-griff{right:auto;left:-8px;cursor:nesw-resize}

/* Anpinnen-Auswahl */
.pin-wahl{display:grid;gap:8px;margin-top:6px}
.pin-option{display:flex;align-items:center;gap:12px;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);color:var(--text);cursor:pointer}
.pin-option:hover{border-color:var(--rot-rand)}
.pin-option.an{border-color:var(--red)}
.pin-option b{display:block}.pin-option small{display:block;color:var(--mute);margin-top:2px}
/* „statisch“: reine Grafik ohne Großansicht */
.text-inhalt .md-bild.statisch .md-bild-knopf{cursor:default}

/* Datum neben dem Namen nie umbrechen (Handy, 2026-11-04): Stufe darf kürzen, Datum bleibt ganz */
.name>small>*{white-space:nowrap}
.name>small a,.name>small time{flex-shrink:0}

/* YouTube-Vorschau im Text und Hashtag-Zeilen (2026-11-04) */
.text-inhalt .md-video{margin:.9em 0 1.6em;max-width:560px}
.text-inhalt .md-video .video-vorschau{margin-top:0;cursor:pointer;border:0;padding:0}
.text-inhalt .md-hashtags{margin:1.2em 0 1.4em;color:var(--mute);font-size:.92em;line-height:1.5}
.text-inhalt .md-hashtags:last-child{margin-bottom:0}

/* Themen-Reiter im Forum umbrechen statt unsichtbar seitlich zu scrollen (letzter Reiter wirkte abgeschnitten, 2026-11-04) */
.reiter.themen-reiter{flex-wrap:wrap;overflow:visible;row-gap:0}
/* Kursliste: Ansicht-Auswahl */
.kurs-ansicht{width:auto;max-width:100%;font-size:13px;padding:7px 10px}
/* Pfeile an waagerechten Leisten (js/leisten.js) */
.lp-rahmen{position:relative;min-width:0}
.lp-pfeil{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--text);display:none;place-items:center;z-index:2;box-shadow:0 2px 8px rgba(0,0,0,.25);cursor:pointer;padding:0}
.lp-l{left:-4px}.lp-r{right:-4px}
.lp-rahmen.lp-links .lp-l,.lp-rahmen.lp-rechts .lp-r{display:grid}
.lp-rahmen>.reiter{margin-bottom:16px}