/* ---------------------------------------------------------------------------
   AuthentifyMe – Gemeinschaftsgestaltung
   Bringt BuddyPress und LearnPress auf die DTH-Palette und -Schriften.
   Wird von dth-my-darstellung.php nach dem Theme geladen.
   --------------------------------------------------------------------------- */

:root{
  --dth-navy:#1d2b65;
  --dth-gruen:#3eb489;
  --dth-orange:#e8572a;
  --dth-tinte:#111827;
  --dth-gedaempft:#6b7280;
  --dth-linie:#e5e7eb;
  --dth-flaeche:#f9fafb;
  --dth-radius:12px;
}

/* ── Überschriften wie auf dth-group.com ─────────────────────────────────────
   Dort läuft alles auf Inter, auch die Überschriften. Die h1 ist bewusst
   leicht gesetzt (Gewicht 300) mit enger Laufweite; hervorgehobene Wörter
   darin stehen auf 600. Keine Serifenschrift auf der ganzen Seite.
   -------------------------------------------------------------------------- */
.wp-site-blocks h1, .wp-site-blocks h2, .wp-site-blocks h3,
.wp-site-blocks h4, .wp-site-blocks h5, .wp-site-blocks h6,
.entry-title, .page-title, .wp-block-post-title,
#buddypress h1, #buddypress h2, #buddypress h3, #buddypress h4,
#buddypress h5, #buddypress h6,
.bp-feedback h2, .lp-content-area h1, .lp-content-area h2, .lp-content-area h3{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color:var(--dth-navy);
  font-weight:400;
  letter-spacing:-.02em;
  line-height:1.18;
}

.wp-site-blocks h1, .entry-title, .page-title, .wp-block-post-title,
#buddypress h1{
  font-weight:300;
  letter-spacing:-.03em;
  line-height:1.12;
}
.wp-site-blocks h1 strong, .entry-title strong, .wp-block-post-title strong{
  font-weight:600;
}

/* ── Breitere Spalte für Community-Seiten ───────────────────────────────── */
body.buddypress .wp-block-post-content,
body.buddypress .entry-content{
  max-width:none;
}
#buddypress{
  max-width:920px;
  margin-inline:auto;
  font-size:16px;
}

/* ── Formularfelder und Knöpfe ──────────────────────────────────────────── */
#buddypress input[type=text],
#buddypress input[type=search],
#buddypress input[type=email],
#buddypress textarea,
#buddypress select,
#buddypress .bp-search input{
  border:1px solid var(--dth-linie);
  border-radius:var(--dth-radius);
  padding:11px 14px;
  font-family:inherit;
  font-size:15px;
  background:#fff;
  color:var(--dth-tinte);
  box-shadow:none;
}
#buddypress input:focus, #buddypress textarea:focus, #buddypress select:focus{
  outline:none;
  border-color:var(--dth-gruen);
  box-shadow:0 0 0 3px rgba(62,180,137,.16);
}
#buddypress .button,
#buddypress button,
#buddypress input[type=submit],
#buddypress a.button,
#buddypress .generic-button a,
.lp-button, .learn-press-course-buttons button{
  background:var(--dth-navy);
  color:#fff;
  border:0;
  border-radius:10px;
  padding:10px 20px;
  font-weight:600;
  font-size:15px;
  font-family:inherit;
  cursor:pointer;
  transition:background .18s ease;
  text-decoration:none;
  line-height:1.3;
}
#buddypress .button:hover,
#buddypress button:hover,
#buddypress input[type=submit]:hover,
#buddypress a.button:hover,
#buddypress .generic-button a:hover,
.lp-button:hover{
  background:var(--dth-gruen);
  color:#fff;
}

/* ── Der Aktivitätsstrom ────────────────────────────────────────────────── */
#buddypress form#whats-new-form,
#buddypress #whats-new-form{
  border:1px solid var(--dth-linie);
  border-radius:16px;
  background:#fff;
  padding:18px;
  box-shadow:0 1px 3px rgba(17,24,39,.04);
}
#buddypress #whats-new-textarea textarea,
#buddypress #whats-new{
  border:0 !important;
  box-shadow:none !important;
  font-size:16px;
  min-height:58px;
  padding:6px 2px !important;
}
/* Profilbilder sind nicht immer quadratisch. Ohne object-fit werden sie in den
   Rahmen gestaucht - deshalb steht es hier überall dabei. */
#buddypress img.avatar,
#buddypress #whats-new-avatar img,
#buddypress .activity-avatar img,
#buddypress .acomment-avatar img,
#buddypress .item-avatar img{
  border-radius:50%;
  object-fit:cover;
  aspect-ratio:1/1;
}

/* Das Bild neben dem Eingabefeld hatte gar keine Größe und wuchs dadurch auf
   die volle Breite der Kachel. */
#buddypress#buddypress #whats-new-avatar,
#buddypress#buddypress #whats-new-avatar a{
  display:block;
  float:left;
  width:46px;
  height:46px;
  margin:0 14px 0 0;
  flex:0 0 46px;
}
#buddypress#buddypress #whats-new-avatar img{
  width:46px;
  height:46px;
  max-width:46px;
  display:block;
}
#buddypress#buddypress form#whats-new-form{
  display:flex;
  align-items:flex-start;
  gap:0;
}
#buddypress#buddypress #whats-new-content,
#buddypress#buddypress #whats-new-textarea{
  flex:1 1 auto;
  min-width:0;
}

#buddypress ul.activity-list li.activity-item{
  border:1px solid var(--dth-linie);
  border-radius:16px;
  background:#fff;
  padding:18px;
  margin-bottom:14px;
  box-shadow:0 1px 3px rgba(17,24,39,.04);
}
#buddypress .activity-header p{
  color:var(--dth-gedaempft);
  font-size:14px;
}
#buddypress .activity-content .activity-inner{
  font-size:16px;
  line-height:1.6;
}

/* Reiterleiste */
#buddypress div.item-list-tabs ul,
#buddypress .bp-navs ul{
  display:flex;
  gap:6px;
  border:0;
  background:transparent;
  padding:0;
  margin:0 0 16px;
  flex-wrap:wrap;
}
#buddypress div.item-list-tabs ul li,
#buddypress .bp-navs ul li{
  float:none;
  margin:0;
}
#buddypress div.item-list-tabs ul li a,
#buddypress .bp-navs ul li a{
  display:inline-block;
  padding:9px 16px;
  border-radius:999px;
  background:var(--dth-flaeche);
  color:var(--dth-gedaempft);
  font-weight:600;
  font-size:14px;
  text-decoration:none;
  border:1px solid transparent;
}
#buddypress div.item-list-tabs ul li.selected a,
#buddypress div.item-list-tabs ul li.current a,
#buddypress .bp-navs ul li.selected a,
#buddypress .bp-navs ul li.current a{
  background:var(--dth-navy);
  color:#fff;
}
#buddypress div.item-list-tabs ul li a:hover,
#buddypress .bp-navs ul li a:hover{
  background:var(--dth-linie);
  color:var(--dth-tinte);
}

/* Hinweise – der blaue Standardbalken passt nicht */
#buddypress div.bp-feedback,
#buddypress .bp-feedback{
  border:1px solid var(--dth-linie);
  border-left:4px solid var(--dth-gruen);
  border-radius:12px;
  background:var(--dth-flaeche);
  color:var(--dth-tinte);
  box-shadow:none;
  padding:0;
  overflow:hidden;
}
#buddypress div.bp-feedback .bp-icon,
#buddypress .bp-feedback .bp-icon{
  background:transparent;
  color:var(--dth-gruen);
}
#buddypress div.bp-feedback p{
  padding:14px 16px;
  margin:0;
  color:var(--dth-tinte);
}

/* ── Listen: Gruppen und Mitglieder ─────────────────────────────────────────
   ACHTUNG: Der Aktivitätsstrom trägt ebenfalls die Klasse "item-list"
   (<ul class="activity-list item-list bp-list">). Eine Regel auf
   "ul.item-list li" trifft deshalb auch die Beiträge und legt dort Avatar,
   Text und Kommentare nebeneinander. Darum hier ausdrücklich nur die
   Verzeichnisse ansprechen.
   -------------------------------------------------------------------------- */
/* ⚠️ `:not(.grid)` ist entscheidend: diese Regel trägt zwei IDs und schlägt
   damit die Kartenregel weiter unten (eine ID). Ohne den Zusatz behielten die
   Gruppenkarten ihren Listen-Rahmen und ihr Flex-Layout, sobald das Raster
   endlich griff. */
#buddypress #members-list:not(.grid) > li,
#buddypress #groups-list:not(.grid) > li,
#buddypress ul.item-list:not(.activity-list):not(.grid) > li{
  border:1px solid var(--dth-linie);
  border-radius:16px;
  background:#fff;
  padding:18px;
  margin-bottom:12px;
  box-shadow:0 1px 3px rgba(17,24,39,.04);
  display:flex;
  gap:16px;
  align-items:center;
}
#buddypress ul.item-list:not(.activity-list) > li .item-title,
#buddypress ul.item-list:not(.activity-list) > li h2{
  font-size:18px;
  margin:0 0 4px;
}
#buddypress ul.item-list:not(.activity-list) > li .item-meta,
#buddypress ul.item-list:not(.activity-list) > li .item-desc{
  color:var(--dth-gedaempft);
  font-size:14px;
}

/* ── Beiträge und ihre Antworten ─────────────────────────────────────────── */
#buddypress ul.activity-list > li.activity-item{
  display:block;          /* niemals flex - siehe Hinweis oben */
  position:relative;
  padding-left:74px;      /* Platz für das Bild links */
}
#buddypress ul.activity-list > li.activity-item .activity-avatar{
  position:absolute;
  left:18px;
  top:18px;
  float:none;
  margin:0;
  width:44px;
}
#buddypress ul.activity-list > li.activity-item .activity-avatar img{
  width:44px;
  height:44px;
  max-width:44px;
  display:block;
}
#buddypress .activity-content,
#buddypress .activity-header,
#buddypress .activity-inner{
  width:auto;
  max-width:none;
  margin-left:0;
  float:none;
}

/* Antworten hängen eingerückt unter dem Beitrag, nicht daneben. */
#buddypress ul.activity-comments{
  display:block;
  width:auto;
  max-width:none;
  margin:14px 0 0;
  padding:14px 0 0;
  border-top:1px solid var(--dth-linie);
  list-style:none;
  float:none;
  clear:both;
}
#buddypress ul.activity-comments li{
  display:block;
  width:auto;
  max-width:none;
  float:none;
  border:0;
  background:transparent;
  box-shadow:none;
  padding:10px 0 10px 46px;
  margin:0;
  position:relative;
}
#buddypress ul.activity-comments li ul{
  margin-left:20px;
  padding-left:0;
  border-left:2px solid var(--dth-linie);
}
#buddypress ul.activity-comments li > .acomment-avatar,
#buddypress ul.activity-comments li > a > img.avatar,
#buddypress ul.activity-comments img.avatar{
  position:absolute;
  left:0;
  top:10px;
  width:34px;
  height:34px;
  max-width:34px;
  border-radius:50%;
  float:none;
  margin:0;
  display:block;
}

/* Sicherheitsnetz: Kein Profilbild darf irgendwo unbegrenzt wachsen. Die
   Dateien liegen als bpfull vor und werden sonst in Originalgröße gezeigt. */
#buddypress#buddypress img.avatar{
  max-width:100px;
  max-height:100px;
}
#buddypress#buddypress .item-avatar img.avatar,
#buddypress#buddypress ul.item-list img.avatar{
  width:56px;
  height:56px;
  max-width:56px;
}
#buddypress .acomment-meta{
  font-size:13px;
  color:var(--dth-gedaempft);
  margin-bottom:2px;
}
#buddypress .acomment-content{
  font-size:15px;
  line-height:1.6;
  width:auto;
  max-width:none;
}
#buddypress .acomment-content p:last-child{ margin-bottom:0; }

/* Die Knöpfe unter Beitrag und Antwort.
   Die doppelte ID hebt die Spezifität über die Vorgaben von bp-nouveau, ohne
   dass irgendwo !important stehen muss. bp-nouveau lässt die Knöpfe nach
   rechts fließen; dadurch liefen sie aus dem Kasten heraus. */
#buddypress#buddypress .activity-meta,
#buddypress#buddypress .acomment-options,
#buddypress#buddypress .comment-item .activity-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:10px 0 0;
  padding:0;
  float:none;
  clear:both;
  width:auto;
  max-width:100%;
}
/* Die Knöpfe wurden unten abgeschnitten: sie waren höher als das Band, in dem
   sie sitzen, und dessen feste Höhe schnitt sie ab. Deshalb hier beides -
   die Behälter dürfen wachsen, und die Knöpfe selbst werden flacher. */
#buddypress#buddypress .activity-meta,
#buddypress#buddypress .acomment-options,
#buddypress#buddypress li.activity-item,
#buddypress#buddypress li.comment-item,
#buddypress#buddypress .activity-content,
#buddypress#buddypress .activity-comments{
  overflow:visible;
  height:auto;
  min-height:0;
}
#buddypress#buddypress .activity-meta,
#buddypress#buddypress .acomment-options{
  padding-bottom:4px;
  line-height:normal;
}

/* Ansprechen, was die Knöpfe SIND - nicht, wo sie liegen. bp-nouveau hängt
   sie je nach Zusammenhang in unterschiedliche Behälter. */
#buddypress#buddypress a.acomment-reply,
#buddypress#buddypress a.acomment-delete,
#buddypress#buddypress a.delete-activity,
#buddypress#buddypress a.delete-activity-single,
#buddypress#buddypress a.activity-time-since,
#buddypress#buddypress .activity-item a.button,
#buddypress#buddypress .comment-item a.button,
#buddypress#buddypress .activity-meta a,
#buddypress#buddypress .activity-meta button,
#buddypress#buddypress .acomment-options a,
#buddypress#buddypress .acomment-options button{
  display:inline-flex;
  align-items:center;
  float:none;
  margin:0;
  font-size:13px;
  padding:6px 14px;
  line-height:1.35;
  height:auto;
  min-height:0;
  white-space:nowrap;
  border-radius:999px;
}

/* Nichts darf breiter werden als sein Kasten. Lange Adressen ohne Leerzeichen
   sind der häufigste Grund dafür, dass eine Zeile hinausläuft. */
#buddypress li.activity-item,
#buddypress li.comment-item,
#buddypress .activity-content,
#buddypress .activity-inner,
#buddypress .acomment-content,
#buddypress .activity-comments{
  box-sizing:border-box;
  min-width:0;
  max-width:100%;
}
#buddypress .activity-inner,
#buddypress .acomment-content{
  overflow-wrap:anywhere;
}
#buddypress .activity-inner img,
#buddypress .acomment-content img{
  max-width:100%;
  height:auto;
}

#buddypress .activity-comments form.ac-form{
  margin:10px 0 0 46px;
  width:auto;
  max-width:calc(100% - 46px);
}

/* ── Kursseiten von LearnPress ──────────────────────────────────────────── */
.lp-course-curriculum .course-section,
.course-curriculum .section{
  border:1px solid var(--dth-linie);
  border-radius:14px;
  overflow:hidden;
  margin-bottom:12px;
  background:#fff;
}
.lp-course-curriculum .section-header,
.course-curriculum .section-header{
  background:var(--dth-flaeche);
  padding:14px 18px;
}
.lp-course-curriculum .section-title,
.course-curriculum .section-title{
  font-family:'Inter', -apple-system, 'Segoe UI', sans-serif;
  color:var(--dth-navy);
  font-size:20px;
}
.course-item-title{ font-size:15px; }
:root{ --lp-primary-color:#1d2b65; --lp-secondary-color:#3eb489; }

/* Der gelbe Standardknopf von LearnPress */
.lp-button, .course-buttons .button, button.lp-button{
  background:var(--dth-navy) !important;
  color:#fff !important;
  border-radius:10px !important;
}

/* ── Gruppen und Mitglieder als Karten ──────────────────────────────────────
   BuddyPress bringt ein Raster mit (Einstellung groups_layout). Hier bekommt es
   Titelbild, Logo und die Gesichter der Mitglieder.
   -------------------------------------------------------------------------- */
#buddypress ul.item-list.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
  gap:20px;
  padding:0;
  margin:0;
  list-style:none;
}
#buddypress ul.item-list.grid > li{
  display:block;
  float:none;
  width:auto;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
#buddypress ul.item-list.grid > li .list-wrap{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  border:1px solid var(--dth-linie);
  border-radius:16px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(17,24,39,.05);
  transition:box-shadow .18s ease, transform .18s ease;
}
#buddypress ul.item-list.grid > li .list-wrap:hover{
  box-shadow:0 6px 20px rgba(17,24,39,.10);
  transform:translateY(-2px);
}

/* Titelbild */
#buddypress .dth-gruppe-kopf{
  height:104px;
  background-size:cover;
  background-position:center;
  background-color:var(--dth-flaeche);
}
#buddypress .dth-gruppe-kopf.ohne-bild{
  background-image:linear-gradient(135deg, var(--dth-navy), var(--dth-gruen));
  opacity:.85;
}

/* Logo ragt in das Titelbild hinein - kein Kasten drumherum, das Bild ist
   bereits rund. */
#buddypress ul.item-list.grid > li .item-avatar{
  position:relative;
  margin:-38px auto 0;
  width:72px;
  height:72px;
  padding:0;
  border:0;
  background:transparent;
  z-index:2;
}
#buddypress ul.item-list.grid > li .item-avatar a{
  display:block;
  border:0;
  background:transparent;
  padding:0;
}
#buddypress ul.item-list.grid > li .item-avatar img{
  width:72px;
  height:72px;
  max-width:72px;
  border-radius:50%;
  object-fit:cover;
  background:#fff;
  box-shadow:0 0 0 4px #fff, 0 2px 8px rgba(17,24,39,.14);
  display:block;
}

#buddypress ul.item-list.grid > li .item{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  align-items:center;
  text-align:center;
  padding:14px 16px 18px;
  gap:6px;
}
#buddypress ul.item-list.grid > li .item-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  width:100%;
}
#buddypress ul.item-list.grid .list-title{
  font-size:17px;
  line-height:1.25;
  margin:0;
}
#buddypress ul.item-list.grid .list-title a{ color:var(--dth-navy); text-decoration:none; }
#buddypress ul.item-list.grid .list-title a:hover{ color:var(--dth-gruen); }
#buddypress ul.item-list.grid .item-meta{
  font-size:13px;
  color:var(--dth-gedaempft);
  margin:0;
}
#buddypress ul.item-list.grid .group-desc{
  font-size:13px;
  color:var(--dth-gedaempft);
  line-height:1.5;
  margin:2px 0 0;
}
#buddypress ul.item-list.grid .group-desc p{ margin:0; }

/* Die Gesichter der Mitglieder */
#buddypress .dth-gruppe-gesichter{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:auto;
  padding-top:12px;
}
#buddypress .dth-gruppe-gesichter .dth-gesicht{ display:block; margin-left:-8px; }
#buddypress .dth-gruppe-gesichter .dth-gesicht:first-child{ margin-left:0; }
#buddypress#buddypress .dth-gruppe-gesichter img{
  width:30px;
  height:30px;
  max-width:30px;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 0 0 2px #fff;
  display:block;
}
#buddypress .dth-gruppe-gesichter .dth-gesicht-mehr{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  margin-left:-8px;
  border-radius:50%;
  background:var(--dth-flaeche);
  box-shadow:0 0 0 2px #fff;
  font-size:11px;
  font-weight:700;
  color:var(--dth-gedaempft);
}

/* ── Knöpfe kleben nicht mehr aneinander ────────────────────────────────── */
#buddypress#buddypress .group-button,
#buddypress#buddypress .member-button,
#buddypress#buddypress .generic-button,
#buddypress#buddypress .bp-group-buttons,
#buddypress#buddypress .action{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin:8px 0 0;
  float:none;
}
#buddypress#buddypress .action > *,
#buddypress#buddypress .group-button > *{ margin:0; }

/* ── Eckige Rahmen um runde Bilder ──────────────────────────────────────────
   bp-nouveau legt um Avatare teils einen Kasten mit Rand und Innenabstand.
   Das Bild ist bereits rund, der Kasten stört. */
#buddypress .item-avatar,
#buddypress .activity-avatar,
#buddypress .acomment-avatar,
#buddypress #whats-new-avatar{
  border:0;
  background:transparent;
  padding:0;
  box-shadow:none;
}

/* ── Angehängte Dateien ─────────────────────────────────────────────────── */
#buddypress .dth-anhaenge{ margin:12px 0 0; }

#buddypress .dth-bilder{
  display:grid;
  gap:6px;
  border-radius:12px;
  overflow:hidden;
}
#buddypress .dth-bilder-1{ grid-template-columns:1fr; }
#buddypress .dth-bilder-2{ grid-template-columns:1fr 1fr; }
#buddypress .dth-bilder-3,
#buddypress .dth-bilder-4{ grid-template-columns:1fr 1fr; }
#buddypress .dth-bild{ display:block; line-height:0; }
#buddypress .dth-bild img{
  width:100%;
  height:100%;
  max-height:420px;
  object-fit:cover;
  display:block;
}
#buddypress .dth-bilder-1 .dth-bild img{ object-fit:contain; background:var(--dth-flaeche); }

/* Videos und Tonaufnahmen */
#buddypress .dth-video,
#buddypress .dth-ton{ margin-top:10px; }
#buddypress .dth-video video{
  width:100%;
  max-height:460px;
  border-radius:12px;
  background:#111827;
  display:block;
}
#buddypress .dth-ton audio{ width:100%; }
#buddypress .dth-video-info{
  display:block;
  margin-top:6px;
  font-size:13px;
  color:var(--dth-gedaempft);
}

/* Leuchtkasten für Fotos */
.dth-leuchtkasten{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(17,24,39,.92);
  padding:24px;
  cursor:zoom-out;
}
.dth-leuchtkasten img{
  max-width:100%;
  max-height:100%;
  border-radius:8px;
  box-shadow:0 10px 40px rgba(0,0,0,.5);
  cursor:default;
}
.dth-leuchtkasten .dth-lk-zu{
  position:absolute;
  top:16px;
  right:20px;
  background:none;
  border:0;
  color:#fff;
  font-size:34px;
  line-height:1;
  cursor:pointer;
  opacity:.8;
}
.dth-leuchtkasten .dth-lk-zu:hover{ opacity:1; }
.dth-leuchtkasten .dth-lk-blatt{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(255,255,255,.14);
  border:0;
  color:#fff;
  font-size:28px;
  width:46px;
  height:46px;
  border-radius:50%;
  cursor:pointer;
}
.dth-leuchtkasten .dth-lk-blatt:hover{ background:rgba(255,255,255,.26); }
.dth-leuchtkasten .dth-lk-zurueck{ left:16px; }
.dth-leuchtkasten .dth-lk-vor{ right:16px; }
.dth-leuchtkasten .dth-lk-name{
  position:absolute;
  bottom:16px;
  left:0;
  right:0;
  text-align:center;
  color:rgba(255,255,255,.75);
  font-size:13px;
}

#buddypress a.dth-datei{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:8px;
  padding:12px 14px;
  border:1px solid var(--dth-linie);
  border-radius:12px;
  background:var(--dth-flaeche);
  text-decoration:none;
  color:var(--dth-tinte);
  transition:border-color .15s ease, background .15s ease;
}
#buddypress a.dth-datei:hover{ border-color:var(--dth-navy); background:#fff; }
#buddypress .dth-datei-symbol{ font-size:24px; line-height:1; }
#buddypress .dth-datei-text{ display:flex; flex-direction:column; min-width:0; }
#buddypress .dth-datei-text strong{
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#buddypress .dth-datei-info{ font-size:13px; color:var(--dth-gedaempft); }
#buddypress .dth-datei-pfeil{ margin-left:auto; color:var(--dth-navy); font-size:19px; }

/* Der Knopf unter dem Eingabefeld */
#buddypress .dth-anhang-leiste{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:10px;
}
#buddypress .dth-anhang-knopf{
  background:var(--dth-flaeche);
  color:var(--dth-gedaempft);
  border:1px solid var(--dth-linie);
  border-radius:999px;
  padding:7px 14px;
  font-size:14px;
  cursor:pointer;
}
#buddypress .dth-anhang-knopf:hover{ border-color:var(--dth-navy); color:var(--dth-navy); background:#fff; }
#buddypress .dth-anhang-knopf[disabled]{ opacity:.6; cursor:progress; }
#buddypress .dth-anhang-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:rgba(62,180,137,.12);
  border:1px solid var(--dth-gruen);
  border-radius:999px;
  padding:5px 11px;
  font-size:13px;
}
#buddypress .dth-anhang-chip em{ color:var(--dth-gedaempft); font-style:normal; }
#buddypress .dth-anhang-chip.ist-fehler{
  background:rgba(232,87,42,.10);
  border-color:var(--dth-orange);
  color:var(--dth-orange);
}
#buddypress .dth-anhang-weg{
  background:none;
  border:0;
  padding:0 0 0 2px;
  font-size:17px;
  line-height:1;
  cursor:pointer;
  color:var(--dth-gedaempft);
}
#buddypress .dth-anhang-weg:hover{ color:var(--dth-orange); }

/* ── Reaktionen und Anpinnen ────────────────────────────────────────────── */
#buddypress .dth-reaktionen{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--dth-linie);
}
#buddypress .dth-reaktion{
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:var(--dth-flaeche);
  color:var(--dth-tinte);
  border:1px solid transparent;
  border-radius:999px;
  padding:5px 11px;
  font-size:15px;
  line-height:1.2;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .12s ease;
}
#buddypress .dth-reaktion:hover{
  background:#fff;
  border-color:var(--dth-linie);
  transform:translateY(-1px);
}
#buddypress .dth-reaktion.ist-meine{
  background:rgba(62,180,137,.14);
  border-color:var(--dth-gruen);
}
/* Ungenutzte Reaktionen treten zurück, bis man mit der Maus darüber geht. */
#buddypress .dth-reaktion.ist-leer{ opacity:.45; }
#buddypress .dth-reaktion.ist-leer:hover{ opacity:1; }
#buddypress .dth-reaktion .dth-anzahl{
  font-size:13px;
  font-weight:700;
  color:var(--dth-gedaempft);
}
#buddypress .dth-reaktion.ist-meine .dth-anzahl{ color:var(--dth-navy); }

#buddypress .dth-anpinnen{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:transparent;
  border:1px solid var(--dth-linie);
  border-radius:999px;
  padding:5px 12px;
  font-size:13px;
  color:var(--dth-gedaempft);
  cursor:pointer;
}
#buddypress .dth-anpinnen:hover{ border-color:var(--dth-navy); color:var(--dth-navy); }
#buddypress .dth-anpinnen.ist-angepinnt{
  background:var(--dth-navy);
  border-color:var(--dth-navy);
  color:#fff;
}
#buddypress .dth-pin-marke{ margin-left:auto; font-size:15px; }

/* Ein angepinnter Beitrag hebt sich ab, ohne zu schreien. */
#buddypress li.activity-item.dth-ist-angepinnt{
  border-color:var(--dth-navy);
  box-shadow:0 2px 10px rgba(29,43,101,.10);
}
#buddypress li.activity-item.dth-ist-angepinnt::before{
  content:"📌 Oben gehalten";
  display:block;
  font-size:12px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--dth-navy);
  margin-bottom:10px;
}

/* ── Glocke, Postfach und Profil im Menü ────────────────────────────────── */
.dth-menue-symbol > a,
.dth-menue-ich > a{
  position:relative;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  padding:4px 6px;
}
.dth-menue-symbol .dth-symbol{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:21px;
  height:21px;
  color:#1d2b65;
  opacity:.72;
  transition:opacity .15s ease, color .15s ease;
}
.dth-menue-symbol .dth-symbol svg{ display:block; }
.dth-menue-symbol > a:hover .dth-symbol{ opacity:1; color:#3eb489; }
.dth-menue-zahl{
  position:absolute;
  top:-2px;
  right:-4px;
  min-width:17px;
  height:17px;
  padding:0 4px;
  border-radius:999px;
  background:#3eb489;
  color:#fff;
  font-size:11px;
  font-weight:700;
  line-height:17px;
  text-align:center;
}
.dth-menue-ich img{
  width:30px;
  height:30px;
  max-width:30px;
  border-radius:50%;
  object-fit:cover;
  display:block;
  box-shadow:0 0 0 2px rgba(29,43,101,.12);
}
.dth-menue-ich > a:hover img{ box-shadow:0 0 0 2px #3eb489; }

/* ── Karten, die nicht mehr klicken ─────────────────────────────────────────
   Die Übersichtskarten in den Modulen zeigten auf die alte Academy. Die Ziele
   sind entfernt; damit sich der Mauszeiger nicht mehr wie bei einem Link
   verhält, tragen sie jetzt diese Klasse. Aussehen bleibt unverändert.
   -------------------------------------------------------------------------- */
.dth-kein-link{
  cursor:default;
  text-decoration:none;
}
.dth-kein-link:hover{
  text-decoration:none;
}

/* ── FlowBuddy in der Ecke ──────────────────────────────────────────────────
   Klein, still, wegklickbar. Sie darf nichts verdecken und niemanden beim
   Arbeiten stören — deshalb unten rechts, ohne Kasten, ohne Schatten-Show.
   -------------------------------------------------------------------------- */
.fb-ecke{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:9000;
  display:flex;
  flex-direction:column;
  align-items:center;
  opacity:.92;
  transition:opacity .3s ease, transform .4s ease;
  --fbe-farbe:#4caf50;
  --fbe-hell:#7bd37f;
  --fbe-tief:#2e7a31;
}
.fb-ecke:hover{ opacity:1; }
.fb-ecke.ist-weg{ opacity:0; transform:translateY(14px) scale(.9); pointer-events:none; }

.fb-ecke .fb-ecke-link{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-decoration:none;
  filter:drop-shadow(0 6px 14px rgba(17,24,39,.16));
}
.fb-ecke .fb-ecke-bild{ display:block; overflow:visible; }

/* Das Wort erscheint als Sprechblase ÜBER ihrem Kopf — und nur beim
   Darüberfahren. Rund und weich, aber in derselben Schrift wie die Seite:
   eine Comic-Schrift würde billig wirken, das Runde macht die Form. */
.fb-ecke .fb-ecke-link{ position:relative; }
.fb-ecke .fb-ecke-wort{
  position:absolute;
  bottom:calc(100% - 6px);
  left:50%;
  padding:6px 14px;
  border-radius:999px;
  background:#fff;
  color:var(--fbe-tief);
  font-family:'Inter', -apple-system, 'Segoe UI', sans-serif;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:-.01em;
  white-space:nowrap;
  box-shadow:0 4px 14px rgba(17,24,39,.14), 0 0 0 1px rgba(17,24,39,.05);
  opacity:0;
  transform:translate(-50%, 6px) scale(.86);
  transform-origin:50% 100%;
  transition:opacity .22s ease, transform .28s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;
}
/* Das Schwänzchen der Blase — zwei Kreise, das wirkt weicher als ein Dreieck */
.fb-ecke .fb-ecke-wort::before,
.fb-ecke .fb-ecke-wort::after{
  content:'';
  position:absolute;
  left:50%;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(17,24,39,.10);
}
.fb-ecke .fb-ecke-wort::before{
  width:8px; height:8px;
  bottom:-5px;
  transform:translateX(-11px);
}
.fb-ecke .fb-ecke-wort::after{
  width:5px; height:5px;
  bottom:-11px;
  transform:translateX(-4px);
}
.fb-ecke:hover .fb-ecke-wort,
.fb-ecke:focus-within .fb-ecke-wort{
  opacity:1;
  transform:translate(-50%, 0) scale(1);
}

/* Der Rückweg auf /flowbuddy/, falls jemand sie in der Ecke weggeklickt hat.
   Erscheint nur dann — sonst steht dort nichts. */
.fb-wieder{
  display:block;
  margin:14px auto 0;
  padding:8px 16px;
  border:0;
  border-radius:999px;
  background:color-mix(in srgb, var(--dth-tinte, #111827) 6%, transparent);
  color:var(--dth-tinte, #111827);
  font-family:'Inter', -apple-system, 'Segoe UI', sans-serif;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  transition:background .2s ease;
}
.fb-wieder:hover{ background:color-mix(in srgb, var(--dth-tinte, #111827) 11%, transparent); }
.fb-wieder:disabled{ cursor:default; opacity:.65; }

/* Hat man ihr mit der richtigen Gegenfarbe geholfen, nennt sie die HANDLUNG,
   mit der man ausgleicht — nicht nur die Farbe. Der Satz zeigt sich von
   selbst, ohne Darüberfahren, und ist rechtsbündig verankert: mittig würde
   er über den Bildschirmrand hinauslaufen. */
.fb-ecke.zeigt-handlung .fb-ecke-wort{
  opacity:1;
  left:auto;
  right:-4px;
  max-width:186px;
  white-space:normal;
  text-align:center;
  font-weight:500;
  line-height:1.35;
  transform:translate(0, 0) scale(1);
  transform-origin:100% 100%;
}
.fb-ecke.zeigt-handlung .fb-ecke-wort::before{
  left:auto; right:34px; transform:none;
}
.fb-ecke.zeigt-handlung .fb-ecke-wort::after{
  left:auto; right:41px; transform:none;
}

.fb-ecke .fb-ecke-zu{
  align-self:flex-end;
  margin:0 2px -4px 0;
  width:20px;
  height:20px;
  border:0;
  border-radius:50%;
  background:rgba(17,24,39,.06);
  color:var(--dth-gedaempft, #6b7280);
  font-size:15px;
  line-height:1;
  cursor:pointer;
  opacity:0;
  transition:opacity .2s ease;
}
.fb-ecke:hover .fb-ecke-zu,
.fb-ecke .fb-ecke-zu:focus{ opacity:1; }
.fb-ecke .fb-ecke-zu:hover{ background:rgba(17,24,39,.14); color:var(--dth-tinte, #111827); }

/* Die vier Farbpunkte — erscheinen nur, wenn sie Hilfe braucht */
.fb-ecke .fb-ecke-punkte{
  display:flex;
  gap:7px;
  margin-top:8px;
  padding:6px 9px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--dth-linie, #e5e7eb);
  box-shadow:0 3px 10px rgba(17,24,39,.10);
  animation:fb-punkte-auf .45s ease;
}
.fb-ecke .fb-ecke-punkte[hidden]{ display:none; }
@keyframes fb-punkte-auf{
  from{ opacity:0; transform:translateY(-5px) scale(.9); }
  to{ opacity:1; transform:none; }
}
.fb-ecke .fb-punkt{
  width:17px;
  height:17px;
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--p);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:0 0 0 0 var(--p);
}
.fb-ecke .fb-punkt:hover{ transform:scale(1.28); box-shadow:0 0 0 4px color-mix(in srgb, var(--p) 28%, transparent); }
.fb-ecke .fb-punkt.ist-daneben{ animation:fb-punkt-nein .45s ease; }
@keyframes fb-punkt-nein{
  0%,100%{ transform:none; }
  25%{ transform:translateX(-3px); }
  75%{ transform:translateX(3px); }
}

/* Aufatmen, wenn die richtige Farbe getroffen wurde */
.fb-ecke.ist-erleichtert .fb-ecke-bild{ animation:fb-aufatmen 1.1s ease; }
@keyframes fb-aufatmen{
  0%{ transform:none; }
  35%{ transform:scale(1.10) translateY(-4px); }
  100%{ transform:none; }
}

/* Auf schmalen Bildschirmen kleiner und weiter aus dem Weg */
@media (max-width:640px){
  .fb-ecke{ right:12px; bottom:12px; transform:scale(.78); transform-origin:bottom right; }
}

/* Wer Bewegung reduziert haben will, bekommt sie ruhig — das Skript hält den
   Atem an, hier verschwindet zusätzlich die Einblendung des Wortes. */
@media (prefers-reduced-motion: reduce){
  .fb-ecke .fb-ecke-wort.ist-neu{ animation:none; }
  .fb-ecke{ transition:none; }
}

/* ── Fußbereich ─────────────────────────────────────────────────────────── */
.dth-fuss{
  border-top:1px solid var(--dth-linie);
  margin-top:56px;
  padding:26px 20px 34px;
  text-align:center;
  font-size:14px;
  color:var(--dth-gedaempft);
}
.dth-fuss a{
  color:var(--dth-gedaempft);
  text-decoration:none;
  margin:0 9px;
}
.dth-fuss a:hover{ color:var(--dth-navy); text-decoration:underline; }
.dth-fuss .dth-fuss-marke{
  font-family:'Inter', -apple-system, 'Segoe UI', sans-serif;
  color:var(--dth-navy);
  font-size:19px;
  display:block;
  margin-bottom:6px;
}

/* ── Kleinigkeiten ──────────────────────────────────────────────────────── */
#buddypress .activity-list .activity-content .activity-header img.avatar{ display:none; }
#buddypress a{ color:var(--dth-gruen); }
#buddypress a:hover{ color:var(--dth-navy); }
#buddypress .highlight,
#buddypress span.count{
  background:var(--dth-gruen);
  color:#fff;
  border-radius:999px;
  padding:1px 8px;
  font-size:12px;
  font-weight:700;
}

@media (max-width:782px){
  #buddypress ul.item-list li{ flex-direction:column; align-items:flex-start; }
  #buddypress{ font-size:15px; }
}

/* ==========================================================================
   Die Profilseite  (17.08.2026)
   ==========================================================================

   Vorbild ist die alte BuddyBoss-Seite: ein breites Titelbild, ein GROSSES
   rundes Bild mittig, der Name gross, darunter EINE Zeile Kleingedrucktes,
   dann die Reiter - und kein einziger sichtbarer Kasten im Kasten.

   ⚠️ Der Name kommt NICHT von BuddyPress. Der Kopfbereich enthaelt nur
   "Aktiv vor ..."; der Name ist der Seitentitel des Themes und steht im
   Quelltext VOR dem Kopfbereich. Umsortieren ginge nur mit Flexbox auf dem
   gemeinsamen Elternteil - der umschliesst aber auch den ganzen Rest der
   Seite. Deshalb der andere Weg: Titel und Titelband bekommen denselben
   Untergrund und wachsen optisch zu EINEM Band zusammen. Die Nahtfarbe
   (--dth-navy) muss dafuer in beiden Regeln dieselbe bleiben.
   -------------------------------------------------------------------------- */

body.bp-user .wp-block-post-title{
  margin:0;
  padding:34px 24px 6px;
  background:#fff;
  color:var(--dth-navy);
  text-align:center;
  font-weight:300;                 /* wie auf dth-group.com - keine Serifen, kein Fett */
  letter-spacing:-.03em;
  font-size:clamp(26px, 4.6vw, 40px);
  line-height:1.1;
}

body.bp-user .entry-content{ margin-top:0; }

body.bp-user #buddypress #item-header{
  margin:0;
  padding:0;
  border:0;
  background:none;
}

/* Das Titelband traegt die Schmetterlinge der alten Plattform.
   ⚠️ Untergrund WEISS lassen. Die Falter sind hellgrau auf Weiss - auf
   dunklem Grund verschwinden sie, und mit background-blend-mode:screen
   wird das ganze Band weiss. Genau derselbe Fehler wie damals beim
   Umfaerben des Logos: die Helligkeit steckt in der Transparenz. */
body.bp-user #buddypress #header-cover-image{
  height:196px;
  border:0;
  border-radius:0;
  background-color:#fff;
  background-image:url('/bilder/schmetterlinge.png');
  background-repeat:no-repeat;
  background-position:center 42%;
  background-size:cover;
}

body.bp-user #buddypress #cover-image-container{ position:relative; }

/* ⚠️ BuddyPress stellt #item-header-content absolut. Ohne position:static
   legt sich "Aktiv vor ..." quer ueber das Profilbild. */
body.bp-user #buddypress #item-header-cover-image{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0 20px 4px;
  position:relative;
}
/* Hier ist !important ausnahmsweise noetig: BuddyPress setzt diese beiden
   Bausteine ueber mehrere Regeln absolut bzw. schwebend, und selbst die
   doppelte ID reicht nicht. Ohne das legt sich "Aktiv vor ..." quer ueber
   das Profilbild. */
body.bp-user #buddypress#buddypress #item-header-cover-image{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
}
body.bp-user #buddypress#buddypress #item-header-content,
body.bp-user #buddypress#buddypress #item-header-avatar{
  position:static !important;
  float:none !important;
  left:auto; right:auto; top:auto;
}
body.bp-user #buddypress#buddypress #item-header-content{
  width:100% !important;
  margin:14px 0 0 !important;
  padding:0 !important;
  text-align:center;
}

/* Das Bild sitzt gross und mittig, halb im Band - wie auf der alten Seite. */
body.bp-user #buddypress #item-header-avatar{
  margin:-68px 0 0;
  padding:0;
  float:none;
  width:auto;
}
body.bp-user #buddypress#buddypress #item-header-avatar img.avatar{
  width:136px;
  height:136px;
  max-width:136px;
  border-radius:50%;
  border:5px solid #fff;
  background:#fff;
  object-fit:cover;
  box-shadow:0 10px 26px rgba(17,24,39,.18);
  display:block;
}

/* Eine einzige Zeile Kleingedrucktes, mittig - kein Kasten darum. */
body.bp-user #buddypress #item-header-content{
  float:none;
  width:100%;
  margin:12px 0 0;
  padding:0;
  text-align:center;
}
body.bp-user #buddypress #item-header-content .item-meta{
  margin:0;
  padding:0;
  border:0;
  background:none;
  font-size:14px;
  color:var(--dth-gedaempft);
}
body.bp-user #buddypress #item-header-content .item-meta .activity{
  padding:0;
  border:0;
  background:none;
}

/* Die Reiter standen jeweils in einem eigenen Kasten - genau das
   "Rahmen um Rahmen". Die Kaesten weg, die Pillen bleiben. */
body.bp-user #buddypress .bp-wrap,
body.bp-user #buddypress .bp-wrap > .main-navs,
body.bp-user #buddypress #item-body,
body.bp-user #buddypress #subnav{
  border:0;
  background:none;
  box-shadow:none;
}
body.bp-user #buddypress .bp-wrap > .main-navs{
  margin-top:26px;
  padding:0 0 6px;
  border-bottom:1px solid var(--dth-linie);
}
body.bp-user #buddypress #subnav{ margin-top:18px; }

/* "Aktivitaeten der Mitglieder" ist auf einem persoenlichen Profil schlicht
   falsch beschriftet - und ueber den Reitern ohnehin doppelt. */
body.bp-user #buddypress .bp-screen-title{ display:none; }

/* ── Das leere erste Rasterfeld ──────────────────────────────────────────────
   In den Verzeichnissen blieb der erste Platz immer frei. Ursache: im
   ul.item-list steht ein Listeneintrag OHNE Karte darin - im Raster wird
   trotzdem eine Zelle dafuer freigehalten. Alles, was keine .list-wrap
   enthaelt, ist keine Karte und darf keinen Platz bekommen. */
#buddypress ul.item-list.grid > li:empty,
#buddypress ul.item-list.grid > li:not(:has(.list-wrap)){
  display:none;
}

/* ── Karten: nur EIN Rahmen ────────────────────────────────────────────────
   In den Gruppenkarten steckte ein Kasten im Kasten im Kasten: die Karte,
   darin ein Rahmen um den Inhalt, darin noch einer um den Beschreibungstext.
   Der einzige sichtbare Rahmen bleibt .list-wrap. */
#buddypress ul.item-list.grid > li .item,
#buddypress ul.item-list.grid > li .item-block,
#buddypress ul.item-list.grid > li .item-desc,
#buddypress ul.item-list.grid > li .item-meta,
#buddypress ul.item-list.grid > li .action{
  border:0;
  background:transparent;
  box-shadow:none;
}
#buddypress ul.item-list.grid > li .item-desc{
  padding:0;
  margin:2px 0 0;
  font-style:normal;
}
/* Gruppen ohne Beschreibung hinterliessen einen leeren Kasten. */
#buddypress ul.item-list.grid > li .item-desc:empty{ display:none; }

/* ── Gesperrter Kurs: den Beitreten-Knopf gar nicht erst zeigen ────────────
   Die Klasse setzt dth-my-kurszugang.php, wenn jemand nicht in der Gruppe
   ist. ⚠️ Das ist nur Kosmetik – gesperrt wird server-seitig, bevor
   LearnPress das Formular überhaupt verarbeitet. Ein abgeschicktes Formular
   fragt nicht danach, ob sein Knopf sichtbar war. */
body.dth-kurs-gesperrt .course-buttons,
body.dth-kurs-gesperrt .course-buttons__wrapper,
body.dth-kurs-gesperrt form.enroll-course,
body.dth-kurs-gesperrt .button-enroll-course{
  display:none !important;
}

/* ── Schmaler Bildschirm ───────────────────────────────────────────────────
   Die Reiterzeile wird sonst umgebrochen und schiebt die Seite auseinander.
   Hier laeuft sie stattdessen waagerecht durch und laesst sich wischen. */
@media (max-width:640px){
  body.bp-user .wp-block-post-title{
    padding:26px 16px 22px;
    border-radius:0;
  }
  body.bp-user #buddypress #header-cover-image{ height:120px; }
  body.bp-user #buddypress #item-header-avatar{ margin-top:-52px; }
  body.bp-user #buddypress#buddypress #item-header-avatar img.avatar{
    width:104px; height:104px; max-width:104px; border-width:4px;
  }

  #buddypress .bp-navs ul{
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    padding-bottom:4px;
  }
  #buddypress .bp-navs ul::-webkit-scrollbar{ display:none; }
  #buddypress .bp-navs ul li{ flex:0 0 auto; }

  #buddypress ul.item-list.grid{
    grid-template-columns:1fr;
    gap:14px;
  }
}

/* ===========================================================================
   Der Feed-Durchgang  (17.08.2026)
   Vorbild ist die alte BuddyBoss-Ansicht in arbeit\proben\buddyboss\.
   Reihenfolge wie auf dem Bildschirm: Spalten, Eingabekarte, Suchzeile,
   Beitragskarte, Fusszeile der Karte, Menue.
   =========================================================================== */

/* ── Zwei Spalten: Seitenleiste links, Strom rechts ────────────────────────
   Die Huelle setzt dth-my-seitenleiste.php. Ohne das Plugin greift hier
   nichts - die Seite sieht dann aus wie vorher. */
body.activity.directory #buddypress{ max-width:1240px; }

.dth-spalten{
  display:grid;
  grid-template-columns:312px minmax(0,1fr);
  gap:28px;
  align-items:start;
}
.dth-strom{ min-width:0; }   /* ohne das sprengen lange Links die Spalte */

.dth-seitenleiste{
  display:flex;
  flex-direction:column;
  gap:20px;
  position:sticky;
  top:24px;
}

.dth-kasten{
  background:#fff;
  border:1px solid var(--dth-linie);
  border-radius:16px;
  padding:22px 24px;
  box-shadow:0 1px 3px rgba(17,24,39,.04);
}
/* Klein, gesperrt, in Grossbuchstaben - so stand es auch bei BuddyBoss. */
.dth-kasten .dth-kasten-titel{
  margin:0 0 14px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--dth-navy);
  line-height:1.3;
}
.dth-kasten .dth-leer{
  margin:0;
  color:var(--dth-gedaempft);
  font-size:14px;
  line-height:1.5;
}
.dth-kasten-mehr{
  display:inline-block;
  margin-top:14px;
  font-size:13px;
  font-weight:600;
  color:var(--dth-gruen);
  text-decoration:none;
}
.dth-kasten-mehr:hover{ text-decoration:underline; }

/* Reiter im Online-Kasten */
.dth-reiter{
  display:flex;
  gap:18px;
  border-bottom:1px solid var(--dth-linie);
  margin-bottom:14px;
}
.dth-reiter-knopf{
  background:none;
  border:0;
  border-bottom:2px solid transparent;
  padding:0 0 9px;
  margin-bottom:-1px;
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  color:var(--dth-gedaempft);
  cursor:pointer;
}
.dth-reiter-knopf.ist-aktiv{
  color:var(--dth-navy);
  border-bottom-color:var(--dth-gruen);
}
.dth-reiter-zahl{ color:var(--dth-gedaempft); font-weight:600; }
.dth-reiter-feld{ display:none; }
.dth-reiter-feld.ist-aktiv{ display:block; }

.dth-gesichter{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  list-style:none;
  margin:0;
  padding:0;
}
.dth-gesichter li{ margin:0; }
.dth-gesichter img{
  width:40px;
  height:40px;
  border-radius:50%;
  object-fit:cover;
  display:block;
}

.dth-termin-liste{ list-style:none; margin:0; padding:0; }
.dth-termin-liste li{
  padding:11px 0;
  border-bottom:1px solid var(--dth-linie);
}
.dth-termin-liste li:first-child{ padding-top:0; }
.dth-termin-liste li:last-child{ border-bottom:0; padding-bottom:0; }
.dth-termin-titel{
  display:block;
  font-weight:600;
  font-size:15px;
  color:var(--dth-tinte);
  text-decoration:none;
  line-height:1.35;
}
.dth-termin-titel:hover{ color:var(--dth-gruen); }
.dth-termin-zeit{
  display:block;
  margin-top:3px;
  font-size:13px;
  color:var(--dth-gedaempft);
}

.dth-neuestes{ list-style:none; margin:0; padding:0; }
.dth-neuestes li{
  display:flex;
  gap:11px;
  padding:13px 0;
  border-bottom:1px solid var(--dth-linie);
}
.dth-neuestes li:first-child{ padding-top:0; }
.dth-neuestes li:last-child{ border-bottom:0; padding-bottom:0; }
.dth-neuestes-bild{ flex:0 0 36px; }
.dth-neuestes-bild img{
  width:36px;
  height:36px;
  border-radius:50%;
  object-fit:cover;
  display:block;
}
.dth-neuestes-text{ min-width:0; }
.dth-neuestes-satz{
  margin:0;
  font-size:14px;
  line-height:1.45;
  color:var(--dth-gedaempft);
}
.dth-neuestes-satz a{
  color:var(--dth-tinte);
  font-weight:600;
  text-decoration:none;
}
.dth-neuestes-satz a:hover{ color:var(--dth-gruen); }
/* BuddyPress setzt in den Satz kleine Gruppen- und Profilbilder. In der
   schmalen Spalte sollen die mitlaufen, nicht die Zeile aufreissen. */
.dth-neuestes-satz img{
  width:18px;
  height:18px;
  border-radius:4px;
  object-fit:cover;
  vertical-align:-4px;
  margin-right:4px;
  display:inline-block;
}
.dth-neuestes-zeit{
  display:block;
  margin-top:3px;
  font-size:12px;
  color:var(--dth-gedaempft);
}

/* ── Kein Rahmen um den ganzen Strom ───────────────────────────────────────
   bp-nouveau legt um die Liste einen grauen Kasten mit eckigen Ecken. Die
   Karten darin sind rund und weiss - das gab genau den lahmen Rahmen um die
   schoene Karte. Gemessen: 1px solid #eee auf einer Flaeche #fafafa. */
#buddypress ul.activity-list,
#buddypress ul.bp-list{
  border:0;
  background:transparent;
  padding:0;
  border-radius:0;
}

/* ── Die Eingabekarte ──────────────────────────────────────────────────────
   Ein Kasten, kein zweiter darin. Unten eine abgesetzte Zeile fuer die
   Werkzeuge - wie in der Vorlage. */
#buddypress#buddypress form#whats-new-form{
  padding:0;
  border-radius:16px;
  overflow:hidden;
  display:block;          /* das Flex-Layout von vorher wird hier abgeloest */
}
#buddypress#buddypress #whats-new-form #whats-new-avatar{
  float:left;
  margin:18px 0 0 18px;
}
#buddypress#buddypress #whats-new-form #whats-new-content{
  padding:18px 18px 0 78px;
  min-height:74px;
}
#buddypress#buddypress #whats-new-textarea textarea,
#buddypress#buddypress #whats-new{
  min-height:46px;
  padding:10px 0 !important;
}
/* Die Werkzeugzeile sass ausserhalb der Karte, weil BuddyPress ihren Haken
   erst NACH dem Formular anbietet. Das Skript schiebt sie hinein; hier
   bekommt sie ihre eigene, abgesetzte Zeile. */
#buddypress#buddypress .dth-anhang-leiste{
  display:flex;
  align-items:center;
  gap:10px;
  margin:14px 0 0;
  padding:12px 18px;
  border-top:1px solid var(--dth-linie);
  background:var(--dth-flaeche);
  clear:both;
}
#buddypress#buddypress form#whats-new-form .dth-anhang-leiste{ margin:0; }
#buddypress#buddypress .dth-anhang-knopf{
  background:transparent;
  border:1px solid var(--dth-linie);
  border-radius:999px;
  padding:6px 14px;
  font-size:13px;
  font-weight:600;
  color:var(--dth-gedaempft);
  cursor:pointer;
}
#buddypress#buddypress .dth-anhang-knopf:hover{
  border-color:var(--dth-gruen);
  color:var(--dth-navy);
}

/* ── Die Suchzeile ─────────────────────────────────────────────────────────
   Feld und Knopf hatten verschiedene Radien und klebten aneinander. */
#buddypress#buddypress .dir-search form,
#buddypress#buddypress #activity-search-form{
  display:flex;
  align-items:center;
  gap:8px;
}
#buddypress#buddypress #dir-activity-search,
#buddypress#buddypress .dir-search input[type=search],
#buddypress#buddypress .dir-search input[type=text]{
  border-radius:999px;
  padding:10px 18px;
}
#buddypress#buddypress .nouveau-search-submit{
  border-radius:999px;
  padding:10px 16px;
}

/* ── Die Beitragskarte ─────────────────────────────────────────────────────
   In der Vorlage steht das Profilbild NEBEN der Kopfzeile, der Beitragstext
   faengt darunter am linken Kartenrand an - nicht eingerueckt. Vorher war
   alles um 74px eingerueckt, das liess das Bild oben links kleben.

   Umgesetzt als Raster. `.activity-content` wird dabei zu display:contents,
   damit Kopf, Text und Fusszeile direkt im Raster liegen; sonst laege alles
   gemeinsam in Spalte 2. */
#buddypress#buddypress ul.activity-list > li.activity-item{
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  column-gap:14px;
  align-items:start;
  padding:18px 20px;
}
#buddypress#buddypress ul.activity-list > li.activity-item > .activity-avatar{
  position:static;
  grid-column:1;
  grid-row:1;
  width:46px;
  margin:0;
  float:none;
}
#buddypress#buddypress ul.activity-list > li.activity-item .activity-avatar img{
  width:46px;
  height:46px;
  max-width:46px;
}
#buddypress#buddypress ul.activity-list > li.activity-item > .activity-content{
  display:contents;
}
#buddypress#buddypress ul.activity-list > li.activity-item .activity-header{
  grid-column:2;
  grid-row:1;
  align-self:center;
}
/* Alles Weitere laeuft ueber die volle Breite, Zeile fuer Zeile. */
#buddypress#buddypress ul.activity-list > li.activity-item .activity-inner,
#buddypress#buddypress ul.activity-list > li.activity-item .dth-reaktionen,
#buddypress#buddypress ul.activity-list > li.activity-item .action,
#buddypress#buddypress ul.activity-list > li.activity-item .dth-anhaenge,
#buddypress#buddypress ul.activity-list > li.activity-item .activity-comments{
  grid-column:1 / -1;
}

/* Kopfzeile: Name kraeftig, Rest ruhig, Zeitangabe darunter. */
#buddypress .activity-header p{
  margin:0;
  font-size:15px;
  line-height:1.45;
  color:var(--dth-gedaempft);
}
#buddypress .activity-header p > a:first-child{
  color:var(--dth-tinte);
  font-weight:600;
  text-decoration:none;
}
#buddypress .activity-header p > a:first-child:hover{ color:var(--dth-gruen); }
#buddypress .activity-header .activity-time-since{
  display:block;
  color:var(--dth-gedaempft);
  font-size:13px;
  text-decoration:none;
}

/* Kein grauer Kasten im Beitrag - das war die Karte in der Karte.
   Gemessen: Flaeche #fafafa mit 16px Polster auf .activity-inner. */
#buddypress#buddypress .activity-inner{
  background:transparent;
  border:0;
  padding:0;
  margin:12px 0 0;
  border-radius:0;
  font-size:16px;
  line-height:1.65;
}

/* Freundschaften brauchen keine Karte mit „Profil anzeigen" - der Satz in
   der Kopfzeile sagt bereits alles. Bei BuddyBoss war das eine Zeile. */
#buddypress ul.activity-list > li.activity-item.mini .activity-inner{ display:none; }

/* ── Die Fusszeile der Karte ───────────────────────────────────────────────
   bp-nouveau haengt Kommentieren, Merken und Loeschen in einen Kasten mit
   der Klasse " -meta action" - das Praefix bleibt leer, deshalb der fuehrende
   Leerraum. Die Beschriftungen stecken in .bp-screen-reader-text und sind
   damit unsichtbar: uebrig blieben drei gleich aussehende blaue Klumpen.
   Hier werden die Woerter wieder sichtbar - uebersetzt, wie sie sind. */
#buddypress#buddypress .dth-reaktionen .action{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
}
#buddypress#buddypress .dth-reaktionen .action .generic-button{ margin:0; }
#buddypress#buddypress .dth-reaktionen .action .bp-screen-reader-text{
  position:static;
  width:auto;
  height:auto;
  margin:0;
  overflow:visible;
  clip:auto;
  clip-path:none;
  white-space:normal;
  font-size:13px;
}
#buddypress#buddypress .dth-reaktionen .action .generic-button a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:transparent;
  border:1px solid var(--dth-linie);
  border-radius:999px;
  padding:5px 12px;
  font-size:13px;
  font-weight:600;
  color:var(--dth-gedaempft);
  text-decoration:none;
  line-height:1.2;
}
#buddypress#buddypress .dth-reaktionen .action .generic-button a:hover{
  background:#fff;
  border-color:var(--dth-navy);
  color:var(--dth-navy);
}
#buddypress#buddypress .dth-reaktionen .action .comment-count{
  font-weight:700;
  color:var(--dth-navy);
}
/* Loeschen ist der einzige Knopf, der etwas wegnimmt - beim Darueberfahren
   soll das zu sehen sein, vorher aber nicht schreien. */
#buddypress#buddypress .dth-reaktionen .action .delete-activity:hover{
  border-color:var(--dth-orange);
  color:var(--dth-orange);
}
/* Wenn das Skript die Knopfzeile in die Reaktionsleiste geschoben hat,
   sitzt sie rechts und braucht keine eigene Trennlinie mehr. */
#buddypress .dth-reaktionen > .action{ margin-left:8px; }

/* ── Das Menue ─────────────────────────────────────────────────────────────
   Am Menuepunkt entstand ein Kasten. Hier steht ausdruecklich, dass ein
   Menuepunkt weder Rahmen noch Flaeche noch Schatten bekommt; sichtbar wird
   er ueber die Farbe. Der Fokusring bleibt - aber nur fuer die Tastatur,
   sonst koennte niemand mehr sehen, wo er sich befindet. */
.wp-block-navigation .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus,
.wp-block-navigation .wp-block-navigation-item__content:active{
  border:0;
  outline:0;
  box-shadow:none;
  background:transparent;
  text-decoration:none;
}
.wp-block-navigation .wp-block-navigation-item__content:hover{ color:var(--dth-gruen); }
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content{
  color:var(--dth-navy);
  font-weight:600;
}
.wp-block-navigation .wp-block-navigation-item__content:focus-visible{
  outline:2px solid var(--dth-gruen);
  outline-offset:4px;
  border-radius:6px;
}

/* ── Schmaler Bildschirm ───────────────────────────────────────────────────
   Die Seitenleiste rutscht unter den Strom. Sie ist Beiwerk; der Feed ist
   der Grund, warum jemand die Seite oeffnet. */
@media (max-width:1080px){
  .dth-spalten{
    grid-template-columns:1fr;
    gap:22px;
  }
  .dth-seitenleiste{
    position:static;
    order:2;
  }
  .dth-strom{ order:1; }
}
@media (max-width:640px){
  .dth-kasten{ padding:18px 16px; }
  #buddypress#buddypress ul.activity-list > li.activity-item{
    grid-template-columns:40px minmax(0,1fr);
    column-gap:11px;
    padding:16px 14px;
  }
  #buddypress#buddypress ul.activity-list > li.activity-item > .activity-avatar,
  #buddypress#buddypress ul.activity-list > li.activity-item .activity-avatar img{
    width:40px;
    height:40px;
    max-width:40px;
  }
}

/* ===========================================================================
   Feed-Durchgang, Nachlese  (17.08.2026)
   Vier gemessene Stellen, an denen bp-nouveau noch einen Kasten um einen
   Kasten legt, plus die Reiter in der Seitenleiste.
   =========================================================================== */

/* ── Die Reiter im Online-Kasten ───────────────────────────────────────────
   Die Seitenleiste liegt INNERHALB von #buddypress - `bp_replace_the_content`
   liefert den Inhalt ohne die Huelle, die BuddyPress erst danach darumlegt.
   Damit greift die allgemeine Knopfregel weiter oben und machte aus den
   Reitern zwei marineblaue Pillen. Hier deshalb ausdruecklich und mit
   hoeherer Spezifitaet. */
#buddypress .dth-reiter .dth-reiter-knopf{
  background:transparent;
  color:var(--dth-gedaempft);
  border:0;
  border-bottom:2px solid transparent;
  border-radius:0;
  padding:0 0 9px;
  margin-bottom:-1px;
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  line-height:1.3;
  box-shadow:none;
  transition:color .15s ease, border-color .15s ease;
}
#buddypress .dth-reiter .dth-reiter-knopf:hover{
  background:transparent;
  color:var(--dth-navy);
}
#buddypress .dth-reiter .dth-reiter-knopf.ist-aktiv{
  background:transparent;
  color:var(--dth-navy);
  border-bottom-color:var(--dth-gruen);
}

/* ── Die Eingabekarte: der Kasten um den Kasten ────────────────────────────
   Gemessen: div#bp-nouveau-activity-form traegt einen eigenen Rahmen
   (1px #ccc, Radius 2px) und 10px Polster. Genau darin steckte die runde
   weisse Karte - zwei Rahmen uebereinander, und die Karte war zudem
   schmaler als die Beitraege darunter. */
#buddypress#buddypress #bp-nouveau-activity-form,
#buddypress#buddypress .activity-update-form{
  border:0;
  border-radius:0;
  background:transparent;
  padding:0;
  box-shadow:none;
}

/* „Erstellen in: Profil" ist die Wahl zwischen Profil und Gruppe. Sie bleibt
   - man braucht sie, um in eine Gruppe zu schreiben -, tritt aber in die
   Werkzeugzeile zurueck, statt als eigener Kasten dazustehen. */
#buddypress#buddypress #whats-new-options,
#buddypress#buddypress #whats-new-post-in-box,
#buddypress#buddypress .whats-new-form-actions{
  border:0;
  background:transparent;
  box-shadow:none;
  padding:0;
}
#buddypress#buddypress #whats-new-post-in-box{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 0 18px;
  font-size:13px;
  color:var(--dth-gedaempft);
}
#buddypress#buddypress #whats-new-post-in-box select{
  padding:6px 12px;
  font-size:13px;
  border-radius:999px;
}

/* ── Die Suchzeile ─────────────────────────────────────────────────────────
   Auch hier zweimal dasselbe: ein Rahmen um Feld und Knopf, und noch einer
   um das Auswahlfeld, das selbst schon einen hat. */
#buddypress#buddypress #dir-activity-search-form,
#buddypress#buddypress .bp-dir-search-form,
#buddypress#buddypress .select-wrap{
  border:0;
  background:transparent;
  box-shadow:none;
}
#buddypress#buddypress .subnav-filters select,
#buddypress#buddypress #activity-filter-by{
  border-radius:999px;
  max-width:100%;      /* das Feld stand 6px ueber den rechten Rand hinaus */
}
#buddypress#buddypress .subnav-filters{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  border:0;
  background:transparent;
}
/* Der Strich am RSS-Zeichen ist ein Zusatzangebot, kein Hauptweg -
   er darf zuruecktreten. */
#buddypress#buddypress .subnav-filters .feed a,
#buddypress#buddypress .subnav-filters a.bp-tooltip[href*="feed"]{
  opacity:.5;
}
#buddypress#buddypress .subnav-filters .feed a:hover{ opacity:1; }

/* ── „Weiterlesen" ist ein Link, kein Knopf ───────────────────────────────
   Mitten im Absatz stand ein umrandeter Kasten. */
#buddypress#buddypress .activity-read-more a,
#buddypress#buddypress .activity-inner .activity-read-more a{
  background:transparent;
  border:0;
  padding:0;
  margin-left:4px;
  color:var(--dth-gruen);
  font-weight:600;
  font-size:inherit;
}
#buddypress#buddypress .activity-read-more a:hover{
  background:transparent;
  color:var(--dth-navy);
  text-decoration:underline;
}

/* ── Der Kasten-Titel in der Seitenleiste ─────────────────────────────────
   In der Vorlage steht er deutlich kraeftiger als bei mir. */
.dth-kasten .dth-kasten-titel{
  font-size:13px;
  letter-spacing:.1em;
  margin-bottom:16px;
}

/* ===========================================================================
   Feed-Durchgang, dritte Nachlese  (17.08.2026)
   =========================================================================== */

/* ── Der Suchknopf ist rund, nicht oval ────────────────────────────────────
   Vorher: 10px/16px Polster - dadurch breiter als hoch. Und die Lupe hing
   zu tief, weil Dashicons das Zeichen auf der Schriftlinie absetzt statt es
   mittig zu stellen. Feste Groesse plus Flex-Zentrierung loest beides. */
#buddypress#buddypress .nouveau-search-submit,
#buddypress#buddypress #dir-activity-search-submit{
  width:44px;
  height:44px;
  min-width:44px;
  padding:0;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  flex:0 0 44px;
}
#buddypress#buddypress .nouveau-search-submit .dashicons{
  display:block;
  width:20px;
  height:20px;
  font-size:20px;
  line-height:1;
  margin:0;
  vertical-align:middle;
}
/* Das Suchfeld ist 52px hoch - der runde Knopf soll dazu passen. */
#buddypress#buddypress #dir-activity-search{
  height:44px;
  padding:0 18px;
}

/* ── Die Reiterzeile steht frei ────────────────────────────────────────────
   Hinter den Pillen lag noch eine eigene weisse Flaeche mit Rahmen, die
   ueber die ganze Breite lief. Die Pillen tragen sich selbst. */
#buddypress#buddypress .bp-navs,
#buddypress#buddypress nav.activity-type-navs,
#buddypress#buddypress div.item-list-tabs,
#buddypress#buddypress .bp-subnavs{
  border:0;
  background:transparent;
  box-shadow:none;
  padding:0;
}

/* ===========================================================================
   Feed-Durchgang, vierte Nachlese  (17.08.2026)
   Überschrift, der abgeschnittene Absendeknopf, und die Emoji-Auswahl.
   =========================================================================== */

/* ── Die Ueberschrift steht ueber dem Strom, nicht mittig ueber nichts ─────
   Gemessen: h1 war auf 780px begrenzt und mit `margin-inline:auto` mittig
   gestellt (234..1014), waehrend der Inhalt von 50 bis 1197 laeuft. In der
   Vorlage steht „News Feed" buendig mit der Feed-Spalte - also um die
   Seitenleiste plus Abstand eingerueckt. */
body.activity.directory .wp-block-post-title,
body.activity.directory h1.entry-title{
  max-width:1240px;
  margin-inline:auto;
  padding-left:340px;      /* 312px Seitenleiste + 28px Abstand */
  margin-bottom:26px;
}

/* ── Der Absendeknopf war abgeschnitten ────────────────────────────────────
   „Update veröffentlichen" endete nach „veröff". bp-nouveau gibt dem Feld
   eine feste Breite; ein <input type=submit> kann seinen Text nicht
   umbrechen und schneidet ihn deshalb einfach ab. */
#buddypress#buddypress #aw-whats-new-submit,
#buddypress#buddypress #whats-new-submit input[type=submit],
#buddypress#buddypress .activity-update-form input[type=submit]{
  width:auto;
  min-width:0;
  max-width:none;
  overflow:visible;
  text-overflow:clip;
  white-space:nowrap;
  padding:11px 22px;
}
#buddypress#buddypress #whats-new-submit,
#buddypress#buddypress .whats-new-form-actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  padding:0 18px 16px;
  margin:0;
}
/* „Abbrechen" ist der leisere von beiden. */
#buddypress#buddypress #whats-new-submit .cancel,
#buddypress#buddypress a#activity-form-reset{
  background:transparent;
  border:0;
  color:var(--dth-gedaempft);
  font-weight:600;
  padding:11px 4px;
}
#buddypress#buddypress #whats-new-submit .cancel:hover{
  background:transparent;
  color:var(--dth-navy);
}

/* ── Die Emoji-Auswahl ─────────────────────────────────────────────────────
   Der Knopf sieht aus wie „Datei anhaengen" - beide sind Werkzeuge am
   selben Schreibfeld und sollen nicht miteinander konkurrieren. */
#buddypress#buddypress .dth-emoji-knopf,
.dth-emoji-knopf{
  background:transparent;
  border:1px solid var(--dth-linie);
  border-radius:999px;
  padding:5px 11px;
  font-size:16px;
  line-height:1.2;
  color:var(--dth-gedaempft);
  cursor:pointer;
}
#buddypress#buddypress .dth-emoji-knopf:hover,
.dth-emoji-knopf:hover{
  background:#fff;
  border-color:var(--dth-gruen);
}
.dth-emoji-zeile{
  display:flex;
  align-items:center;
  gap:8px;
  margin:8px 0 0;
}

.dth-emoji-fenster{
  position:fixed;
  z-index:100000;
  width:332px;
  background:#fff;
  border:1px solid var(--dth-linie);
  border-radius:16px;
  box-shadow:0 12px 34px rgba(17,24,39,.16);
  padding:10px;
}
.dth-emoji-fenster[hidden]{ display:none; }

.dth-emoji-reiter{
  display:flex;
  gap:2px;
  padding-bottom:8px;
  margin-bottom:8px;
  border-bottom:1px solid var(--dth-linie);
  overflow-x:auto;
  scrollbar-width:none;
}
.dth-emoji-reiter::-webkit-scrollbar{ display:none; }
#buddypress#buddypress .dth-emoji-reiter-knopf,
.dth-emoji-reiter-knopf{
  flex:0 0 auto;
  background:transparent;
  border:0;
  border-radius:9px;
  padding:5px 7px;
  font-size:17px;
  line-height:1;
  cursor:pointer;
  opacity:.5;
}
#buddypress#buddypress .dth-emoji-reiter-knopf:hover,
.dth-emoji-reiter-knopf:hover{ background:var(--dth-flaeche); opacity:1; }
#buddypress#buddypress .dth-emoji-reiter-knopf.ist-aktiv,
.dth-emoji-reiter-knopf.ist-aktiv{
  background:rgba(62,180,137,.16);
  opacity:1;
}

.dth-emoji-gitter{
  display:grid;
  grid-template-columns:repeat(8, 1fr);
  gap:2px;
  max-height:248px;
  overflow-y:auto;
  overscroll-behavior:contain;
}
#buddypress#buddypress .dth-emoji-zeichen,
.dth-emoji-zeichen{
  background:transparent;
  border:0;
  border-radius:8px;
  padding:0;
  height:36px;
  font-size:21px;
  line-height:1;
  cursor:pointer;
  transition:background .1s ease;
}
#buddypress#buddypress .dth-emoji-zeichen:hover,
.dth-emoji-zeichen:hover{ background:var(--dth-flaeche); }

@media (max-width:1080px){
  body.activity.directory .wp-block-post-title,
  body.activity.directory h1.entry-title{
    padding-left:0;
  }
}
@media (max-width:420px){
  .dth-emoji-fenster{ width:calc(100vw - 24px); }
  .dth-emoji-gitter{ grid-template-columns:repeat(7, 1fr); }
}

/* ===========================================================================
   Zeichen statt Wörter  (17.08.2026)

   Auf den Knöpfen stand zu viel Text – und jedes Wort davon müsste in vier
   Sprachen übersetzt werden. Gezeichnete Symbole brauchen das nicht und
   stehen ruhiger nebeneinander (Emoji sahen in einer Reihe uneinheitlich
   aus – dieselbe Entscheidung wie oben im Menü).

   Die Symbole liegen als data:-URI im Stylesheet und werden als Maske
   benutzt, nicht als Bild: so nehmen sie die Textfarbe an und ändern sie
   beim Darüberfahren mit. Kein zusätzlicher Serveraufruf, keine Icon-
   Schrift, nichts nachzuladen.

   ⚠️ Die Beschriftung verschwindet NICHT aus der Seite – sie bleibt als
   verdeckter Text stehen und wird vorgelesen. Wer mit der Maus darauf
   zeigt, bekommt sie als Kurzhinweis.
   =========================================================================== */

:root{
  --dth-sym-sprechblase:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5h14a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1h-9l-5 4V6a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
  --dth-sym-stern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.6l2.6 5.3 5.8.9-4.2 4.1 1 5.8-5.2-2.8-5.2 2.8 1-5.8-4.2-4.1 5.8-.9z'/%3E%3C/svg%3E");
  --dth-sym-papierkorb:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 7V5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2M6.5 7l.9 12.1a1 1 0 0 0 1 .9h7.2a1 1 0 0 0 1-.9L17.5 7'/%3E%3C/svg%3E");
  --dth-sym-nadel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 3.5h5l-.8 6 3.3 2.6v2.1H14v6.3l-2 1.5-2-1.5v-6.3H7v-2.1l3.3-2.6z'/%3E%3C/svg%3E");
  --dth-sym-klammer:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11.5l-8 8a5 5 0 0 1-7-7l8.2-8.2a3.2 3.2 0 0 1 4.6 4.6L9.6 17.1a1.5 1.5 0 0 1-2.2-2.2l7.6-7.6'/%3E%3C/svg%3E");
  --dth-sym-smiley:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M9.2 10h.02M14.8 10h.02M8.6 14.4a4.4 4.4 0 0 0 6.8 0'/%3E%3C/svg%3E");
  --dth-sym-pfeil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3L3 10.2l7.4 3.4L13.8 21z'/%3E%3Cpath d='M21 3l-10.6 10.6'/%3E%3C/svg%3E");
}

/* Verdeckter Text: da, aber nicht zu sehen. */
#buddypress#buddypress .dth-reaktionen .action .bp-screen-reader-text,
.dth-knopf-text,
#buddypress#buddypress .dth-anpinnen .dth-pin-text{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* Der gemeinsame Bauplan aller Zeichenknöpfe. */
#buddypress#buddypress .dth-reaktionen .action .generic-button a::before,
#buddypress#buddypress .dth-anpinnen::before,
#buddypress#buddypress .dth-anhang-knopf::before,
.dth-emoji-knopf::before{
  content:"";
  display:block;
  width:19px;
  height:19px;
  flex:0 0 19px;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:19px 19px;
  mask-size:19px 19px;
}

#buddypress#buddypress .dth-reaktionen .action .acomment-reply::before{
  -webkit-mask-image:var(--dth-sym-sprechblase); mask-image:var(--dth-sym-sprechblase);
}
#buddypress#buddypress .dth-reaktionen .action .fav::before{
  -webkit-mask-image:var(--dth-sym-stern); mask-image:var(--dth-sym-stern);
}
#buddypress#buddypress .dth-reaktionen .action .delete-activity::before{
  -webkit-mask-image:var(--dth-sym-papierkorb); mask-image:var(--dth-sym-papierkorb);
}
#buddypress#buddypress .dth-anpinnen::before{
  -webkit-mask-image:var(--dth-sym-nadel); mask-image:var(--dth-sym-nadel);
}
#buddypress#buddypress .dth-anhang-knopf::before{
  -webkit-mask-image:var(--dth-sym-klammer); mask-image:var(--dth-sym-klammer);
}
.dth-emoji-knopf::before{
  -webkit-mask-image:var(--dth-sym-smiley); mask-image:var(--dth-sym-smiley);
}

/* Runde Zeichenknöpfe. Der Kommentarknopf bleibt eine Pille, weil die
   Anzahl daneben stehen bleibt - eine Null sagt mehr als kein Hinweis. */
#buddypress#buddypress .dth-reaktionen .action .generic-button a,
#buddypress#buddypress .dth-anpinnen,
#buddypress#buddypress .dth-anhang-knopf,
.dth-emoji-knopf,
#buddypress#buddypress .dth-emoji-knopf{
  width:34px;
  height:34px;
  padding:0;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0;
}
#buddypress#buddypress .dth-reaktionen .action .acomment-reply{
  width:auto;
  padding:0 12px 0 10px;
  border-radius:999px;
  gap:6px;
}
#buddypress#buddypress .dth-anpinnen.ist-angepinnt::before{
  background-color:#fff;
}

/* ── Absenden: der Pfeil, immer rechts ─────────────────────────────────────
   „Update veröffentlichen" war lang, musste in vier Sprachen übersetzt
   werden und wurde obendrein abgeschnitten. Ein Pfeil sagt dasselbe.

   Der Knopf ist ein <input type=submit> - der kann kein ::before tragen.
   Deshalb steckt das Zeichen hier im Hintergrund, und `font-size:0`
   blendet die Beschriftung aus. Der Wert bleibt im Feld stehen und ist
   damit weiterhin der zugängliche Name. */
#buddypress#buddypress #aw-whats-new-submit,
#buddypress#buddypress #whats-new-submit input[type=submit],
#buddypress#buddypress .ac-form input[type=submit],
#buddypress#buddypress form.ac-form input[name=ac_form_submit]{
  width:42px;
  height:42px;
  min-width:42px;
  padding:0;
  border-radius:50%;
  font-size:0;
  line-height:0;
  color:transparent;
  background-color:var(--dth-navy);
  background-image:var(--dth-sym-pfeil);
  background-repeat:no-repeat;
  background-position:48% center;
  background-size:20px 20px;
  margin-left:auto;        /* immer rechts */
  flex:0 0 42px;
}
#buddypress#buddypress #aw-whats-new-submit:hover,
#buddypress#buddypress .ac-form input[type=submit]:hover{
  background-color:var(--dth-gruen);
}

/* Die Antwortzeile: Schreibfeld, Werkzeuge, Pfeil rechts. */
#buddypress#buddypress .ac-form .ac-reply-content{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}
#buddypress#buddypress .ac-form .ac-textarea{
  flex:1 1 100%;
  min-width:0;
}
#buddypress#buddypress .dth-emoji-zeile{
  margin:0;
}

/* ===========================================================================
   Nachlese zu den Zeichen  (17.08.2026)

   Die runden Zeichenknöpfe gehören an den BEITRAG. Unter einer Antwort
   heißen dieselben Links „Antworten" und „Löschen" – dort steht der Text
   direkt im Link, nicht in einem verdeckten Feld. In einen 34px-Kreis
   gezwängt lief er heraus und überlagerte sich. In der Vorlage sind das
   ohnehin schlichte Textlinks („gefällt mir  antworten"), also bleibt es
   dabei.
   =========================================================================== */

#buddypress#buddypress .activity-comments .action{
  display:flex;
  align-items:center;
  gap:18px;
  margin:4px 0 0;
}
#buddypress#buddypress .activity-comments .action .generic-button,
#buddypress#buddypress .activity-comments .action .generic-button a,
#buddypress#buddypress .activity-comments .action > a{
  width:auto;
  height:auto;
  min-width:0;
  padding:0;
  margin:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--dth-gedaempft);
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  line-height:1.4;
}
#buddypress#buddypress .activity-comments .action .generic-button a:hover,
#buddypress#buddypress .activity-comments .action > a:hover{
  background:transparent;
  color:var(--dth-navy);
  text-decoration:underline;
}
#buddypress#buddypress .activity-comments .action .acomment-delete:hover{
  color:var(--dth-orange);
}
/* Kein Symbol vor einem Textlink - das Wort steht ja da. */
#buddypress#buddypress .activity-comments .action .generic-button a::before,
#buddypress#buddypress .activity-comments .action > a::before{
  display:none;
}

/* „Abbrechen" im Antwortfeld ist der leise Weg zurück, kein Hauptknopf. */
#buddypress#buddypress .ac-form .ac-reply-cancel,
#buddypress#buddypress button.ac-reply-cancel{
  background:transparent;
  border:0;
  color:var(--dth-gedaempft);
  font-weight:600;
  font-size:13px;
  padding:8px 4px;
}
#buddypress#buddypress button.ac-reply-cancel:hover{
  background:transparent;
  color:var(--dth-navy);
}

/* ===========================================================================
   Das Postfeld als EINE Leiste  (17.08.2026)

   Vorher: graue Werkzeugleiste, darunter frei auf Weiß „Erstellen in:
   Profil", darunter wieder mit Abstand der Absendeknopf. Drei Ebenen für
   eine Handlung.

   Jetzt schiebt das Skript `#whats-new-options` in die graue Leiste. Deren
   Sichtbarkeit steuert weiterhin BuddyPress über die Klasse
   `activity-form-expanded` am Formular – die Regeln dafür stehen hier, weil
   der Block seinen Platz gewechselt hat.
   =========================================================================== */

#buddypress#buddypress .dth-anhang-leiste{
  flex-wrap:wrap;
  row-gap:12px;
}

/* Zugeklappt zeigt die Leiste nur Büroklammer und Smiley. */
#buddypress#buddypress .activity-form:not(.activity-form-expanded) #whats-new-options{
  display:none;
}
#buddypress#buddypress .activity-form-expanded #whats-new-options{
  display:flex;
  align-items:center;
  gap:12px;
  flex:1 1 auto;
  min-width:0;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
}

#buddypress#buddypress #whats-new-post-in-box{
  margin:0;
  flex:0 1 auto;
  min-width:0;
}
#buddypress#buddypress #whats-new-post-in-box select{
  max-width:220px;
}

/* Absenden ganz rechts, „Abbrechen" davor. */
#buddypress#buddypress #whats-new-submit{
  margin-left:auto;
  padding:0;
  gap:14px;
  flex:0 0 auto;
}
#buddypress#buddypress #whats-new-submit input[type=submit],
#buddypress#buddypress #aw-whats-new-submit{
  order:9;              /* was auch immer sonst in der Zeile steht: der Pfeil zuletzt */
  margin-left:0;
}

/* ===========================================================================
   Das Antwortfeld in derselben Reihenfolge wie oben  (17.08.2026)

   Simones Punkt: „Abbrechen vor den Pfeil, dann bleibt man im Flow." Wer
   sich einmal daran gewöhnt hat, dass rechts außen abgeschickt wird, soll
   das nicht je nach Feld neu suchen müssen.
   =========================================================================== */

#buddypress#buddypress .ac-form .ac-reply-cancel,
#buddypress#buddypress .ac-form button.ac-reply-cancel{
  order:8;
  margin-left:auto;
}
#buddypress#buddypress .ac-form input[type=submit],
#buddypress#buddypress form.ac-form input[name=ac_form_submit]{
  order:9;
  margin-left:0;
}

/* Bei 1914 Zeichen lohnt sich ein etwas größeres Fenster - sonst scrollt
   man sich durch „Menschen" (388) und „Flaggen" (270) tot. */
.dth-emoji-fenster{
  width:356px;
}
.dth-emoji-gitter{
  grid-template-columns:repeat(9, 1fr);
  max-height:288px;
}

/* ===========================================================================
   Die Gruppenseite  (17.08.2026)

   Das Kartendesign stand längst im Stylesheet – es hat nur nie gegriffen,
   weil die Liste die Klasse `.grid` nie bekam (siehe dth-my-gruppen.php).
   Jetzt greift es, und hier stehen die Korrekturen dazu.
   =========================================================================== */

/* ⚠️ Der erste Rasterplatz blieb leer, obwohl die Liste nur vier Karten hat
   und alle auf `grid-column:auto` stehen. Ursache ist ein Pseudo-Element am
   Behälter: in einem Raster wird `::before` zu einer eigenen Zelle. Es kommt
   aus einem Clearfix und hat hier nichts mehr zu tun. */
#buddypress ul.item-list.grid::before,
#buddypress ul.item-list.grid::after{
  content:none;
  display:none;
}

/* Alle Karten gleich hoch, damit die Reihe nicht ausfranst. */
#buddypress ul.item-list.grid{
  align-items:stretch;
}

/* ── Kein Titelband ────────────────────────────────────────────────────────
   Die alte Plattform hatte für jede Gruppe ein Titelbild. Hier gibt es
   keines, und ein Farbverlauf als Ersatz wäre genau der leere Kasten, den
   Simone nicht will. Die Karte fängt deshalb direkt mit dem Logo an.

   Damit entfällt auch der Grund für den negativen Rand: das Logo wurde
   vorher um 38px nach oben in ein Band gezogen, das gar nicht da war -
   und dabei oben abgeschnitten. */
#buddypress .dth-gruppe-kopf{ display:none; }

#buddypress ul.item-list.grid > li .list-wrap{
  padding:26px 20px 20px;
  text-align:center;
  align-items:center;
}
#buddypress ul.item-list.grid > li .item-avatar{
  margin:0 0 14px;
  width:76px;
  height:76px;
}
#buddypress ul.item-list.grid > li .item-avatar img{
  width:76px;
  height:76px;
  max-width:76px;
  box-shadow:0 0 0 1px var(--dth-linie);
}

#buddypress ul.item-list.grid > li .item{
  width:100%;
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
}
#buddypress ul.item-list.grid > li .list-title{
  margin:0 0 8px;
  font-size:17px;
  line-height:1.3;
}
#buddypress ul.item-list.grid > li .list-title a{
  color:var(--dth-navy);
  font-weight:600;
  text-decoration:none;
}
#buddypress ul.item-list.grid > li .list-title a:hover{ color:var(--dth-gruen); }

/* Sichtbarkeit, Mitgliederzahl und letzte Aktivität stehen in zwei eigenen
   Absätzen und liefen deshalb ineinander („5 MitgliederAktiv vor einem
   Tag"). Hier werden sie zu EINER Zeile mit Trennpunkt. */
#buddypress ul.item-list.grid > li .item-meta,
#buddypress ul.item-list.grid > li .last-activity{
  display:inline;
  margin:0;
  padding:0;
  font-size:13px;
  color:var(--dth-gedaempft);
  line-height:1.5;
}
#buddypress ul.item-list.grid > li .last-activity::before{
  content:"·";
  margin:0 6px;
  color:var(--dth-linie);
}
#buddypress ul.item-list.grid > li .item-block{
  margin-bottom:16px;
}

/* Die Beschreibung gehört nicht auf die Karte – sie stand früher auch nicht
   darauf und hat niemandem gefehlt. Sie machte die Karten unterschiedlich
   hoch und drängte sich vor das Wesentliche: wie die Gruppe heißt und wer
   drin ist. Die ganze Beschreibung steht auf der Gruppenseite selbst. */
#buddypress ul.item-list.grid > li .group-desc{
  display:none;
}

/* Die Gesichter sitzen unten, mittig, und schließen die Karte ab. */
#buddypress ul.item-list.grid > li .dth-gruppe-gesichter{
  margin-top:auto;
  padding-top:16px;
  justify-content:center;
  border-top:1px solid var(--dth-linie);
}

/* ── Der Kopf der Seite ────────────────────────────────────────────────────
   „Gruppe erstellen" ist eine Handlung und sah aus wie Fließtext. */
#buddypress .bp-navs .group-create a,
#buddypress li.group-create a{
  background:transparent;
  border:1px solid var(--dth-linie);
  border-radius:999px;
  padding:9px 16px;
  color:var(--dth-navy);
  font-weight:600;
  font-size:14px;
  text-decoration:none;
}
#buddypress .bp-navs .group-create a:hover,
#buddypress li.group-create a:hover{
  border-color:var(--dth-gruen);
  color:var(--dth-gruen);
  background:transparent;
}
/* „Gruppe erstellen" gehört nicht in dieselbe Reihe wie die Filterpillen. */
#buddypress .bp-navs li.group-create{
  margin-left:auto;
}

@media (max-width:560px){
  #buddypress ul.item-list.grid{
    grid-template-columns:1fr;
  }
}

/* ===========================================================================
   Quadratische Gruppenkarten  (17.08.2026)

   Vorher zog `align-items:stretch` alle Karten einer Reihe auf die Höhe der
   höchsten, und `margin-top:auto` schob die Gesichter ganz nach unten. Was
   dazwischen lag, war nichts – ein Loch von gut hundert Pixeln in jeder
   Karte.

   Jetzt gibt `aspect-ratio:1` die Form vor und der Inhalt steht mittig.
   ⚠️ `aspect-ratio` ist ein Wunsch, kein Zwang: passt der Inhalt nicht
   hinein, wächst die Karte trotzdem mit. Ein langer Gruppenname wird also
   nicht abgeschnitten.
   =========================================================================== */

/* ⚠️ KORREKTUR: `aspect-ratio:1` war falsch. Es legt die Höhe fest, statt
   sie nur zu wünschen – passt der Inhalt nicht hinein, wächst die Karte
   NICHT mit, sondern läuft heraus und überlappt die nächste. Genau das ist
   passiert.

   Eine Mindesthöhe erreicht dasselbe und lässt der Karte den Ausweg nach
   unten: bei drei Spalten sind rund 300px ungefähr ein Quadrat, und ein
   langer Gruppenname darf trotzdem umbrechen. */
#buddypress ul.item-list.grid > li .list-wrap{
  min-height:300px;
  height:auto;
  overflow:visible;
  justify-content:center;
}
#buddypress ul.item-list.grid > li .item{
  flex:0 0 auto;
}
#buddypress ul.item-list.grid > li .item-block{
  margin-bottom:0;
}
#buddypress ul.item-list.grid > li .dth-gruppe-gesichter{
  margin-top:16px;
  padding-top:16px;
}

/* Einspaltig wäre ein Quadrat so hoch wie der Bildschirm breit ist –
   dort zählt die Form nicht mehr. */
@media (max-width:560px){
  #buddypress ul.item-list.grid > li .list-wrap{
    aspect-ratio:auto;
    padding:22px 18px;
  }
}

/* ===========================================================================
   Die Haustür  (17.08.2026)

   Simones Anforderung: „eine Haustür, die meine Mitarbeiter von der normalen
   Community trennt" – und ihre Bestätigung, worum es dabei wirklich geht:
   „dass jemand versehentlich am falschen Ort schreibt".

   Der Schutz vor Unbefugten steht schon (gemessen: kein Gruppenbeitrag
   erreicht den allgemeinen Strom). Was fehlte, war die Sichtbarkeit. Hier
   bekommt sie zwei Stufen:

   1. Ein Satz über dem Schreibfeld, der die Frage beantwortet, die sich
      sonst niemand stellt: wer liest das gleich?
   2. Ein Farbsignal, das man auch aus dem Augenwinkel bemerkt.

   Bewusst KEIN Rückfragefenster vor dem Absenden. Wer dreimal am Tag
   „ja, sicher" wegklickt, liest beim vierten Mal nicht mehr – dann schützt
   es nicht mehr, es nervt nur.
   =========================================================================== */

#buddypress#buddypress .dth-ort{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0;
  padding:11px 18px;
  font-size:13px;
  font-weight:600;
  line-height:1.4;
  border-bottom:1px solid var(--dth-linie);
}
#buddypress#buddypress .dth-ort::before{
  content:"";
  display:block;
  width:16px;
  height:16px;
  flex:0 0 16px;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:16px 16px;
  mask-size:16px 16px;
}

/* Offen: ruhig, grau, kein Alarm. Der Normalfall soll nicht schreien. */
#buddypress#buddypress .dth-ort.ist-offen{
  color:var(--dth-gedaempft);
  background:var(--dth-flaeche);
}
#buddypress#buddypress .dth-ort.ist-offen::before{
  /* Zwei Personen – „alle Mitglieder". */
  -webkit-mask-image:var(--dth-sym-leute);
  mask-image:var(--dth-sym-leute);
}

/* Intern: deutlich, aber nicht rot. Rot heißt Fehler – hier ist nichts
   falsch, es ist nur nicht öffentlich. */
#buddypress#buddypress .dth-ort.ist-intern{
  color:var(--dth-navy);
  background:rgba(29,43,101,.07);
  border-bottom-color:rgba(29,43,101,.18);
}
#buddypress#buddypress .dth-ort.ist-intern::before{
  /* Geschlossenes Schloss. */
  -webkit-mask-image:var(--dth-sym-schloss);
  mask-image:var(--dth-sym-schloss);
}

/* Die ganze interne Seite trägt ein leises Kennzeichen: ein schmaler
   Streifen am oberen Rand. Er steht immer da, auch wenn man weit
   heruntergescrollt hat – man kann ihn nicht übersehen und nicht
   wegklicken. */
body.dth-ort-intern::before{
  content:"";
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg, var(--dth-navy), var(--dth-gruen));
  z-index:99999;
}
/* Die WordPress-Werkzeugleiste sitzt bei Angemeldeten ganz oben – der
   Streifen gehört darunter, sonst verdeckt er sie. */
body.dth-ort-intern.admin-bar::before{
  top:32px;
}
@media (max-width:782px){
  body.dth-ort-intern.admin-bar::before{ top:46px; }
}

:root{
  --dth-sym-leute:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.4'/%3E%3Cpath d='M3.5 19.5c0-3 2.5-5 5.5-5s5.5 2 5.5 5'/%3E%3Cpath d='M16 5.4a3.4 3.4 0 0 1 0 6.5M17 14.9c2 .6 3.5 2.4 3.5 4.6'/%3E%3C/svg%3E");
  --dth-sym-schloss:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='9.5' rx='2'/%3E%3Cpath d='M8 10.5V7.6a4 4 0 0 1 8 0v2.9'/%3E%3C/svg%3E");
}

/* ===========================================================================
   Eine Kante für alles  (17.08.2026)

   Simone: „überall in Gruppen die Überschrift und Buttons und Felder grad
   rücken." Sie hat recht – auf der Gruppenseite fingen Überschrift,
   Reiterzeile, Suchfeld und Karten an vier verschiedenen Stellen an.

   Ursache: die Überschrift ist ein Block des Themes und auf 780px begrenzt
   und mittig gestellt, während #buddypress 920px breit ist. Die Suchzeile
   trägt zusätzlich ein eigenes Polster von bp-nouveau.
   =========================================================================== */

/* Die Überschrift bekommt dieselbe Breite wie der Inhalt darunter.
   ⚠️ Der Neuigkeiten-Strom ist ausgenommen: dort ist #buddypress 1240px
   breit, und die Überschrift steht bewusst über der Feed-Spalte, nicht
   über der Seitenleiste. Diese Regel steht weiter oben und ist genauer
   (`body.activity.directory`), sie gewinnt also von allein. */
body.buddypress .wp-block-post-title,
body.buddypress h1.entry-title{
  max-width:920px;
  margin-inline:auto;
  padding-left:0;
}

/* Reiterzeile, Suchzeile und Karten auf dieselbe linke Kante. */
#buddypress#buddypress .dir-search,
#buddypress#buddypress .bp-dir-search-form,
#buddypress#buddypress .subnav-filters,
#buddypress#buddypress .bp-navs,
#buddypress#buddypress .bp-pagination,
#buddypress#buddypress ul.item-list.grid{
  margin-left:0;
  margin-right:0;
  padding-left:0;
  padding-right:0;
}

/* „Ansicht von 1 – 4 von 4 Gruppen" hing zwischen den Zeilen. */
#buddypress#buddypress .bp-pagination{
  margin:0 0 14px;
  font-size:13px;
  color:var(--dth-gedaempft);
}
#buddypress#buddypress .bp-pagination + ul.item-list.grid{
  margin-top:0;
}

/* Die Zeile mit Suchfeld und Sortierung steht als EINE Reihe, mit gleichem
   Abstand nach oben und unten. */
#buddypress#buddypress .subnav-filters{
  margin:0 0 18px;
}

/* ===========================================================================
   Die Team-Tür  (17.08.2026)

   Simone: „Die Hauptcard könnte dann rund sein, dann weiß man das … dann
   weiß man, das ist eine Übergruppe."

   Genau so ist es gemeint: die Form trägt die Aussage. Alle Gruppenkarten
   sind eckig – nur der Behälter ist rund. Man muss nichts lesen, um den
   Unterschied zu erkennen.
   =========================================================================== */

#buddypress .dth-tuer{
  margin:0 0 24px;
}

#buddypress .dth-tuer-kachel{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  width:300px;
  height:300px;
  border-radius:50%;
  background:#fff;
  border:1px solid var(--dth-linie);
  box-shadow:0 1px 3px rgba(17,24,39,.05);
  text-align:center;
  text-decoration:none;
  padding:24px;
  transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
#buddypress .dth-tuer-kachel:hover{
  border-color:var(--dth-gruen);
  box-shadow:0 8px 26px rgba(17,24,39,.12);
  transform:translateY(-2px);
}

/* Ein Schlüssel, kein Schloss: ein Schloss sagt „hier kommst du nicht rein",
   ein Schlüssel sagt „das ist deins". Für die Crew ist es das Zweite. */
#buddypress .dth-tuer-zeichen{
  display:block;
  width:38px;
  height:38px;
  margin-bottom:10px;
  background-color:var(--dth-navy);
  opacity:.85;
  -webkit-mask-image:var(--dth-sym-schluessel);
  mask-image:var(--dth-sym-schluessel);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:38px 38px;
  mask-size:38px 38px;
}
#buddypress .dth-tuer-name{
  font-size:20px;
  font-weight:600;
  color:var(--dth-navy);
  letter-spacing:.01em;
  line-height:1.2;
}
#buddypress .dth-tuer-zahl{
  font-size:13px;
  color:var(--dth-gedaempft);
}

/* Hinter der Tür: wo bin ich, und wie komme ich zurück.
   ⚠️ Eine Tür ohne Rückweg ist eine Falle – dieselbe Lektion wie bei der
   kleinen Mood in der Ecke, in die Simone selbst hineingelaufen ist. */
#buddypress .dth-tuer-zurueck{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin:0 0 18px;
  font-size:14px;
}
#buddypress .dth-tuer-zurueck a{
  color:var(--dth-gruen);
  font-weight:600;
  text-decoration:none;
}
#buddypress .dth-tuer-zurueck a::before{
  content:"\2190";      /* Pfeil nach links */
  margin-right:6px;
}
#buddypress .dth-tuer-zurueck a:hover{ text-decoration:underline; }
#buddypress .dth-tuer-hier{
  color:var(--dth-navy);
  font-weight:600;
  padding:4px 12px;
  border-radius:999px;
  background:rgba(29,43,101,.08);
  font-size:13px;
}

@media (max-width:560px){
  #buddypress .dth-tuer-kachel{
    width:100%;
    max-width:300px;
    height:auto;
    aspect-ratio:auto;
    border-radius:24px;   /* rund bleibt rund, aber nicht als Riesenkreis */
    padding:28px 22px;
    margin-inline:auto;
  }
}

:root{
  --dth-sym-schluessel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='16' r='4.2'/%3E%3Cpath d='M11 13L20.5 3.5M17.5 6.5l2.5 2.5M15 9l2 2'/%3E%3C/svg%3E");
}

/* Steht die Tuer da, ist sie der Inhalt - dann ist "Keine Gruppen gefunden"
   schlicht falsch. Bewusst an die Kachel gebunden (Geschwister-Auswahl):
   wer die Tuer NICHT sieht, weil er in keiner Team-Gruppe ist, bekommt die
   Meldung weiterhin. Fuer ihn stimmt sie ja. */
#buddypress .dth-tuer ~ #groups-dir-list .bp-feedback,
#buddypress .dth-tuer ~ #groups-dir-list .bp-messages{
  display:none;
}

/* ===========================================================================
   Mehrere Türen nebeneinander  (18.08.2026)

   Aus der einen fest eingebauten Team-Kachel sind Übergruppen geworden, die
   Simone selbst anlegt (Einstellungen → Übergruppen). Deshalb stehen hier
   jetzt mehrere Kreise in einer Reihe, und das Zeichen kommt aus der
   Einstellung statt fest aus dem Stylesheet.
   =========================================================================== */

#buddypress .dth-tuer{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  margin:0 0 28px;
}

/* Die Zeichen zur Auswahl. Die Klasse setzt das Plugin aus dem, was im
   Backend gewählt wurde. */
#buddypress .dth-tuer-zeichen.ist-schluessel{
  -webkit-mask-image:var(--dth-sym-schluessel); mask-image:var(--dth-sym-schluessel);
}
#buddypress .dth-tuer-zeichen.ist-schloss{
  -webkit-mask-image:var(--dth-sym-schloss); mask-image:var(--dth-sym-schloss);
}
#buddypress .dth-tuer-zeichen.ist-leute{
  -webkit-mask-image:var(--dth-sym-leute); mask-image:var(--dth-sym-leute);
}
#buddypress .dth-tuer-zeichen.ist-stern{
  -webkit-mask-image:var(--dth-sym-stern); mask-image:var(--dth-sym-stern);
}

/* Bei mehreren Kreisen nebeneinander wird 300px schnell zu breit. */
@media (min-width:561px){
  #buddypress .dth-tuer-kachel{
    width:262px;
    height:262px;
  }
}

/* Eigenes Logo auf der runden Kachel. Rund beschnitten, damit es sich der
   Form der Uebergruppe fuegt statt dagegen zu arbeiten. */
#buddypress .dth-tuer-kachel .dth-tuer-bild{
  width:84px;
  height:84px;
  max-width:84px;
  border-radius:50%;
  object-fit:cover;
  display:block;
  margin:0 0 12px;
  background:var(--dth-flaeche);
}

/* ===========================================================================
   Die Filterzeile auf eine Linie  (18.08.2026)

   Gemessen: das Suchfeld war 52px hoch, Suchknopf und Sortier-Pille 44px.
   Dadurch standen die drei auf verschiedenen Höhen – Simones „das muss
   schöner in die Pill".

   Ursache: die Höhenregel von gestern war auf `#dir-activity-search`
   gemünzt, also nur auf die Suche im Neuigkeiten-Strom. Auf der
   Gruppen- und der Buddys-Seite heißt das Feld anders. Deshalb hier
   ausdrücklich für ALLE Verzeichnisse.
   =========================================================================== */

#buddypress#buddypress .dir-search input[type=search],
#buddypress#buddypress .dir-search input[type=text],
#buddypress#buddypress .bp-search input[type=search],
#buddypress#buddypress .bp-search input[type=text],
#buddypress#buddypress .subnav-filters input[type=search],
#buddypress#buddypress .subnav-filters select,
#buddypress#buddypress .component-filters select{
  height:44px;
  min-height:44px;
  line-height:1.2;
  font-size:15px;
  box-sizing:border-box;
}

#buddypress#buddypress .dir-search input[type=search],
#buddypress#buddypress .dir-search input[type=text],
#buddypress#buddypress .bp-search input[type=search],
#buddypress#buddypress .bp-search input[type=text]{
  padding:0 18px;
}

/* Die Sortier-Pille: Platz für den Pfeil, sonst rückt er dem Wort auf die
   Pelle. 14px Polster rechts reichten bei „Zuletzt aktiv" gerade so – bei
   einem längeren Eintrag nicht mehr. */
#buddypress#buddypress .subnav-filters select,
#buddypress#buddypress .component-filters select,
#buddypress#buddypress #groups-order-by,
#buddypress#buddypress #members-order-by,
#buddypress#buddypress #activity-filter-by{
  padding:0 40px 0 18px;
  border-radius:999px;
  cursor:pointer;
  background-color:#fff;
}

/* Der Pfeil von bp-nouveau sitzt als eigenes Zeichen daneben. Er bekommt
   seinen Platz im Polster oben und wird mittig gestellt. */
#buddypress#buddypress .select-wrap{
  position:relative;
  display:inline-block;
}
#buddypress#buddypress .select-wrap .select-arrow{
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  width:10px;
  height:10px;
  pointer-events:none;          /* der Klick gehört dem Auswahlfeld */
  color:var(--dth-gedaempft);
}
/* ⚠️ Der Pfeil von bp-nouveau ist ein leeres <span> und wird über eine
   Icon-Schrift gezeichnet, die hier nicht geladen ist – er blieb deshalb
   unsichtbar. Hier wird er selbst gezeichnet. */
#buddypress#buddypress .select-wrap .select-arrow::before{
  content:"";
  display:block;
  width:9px;
  height:9px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  border-radius:1px;
}

/* Die ganze Zeile auf eine Grundlinie. */
#buddypress#buddypress .subnav-filters{
  align-items:center;
}
#buddypress#buddypress .subnav-filters .component-filters,
#buddypress#buddypress .subnav-filters .filter,
#buddypress#buddypress .subnav-filters .last{
  margin:0;
}

/* ── Das abgeschnittene Z  (18.08.2026) ────────────────────────────────────
   Gemessen, nicht geraten:

   1. Auf dem Auswahlfeld lag 	ext-indent:-2px - der Text stand zwei Pixel
      zu weit links und das erste Zeichen wurde vom Rand angeschnitten.
      Genau Simones "das Z ist vorne abgeschnitten".

   2. Der laengste Eintrag "Meiste Mitglieder" braucht 116px, im Feld waren
      aber nur 92px Platz. Er waere hinten abgeschnitten, sobald man ihn
      auswaehlt. Die Mindestbreite deckt das ab - mit Luft, denn Franzoesisch
      und Italienisch kommen noch dazu und schreiben laenger.
   ------------------------------------------------------------------------ */
#buddypress#buddypress .subnav-filters select,
#buddypress#buddypress .component-filters select,
#buddypress#buddypress #groups-order-by,
#buddypress#buddypress #members-order-by,
#buddypress#buddypress #activity-filter-by{
  text-indent:0;
  padding:0 38px 0 18px;
  min-width:210px;
  max-width:100%;
  text-overflow:ellipsis;
}

@media (max-width:640px){
  #buddypress#buddypress .subnav-filters select{
    min-width:0;
    width:100%;
  }
}

/* ── Der abgeschnittene Ring an der Reiterpille  (18.08.2026) ──────────────
   Gemessen: 
av.bp-navs steht auf overflow:hidden (Rest eines Clearfix),
   und die Pille sitzt mit NULL Pixeln Luft am oberen Rand. Alles, was
   ausserhalb der Pille gezeichnet wird - Fokusring, Schatten - wird oben
   abgeschnitten. Simone: "der button ist oben ein wenig abgeschnitten".

   Zwei Dinge noetig: die Klammer aufmachen UND Platz schaffen. Eines allein
   genuegt nicht. */
#buddypress#buddypress nav.bp-navs,
#buddypress#buddypress .bp-navs,
#buddypress#buddypress div.item-list-tabs{
  overflow:visible;
}
#buddypress#buddypress .bp-navs ul,
#buddypress#buddypress div.item-list-tabs ul{
  padding-top:4px;
  padding-bottom:4px;
}

/* Und ein Fokusring, der sichtbar zur Seite steht statt an der Kante zu
   kleben - fuer alle, die mit der Tastatur unterwegs sind. */
#buddypress#buddypress .bp-navs ul li a:focus-visible,
#buddypress#buddypress div.item-list-tabs ul li a:focus-visible{
  outline:2px solid var(--dth-gruen);
  outline-offset:3px;
}

/* ── Das ovale Profilbild  (18.08.2026) ────────────────────────────────────
   Gemessen: 136 breit, 100 hoch. Ursache war das Sicherheitsnetz weiter oben

       #buddypress#buddypress img.avatar { max-width:100px; max-height:100px }

   Die Profilregel hebt davon nur max-width auf 136 an. max-height blieb
   bei 100 stehen und stauchte das Bild zur Ellipse.

   ⚠️ Merksatz: Wer max-width uebersteuert, muss max-height mit
   uebersteuern. Sonst wird aus einem Kreis ein Ei - und weil order-radius
   in Prozent gerechnet wird, sieht es trotzdem "rund" aus, nur eben oval.
   ------------------------------------------------------------------------ */
body.bp-user #buddypress#buddypress #item-header-avatar img.avatar{
  max-height:136px;
}

/* Und dasselbe fuer alle anderen Stellen, die groesser als 100px sind. */
#buddypress#buddypress ul.item-list.grid > li .item-avatar img{
  max-height:76px;
}
#buddypress#buddypress .dth-tuer-kachel .dth-tuer-bild{
  max-height:84px;
}

@media (max-width:640px){
  body.bp-user #buddypress#buddypress #item-header-avatar img.avatar{
    max-height:104px;
  }
}